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

전체 글

 (236)
[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)를 기본 라우트로 연결해주기..
[Next.js] Next.js 프로젝트 시작하기 (Page Router ver.) Next.js를 완전 처음 접하는 입문자 기준에서, Next 프로젝트를 시작하는 법을 알아보자!      1.  폴더를 하나 생성한다. (필자가 만든 폴더 이름은 "onebite-next")      2. VsCode에서 "onebite-next" 폴더를 연다.      3. 터미널에 아래와 같은 명령어를 입력한다.  npx라는 도구를 이용해서 새로운 next 앱을 생성하는 명령어이다.npx create-next-app@14 section02 * npx : "Node Package Executor" → npm.js.com에 등록돼있는 최근버전의 Node 패키지를 다운로드 없이 바로 실행시키는 명령어* create-next-app : Next.js 공식문서에서 안내하고 있는 새로운 Next 앱을 생성하는 ..
[React] KAKAO(카카오) 지도 API 사용법, 웹에 카카오맵 불러오는 법 KAKAO 지도 API를 사용해서 카카오맵을 불러오는 법을 알아보자!     만들 예제의 완성본  - 마커(파란색 핀)로 해당 장소의 위치를 표시 - 마커 위에 인포윈도우를 표시 (상호명, 큰지도보기, 길찾기)- 지도 확대/축소를 설정할 수 있는 줌 컨트롤을 생성- 지도를 마우스 드래그로 이동 가능- 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도 타입 컨트롤을 생성 - 마우스 휠 확대/축소는 비활성화   구현된 카카오맵 사용 영상       1. 카카오 개발자(developers) 사이트에 방문한다.  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공..
[TypeScript] 타입 호환 (Type Compatibility) 목차 1. "타입 호환"이란?2. 타입 호환의 기준 3. 명목적 타이핑 vs 구조적 타이핑4. 덕타이핑 vs 구조적 타이핑5. 타입추론과 타입호환6. Enum 타입 호환 주의 사항7. Class 타입 호환 주의 사항8. Generics 타입 호환   타입 호환에 대해서 알아보자!      1. "타입 호환"이란?  * 타입 호환: 타입스크립트 코드에서 특정 타입의 값을 다른 타입으로 사용할 수 있는지 여부를 결정하는 기준     2.  타입 호환의 기준  TypeScript에서 타입을 비교할 때, 객체의 구조나 모양이 일치하면 타입이 호환된다고 본다. 즉, TypeScript에서는 명목적 타이핑이 아니라 구조적 타이핑을 사용하기 때문에, 타입의 이름이 달라도 속성이 같으면 서로 호환된다.     3. 명..
[React] 리액트로 라디오 버튼(Radio button) 만들기 (신고 모달창 만들기) 리액트로 라디오 버튼을 만들어보자!       만들 예제의 완성본  - 버튼이나 텍스트를 클릭하면 버튼이 파란색으로 바뀐다.- 버튼을 hover 하면 버튼 테두리가 회색으로 바뀐다.      Radio 컴포넌트 만들기  Radio 컴포넌트는 개별 라디오 버튼을 나타낸다. 라디오 버튼은 HTML에서  요소의 type 속성을 radio로 설정해주면 얻을 수 있다.라디오 버튼은 여러 개의 선택 사항 중에 사용자로 부터 하나를 선택받기 위해서 사용된다. 텍스트를 클릭햇을 때도 라디오 버튼이 선택될 수 있도록 하려면,  요소로  요소와 children prop 모두 감싸주면 된다.  Radio.jsx import "./Radio.css";export const Radio = ({ children, value, n..

티스토리툴바