천천히 느리게 천천히 느리게

◎ 회사에서 내가 맡은 프로젝트는 CRA로 만들어져서 SEO가 잘되어있지 않는 이슈가 있어서, 이참에 Next.js를 사용하여 ssr 방식으로 프로젝트를 재구성할 기회가 생겼다. next.js를 언젠간 한번 해보고 싶었는데 좋은 기회이다. 1. Next.js? ◎ Next.js를 사용 이유 중 핵심이 SSR 방식인 점이다. 렌더링 방식은 블로그에 정리돼있으므로 생략하겠다. React를 사용하여 완전한 웹 애플리케이션을 빌드하려면 고려해야 할 중요한 부분이 많다. - 코드는 webpack과 같은 번들러를 사용하여 번들로 묶고 Babel과 같은 컴파일러를 사용하여 변환해야 한다. - 코드 분할과 같은 프로덕션 최적화를 수행해야 한다. - 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있다..

◎ 리덕스.. 어렵다.. 처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다. 프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다. 그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다. 0. 설치 npm install redux npm install react-redux npm install redux-devtools-extension 1. 리덕스 모듈 ◎ 리액트 프로젝트에서 리덕스 모듈 만드는 방법은 다양하다. 리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 자바스크립트 파일을 의미한다. 첫 번째 방식은, 액션과 리듀서가 서로 다른 파일로 만드는 법이다. ● actions 폴더 - index.js 파일 ● reducers 폴더 - index.js 파일 ..

1. Redux 란 ◎ 리액트 생태계에서 가장 많이 사용하고 있는 상태 관리 라이브러리이다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있으며, 글로벌 상태 관리에도 좋다. 참고로 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만, 무조건 리액트와 함께 사용할 필요는 없다. 일반 Javascript 환경이나 Angular 와 같은 다른 프레임워크에서도 사용되기도 한다. 위의 사진을 보면, 시간이 좀 된 그래프이지만, 리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다. 단순히 글로벌 상태 관리를 위한 것이라면 ContextAPI를 활용하는 것도 괜찮다. 2. Redux 와 Context API의 차이점. (리덕스 위주) 미들웨어: 리덕스에는 미들웨..

1. fetch란 ◎ fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. 2. 특징 fetch( )로 부터 반환되는 HTTP Status Code가 404나 500을 반환하더라도 Promise 객체는 HTTP error 상태를 reject하지 않는다. 대신 ok 상태가 fasle인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다. 보통 fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야 하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는..

◎ Javascript에서 내장 함수를 배울 때 이미 다뤘던 함수들이다. 하지만 리액트에서 이 두 개의 함수를 상황에 맞게 잘 사용하 여야 성능이 좋아진다. 간략하게 차이를 알아보자. 1. push ◎ push는 기존 배열에 값을 추가하여 원본을 바꾼다. 1-2. 예시 const array = [1, 2]; array.push(3); console.log(array); // [1, 2, 3] 위의 코드를 확인해보면 array배열에 array.push(3)를 하고 array를 결과를 확인해보면 array 배열 자체가 변경된 걸 확인할 수 있다. 2. concat ◎ concat은 기존 배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다. 2-1. 예시 const array =[1, ..

◎ 저번에 구현했던 위스타그램을 react 코드로 옮겨놓았다. 이제 로그인 기능을 구현할 시간인데, 로그인을 하려면 input에 id랑 passwrod를 input에 입력을 하고 그 값을 가지고 로그인 조건에 만족해야 로그인이 되도록 구현을 해야 한다. 그러면 위스타그램 코드로 input을 어떻게 관리해야 하는지 알아보자. 1. input 다루기 ◎ 우선 위스타그램 코드를 보면서 이해해보자. onChange 이벤트는 input의 텍스트 값이 바뀔 때마다 발생하는 이벤트이다. 여기에 handleInput 함수를 설정을 하였다. haandleInput의 코드는 다음과 같다. onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어 올 수 있다..

1. state ◎ state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 함수형 컴포넌트와 state를 다루는데 방법에 차이가 있어서 기록을 남기자. 2. state의 사용법 ◎ 동적인 데이터를 다룰 땐 바로 state를 사용한다. 함수형 컴포넌트에서도 연습했던 카운터 예제를 통해 연습해보자. CounterClass라는 컴포넌트를 만들고 코드는 다음과 같다. 위의 코드를 한번 살펴보자. 2-1. state 정의 ◎ constructor 에서 super(props)를 호출 한 이유는 , 우리가 컴포넌트를 만들게 되면서, Component를 상속했으며, 우리가 이렇게 constructor를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그렇기에 리액트 컴포넌트가 지니고 있던 생성자를..

1. useState ◎ 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용하는 함수가 useState이다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState라는 함수는 리액트의 Hoooks 중 하나이다. ※ Hook은 클래스 안에서 동작하지 않는다. 2. 예시 ◎ 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 구현해보자. 그다음엔 App에서 Counter를 렌더링 해보자. 2. 이벤트 설정 ◎ Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 해보자. Counter 컴포넌트를 다음..