코딩배우는고양이

리액트 컴포넌트의 렌더링 조건 컴포넌트는 자신의 state가 변경되거나 부모 컴포넌트가 렌더링 되었을 때 함께 렌더링이 됩니다. const School = (props) => { return ( ); } Student 컴포넌트는 이름, 나이, 성별을 props로 전달받아서 Student의 정보를 보여주는 간단한 컴포넌트입니다. const Student = ({ name, age, gender}) => { return ( {name} {age} {gender} ); } School 컴포넌트는 Student의 부모 컴포넌트입니다. 리액트는 기본적으로 부모 컴포넌트가 렌더링되면 모든 자식 컴포넌트도 같이 렌더링이 됩니다. Student 컴포넌트는 항상 같은 props를 전달받도록 되어있죠?! 그래서 Stude..

CSS 개발 방식 CSS-in-CSS 렌더링할 때 모든 CSS 요소를 로딩하기 때문에 인터렉티브한 웹 페이지를 구성할 때 사용자 편의를 반영하기 좋다. CSS-in-JS 해당 컴포넌트가 렌더링 될 때만 스타일 태그를 생성하기 때문에 컴포넌트 기반 프로젝트에 유용하다. 각 컴포넌트의 라이프 스타일에 맞게 스타일을 적용할 수 있고 자바스크립트 코드를 활용할 수 있기 때문에 동적 스타일 적용이 자유롭다. 자바스크립트 해석 과정이 필요하기 때문에 CSS 모듈 방식에 비해 성능이 느리다. CSS 라이브러리 CSS-in-CSS 종류 CSS-module CSS를 모듈화하여 사용하는 방법 기본적으로 CSS 클래스의 범위가 정해져있다는 점에 대한 이점은 CSS-in-JS와 동일하지만 순수 CSS 파일을 유지하기 때문에 ..

패키지 매니저란? 프로젝트가 의존하고 있는 라이브러리와 같은 패키지들을 설치하고 관리할 수 있도록 도와주는 프로그램이다. 아무리 간단한 프로그램이어도 수십개 이상의 다른 패키지들에 의존하게 되고 이 패키지들은 빈번하게 업데이트 되기 때문에 패키지 매니저를 통해 일괄 관리할 필요가 있다. 패키지 매니저 비교 npm(Node Package Manager) Node.js의 표준 패키지 매니저로 Node.js를 설치하면 자동으로 설치된다. npx(Node Package Runner) npm에서 제공해주는 도구 프로젝트에 영구적으로 필요한 의존성 패키지나 개발 의존성 패키지들이 아니라, 특정 환경을 구성하거나 특정 작업을 수행하는 시점에만 필요한 패키지들을 설치하고 실행한 후 삭제 과정을 자동으로 진행해주는 도구..

등장배경 콜백 함수가 중첩될 수록 코드가 복잡해진다는 콜백 지옥을 해결하기 위해 Promise가 등장하였는데 Promise 또한 체인이 반복되면 프로미스 지옥이 펼쳐진다. Promise Hell 예시 fetch("URL") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("Error"); } }) .then((users) => { return users.map((user) => user.login); }) .then((logins) => { return logins.join(", "); }) .then((result) => { console.log(result); }) .catch((error..

Promise 등장 배경 자바스크립트에서 비동기 처리를 위해서 전통적으로 콜백 함수를 사용하였다. 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 이용해 후속 처리 작업을 수행하는 것이다. 콜백 함수는 중첩될 수록 가독성이 떨어지고 코드의 흐름을 파악하기 어려워진다는 문제가 있는데 특히 여러 개의 비동기 작업을 수행해야 할 때는 이른바 콜백 지옥(callback hell) 현상이 발생하게 된다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); // 콜백함수 호출 }..