Front-End

정말 오랜만에 블로그 작성합니다.. 취직하고 2달간은 정신없이 코드 이해하고, 개발하고 필요한 지식 채워넣고, 이슈 생긴거 수정하고 ㅎㅎ.. 맥북도 처음 써봐서 너무어려웠어요 하하.. 게다가 이사준비까지 정신이 너무없었습니다! 오랜만에 블로그작성에 어떤거를 써야할까하다가, 제가 최근에 어려움을 겪었던 NCP S3배포 관련해서 설명해보려합니다. NCP란? 네이버 클라우드 플렛폼, Naver Cloud Platform 입니다. 보통 배포한다고 하면 AWS를 많이들 알고 있습니다. 저도 AWS S3, CloudFront로만 배포를 해봤어서.. 다른 방식으로 배포하는 것이 두려웠습니다ㅜㅠㅜ NCP 첫 배포, NCP 첫 업로드 등등 구글링을 했을 때 정확하게 설명이 적혀있는 것이 없었기 때문에 저도 나중에 헷갈릴..

라우팅!!!!!!!!!이란 ? 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있다. ★리액트 라우터(react Router) 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다. ★Next.js 리액트 프로젝트의 프레임워크입니다. Create React App처럼 리액..

불변성을 유지하면서 상태를 업데이트하는 것은 중요한 것을 배웠습니다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것은 매우 힘들다. 값 하나를 업데이트 하기 위해 코드 열 줄 정도 작성해야 하는데, 이렇게 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서다. immer 이라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할 수 있다. 1. immer 사용법 알아보기 먼저 immer을 설치하자. $yarn add immer immer 사용법 im..

데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 성능을 분석해야 할 때에는 느려졌다는 느낌만으로 충분하지 않습니다. 정확히 몇 초가 걸리는지 확인해야 하는데, 이는 React DevTools를 사용하여 측정하면 됩니다. 리액트 개발자 도구의 Components 탭 우측에 Profiler라는 탭을 열어보세요. 좌측 상단에 녹화버튼이 보일건데, 버튼을 누르고, 성능을 확인하고 싶은 기능을 실행 한 후 다시 녹화버튼을 누르면 성능 분석 결과가 나옵니다. 1. 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceU..

✨ 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다. 여러 방식 중에서 딱히 정해진 방식이란 없습니다. 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 하나하나 사용해 보겠습니다. • 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식입니다. • Sass : 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줍니다. • Css Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션입니다. • styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수있게 해준다. 그전에 미리 새로운 프로젝트를 생성해봅시다! $yarn create react-app hooks-tutorial 1. useState useState는 가장 기본적인 Hooks다. 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면된다. // Couter.js import { useState } from 'react'; const Counter = () => { const [..

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수에서는 사용하지 못하고, Hooks 기능으로 비슷하게 작업할 수 있다. 1. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드,..

웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. src 디렉터리에 IterationSample.js라는 코드를 한번 봅시다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; ... 형태가 계속 반복 되는 것을 볼 수 있습니다. 여기서는 4개지만 더 여러 개인 경우 복잡할 수 있습니다. 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보자. = 1. 자바스크립트 배열의 map() 함수 = 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있습니다. ..

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용합니다. // DOM 요소의 id 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. ref(reference의 줄임말) 개념입니다. 리액트 안에서도 id를 사용할 수 있지만, 특수한 경우가 아니면 권장하지 않습니다. ref는 전역으로 작동하지 않고 컴포넌트 내부에서만 작동해서 중복 id 값처럼 오류가 일어나지 않습니다. - 1. ref는 어떤 상황에서 사용해야 할까? - 특정 DOM에 작업을 할 때..

자바스크립트에서도 이벤트가 있었는데, 리액트에서도 이벤트 핸들링이 있다. 한번 알아보자! 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행합니다. HTML을 사용한 적이 있다면 매우 익술할 것입니다!! HTML에서 DOM요소에 이벤트를 설정하는 방법을 다시 살펴보자. - 1. 리액트의 이벤트 시스템 - 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다. // Say.js import { useState } from 'react';..