이터러블과 이터레이터, 제너레이터
이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사...
고양이발
쿠키(cookie), 세션(session), 캐시(cache)
HTTP의 특징 Connectionless (비연결 지향) 클라이언트에서 서버에 요청을 보내면 서버는 클라이언트에 응답을 보내고 접속을 끊는다. Stateless (상태 정보 유지 안함) 응답하고 접속을 끊기 때문에 클라이언트의 상태 정보를 알 수 없다. 쿠키와 세션은 ...
JavaScript module export & import
JavaScript module IE를 제외한 최신 브라우저에서 기본적으로 모듈 기능을 지원 구조 module.js에서 변수나 함수를 export main.js에서 module을 import index.html에서 main.js를 module 타입으로 참조 예시 module.js...
useEffect 동작 원리, 사용하기
useEffect() useEffect()를 사용하여 side effect를 수행할 수 있습니다. useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. useEffect가 하는 일은 무엇일까요? useEffect ...
✅리액트 컴포넌트의 생명주기
클래스형 컴포넌트의 생명주기 constructor() React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출됩니다. React에서 생성자는 보통 아래의 두 가지 목적을 위하여 사용됩니다: this.state에 객체를 할당하여 지역 state를 초기화 인스턴스에 이벤트 처리 메서드를 바인딩 ...
리액트 이벤트 핸들러 네이밍 (on / handle)
Props의 경우 컴포넌트에 전달하는 prop의 이름을 정의할 때는 보통 onClick과 같이 on* 접두사를 지정한다. 이를 통해 컴포넌트에게 이 prop은 이런 이벤트 핸들러 기능을 수행하겠구나.. 라는 것을 암시할 수 있다. Function Names의 경우 실제로 호출되는 함수의 이름을 정해야 하는 경우 handle을 붙여...
반응형 작업을 위한 폰트 단위 rem / em
rem / em px(픽셀)은 정해진 값을 가지고 있는 반면 rem과 em은 길이가 유연한 기준 요소에 따라 가변하는 css 상대 단위이다. rem : 가장 상위인 html 태그의 폰트 사이즈를 기준으로 한다. (r은 root의 약자) em : 부모 태그의 폰트 사이즈를 기준으로 한다. 응용 html에 폰트 사이즈를 지정하지 않으면 ...
자바스크립트 동작 원리, 메모리 구조, 이벤트 루프
자바스크립트 엔진 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터 각각의 엔진이 서로 다른 웹 브라우저, Node.js와 같은 런타임 등에서 동작할 수 있다. javascript 대표 엔진으로는 Google V8 엔진이 있다. 메모리 구조 Memory Heap ...
Media Query 변수화해서 Styled-Components에서 사용하기
변수 선언 export const MEDIA = { MOBILE: (css: string) => { return `@media screen and (max-width: 600px) { ${css} }`; }, TABLET: (css: string) => { retu...
Next.js 사용하기 - 그런데 이제 CRA를 곁들인
성공할 수 있을까 Next.js란? 서버사이드 렌더링을 지원하는 React 기반 프레임워크 왜 사용하는가? 초기 로딩 성능 개선 SEO(검색엔진) 최적화 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화 Universal Rendering Server-side rendering과 Client-side rendering을 혼합...