배열을 다룰 때 유용한 Javascript 함수들을 알아보겠습니다. 대표적으로 Map, Filter, reduce, find, find index 와 같은 함수들이 있습니다. (1) Map Map 은 배열의 각 데이터들에 명령이나 반영할 내용들을 매핑시켜 적용하고자 할 때 사용하는 함수입니다. Map() 함수 내부에는 동작되는 내부 함수가 존재하므로 Map 에 반영할 내용들을 넣기만 하면 모든 데이터에 동일하게 적용되게 됩니다. 예시 var numbers = [3, 56, 2, 48, 5]; function double(x){ return x * 2; } console.log(numbers.map(double)); 배열의 데이터가 존재하고, 매개변수를 두 배로 만들어주는 함수를 만들어 map을 통해 모든..

Spring 에서 페이지로 이동할 때 여러가지 방법이 있습니다. 내부 페이지 뿐만 아니라 외부의 Url 주소를 통해 이동할 수도 있습니다. 그 중 몇 가지를 간단하게 알아보겠습니다. @Controller public class ExRedirectController { // return string @GetMapping("/ex_redirect1") public String exRedirect1() { return "redirect:http://www.naver.com"; } // return ModelAndView @GetMapping("/ex_redirect2") public ModelAndView exRedirect2() { String projectUrl = "redirect:http://www.n..

이전까지는 동일한 태그에 각자 다른 정보를 넣으려면 Props를 일일히 다르게 지정해서 컴포넌트를 호출해야 했습니다. 규모가 작은 프로젝트 같은 경우에는 괜찮겠지만 이외의 프로젝트 규모에 따라서 기존의 방식대로 하는 것은 비효율적이라고 볼 수 있습니다. 이를 보완하기 위해 Mapping 시키는 다른 방법이 있으므로 이번에는 그 방법에 대해서 알아보겠습니다. 기존의 방식 import React from "react"; import Card from "./Card"; import contacts from "../contacts"; function App() { return ( My Contacts ); } export default App; Card 컴포넌트를 수동으로 반복 호출하는 다소 비효율적인 방식이라..

이번에는 React App을 좀 더 작은 구성 요소로 분리하면서 개발자 도구(DevTools)로 확인하는 과정에 대해서 알아보겠습니다. 그 과정에서 반응하는 개발자 도구(DevTools) 사용법을 배워서 이 모든 구성 요소를 디버그하고 관리할 수 있습니다. 예시 코드 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); contacts.js const contacts = [ { id: 1, name: "Beyonce", imgURL: "https://blackhistorywall..

Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다. 태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다. 이것을 보완해서 작성해보겠습니다. 반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다. 렌더링 함수 쪽에 보면 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다. 하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다. 따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합..

윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다. 1. 노드를 설치 2. 개발 툴 설치 (Visual Studio 등..) 3. React App 생성 4. App을 실행 (1) 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 사이트에서 최신 버전의 node.js 를 받아줍니다. LTS 버전을 다운받아 설치하면 됩니다. (2) 개발 툴 설치 (Visual Studio Code) https://code.visualstudio.com/download Download Visual St..