개발하자

1. 최종합격까지 몇 개 이상의 이력서 작성이 필요할까요? 20개 입니다. 2. 프리온보딩 인턴십에서 숏에세이 작성제도를 시행하는 목적 인턴십 방식과 수료조건들을 잘 이해했는지 확인하기 위해서 시행하는 것 같습니다. 3. 지원하고 싶은 참가기업은 어디인지 위메이드, 렉시냅틱스, 에코넥트, 이노야드, 젠스타메이트

Public Npm Registry Database of Javascript Packages 각각은 소프트웨어와 메타데이터로 구성 됨 packages and node modules를 포함 Packages and Modules 1. Packages package.json에서 설명된 파일 또는 디렉토리 npm registry에 발행되기 위해서는 package.json이 있어야만 함 unscoped 또는 scoped 할수 있음 (사용자 또는 organization의 범위를 지정할 수 있다는 의미인듯) scoped package는 private 또는 public을 설정할 수 있음 package formats package.json 파일을 포함해야 함 (1)을 포함한 gzip으로 압축된 tarball (2)의 u..

라우팅 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것 리액트에서 라우트 시스템을 구축하는 방법 react-router 가장많이 사용됨 컴포넌트 기반 next.js SSR(Server Side Rendering) CRA 처럼 프로젝트 설정 외 다양한 기능을 제공함 node.js 로 별도의 서버를 구동 해야함 MPA(Multi Page Application) spa가 생기기 전의 방식 페이지가 변경될 떄 마다 서버에 새로운 html을 요청하고 받아 오던 방식 페이지 별 html이 따로 있었음 SPA (Single Page Application) 하나의 페이지로 이루어진 어플리케이션 컴퓨터 성능 향상, 브라우저 기능 향상, 모듈화 표준 등장으로 가능해짐 1. 특징 사용자 인터랙션이 많을 때 유리 ..

많은 데이터 렌더링 하기 listItem 하나를 리렌더링 하는데에 158.6ms 가 걸림 아이콘, 이미지를 사용하지 않아서 책보다는 적게 걸렸지만 대부분의 요소를 리렌더링 함 느려지는 원인 1. 리렌더링 발생 상황 자신이 전달받은 props가 변경될 떄 자신의 state가 바뀔 떄 부모 컴포넌트가 리렌더링 될 떄 forcUpdate 함수가 실행될 때 2. 코드 리렌더링 과정 할 일 체크를 하면 App 컴포넌트의 state 가 변경되면서 App 컴포넌트 리렌더링 부모컴포넌트가 리렌더링 돼서 TodoList 컴포넌트 리렌더링 그 안에있는 컴포넌트들도 리렌더링 3. 최적화 작업 TodoListItem 을 매번 리렌더링 하지 않고 변경된 부분에 한해서 리렌더링 할 수 있도록 최적화 할 수 있음 (리렌더링 방지)..

책의 코드를 자세히 보지 않고, 기능만 정리하여 스스로 개발했다. 이후에 책의 코드와 비교하며 개선점을 찾아봤다. 기능 1. 할 일 입력 버튼을 눌렀을 때, Enter를 눌렀을 때 입력 이벤트가 발생 placeholder : 할 일을 입력하세요. 2. 리스트 추가 입력한 내용을 리스트에 추가 함 리스트 구성요소 체크박스 ( 할 일을 다 했을 경우 체크 할 수 있도록) 할일 내용 (체크박스 클릭 됐을 때 → 색깔 회색, 가운데 줄) 삭제 버튼 ( 버튼 누를 경우 리스트에서 삭제) 사용 라이브러리 react-icons App.js useReducer 사용 상태로 todoList를 가짐 {id, check, todo} action remove, check, add TodoInput.js app에서 dispat..

CSS 기본 스타일링 방식 1. 주의 사항 CSS 클래스를 중복되지 않게 만들어야 함 CSS Selector 이용: CSS 규칙을 적용할 요소를 의미함 .App .logo { // App 안에 있는 logo class를 탐색 } 네이밍 규칙 이용 BEM 네이밍 컴포넌트 이름 -클래스 (리액트 파일 자동 생성시) https://getbem.com/introduction/ BEM — Introduction Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it..

useState 컴포넌트 내의 상태를 유지하기 위해서 사용 useEffect 렌더링 될 때마다 수행해야하는 작업 마운트, 업데이트 이후에 해야할 일들을 자바스크립트 코드로 처리하기 위함 DOM이 업데이트 되었음을 보장함 componentDidMount, componentDidUpdate의 기능을 함 마운트, 업데이트 이후. 언마운트 전에 해야할 일들을 여기서 수행할 수 있음 이벤트 리스너 등록, ref 접근, fetch cleanup 할 것들을 리턴해주면 됨 dependency를 매개변수로 줄 수 있음 빈배열([])을 매개변수로 줄 경우 처음 컴포넌트가 실행되어 마운트 됐을 때에만 동작함 dependency가 변경되었는지 확인 후 변경되었을 때에만 실해됨 useReducer action에 따른 상태변경 ..

라이프사이클 메서드의 이해 함수 컴포넌트는 제공하지 않음 will: 작업 전 실행, did: 작업 후 실행 1. mount (생성 될 때) 2. update props, state가 변경 될 때 forceUpdate()가 실행 될 때 3. unmount (제거 될 때) 라이프사이클 메서드 살펴보기 1. render() 컴포넌트의 view에 들어갈 요소들을 결정함 2. constructor 컴포넌트가 처음 mount 될때 실행되는 메소드 3. getDerivedStateFromProps props와 state를 동기화 함 ??? 이전의 값과 비교하여 state를 업데이트 할지 결정함 4. componentDidMount mount 이후에 실행해야할 것들을 실행함 이벤트 리스너 등록, 엘리먼트 조작 등 마운..

자바스크립트 배열의 map() 함수 jsx 내부에서 사용할 수 있는 js 반복문 문법? 리턴값이 존재하는 반복문은 뭐든 가능 할 듯 (reduce, filter, find 등) → 확인 필요함 데이터 배열을 컴포넌트 배열로 변환하기 function Component(props) { const array = [1,2,3,4] const numberList = array.forEach(number=> {number}) return numberList } key virtual DOM이 업데이트 여부를 쉽게 구분하기 위해서 li 엘리먼트에 key prop을 생성 해야함 unique한 값이어야 하고 배열의 인덱스는 사용할 수는 있지만 효율적으로 리렌더링 되지 않기 때문에 다른 고유값을 사용하는 것이 좋다 인덱스는..

ref는 어떤 상황에서 사용해야 할까? ref : Selector의 역할을 하는 것 selector에 대해서!!!! react에서 DOM에 접근하지 않고 상태를 변경함으로써 대부분 해결 할 수 있다. state만으로 해결할 수 없는 경우에 ref를 사용해야한다→ 어떤 상황에 필요한지 명확히하기 특정 input에 포커스 주기 스크롤박스 조작하기 canvas 요소에 그림 그리기 → 어떤 상황 이후에 다른 돔 객체를 접근하여 변경해야할 경우? ref 사용 함수 컴포넌트는 useRef라는 Hook이 있기 때문에 클래스 컴포넌트에서 적용 되는 방식으로 사용 1. 콜백 함수로 ref 설정 원하는 이름에 dom 객체를 할당 함 ex) this.input, this.submit 등 class Component { re..