Dev
-
Next.js - 기본 동작 2편Dev/Next.js 2023. 5. 8. 21:36
기본 동작 2편에서는 백엔드에 해당하는 부분을 다룰 것이다. api를 통신하기 위하여 포스트맨도 함께 사용할 것이다. api route handlers 페이지의 라우팅하는 방법과 비슷하게 간다. 이때에는 app디렉토리 아래에 api라는 폴더를 생성한 후, 라우팅되기위한 폴더와 그 아래에 route.js 단일 파일을 생성하여 엔드포인트를 만든다. route.js파일에는 다음과 같이 만들어서 응답한다. Postman으로 해당 엔드포인트에 요청을 보내면 아래와 같이 응답이 온다. json형태로의 응답값을 보내고 싶다면 NextResponse를 사용한다. 다음과 같이 쿼리스트링을 넘길 때에는 어떻게 해야할까? ( http://localhost:3000/api/sample/search?userId=2) 지금껏 해..
-
Next.js - 설치 및 기본 동작 1편Dev/Next.js 2023. 5. 8. 21:13
Next.js를 실무에 사용하기 위하여 유튜브에서 Crash Course 영상을 토대로 작성하였다. 프론트 진영에서 트랜드가 빨라서 새로은 또 무엇인가를 공부해야하는 걱정이였으나 그나마 다행히 Next.js는 React를 바탕으로 만들어진 웹 front-end 프레임워크라 그런지 생각보다 할만하다는 생각이 들었다. 프레임워크라 react에서 부족하거나 일일이 해야했던 작업들을 편하게 해주기도 하였다. 왜 Next.js가 핫한지 체감이 되는 강의였다. https://www.youtube.com/watch?v=Y6KDk5iyrYE Next.js 프로젝트 설치 $ npx create-next-app next-crash automatic routing 기존의 next.js에서는 automatic routing을..
-
Next.js - 소개Dev/Next.js 2023. 5. 8. 20:46
Next.js 는 React로 만드는 서버사이드랜더링(SSR) 프레임워크이다. Next.js를 사용하면 어떠한 장점이 있고, 왜 사용하는 것일까? 우선, 클라이언트 랜더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 이러한 웹을 보게 된다. 그래서 처음(초기 랜더링)에 많은 대기시간을 가지는 문제점이 있다. 또한, SEO(search engine optimization,검색 엔진 최적화) 문제를 발생시킨다. 자바스크립트가 로드되지 않았을 때, 검색엔진이 스캔함으로써 아무 페이지도 걸리지 않게 된다. Next.js를 사용하게 되면 pre-reloading을 통해 미리 데이터가 랜더링 된 페이지를 가져올 수 있게 해 주므로 사용자에게 더 좋은 경험을 선사한다. 그리고 검색 엔진에 잘 노출될 수 있도록..
-
자바스크립트 this 이해하기Dev/Javascript 2023. 4. 14. 02:46
자바스크립트에서 this는 심심치 않게 나온다. this에 대하여 설명하라고 하면, 머리로는 아는데 말로 표현하기가 어렵다. 지금은 사용하지 않지만 예전에 React를 클래스형 컴포넌트로 생성할 때에도 종종 등장했던 부분이다. 그래서 this에 대하여 간략하게 정리하고자 한다. 자바스크립트에서 this는 인스턴스 자신을 가리키는 참조변수이다. 이렇게 말하는 것이 가장 쉽게 이해되는 문장인 것 같다. 다른 언어에서(자바같은)도 this가 존재하는데 자바스크립트에서는 함수를 호출하는 객체에 대한 참조이다. 이것은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 방식 때문이라고 한다. (말 나온 김에 객체지향 프로그래밍에 대해서도 포스팅해야겠다) this는 함수가 호출되는 방식에 따라 값을 다르게 가지게 된다..
-
Git Flow 전략 - 브랜치 이해Dev/Git 2023. 3. 23. 02:52
Git Flow 일반적으로 가장 많이 사용하는 git branch 관리 전략. git flow를 구성하는 브랜치 타입들을 먼저 살펴보자. 1. Master(main) 브랜치 실제로 사용자들에게 서비스가 되고 있는 코드를 담고 있는 브랜치. 검증이 완료되고, 빌드 에러 등이 없는 상태 코드가 들어있어야 한다. 일반적으로 오직 PR과 merge를 통해서만 코드를 넣도록 설정하여 직접 푸시를 할 수 없도록 막아둔다. 실제 사용자들에게 서비스가 되는 코드는 이 마스터 브랜치를 배포하여 제공된다. 2. develop 브랜치 배포일에 다음 master branch로 병합될 코드들이 있는 브랜치. 마스터 브랜치에서 checkout 하여 생성되는 브랜치. 마스터 브랜치로 병합시켜 실제 사용자들을 사용하고 있는 프로덕션..
-
React Query 소개 및 사용하기Dev/React.js 2023. 3. 9. 02:43
'카카오페이 프런트엔드 개발자들이 React Query를 선택한 이유'라는 재미있는 칼럼을 보게 되었다. 요즘 들어 프런트엔드 진영에서 API통신 후, 데이터 관리를 하는 부분에 대해서 React Query를 많이 이용하는 추세인 것 같다. 최근에 관심이 생긴 React Query를 공부하기 앞서 전반적인 이해도를 키울 겸 해당 칼럼을 보면서 정리하고자 한다. 시작하기 앞서 카카오페이에서는 React Query를 도입하기 전에는 Redux를 주로 사용했다고 한다. 리덕스의 장점은 전역상태를 관리하는데 도움 되고, 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다는 ..
-
초보자들이 자주 실수하는 리액트 훅 Top 6Dev/React.js 2023. 3. 8. 01:49
Youtube를 보다가 'Top 6 React Hook Mistakes Beginners Make' 라는 관심을 가질 만한 영상을 찾았다. 이 영상을 보고 나는 얼마나 실수를 하고 있으며, 실수를 하고 있다면 고치기 위하여 해당 내용을 정리하면서 포스팅하기로 하였다. 리액트 훅은 기본적으로 알고 있다고 생각하고 진행하겠다. 1. Using state when you don't need it import React, { useState } from "react"; function Mistakes() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); function onSubmit(e) { e.prev..
-
useState와 useReducer 둘 중 무엇을 사용해야 할까?Dev/React.js 2023. 3. 5. 19:11
1. useState 리액트에서 상태관리라고 하면, 가장 먼저 떠오르는 hooks 중 하나로 useState를 뽑을 수 있다. 컴포넌트에서 state를 동적으로 관리하기 위해서 자주 사용되는 함수이다. // 사용방법 const [state, setState] = useState(initialState); // 예시 const [name, setName] = useState(""); // 초기값 console.log(name); // '' // name state 재할당 setName("박레고"); // 랜더링 이후 console.log(name); // 박레고 setName함수를 통해 name의 값을 변경해줄 수 있다. setName은 상태 값을 갱신해주는 Setter 함수라고 한다. 2. useRedu..