본문 바로가기

prev/NextJS

Nextjs 14, tanStack/react-query를 이용한 SSR 최근에 흥미로운 블로그 글을 봤다. https://tech.osci.kr/react-query/ React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희 Web Frontend 개발을 할 때 React 를 사용하면서 마주하게 되는 여러 가지 문제점 중 하나는 state, 상태 관리에 관한 부분입니다. 프론트엔드 개발자라면 state 와 뗄 수 없는 인연을 맺고 있습니다.오늘 tech.osci.kr Recoil을 사용중에 React-query에 도입에 대해 고민하는 글이었다. 나도 현재 프로젝트를 recoil을 사용하고 있어서 이 블로그 글에 대해 흥미를 느꼈고 글을 읽어 보았다. 여기서 말하는 사용이유는, "서버 데이터를 위한 로직이 과도하게 커지고, 그로.. 더보기
Nextjs/Typescript Card Slice 구현하기 (Giftwave) 메인 페이지에 존재하는 Funding List 만들기 다음과 같은 디자인을 비슷하게 만들어 갈 예정이다. 기능 확인하기 서버로 부터 카드 정보를 받는다.(image, title, maxCount, curCount) 받은 정보를 가지고, slide를 만든다. slide의 기능은 prev,next 버튼 클릭시 카드가 움직일 것이고, 방향은 왼쪽, 오른쪽으로 가능하다. 구현 하기 Button 구현하기 (next, prev) 처음에 가장 만들기 쉬운것부터 접근했다. button을 클릭했을 때, 카드가 이전으로 가거나 다음으로 넘어가도록 구현하기로 했다. 그렇게 하기 위해서는 현재 상태를 관리해주는 state가 필요했고, useState를 이용해서 관리하도록 했다. const [currentIndex, setCu.. 더보기
GiftWave 프로젝트/휴대폰인증 (setInterval, useInterval) 회원가입 페이지에서 휴대폰 인증 버튼 클릭 시, 인증번호 입력에 대한 대기시간을 만들려했다. 기능은 다음과 같다. 휴대폰 번호를 누르고 인증요청 버튼을 클릭하면 타이머가 작동한다. 일정시간 동안 타이머는 작동하고, 시간안에 인증번호를 입력해야된다. 시간이 종료되면, 인증번호를 다시 요청해야되고, 재요청 클릭시 타이머가 다시 작동한다. 그러면서 setInterval에 대해 알아갈 시간을 가졌고, useInterval이라는 Custom hook을 만들 수 있다는 글을 보게 되었다. 왜 setInterval 말고 useInterval을 쓰면 좋을지와 그 내용을 바탕으로 내가만든 useInterval을 소개하려한다. 아래 글들은 두 블로그 글을 보면서 내가 직접 테스트해보고 퍼온 내용이다. 참고하기 바랍니다. .. 더보기
Molecule 과 Organism (by PhoneAuth) Atomic Design 분류하기 나는 작업을 시작하기 앞서 다음과 같이 3가지의 형태로 분류를 했다. flowmap 만들기 분류한 내용을 바탕으로, Atom / Molecule / Organism에 대한 컴포넌트 명을 만들어 놓고 작업을 시작했다. Molecule? Organism ? Atom 컴포넌트 생성까지는 큰 문제가 없었다. LabelInput (Molecule) 컴포넌트도 기능과 재사용성이 명확했기 때문에 만드는데 큰 문제가 없었다. 여기서 나는 궁금한 부분이 생겼다. PhoneAuth라는 컴포넌트는 Molecule로 사용하는것이 맞을까? 내가 이고민에 빠진 이유는 Molecule이라고 하기에는 재사용성이 없고, 그렇다고 Organism으로 잡기에는 기능이 너무 없다는 생각이 들었다. 그렇다면.. 더보기
Nextjs 카카오 소셜 로그인(REST API 방식) 개요 이번 프로젝트를 진행하면서, 내가 해보고 싶었던 기능은 소셜 로그인 기능이다. 소셜로그인을 사용하게 된다면, 다양한 방법이 있는데 나는 2가지 방식을 비교해봤다. REST API 방식 vs Javascript SDK 방식( 소프트웨어 개발 키트) REST API 방식 서버 측에서 소셜 로그인 업체의 서버와 직접 통신합니다. 사용자 인증 후, 엑세스 토큰 및 필요한 사용자 정보를 서버에서 처리하고 저장합니다. 백엔드 언어와 프레임워크에 관계없이 사용할 수 있습니다. 프론트엔드에서 백엔드로의 추가 요청을 줄일 수 있습니다. 서버-서버 간의 통신은 클라이언트 측에서 통신보다 일반적으로 보안이 더 강력합니다. Javascript 방식 클라이언트 측에서 소셜 로그인 업체의 서버와 직접 통신합니다. 사용자 인.. 더보기
Environment Variables (.env 공식문서 번역하기) Environment Variables Next.js는 환경 변수에 대한 기본 제공 지원을 제공하므로 다음을 수행할 수 있습니다. .env.local 환경변수를 로드하는 데 사용 Next.js에서 사용하는 환경 변수를 브라우저에서 사용하고 싶을 때, 해당 환경 변수의 이름에 NEXT_PUBLIC_ 이라는 접두사를 붙여 사용 가능 환경 변수 로드 Next.js는 기본적으로 process.env에서 .env.local 파일로부터 환경 변수를 불러오는 기능을 지원합니다. .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword Next.js는 자동으로 process.env에 .env.local 파일의 환경 변수를 가져옵니다. 이렇게하면 Next.js의 데.. 더보기
이미지 추가 nextjs 에서 이미지를 추가하는 방법중 최적화를 해서 하는 방법이 있다고 한다. 기존 방식은 import React from 'react' export default function List() { let 상품 = ['Tomatos','Pasta','Coconut']; return ( 상품목록 { 상품.map((value, index)=>{ return ( {value} $40 ) }) } ) } 이런식으로 img 태그를 활용해서 public에 선언한 이미지명을 불러오는 방식이었다. 최적화된 이미지 넣는 방법 성능과 속도가 중요하다고 생각이 될때는, 라는 태그가 있다. 그럼 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해준다고 한다. 방법은 1. 상단에 .. 더보기
NestJS 해보기 맨날 react 기반 클라이언트 사이드 렌더링을 해보다가 문득 궁금했다. "서버 사이드 랜더링은 뭘까, 뭐가 다를까" 하는 생각이 들었는데, Nestjs를 하면 서버사이드렌더링을 할 수 았다고?!! 바로 시작해보기로했다. 설치 npx create-next-app@latest 설치는 간단했다. 다음과 같이 입력하고 엔터누르면 프로젝트가 생성됬다. 다음 선택은 자기가 원하는대로 하면된다. 남자답게 눌러버려라. 나는 일단 간단한 테스트만 진행할 예정이기 때문에 다음과같이 router 를 제외하고는 다 'NO'를 눌렀다. 다음과같이 프로젝트 파일들이 있고, app폴더 : 내가 코드를 짤 폴더라고 생각하면되고, page.js: 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지 public 폴더 : .. 더보기

티스토리툴바