프론트엔드 개발/Next.js

Next.js + React Native 크로스 플랫폼 개발을 위한 Solito, NativeWind 소개

최근에 회사에서 Next.js 로 개발한 웹 서비스를 앱으로도 서비스 해야할 수도 있는 가능성이 생겼습니다. 간단하게는 React Native 껍데기에 Webview 로 웹 서비스를 띄울 생각이었으나, 찾아보니 이쪽 분야가 예전보다 꽤 많이 발전하고 있는 것 같아서 시험삼아 찍먹 해볼까? 그런 생각이 들 정도더군요. 예전에 프로젝트를 하면서 모노레포로 웹/앱 간 코드를 공유하여 크로스 플랫폼을 개발할 수 있으면 참 좋겠다 싶었는데 최근에는 그런 방식으로 개발을 할 수 있게 생태계가 정말 많이 성장 했습니다. 제 경험상 웹 개발에서 ReactNative 개발을 찍먹 할때 어려웠던 부분은 라우팅/내비게이션, View 등을 새로 배워야 한다는 것과 css 스타일 적용 방식이 달라서 그 부분을 다시 배워야 하고..

Next.js 에서 소셜 로그인 구현하기 (next-auth.js 사용)

Next.js 에서 next-auth 라이브러리 사용하여 소셜 로그인을 구현하는 글 입니다. 소셜 로그인(카카오, 네이버) 과 커스텀 로그인 두가지 모두 구현해보겠습니다. next-auth next-auth 라이브러리는 쉽게 인증 로직을 구현하기 위한 Next.js 전용 라이브러리입니다. 모든 OAuth 서비스와 함께 작동하도록 설계되었으며 OAuth 1.0 , 1.0A , 2.0 및 OpenID Connect를 지원 하며 가장 널리 사용되는 로그인 서비스를 기본적으로 지원합니다. OAuth 동작 과정에 대해서는 이곳을 참고하세요 물론 인증 로직을 직접 구현해도 되지만, 쉽고 빠르게 할 수 있는 라이브러리를 쓰면 정신 건강에 이롭습니다. NextAuth.js Authentication for Next.j..

Next.js 13 버전에서 ReactQuery 사용시 서버 컴포넌트에서 클라이언트 컴포넌트로 pre-fetch 데이터 전달하는 방법

Next.js 13 의 클라이언트 컴포넌트에서 react-query 를 사용하는 경우 서버 컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 것에 대한 게시물 입니다. 코드 예시의 라이브러리 버전은 아래와 같습니다. "@tanstack/react-query": "^4.24.4" "@tanstack/react-query-devtools": "^4.24.4", "next": "13.1.3", "react": "18.2.0", App 디렉토리의 서버컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 방법이 2가지가 있습니다. 각각 차례대로 살펴보겠습니다. props drilling 방식으로 pre-fetch hydrate 방식으로 pre-fetch react-query Pro..

웹 프레임워크 Next.js 는 무엇인가요? (프론트 면접 질문)

웹 프레임워크 Next.js 는 무엇인가요? 글 우측 하단에 다음버튼 눌러서 계속 진행하며 읽어보는걸 추천합니다. 실제로 면접에서 지원자에게 물어볼 만한 질문 들임. 읽는 것 만으로도 대단히 도움이 됩니다. 글 읽기전에 하나씩 답변 달아본 후에 읽어보면 뭘 알고 뭘 모르는지 알 수 있을 것 같네요. 자바스크립트에서 리액트로 React.js 는 무엇인가요? Dom은 무엇인가요? JSX란 무엇입니까? State란 무엇입니까? 언제 사용해야 합니까? 이벤트 등록 및 처리 방법은? hook 이란 무엇인가요? 사용방법은? React에서 props는 어떤 용도로 사용되나요? props와 state의 차이점은 무엇입니까? React에서 Next.js로 Next.js 작동 방식 컴파일이란 무엇입니까? Minifying..

Next 13 버전에서 App 디렉토리 사용방법 및 소개

Next.js 13 버전에 App 디렉토리가 신규로 추가되었습니다. 🚧 아직 실험적인 기능이며, 안정적이지 않기 때문에 프로덕션 환경에서 되도록 사용하지 않는 것을 권장합니다. App 디렉토리 소개 App 디렉토리 사용시 폴더 구조와 Data Fetch 방법들이 완전히 다르게 변경되는데요. 기존에는 index 파일안에 레이아웃을 짜고 알아서 파일을 분리해서 레이아웃 구성해야 했다면, 이제는 각 레이아웃을 파일로 분리시킵니다. 즉, App 디렉토리의 폴더 구조 자체가 App의 명세서가 됩니다. 또한 App 디렉토리 아래에 작성된 모든 컴포넌트는 Server Component 가 됩니다. 기존에 저희가 사용해왔던 컴포넌트들은 모두 Client Component 입니다. 즉, Client 측에서 상태를 변경하..