Dev/Web (9) 썸네일형 리스트형 [React] CSS-in-JS 📁 CSS-in-JS 자바스크립트 코드에서 CSS를 작성하는 방식 CSS 스타일을 Component와 결합하여 모듈화, scope 지역화된 스타일 생성에 도움 장점 지역 스코프 스타일 코로케이션(colocation): 단일 컴포넌트에 관련된 모든 것을 같은 위치에 두는 것 자바스크립트 변수를 style에 사용 가능 단점 런타임 오버헤드 번들 크기 증가 지저분한 React DevTools 📁 Styled-Components CSS 파일을 Component 내부에 넣기 때문에, CSS가 전역으로 중첩되지 않도록 만들어주는 장점 const 컴포넌트명 = styled.태그명` ... 스타일 넣기 ... ` Styled-Components의 분리를 통해 중복 방지, 재사용성 증가 → 효율적인 사용 가능 내부적으로.. [React] Component & Props 📁 Component UI를 작은 조각으로 나눈 것 → 컴포넌트들을 조합하여 전체 애플리케이션 구성 각 컴포넌트는 독립적으로 작동, 자체 상태와 라이프사이클을 가짐 📁 Component 기반 구조 높은 재사용성 개발 기간 단축: 반복적인 재사용이 가능하므로 개발 기간이 단축 유지 보수 용이: 모듈 간 의존성이 낮아 유지 보수에 유리 📁 Props 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 ReadOnly, 읽을 수만 있고 값 변경 불가 다른 프롭스의 값으로 엘리먼트를 생성하려면, 새로 엘리먼트를 생성해야 함 📁 Component & Props 컴포넌트: 붕어빵 틀, 재료만 넣으면 똑같은 붕어빵을 여러 번 만드는 것이 가능 프롭스: 붕어빵 안의 재료 이미 만들어진 엘리먼트는 변경 불가 📁.. [React] Virtual DOM 📁 기존 DOM의 문제점 기존에는 DOM에 업데이트가 일어나면, 전체 페이지를 모두 수정 → 메모리 누수 및 비용 발생 📁 Virtual DOM의 해결 변경된 부분을 찾아서 변경 상태 변경 → 변경된 돔 검색 → 재렌더링 [React] JSX 📁 JSX Javascript에 XML을 추가한 확장 문법 = HTML 문법을 Javascript 코드 내부에 쓴 것 공식적인 Javascript 문법은 아님 실행 전, 바벨을 사용해 일반 Javascript 형태의 코드로 변환됨 📁 JSX 사용 이유 페이지 렌더링 시, Javascript와 HTML을 한 번에 불러올 필요가 생김 📁 JSX의 장점 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해줌 UI 관련 작업을 할 때 시각적으로 도움이 됨 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줌 [JS] async, await 📁 async 함수 실행 시, 무조건 promise 객체 반환 함수 내에서 return은 반환된 promise 객체의 결과 값 에러 발생 시 reject가 아닌 throw를 사용 (throw error를 통해 error 내용 전달) try/catch 를 통해 error 검출 📁 await 반드시 async 함수 안에서만 사용 가능 → 일반 함수에서 사용 시 SyntaxError 발생 promise 객체를 생성하는 함수 앞에 놓을 수 있음 JS가 await 키워드를 만나면 해당 함수가 promise 상태가 이행될 때까지 기다렸다, 이행 완료 시 결과 값 반환 장점: 기존에 실행 순서가 예측 불가능했던 비동기 작동 방식이 동기적으로 실행되는 코드처럼 예측 가능해짐 [JS] Promise 📁 Promise 란 비동기 작업을 더 편하게 처리할 수 있는 기능 어떤 작업의 중간 상태를 나타내는 오브젝트 (어떤 종류의 결과가 반환됨을 promise) Promise 객체는 비동기 작업이 맞이할 미래의 완료/실패/결과 값을 나타냄 new 키워드를 통해 객체 생성 → 변수 등에 할당해 활용 가능 하나의 콜백함수를 인자로 받음 반드시 3가지 상태 중 하나를 가짐 대기(pending): 초기 상태, 결과 값 반환X 이행(fullfilled): 연산이 성공적으로 완료된 상태 거부(rejected): 연산이 실패한 상태 이행/거부 상태를 가지면 더 이상 상태 변경 불가 finally method: 프로미스의 성공/실패에 관계없이 처리만 되면 실행되는 함수 → 성공/실패 여부 모름 결과 값은 내부 객체이므로 .. [JS] 비동기 📁 JS에서 비동기적으로 처리되는 작업 Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우, 요청 후 서버에서 응답할 때까지 대기 파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 경우 암호화/복호화 작업 예약: 어떤 작업을 몇 초 후 스케줄링 해야하는 상황에는, setTimeout을 사용해 비동기적으로 처리 📁 비동기 작업을 처리하는 방법 callback 함수 Promise async/await 📁 비동기 처리란? 동시에 여러 가지 작업 처리 가능 대기 중 다른 함수 호출 가능 📁 콜백함수 나중에 호출할 함수 다른 코드의 인자로 넘겨줌으로써 제어권 또한 위임 [JS] ES6 📁 화살표 함수 function 생략, => 화살표 기호 사용 화살표 함수 사용 시, 더 짧고 간결하게 작성 가능 📁 spread 연산자 반복 가능한 객체를 개별 요소로 분리 가능 연결/복사 등의 용도로 활용도 높음 배열 병합/복사(얕은 복사, 배열 안에 객체가 있는 경우 원본 값 참조) 📁 템플릿 문자열 내장된 표현식을 허용하는 문자열 리터럴 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화/태깅 등 다양한 기능 제공 런타임 시점에 일반 자바스크립트 문자열로 처리/변환 📁 비구조 할당 배열이나 객체의 속성/값을 해체하여 그 값을 변수에 각각 담아 사용하는 표현식 이전 1 2 다음