next.js
-
[Prisma] 검색 기능 추가 해보기 (feat. searchParmas & next.js)Database/Prisma 2024. 2. 13. 18:39
1. 검색 창에 찾을려는 '제목' 을 입력 2. 제목 입력 성공시 router.push 를 통해 url에 ?title="제목" 을 넣어줌 => "/pathname?title="제목" const onSubmit = (data: FormProps) => { const { title } = data; router.push(`${pathname}?title=${title}`); }; 3. 나는 pathname에 접근하면 react-query를 통해 쿼리 키에 따라 데이터를 받아오도록 해놨었다. 4. useSearchParams를 통해 "title"을 get 해옴. 없다면 undefined. // /pathname component const searchParam = useSearchParams(); const ..
-
next.js 에 kakao map 띄우기 (feat. react-kakao-maps-sdk)FrontEnd/Next.js 2024. 2. 6. 15:31
카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키..
-
[next.js] react-quill 에디터 값을 출력하기 (feat. dangerouslySetInnerHTML )FrontEnd/Next.js 2024. 1. 31. 22:20
import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'..
-
aws ec2에 배포하기 ( 인스턴스 생성부터 ) - 2023.12 기준 (작성중)BackEnd 2023. 12. 1. 16:41
1. 인스턴스 생성 2. 인스턴스 접근 - ( 인스턴스 연결 4가지 방법 ) 3. 깃허브에 있는 프로젝트 인스턴스에 올려보기 4. 해당 프로젝트 실행을 위해 npm 설치 (npm 설치하면 node도 같이 설치 됨) 5. 이후 프로젝트를 위해 npm install 을 입력했더니 prisma 는 node 16버전 이상이어야 한다고 함. (현재 10버전) 6. node 업데이트를 위해 nvm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 7. 터미널 재실행하거나 export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || print..
-
Link , Router 비교FrontEnd/Next.js 2023. 11. 16. 16:03
페이지 이동시 태그를 사용하는 것은 SPA 페이지인 Next.js 에서 효율적이지 못함. a 태그로 이동 시 새로고침을 하기 때문에 그 과정에서 빈 화면이 보일 수도 있고 통신을 새롭게 하다 보니 성능 및 사용자 경험 측면에서 떨어질 수 밖에 없다. 새로고침 없이 페이지 이동을 위한 (SPA에 위배되지 않기 위해) 라우팅 방식에는 와 Router 가 있음 1. Link Link 태그에는 href 속성을 추가하여 가고자 하는 주소(페이지)를 넣는다 새로고침 없이 페이지 전환이 됨. Client-side navigation 방식으로 , JS로 페이지 전환이 이뤄짐 is a React component that extends the HTML element to provide prefetching and cli..
-
[Next.js] pusher 라이브러리카테고리 없음 2023. 8. 2. 10:37
Pusher.js는 실시간 웹 기술을 구현하기 위해 사용되는 클라이언드 사이드 라이브러리. 웹과 앱에서 실시간 데이터를 전송하는데 사용되며, 소켓 통신을 기반으로 작동 됨 Pusher.js의 두 가지 주요 구성 요소 Pusher 객체: 웹에서 사용 가능한 Pusher 라이브러리로, 웹 소켓 연결을 설정하고 실시간 데이터를 주고 받음 Pusher Channels: Pusher는 채널 시스템을 통해 데이터를 전송함. 채널은 특정 주제에 데이터를 게시하고 구독하는데 사용함. client는 원하는 채널에 가입하고 해당 채널로부터 데이터 업데이트를 수신함. pusher를 사용하기 위해서는 API키를 얻어야 함. 이 후 클라이언트와 서버 양쪽에서 pusher라이브러리 로드 웹 소켓을 지원하지 않는 브라우저에서는 p..
-
[Next.js] libs 폴더에는?FrontEnd/Next.js 2023. 7. 15. 17:59
libs 폴더는 Next.js 프로젝트에서 프론트엔드 개발자들이 사용하는 라이브러리 및 유틸리티 함수들을 모아놓는 공통 디렉토리 공통 함수 및 유틸리티: libs 폴더는 여러 컴포넌트나 페이지에서 공통으로 사용되는 함수나 유틸리티 기능들을 저장하는 곳입니다. 이러한 함수들은 중복 코드를 피하고 코드 재사용성을 높이는 데 도움을 줍니다. 외부 라이브러리 및 통합: libs 폴더는 프로젝트에서 사용하는 외부 라이브러리들을 관리하는 곳으로 활용될 수 있습니다. 예를 들어, Next.js에서는 libs 폴더에 외부 라이브러리들을 가져와 사용하는 코드를 작성할 수 있습니다. API 클라이언트: libs 폴더는 백엔드 API와 통신하는 클라이언트 코드를 작성하는 데 사용될 수 있습니다. 예를 들어, REST API..
-
[Next.js] NextAuth로 로그인 처리하기(feat. 로그인 페이지 커스텀)FrontEnd/Next.js 2023. 1. 23. 19:19
export default NextAuth({ providers: [ CredentialsProvider({ id: "email-password-credential", name: "Credentials", //NextAuth에서 만들어주는 Form 태그의 로그인 버튼에 노출될 텍스트 type: "credentials", credentials: { email: { label: "email", type: "email", }, password: { label: "password", type: "password", }, }, async authorize(credentials) { if (!credentials) throw new Error("잘못된 입력값으로 인한 오류 발생"); const { email, pa..