LazyWon Story

목차 리액트에 대해서.. 리액트의 대표적인 특징 리액트 설치를 위해 필요한 Tools 리액트에 대해서.. 👀 리액트는 페이스북사에서 만든 자바스크립트 라이브러리 중 하나이다. 페이스북에서 자체적으로 이용되고 있을 뿐만 아니라, 에어비앤비, 우버, 넷플릭스, 인스타그램 등 대체적인 웹 어플리케이션이 리액트로 만들어졌다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 즉, 리액트는 웹 UI를 만드는 라이브러리이다. 사용자에게 보여지는 UI를 만들고 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생하면 그에 맞게 반응하도록 만들어진 라이브러리라고 보면 된다. 보통 조금 복잡한 어플리케이션 만들 때 MVC 패턴을 많이 이용한다. 리액트는 이 중에서 View 레이어를 담당하고 있다. MVC..

목차 프론트엔드 트렌드 변천사 SSR, CSR, SSG 프론트엔드 프레임워크 비교 🎠 프론트엔드 트렌드 변천사 웹 프론트엔드 트렌드 변천사 전통적인 웹 동작 방식은 웹 서버가 HTML 전체 페이지를 브라우저에게 전송하는 구조로 동작했다. 과거 웹 사이트는 지금에 비해 문서 하나에 전달되는 파일 용량이 매우 적었다. User Interaction이 거의 없는 단순한 HTML, CSS 자체의 정적인 페이지를 개발하는데 그쳤다. 그래서 어떤 요소를 한 번 클릭하면 완전히 새로운 페이지를 서버에서 전송해주곤 했다. 이후 동적인 웹 서비스가 등장하면서 웹 서버가 HTML 페이지와 더불어 Javascript를 통해 필요한 데이터만을 주고받으며, User Interaction을 구현하게 되었다. Javascript를..

Testing Library를 이용하여 리액트 컴포넌트 테스트 코드 작성 시 아래와 같은 에러가 발생했다. 테스트는 통과하는데 cosole.error가 자꾸 발생했다. console.error Error: Expected key descriptor but found "" in "" See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options for more information about how userEvent parses your input. ... 에러가 발생한 코드는 다음과 같다. userEvent.type(input, ''); input에 빈 값('')을 입력 후, 특정 함수를 호출하려 하면 해..

목차 학습 주제 JWT의 이해 학습 주제 ch. 23 - 24 JWT를 통한 회원 인증 시스템 구현하기 💡 JWT의 이해 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 쉽게 말해, 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰이다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술이다. 사용자의 정보 열람, 수정 등 개인적인 작업들을 수행할 수 있다. 세션 기반 인증 시스템 서버가 사용자가 로그인 중임을 기억하고 있는 것. 사용자가 로그인하면 서버는 세션 저장소에 사용자 정보를 조회하고 세션 id를 발급한다. 발급된 id는 브라우저의 쿠키에 저장한다. 이후에 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을..

목차 학습주제 React Router API 연동 Context API 학습 주제 13장. 리액트 라우터 14장. 외부 API 연동하기 Context API 💡 React Router router 기능을 구현하기 위해 외부 라이브러리 필요 사용 빈도가 가장 높은 react-router-dom 라이브러리 사용 프로젝트에 라우터 적용 프로젝트에 리액트 라우터 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다. BrowserRouter 컴포넌트는 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. Route 컴포넌트로 어떤 규칙을 가..

목차 Hooks 컴포넌트 스타일링 학습주제 8장. Hooks 💡 Hooks 클래스형 컴포넌트의 state관리와 Life cycle method 기능을 제공해 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는 기능이다. Hooks의 사용으로 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결해 준다. useState 가장 기본적인 Hook으로 상태 변수와 상태 업데이트 함수를 반환 함수형 컴포넌트에서 상태 관리를 하기 위해 컴포넌트 코드를 클래스 형태로 변환할 필요가 없어 매우 편리하다. 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook. 클래스형 ..

목차 리액트를 다루는 기술 (개정판) 학습 시작 리액트를 다루는 기술 (개정판) 학습 시작 사내에서 리액트를 도입하고자 리액트 관련 가장 유명한 서적인 '리액트를 다루는 기술'을 이용한 자발적인 스터디 모임을 만들었다. 까먹기 전에 다시 한번 공부했던 내용들을 정리해보고자 한다. 회차 별 공부 내용 및 일정 chapter 페이지 분량 일정(분량) 1장. 리액트 시작 33 33 1주차 모임(428) 2장. JSX 55 22 3장. 컴포넌트 83 61 4장. 이벤트 핸들링 119 58 5장. ref:DOM에 이름 달기 141 83 6장. 컴포넌트 반복 157 74 7장. 컴포넌트의 라이프사이클 메서드 171 97 8장 Hooks 189 92 2주차 모임(506) 9장 컴포넌트 스타일링 217 125 10장 ..