배꼽파지 않도록 잘 개발해요

◆ React 테스팅 ◆ jest ◆ jest 활용 ◆ react-testing-library ◆ 쿼리의 우선순위 ◆ 유저 이벤트 React 테스팅 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 함. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함. 코드를 리팩토링하면, 원래대로 동작하는지 테스트함. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있음. 테스팅 코드 작성의 이점 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지. TDD(Test Driven Developtment) 등의 방법론을 적용하여 생산성을 향상..

◆ Redux 소개 ◆ Redux 구조 ◆ redux-toolkit 활용 ◆ Redux를 React에 연결하기 ◆ Redux를 이용한 비동기 처리 Redux 소개 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용됨. 주로 React 앱과 같이 사용함. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱 구축 사례가 많음. 언제 Rudux를 써야 하는가 앱 전체의 상태 관리가 필요할 때 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 logger, devtool 등을 활용하여 상태를 관리할 필요가..

◆ 상태 관리 ◆ 상태 관리 기술이 해결하는 문제들 ◆ Flux Pattern ◆ useState, useRef, useContext, useReducer ◆ useState를 활용한 상태관리 ◆ useContext를 활용한 상태관리 상태 관리 상태 관리 상태 관리 기술이란 앱 상에서의 데이터를 메모리(localStorage, JS memory) 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함함. MPA와 SPA에서의 상태 관리 MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라리언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음. SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가..

◆ 자바스크립트 비동기 ◆ Promise ◆ async/await ◆ POSTMAN, Open API, CORS 자바스크립트 비동기 자바스크립트 비동기의 등장 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않았음. Ajax(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨. XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨. 자바스크립트와 비동기 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 될 것 → 동..

◆ SPA와 라우팅 ◆ react-router 소개 ◆ react-router 컴포넌트 ◆ react-router로 페이지 구성하기 ◆ react-router 응용 SPA와 라우팅 Single Page Application SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌. Multi Page Application MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달함. 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨. 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함. 페이지 요청마다 모든..

◆ React 스타일링 Overview ◆ React 앱에서의 스타일링 방법 ◆ CSS, Sass ◆ CSS Flexbox ◆ styled-components React 스타일링 Overview 좋은 앱을 만들려면? 번들 사이즈에 대한 고려 : CSS 코드가 차지하는 사이즈는 매우 중요한 요소 앱 성능에 대한 고려 : animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소 사용자에게 유리한 UI/UX를 고려 : 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영 자바스크립트를 이용한 다양한 스타일 기법 : UI 토글링, 애니메이션, 다크모드, 복잡한 UI 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦. 유지보수가 용이하고 확장..

◆ Hooks ◆ 종합 실습 / 유용한 팁들 Hooks Hook이란? 컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. useState가 바로 State Hook이다. 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야 했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가된 것이 바로 Hook이다. 유의사항 Hook은 React 함수 (컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use'로 시작해야 한..

◆ Props와 State ◆ 이벤트 처리 Props props란 컴포넌트로 전달되는 매개변수 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없음. 주로 component의 '재사용'을 위하여 사용함. 컴포넌트 생성 const Welcome = (props) => { return Hello, {props.name}; } 컴포넌트 사용 const App = () => { return ; } Props는 읽기 전용이다. props의 값을 임의 변경해서 사용하면 안 됨. const Welcome = (props) => { props.name = props.name + "님"; return Hello, {..

◆ 리액트 오리엔테이션 ◆ React 프로젝트 생성 ◆ JSX와 컴포넌트 리액트 오리엔테이션 React가 무엇인가? SPA(Single Page Application) 전통적인 페이지 SPA · 최초에 서버로부터 HTML을 전달 받고 페이지의 변경이 필요할 때 다시 서버에 요청하여 HTML을 전달 받는다. · 최초에 서버로부터 HTML을 전달 받고 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달 받는다. · 이 과정에서 페이지를 처음부터 다시 불러오게 된다. · 이때 페이지에서 변경된 부분만 계산하여 다시 그리게 된다. 개요 React : 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component : React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 ..

◆ JWT의 이해 ◆ JWT + Cookie 사용하기 ◆ 회원 비밀번호 찾기 구현 ◆ OAuth2.0의 이해 ◆ 구글 로그인 구현하기 ◆ Nginx 사용하기 JWT의 이해 JWT란? JSON Web Token 인증을 위한 정보를 특별한 저장소를 이용하지 않고, 전자 서명을 이용하여 확인하는 방법 JWT의 구성 header : 토큰의 타입 (jwt), 데이터 서명 방식 payload : 전달되는 데이터 signature : 헤더와 페이로드의 전자서명 Web Token, 데이터를 웹에서 사용하기 위한 스펙이므로 웹에서 문제없이 사용할 수 있는 문자열로만 구성된 base64 인코딩을 사용함. JWT와 보안 JWT의 payload는 단순히 정보를 base64 encode → decode 시 정보 노출됨 → 민감..