프론트엔드184 Next.js 배포 정리 최종 수정일 : 2024.07.22Next.js 배포 정리배포 준비배포하기 전에 next build 명령을 실행해야 한다. 이를 통해 최적화된 프로덕션 빌드를 생성한다.Next.js 애플리케이션은 여러 방법으로 배포할 수 있다.Node.js를 지원하는 호스팅 서비스를 사용Vercel서버리스 배포 플랫폼 - ex) Netlify서버리스 플랫폼은 Next.js 애플리케이션에 특히 적합하다. Next.js의 하이브리드 렌더링 기능을 최대한 활용하여 CDN에서 정적 생성된 페이지를 제공하면서 서버리스 함수를 통해 서버사이드 렌더링 및 API 라우트를 처리할 수 있다. 플랫폼특징설명Vercel서버리스 플랫폼Next.js를 만든 회사Next.js에 대한 일급 지원을 제공한다.Netlify서버리스 플랫폼Next.j.. 2024. 7. 19. 합성 컴포넌트(Compound Component) 패턴 최종 수정 : 2024-06-22합성 컴포넌트(Compound Component) 패턴그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이다.하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다. Context API를 사용해서 처음 작성해야 하는 코드가 꽤 많지만, 컴포넌트를 사용하는 곳에서는 하위에 어떤 컴포넌트가 있 는지 볼 수 있고, 위치도 자유롭게 수정 가능하다. # 장점1) 관심사 분리 : 부모 컴포넌트에 모든 UI 상태 로직이 있고 이를 내부적으로 모든 자식 컴포넌트에게 전달한다면 책임이 명확하게 구분된다.2) 복잡성 감소 : 속성을 특정 컴포넌트로 전달하는 props Drillingm과 달리 속성을 바로 자식 컴포넌트에 전달한다. 내부적으로.. 2024. 6. 23. 유저기능 - 인증 / 인가 최종 수정 : 2024-06-17유저기능인증과 인가를 합친 것을 통칭하여 말한다. 인증(Authentication)클라이언트와 서버는 인증서를 사용해서 리퀘스트를 보낸 유저가 누구인지 파악한다. 서버가 리퀘스트를 보낸 유저가 누구인지 파악하는 것을 '인증'이라고 하며, 이 인증서에는 두 가지 종류가 있다. 작동하는 원리에 따라 각각 세션과 토큰이라고 부른다. 세션을 사용하면 세션 기반 인증, 토큰을 사용하면 토큰 기반 인증이라고 한다. # 쿠키 인증쿠키(Cookie)란 이름-값 쌍, 속성으로 구성되어 있으며 서버 리스폰스나 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일들을 말한다. 속성에는 서버에서 정한 만료일이나 보안 설정 등 다양한 내용들이 담겨 있다. 서버 리스폰스의 Set-.. 2024. 6. 17. useRef() 최종 수정 : 2024-06-17useRef()ref라는 속성에 적용하는 값을 만들어 주는 훅이다.컴포넌트에서 지정된 값 대부분은 애플리케이션의 사용자 인터페이스에 직접 표시된다. 그러나 때로는 사용자가 사용하기 위해서가 아니라 앱 메키너즘의 일부분으로만 변수를 사용할 때가 있다. 어느 경우든, 사용자에게 값을 표시할 필요가 없으므로 값이 달라져도 자동으로 재렌더링이 일어나지 말아야 한다. 즉, 상태 값을 관리하되 상태 변경 시 리액트가 UI를 재렌더링하는 일을 피하고 싶을 때는 useRef()를 사용한다. # ref 속성이란?모든 리액트 컴포넌트는 reference의 앞 글자를 딴 ref 속성을 제공한다. ref 속성값은 사용자 코드에서 설정하는 것이 아니라 어떤 시점에 리액트 프레임워크 내부에서 설정.. 2024. 6. 17. useState() 최종 수정 : 2024-06-17useState()리액트 훅 함수 중에서 가장 많이 사용된다. 컴포넌트를 위해 리액트가 값을 관리하고 싶을 때 사용한다. # 불변 상태를 캐시하는 useStateuseState 훅은 가변 상태를 캐시한다. useState 훅이 반환한 세터 함수는 리액트가 컴포넌트 내부의 생태 변화를 쉽게 감지할 수 있게 해준다. 즉, 세터 함수가 호출되면 컴포넌트의 상태에 변화가 있는 것으로 판단하고 즉시 해당 컴포넌트를 다시 렌더링한다. 컴포넌트 호출과 호출 사이에 상태를 유지하고 컴포넌트의 상태 변경을 리액트에 알리는 가장 간단한 방법은 useState 훅이다. 상태 관리를 위한 도움을 리액트에게 요청하는 함수인 것이다. useState()를 호출하면, 훅이 최신 상태 값을 반환하면서.. 2024. 6. 17. 이전 1 2 3 4 5 6 7 ··· 37 다음