Dev/프론트엔드
-
YOU DON'T KNOW JS : 타입과 문법, 스코프와 클로저 CH01. 타입과 문법Dev/프론트엔드 2022. 8. 8. 21:09
자바스크립트를 공부하기위해 교과서격인 YOU DON'T KNOW JS를 구매하였다. 기존에 자바스크립트 딥 다이브를 읽었지만 해당 책을 읽어보는 것이 도움이 될거라는 말에 구매를하게 되었다. 기초부터 다시 재정비하는 느낌으로 책에 읽은 내용을 정리해보자 --- ## 01. 타입과 문법 ### 7가지 원시 타입 1. null 2. undefined 3. boolean 4. number 5. string 6. object 7. symbol (ES6 추가) `undefined`와 `undeclared`가 같다고 보는 개발자들이 많다고한다. 하지만 엄연히 다르며 자`undefined`는 객체의 프로퍼티나 선언이 되어있는 변수이며 값을 할당할 수 있는 변수이지만 `undeclared`는 선언조차 되지않은 변수를 ..
-
React :: 17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기Dev/프론트엔드 2021. 8. 3. 14:33
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 이번 장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법을 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태관리가 번거로워질 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화해 줄 수도 있습니다. 앞에서 바닐라 자바스크립트 환경에서 리덕스를 사용..
-
React :: 16. 리덕스 라이브러리 이해하기Dev/프론트엔드 2021. 8. 2. 11:22
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적입니다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아닙니다. 이전에 배운 Context API를 통해서도 똑같은 작업을 할 수 있습니다. 리액트 v16.3이 릴리즈되면서 Context API가 개선되기 전에는 사용 방식이 매우 불편했기 때문에 주..
-
자바스크립트 :: 비동기처리 & 이벤트 루프Dev/프론트엔드 2021. 7. 30. 11:00
자바스크립트 비동기 처리 자바스크립트 엔진중 가장 많이 사용하는 v8엔진을 기반으로 작성되었습니다. (구글 크롬) 자바스크립트의 비동기 처리는 특정 코드의 연산이 실행되고있지만 결과를 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 자바스크립트 엔진 자바스크립트 동작 방식은 아래이미지로 표현이 됩니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙 (Memory Heap) : 메모리 할당이 이루어지는 곳 콜 스택 (call Stack) : 코드가 실행되면서 스택 프레임이 쌓이는곳 콜 스택 (Call Stack) 자바스크립트는 콜 스택이 하나이기에 싱글쓰레드 프로그래밍 언어입니다. 따라서 한번에 하나의 일만 처리할수 있습니다. 콜스택에 쌓인 함수나 코드를 위에서 아래로 차례..
-
React :: 15. Context APIDev/프론트엔드 2021. 7. 26. 10:58
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있겠지요. Context API는 리액트 v16.3부터 사용하기 쉽게 많이 개선되었습니다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있습니다. 예를 들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있습니다. 이번 실습은 다음 흐름으로 진행됩니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 - 기본적인 사용법 익히기 - 동적 Context ..
-
React :: 14. 외부 API를 연동하여 뉴스 뷰어 만들기Dev/프론트엔드 2021. 7. 23. 11:59
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 지금까지 배운 것을 활용하여 카테고리별 최신 뉴스 목록을 보여주는 뉴스 뷰어 프로젝트를 만들어보자. https://newsapi.org/ 에서 제공하는 API를 사용하여 데이터를 받아 오고, 9장에서 배운 styled-components를 활욯하여 프로젝트를 스타일링 해보자. 이번 실습은 다음 흐름으로 진행된다 비동기 작업의 이해 - axios로 API 호출해서 데이터 받아오기 - newsapi API 키 발급받기 - 뉴스 뷰어 UI 만들기 - 데이터 연동하기 - 카테고리 기능 구현하기 - 리액트 라우터 적용하기 14.1 비동기 작업의 이해 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예..
-
React :: 13. 리액트 라우터로 SPA 개발하기Dev/프론트엔드 2021. 7. 22. 10:54
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 그동안 책의 내용을 그대로 적었는데 올바른 학습방법이 아닌것같다. 이제부터는 먼저 읽어보고 이해한 내용을 토대로 작성하도록 해보겠다. 13.1 SPA란? SPA는 Single Page Application의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 기존의 웹 페이지는 여러 페이지로 구성이 되어 있었다. 기존에는 사용자가 다른 페이지로 이동할 때 서버에서 html을 받아 오고, 페이지를 로딩할 때 서버에서 리소스를 전달받아 브라우저가 해석한 뒤 렌더링이 되었다. 즉 사용자에게 보이는 화면은 서버 측에서 준비하였다. 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라서 유동..
-
React :: 12. immer를 사용하여 더 쉽게 불변성 유지하기Dev/프론트엔드 2021. 7. 21. 11:13
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있죠. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는것이 매우 힘듭니다. 값 하나를 업데이트하기 위해 코드를 열 중 정도 작성해야 합니다. 이렇게 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서죠. 간혹 실제 프로젝트에서도 이렇게 복잡한 상태를 다룰 때가 있는데, 그럴 때마다 전개 연산자를 ..
-
React :: 11. 컴포넌트 성능 최적화Dev/프론트엔드 2021. 7. 20. 16:15
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 10장에서는 학습한 지식을 활용하여 멋진 일정 관리 애플리케이션을 만들어 보았스니다. 현재까지는 이 애플리케이션을 사용할 때 불편하지 않습니다. 추가되어 있는 데이터가 매우 적기 때문이죠. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 이번 실습은 다음과 같은 흐름으로 진행합니다. 많은 데이터 렌더링 하기 - 크롬 개발자 도구를 통한 성능 모니터링 - React.memo를 통한 컴포넌트 리렌더링 성능 최적화 - onToggle과 onRemove가 새로워지는 현상 방지하기 - react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더..
-
React :: 10. 일정관리 애플리케이션 만들기Dev/프론트엔드 2021. 7. 19. 17:19
지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았습니다. 이 장에서는 지금까지 배운 지식을 활용하여 프런트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 보겠습니다. 이번 실습은 다음 흐름으로 진해앟ㅂ니다. 프로젝트 준비하기 - UI 구성하기 - 기능 구현하기 10.1 프로젝트 준비하기 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성하세요. $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하세요. $ cd todo-app $ yarn add node-sass@4.14.1 classnames..