본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Frameworks

 (9)
[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 2탄 Next.j에서 FireBase를 사용하는 방법을 아주 친절하게 설명해보겠다.   * 세팅 및 연동 방법은 1탄을 참고해주세요!https://dev-ini.tistory.com/278   1. FireStore 설정하기   1. 파이어베이스 홈페이지에 생성된 프로젝트에 들어가서 "Cloud FireStore" 버튼을 누른다.      2. "데이터 베이스 만들기"를 클릭하고 항목을 입력한다. 필자는 위치를 Seoul로 세팅하고 프로덕션 모드로 시작함.      3. 설정이 완료되면, 규칙으로 들어가서 읽기/쓰기 설정을 true로 바꾸고 게시 버튼을 누른다.      4. 다 했으면 "데이터" 항목에 들어가서 데이터를 추가해본다.       2. CRUD 구현하기   1. READ  데이터를 Read 하..
[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 1탄 Next.j에서 FireBase를 연동하고 사용하는 방법을 아주 친절하게 설명해보겠다.    *참고) 필자의 개발 환경- 프레임 워크: Next.js (15.0.3)- 라이브러리: React (18.3.1)- 언어: TypeScript- 파이어베이스 ver. 11.0.2   1. 파이어베이스 웹사이트에 들어간다. https://firebase.google.com/?hl=ko Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com    2. 하단에 "시작하기"를 누른다. (회원가..
[Next.js] 라우팅 (Routing) (App Router ver.) Next.js App Router 버전에서의 라우팅 방식을 알아보자!     Page Router 버전의 페이지 라우팅 - pages 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.   App Router 버전의 페이지 라우팅 - app 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.- 다만, app router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 된다.  동적 경로를 가지는 페이지를 만들 때는 폴더 아래에 [URL 파라미터] 아래에 page.tsx 이런식으로 만들면 된다.      1. app > 폴더 > page.tsx 파일 예를 들어, app > search 폴더 > page.tsx 파일을 만들면, URL은 http://localhost:3000/se..
[Next.js] Next.js 프로젝트 시작하기 (App Router ver.) Next 프로젝트를 App Router 버전에서 시작하는 법을 알아보자!     1. VsCode에서 프로젝트 폴더를 연다.      2. 터미널에 아래와 같은 명령어를 입력한다.  npx라는 도구를 이용해서 새로운 next 앱을 생성하는 명령어이다.npx create-next-app@latest section03 * npx : "Node Package Executor" → npm.js.com에 등록돼있는 최근버전의 Node 패키지를 다운로드 없이 바로 실행시키는 명령어* create-next-app : Next.js 공식문서에서 안내하고 있는 새로운 Next 앱을 생성하는 Node.js 패키지* @latest : 현재 설치하려는 Next.js의 최신 버전* section03 : 패키지의 이름     3..
[Next.js] 서버와 통신을 통해 검색창, 검색어, 검색 필터 기능 구현하기 (검색창 만들기) React, TypeScript 사용 Next.js, React, TypeScript를 사용하여 서버와 통신하여 검색창 필터 기능을 구현하는 방법을 알아보자!    만들 예제의 완성본  검색창에 키워드를 검색하면, 해당 검색 결과와 일치하는 데이터를 서버에서 가져와서 보여준다.       구현 코드    index.tsx   src/pages/search/index.tsx(검색 리스트를 보여주는 페이지) import SearchableLayout from "@/components/searchable-layout";import { ReactNode } from 'react';import BookItem from "@/components/book-item";import { GetServerSidePropsContext, InferGetServe..
[Next.js] 프리페칭(Pre-fetching) Next.js에서 프리페칭 하는 법을 알아보자!     프리페칭(Pre-fetching)  Pre-Fetching : 사전에 미리 불러온다  → 페이지를 사전에 불러온다!현재 사용자가 보고 있는 페이지에서, 이동할 가능성이 있는 모든 페이지들을 사전에 미리 다 불러놓는 기능이다.프리페칭을 통해, 사용자가 다른 페이지로 이동하는 링크를 클릭하기 전에, 현재 페이지에서 이동이 가능한 모든 페이지에 필요한 데이터를 미리 불러와놓음으로써, 페이지 이동을 매우 빠른 속도로 지체 없이 처리해줄 수 있게 된다.  HTML이 화면에 렌더링되고 난 이후, 초기 요청 시, 모든 페이지에 대한 자바스크립트 파일이 다 전달되는 것이 아니라,현재 접속 요청이 발생한 페이지에 해당하는 자바스크립트 번들 파일만 전달된다.그리고 페..
[Next.js] 네비게이팅(Navigating) Next.js에서 네비게이팅 하는 법을 알아보자!  네비게이팅(Navigating)  Next.js에서는 Link 컴포넌트를 통해 페이지를 이동시킬 수 있다. import Link from "next/link" 이런식으로 Link를 import하고, text 형식으로 작성하면 하면 링크가 생기게 된다.import type { AppProps } from "next/app";import Link from "next/link";export default function App({ Component, pageProps }: AppProps) { return ( index search book/1 )}    Progra..
[Next.js] 라우팅 (Routing) (Page Router ver.) Next.js에서 Page Router 버전에서의 라우팅 방식을 알아보자!특정 URL을 위한 페이지를 만들 때 파일 및 폴더 구조를 어떻게 설정해야하는지 알아보자.   1. pages > 파일  pages 안에 바로 파일을 만들면, 그 파일이름은 해당경로 이름이 된다.예를 들어, pages > main.tsx 파일을 만들면URL은 http://localhost:3000/main 이 된다.    2. pages > 폴더 > index.tsx 파일  pages 안에 main이라는 폴더를 만들고, 안에 index.tsx 파일을 만들면,이 경우에도 URL은 http://localhost:3000/main 이 된다.main 폴더 안에 있는 index.tsx 파일은 해당 폴더(main)를 기본 라우트로 연결해주기..

티스토리툴바