본문 바로가기
728x90

분류 전체보기

 (42)
2. CRA 사용하여 프로젝트 셋팅하기 CRA 사용하여 프로젝트 셋팅하기 CRA란? create-react-app 의 약자 React 는 ES6 기반의 자바스크립트 코드로 작성되는 것이 일반적인데, 모든 브라우저가 ES6 기반의 자바스크립트를 지원하지는 않는다. 그래서 웹팩을 사용해 ES6 문법을 모든 브라우저가 이해할 수 있는 ES5문법으로 변환해준다! 그럼 이 웹팩을 우리가 설정해야하는가? NO! 페이스북에서 제공하는 cra 를 사용하면 react 로 작업하기 위한 모든 것을 셋팅해주니까! CRA를 사용하는 방법 1. 로컬에 설치 패키지 매니저 yarn 이나 npm 을 이용해 설치 (nodejs를 설치하면 npm은 함께 설치되어 있고, yarn은 별도로 설치해야함 둘다 패키지 매니저이고 둘 중 하나만 사용할것, 그리고 둘 중 뭘 사용해도 ..
1-8 Array Function - forEach and push Array function - forEach map 과 기능이 거의 똑같다! 차이점은 map은 실행결과를 새로운 배열에 담아 반환하지만 forEach는 그저 실행을 할뿐! map()과 forEach()의 비교 map() let rainbow = ["red", "orange", "yellow", "green", "blue", "navy", "purple"]; console.log(rainbow.map((color) => console.log(color))); 모든 배열 요소에 대하여 console.log() 실행, console.log()의 반환값 (undefined, console.log()함수는 리턴값 없는 void)을 모아 새 배열을 리턴함 forEach() let rainbow = ["red", "..
1.7 Array Function - filter Array Function - filter map() 과 사용법과 기능이 매우 유사하다. 모든 배열 요소를 순회하고 새로운 배열을 반환한다. 단, filter()는 모든 배열 요소 중 조건을 만족하는 요소에 한해서만!!!! const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; const multipleOf3 = numbers.filter((num) => num % 3 === 0); console.log(multipleOf3); // [3, 6, 9, 12, 15] const rainbow = ["red", "orange", "yellow", "green", "blue", "navy", "purple"]; const fiveLetters..
1-6. Array function - map Array Function - map() React에서 api로부터의 배열의 데이터를 이용해서 다른 작업을 하게 될 경우, 거의 필수 사용 기능이다. 아래는 MDN에 나와있는 map()정의와 예시이다 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] 즉, array1의 모든 요소에 대하여 *2 의 연산을 수행하고 ! 그 결과를 새로운 배열로 반환하고 ! 그 반환값을 ma..
(3) 관종..? 벌써 둘째아이를 출산한 친구를 며칠 전 만났다. 40일 남짓 된 아가를 살면서 처음 본것 같았다.(아마도 어릴때 동생, 혹은 사촌동생들을 봤겠지만 나도 어릴때이니 제대로 기억나지 않는다) 정말... 작았다. 사람이 이렇게 작을 수가 있나? 싶었다. 그런데 그마저도 태어난 몸무게의 2배로 성장한 거란다....와...ㅎㅎ 신기해서 자고있는 아가를 한동안 바라보았다. 참 소중하고 신기했다. 생명이란것이 뭔지..ㅎㅎ 둘째가 태어나고 부쩍 엄마에게 먼저 사랑한다 얘기한다는 첫째.. 하루 반나절 시간을 보내며 첫째에게 더 관심을 보이고 집중해주고 반응해줬더니 나에게 아빠는 안주고 엄마만 준다는 과자를 나눠주더라. 우리는 요즘 흔히 관심을 요구하는 사람들에게 "관종"이라 칭하며 관심을 구걸하는 행위가 일부 사람들의 ..
1-5. Class(클래스) -Class (Javacsript에서도 ES6부터 클래스 형태를 제공해 사용할 수 있다.) 리액트를 하다보면 사용할 수 도 있는 기능이지만 클래스 자체를 깊게 이해할 정도의 필요는 없다! 어떻게 작동하는지에 대해서만 이해하도록 하자. class Baseball { constructor(name, position) { this.name = name; this.position = position; } } Baseball 이라는 클래스를 작성했고, 생성자를 통해 name 과 position을 전달해 Baseball에서 사용할수 있도록 했다. this는 이 클래스(Baseball)을 의미한다. Baseball Class를 어떻게 사용할 수 있을까? const player = new Baseball("Park",..
1-4. Spread Operator (스프레드 연산자) -Spread Operator(스프레드 연산자) 스프레드 연산자는 배열, 문자열, 객체 등에서 "전개"를 위해 사용 1. 배열에서의 전개 (mdn 참고: 스프레드 문법은 1차원 배열에서 효과적으로 동작한다!) - 배열 합치기 아래 두 배열이 있다. const abcd = ["a", "b", "c", "d"]; const efgh = ["e", "f", "g", "h"]; console.log(abcd); // ["a", "b", "c", "d"] console.log(efgh); // ["e", "f", "g", "h"] 두 배열을 합치고 싶다. const arr = [abcd, efgh]; console.log(arr); arr의 출력 결과는 배열 abcd와 배열 efgh를 원소로 갖는 2차원 배열이다..
1-3. 객체 비구조화 할당(Object Destructuring) - Object Destructuring(객체 비구조화) 구조화 된 객체 내 속성을 비 구조화 해 가져다 쓰는 것 color 라는 객체가 있다. const color = { red: "#FF0000", black: "#000000", white: "#FFFFFF", blue: { vivid: "#0000FF", light: "#87CEEB" }, yellow: "#FFFF00" } 이 color의 속성인 red와 blue의 light에 접근하고자 한다면 기존의 방식에서는 const red = color.red; console.log(`red: ${red}, lightblue: ${color.blue.light}`); // red: #FF0000, lightblue: #87CEEB 위와 같이 접근하려는 속..
728x90

티스토리툴바