분류 전체보기66 [Next.js] 직접 Next.js 개발환경 구축하기 본 글은 도서의 내용을 바탕으로 작성되었습니다. create-react-app과 create-next-app은 각각 리액트와 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI도구이다. 애플리케이션 구축에 필요한 대부분의 작업을 대신 해주기 때문에 편하고 빠르게 앱을 만들 수 있겠지만 공부에는 도움되지 않는다. 또한 23년 1월, 리액트팀이 cra는 리액트 어플리케이션을 만드는 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 밝힌 만큼, 직접 개발환경을 구축해보는 것도 좋은 경험이 될 것이다. create-next-app 없이 하나씩 구축하기 모든 Node.js 프로젝트와 마찬가지로 가장 먼저 할 일은 package.json을 만드는 것이다. package.. 2024. 2. 25. [React] 서버 사이드 렌더링이란? 본 글은 도서의 내용을 바탕으로 작성되었습니다. 싱글 페이지 애플리케이션(SPA) SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 첫 페이지에서 데이터를 모두 불러온 후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. 이러한 작동 방식은 최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점이 있지만 한번 로딩된 이후에는 서버를 거쳐 리소스를 받아올 일이 적어져 훌륭한 UI/UX를 제공할 수 있다는 장점이있다. 페이지 전환을 시도하면 서버로 HTML을 요청하는 것이 아닌 다음 페이지 렌더링에 필요한 정보만 HTTP요청으로 가져온다음, 그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 .. 2024. 2. 2. [React] useState, useEffect, useRef 본 글은 도서의 내용을 바탕으로 작성되었습니다. useState useState는 함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다. import { useState } from 'react' const [state,setState] = useState(initialState) 초기값을 넘겨주지 않으면 초기값은 undefined가 된다. useState없이 변수를 이용해 상태값을 관리하려고하면 렌더링을 트리거시키지 못하거나, 강제 렌더링을 시킨다고 해도 값을 다시 초기화시켜 값을 변경시키지 못한다. 그럼 useState훅의 결과 값은 어떻게 함수가 실행되어도 그 값을 유지하고 있는지에 대한 의문이든다. 아마 useState는 state값을 기억하기 위해 클로저로 구현되어.. 2024. 1. 28. [React] 리액트 렌더링 과정 본 글은 도서의 내용을 바탕으로 작성되었습니다. 리액트 렌더링이란? 브라우저 렌더링: HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그려내는 과정 리액트 렌더링: 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 뜻한다. 리액트 렌더링이 일어나는 경우 최초 렌더링 리렌더링 클래스형 컴포넌트의 setState가 실행되는 경우 클래스형 컴포넌트의 forceUpdate가 실행되는 경우 함수형 컴포넌트의 useState()의 두번째 배열요소인 setter가 실행되는 경우 함.. 2024. 1. 14. [React] 언제 어떻게 state와 useEffect를 사용해야할까? 들어가며 인턴 1~2주차에 react state management에 대한 과제를 받고 피드백을 받았다. 해당 글은 그 첫번째 과제에서 실수했던 점과 배운점을 정리한 내용이다. 첫번째 과제는 user가 text를 입력하는 동시에 글자수, 문장수 등을 동시에 계산해서 보여주는 간단한 앱이였다. 혹시 동일한 과제를 직접 수행해보고 싶다면 아래 글을 참고하면 되겠다. https://www.codevertiser.com/reactjs-challenge-1-text-analyzer-tool/ 피드백 이전 코드 귀찮더라도 위 앱 캡쳐사진과 코드를 한번 읽어보면서 이 코드가 잘못된 점이 어딘가를 생각해보자. const App = () => { const textRef = useRef(null); const [text.. 2023. 10. 13. [GraphQL] graphQL은 왜 사용하는 것일까? 들어가며 새롭게 입사한 회사에서 graphQL을 사용하고 있어서 처음으로 배우고 있다. 본격적인 업무에 들어가기 앞서 graphQL에 대해 공부하며 그 경험과 활용 철학들을 공유받은 입장이다보니 경험은 없으면서 그 내용은 상당히 성숙한 내용들이 있을 수 있다. 이 글은 literally는 당연히 이해하고 쓰는 글이지만, REST API를 사용해서 겪었던 고통들이 무엇인지, graphQL을 도입하는 과정에서 어떤 문제들을 겪고 고민하며 발전시켜왔는지에 대해 상당히 피상적으로 받아들인 부분이 있으므로 어쩌면 추상적으로 적힌 부분이나 잘못 받아들이고 쓴 오류들이 존재할 수 있다. 이 글은 이제 주니어도 아닌 엔트리 레벨의 프론트엔드 개발자가 처음 graphQL에 대해 이론적으로 공부하며 작성한 글임을 꼭 염두.. 2023. 7. 23. 이전 1 2 3 4 ··· 11 다음
