"사이드 이펙트"라는 용어들을 종종 듣게 되었다. 사이드 이펙트는 번역하면 "부작용"인데, 음 도대체 어쩌라는거지... 뭔소리지.. 라는 의문을 가졌다. Side-effect란 보통 함수형 프로그래밍에서 주로 쓰이는 용어로 순수 함수와 다른말이다. 📌 Pure Function 순수함수 1. 함수의 리턴값은 예측 가능하며 동일하다 2. 함수 외부의 값이나 함수에 전달된 값을 변경하지 않는 함수 위의 이미지처럼 addNum에 a와 b를 넣었을때 리턴되는 값은 3이라는걸 예측할 수 있다. 이를 순수 함수라고 부른다. 이와 반대되는 Side-effect는 무엇일까? 📌Side-effect 예측되지 않은 것 Side-effect는 항상 같은 결과를 리턴하지 않는, 즉 예측할 수 없는 특징을 가지고 있다. 예를들어..

NEXTJS 13 정리 13버전부터는 모든 React 컴포넌트는 서버사이드 컴포넌트입니다. app 디렉토리 v12 : pages 폴더 하위의 모든 파일들이 하나의 경로였습니다. v13 : app/ 이라는 디렉토리가 만들어졌습니다. 그리고 아래의 컴포넌트 들을 구성할 수 있습니다. 12버전의 pages 와 별 다를것 없어보이지만 app 디렉토리를 사용하면 디렉토리 구조도 깔끔해지고 layout, React 서버 컴포넌트, 스트리밍의 여러가지 기능이 존재합니다. layout.tsx 기존 pages 폴더 밑에 있던 _app.tsx 파일과 _document.tsx 파일의 역할을 합니다. app 폴더 밑에 이렇게 꼭 한 개의 layout.tsx 파일이 있어야 합니다. export default function R..

SEO란 Search Engine Optimization의 약자로 "검색엔진 최적화"라는 의미를 담고 있습니다. SEO 처리를 하게 되면 네이버, 구글과 같은 검색 엔진에서 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업입니다. 블로그 홍보글, 온라인 판매몰 등 같은 단어를 검색하더라도 SEO를 처리한 웹 사이트는 SEO 처리를 하지 않은 웹사이트에 비해서 유저 방문 트래픽 차이가 있을겁니다. 사내 시스템 담당자로 근무를 할 당시에는 사실 SEO에 대해서 크게 관심이 없었습니다. 왜냐하면 사용자 유입에 대한 작업보다는 동적으로 데이터를 받아서 처리하는 과정이 중요했었습니다. 그러나, 지금의 조직은 SEO 최적화가 필요하기 때문에 생각난김에 블로그에 정리하고자 합니다. 🎈 React에서 SEO 최..

리액트 라이프사이클이란 리액트 앱이 실행되고 종료되는 과정을 마운트, 업데이트, 언마운트로 나눈 것 Q. 마운트, 업데이트, 언마운트란? 마운트 : 컴포넌트가 실제 DOM에 삽입되는 것 업데이트 : 컴포넌트가 변하는 것 언마운트 : 컴포넌트가 DOM 상에서 제거되는 것 Q. 렌더링이란? 컴포넌트 내에 Element 요소들(HTML, React 사용자 정의 태그)을 화면에 그리는 동작 React의 라이프사이클 (16.3 >= ) [1] 컴포넌트 생성 constructor → render → componentDidMount 1. constructor 컴포넌트가 만들어지면 가장 먼저 실행되는 생성자 메서드 초기값을 설정할때 주로 사용 2. render constructor()에서 정의한 state 값의 접근 ..