Today Hailie Learned

배열.find()는 반복문이지만, 원하는 것을 찾으면 (return이 true) 찾아준다. (첫번째만!!) let cities = ['seoul', 'busan', 'incheon', 'ulsan', 'jeju']; let city = 'jeju'; let chars = 4; let chars3 = 7; let match = cities.find(item => { if(city === item) return true; }); console.log(match); // 결과값 // 'jeju' let match2 = cities.find(item => { if(item.length === chars) return true }) console.log(match2) // 결과값 // 'jeju' let matc..

1. Redux를 왜 쓰는가? 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 ➥ 상태 관리 라이브러리인 Redux는, 전역 상태를 관리할 수 있는 저장소인 Store를 제공해서 데이터 흐름을 깔끔하게 만들어준다. 2. Redux의 구조 Action 객체 ⇒ Dispatch 함수 ⇒ Reducer 함수 ⇒ 전역 상태 저장소 Store 상태를 변경 ⇒ 화면 리렌더링 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 A..

최단 거리를 구할 때 쓴다. 레벨 탐색이라고도 불린다. function solution () { let answer = ''; let queue = []; queue.push(1); while(queue.length) { let v = queue.shift(); answer += v + ' '; for(let nv of [v*2, v*2+1]) { if(nv > 7) continue; queue.push(nv); } } return answer; } ➥ 1 2 3 4 5 6 7 이 나온다.

배운점 1. 왜 리덕스를 배울까? 2. 왜 리덕스가 리액트 생태계에서 중요하지? 3. 리덕스를 리액트에서 어떻게 사용하지? 왜 리덕스를 배울까? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 우리가 상태, 즉 우리 애플리케이션을 변경학 화면에 표시하는 데이터를 관리하도록 도와준다. 리덕스는 우리가 그런 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와준다. 앞에서 배운 state를 3가지로 구분할 수 있다. 1. local state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태. (useState() 나 useReducer() 사용) 2. cross-component state : 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을..

한 달전에 읽었지만 리마인드 하기 위해서 읽으면서 핵심이라고 생각하고 기록한 부분을 정리해서 포스팅합니다. 나중에 제가 보기 위해 기록하였기 때문에 보기 쉽게 정리한 글은 아닙니다. 이 책을 통해 얻고 싶은 것 개발자로 성공적으로 입문하는 방법 효과적인 공부방법 좋은 일자리 구하는 방법 재밌게 프로그래밍 하는 방법 웹 개발에 대한 대략적인 정보 좋은 개발자되기 앞으로의 방향성과 자기계발 방법 핵심! 이 책에서 배운 내용을 반복하며 실천하자! p. 43 무언가를 자동화하기 전에 그 작업을 수동으로 하는 방법부터 깨우쳐야 한다. [문제이해하기] - 코딩을 하기 전에 자신이 무엇을 만드는지, 어떤 문제를 해결해야하는지 알고 그것을 이해하는 지점에서 시작한다. [설계하기] - 바로 코딩에 뛰어들기 전에 일정 ..

에러 원인 map을 쓰는 구문에서 오류가 발생했습니다. 문법 오류이기 때문에 다음에 작성할 때도 같은 에러가 발생하지 않도록 해야합니다. 에러 해결 1. return 을 쓰지 않을때 👉 map(() => ()) {menuArr.map((menu, index) => ( selectMenuHandler(index)} > {menu.name} ); )} 2. return 을 쓴다면 👉 map(() => { return() }) {menuArr.map((menu, index) => { return ( selectMenuHandler(index)} > {menu.name} ); })}

let user = {name: 'Mike', age: 30}; let {name, age} = user; console.log(name); // 'Mike' console.log(age); // 30 위 식에서 let {name, age} = user; 는 let name = user.name; let age = user.age; 와 같다. ⭐️순서를 바꾸어도 동일하게 작동한다. (배열 구조분해와 다른점)⭐️ let user = {name: 'Mike', age: 30}; let {age, name} = user; console.log(name); // 'Mike' console.log(age); // 30 ⭐️프로퍼티의 키 값을 무조건 동일하게 사용할 필요없다. ⭐️ ⭐️⭐️변수 이름을 바꿀 수 있다..

Storybook이란? ➥ CDD (Component Driven Development)를 하기 위한 도구 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 👉 전체 UI를 한눈에 보고 개발 가능! 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 장점 1. 컴포넌트 문서화 👉 재사용성 확대 2. 자동으로 컴포넌트 시각화 👉 시뮬레이션 할 수 있는 다양한 테스트 상태 확인 가능 👉 버그 사전에 차단 가능 3. 테스트 및 개발 속도 개선 Storybook 설치 방법 // 리액트 프로젝트를 다운받았다는 가정 하에, npx storyboo..

CDD ( Component Driven Development ) ➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 ➥ 재사용할 수 있는 컴포넌트를 개발한다. ➥ 상향식 개발 Styled-Component (CSS-in-JS가 나오게 된 배경) CSS 전처리기 ( CSS Preprocessor ) ➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 * 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함) ➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다. - CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어) 장점 :..