전체 글

1장 자료 구조가 중요한 까닭

코드 품질의 다양한 척도 코드 유지 보수성 즉, 가독성, 조직, 코드 모듈성 같은 측면을 포함. 코드 효율성. const printNumbersVersionOne = () => { let number = 2; while (number { let number = 2; while(number

웹팩과 바벨 (Webpack vs Babel) 넌 또 누구냐!!

웹팩이란 (WebPack)? 웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러로 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다. 의존성을 분석해 모듈을 번들시켜주는 역할을 하며 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 짠! 하고 만들어준다. 웹팩의 등장 배경 웹팩이 등장한 이유는 크게 3가지이다 파일 단위의 자바스크립트 모듈 관리의 필요성 웹 개발 작업 자동화 도구 (Web Task Manager) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 웹팩설치 npm i react react-dom npm i -D we..

모듈과 번들러 (Module Bundler) 넌 누구니?!

리액트로 개발하는 프론트엔드 개발자들은 리액트에만 집중하고 웹팩, 바벨, 번들링 도구들이 어떻게 돌아가고 동작하는지는 모르고 지나간다. 나를 포함 프론트엔드 개발 환경을 이해하기 위해서는 꼭 알아야 된다고 들어서 이번에 정리해 보려고 한다. Webpack과 babel에 들어서기 앞서 모듈 + 번들러에 대해서 알아보자! 모듈이란? 모듈(Module)이란 프로그래밍 관점에서 특정 기능을 갖는 파일 하나하나, 특정 기능을 갖고 있는 작은 코드 단위를 의미한다. 우리가 개발을 하다보면 가독성과 유지보수 향상을 위해 파일을 여러 개로 분리를 하는데, 이때 분리된 파일 각각을 모듈이라고 부른다. 모듈이 필요한 이유 브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역을 공유한다. ..

[React] Router

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 즉, 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않기 때문에 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다 이런 이유 때문에 리액트는 Framework가 아닌 Library로 분류된다 리액트 라우터 (React Router) 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해 주는 라이브러리 라고 볼 수 있다 설치 npm i..

[React] React-Query

React-query 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용 사용하는 이유 react-query를 사용함으로 서버, 클라이언트 데이터를 분리 장점 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 데잍가 오래 되었다고 판단되면 다시 get 동일 데이터 여러번 요청하면 한 번만 요청 무한 스크롤 비동기 과정을 선언적으로 관리할 수 있다 React Query의 라이프 사이클 fetching - 데이터 요청 상태 (요청을 수행하는 중인 쿼리) fresh - 데이터가 프레시한..

AWS 터미널 명령어

배포 과정 관련 코드들 Amazon에서 받은 키페어 chmod 뒤에 숫자 세개가 나오는데 차례대로 나 / 그룹 / 전체에 대한 권한을 의미한다 권한은 3가지로 read(4) , write(2), execute(1)가 있는데 이 숫자들 합의 조합으로 권한을 나타낸다 chmod 400의 의미는 4/0/0 으로 나에게만 읽기 권한이 있도록 하는 것이다 권한 설정이 완료되었으면 우분투 서버 열기 ubuntu@ 뒤에 ip 주소는 인스턴스를 생성하고 설정한 퍼블릭 혹은 탄력적 IP 주소이다 이렇게 나오면 우분투 서버에 성공적으로 들어간거다 여기서 원하는 프로젝트를 클론하면 된다 하지만 그 전에 우분투 서버에 Node를 설치해야 한다 curl -sL | sudo bash - sudo apt-get update sud..