본문 바로가기

전체 글74

[고민] 기술 블로그에는 어떤 글을 작성해야 할까 기술 블로그에는 어떤 글을 작성해야 할까 좋은 글이란 뭘까에 대한 고민 기술 블로그 시작 계기 처음 기술 블로그를 시작한 이유는 단순 공부 기록용이었다. 개발 공부를 시작한지 얼마 안 된 시점이었을 때의 나는 기본적인 개발 지식이 부족했다. 그런 의미에서 내가 공부한 내용을 노트 정리하듯 글로 기록하면 더 이해가 잘 되지 않을까? 라는 마음으로 기술 블로그를 시작하게 됐었다. 학창 시절 수업 시간에 배운 내용을 노트에 다시 정리하며 공부했던 것처럼, 공부한 내용을 나의 언어로 다시 작성해보는 것이 얼마나 도움이 되는지 알기 때문에 기술 블로그에 꾸준히 공부한 내용을 기록하는 글을 작성했었다. 또한 기술 공유의 의미도 있었다. 내가 개발 과정에서 알게 된 것, 그리고 개발하는데 필요한 기본 지식을 글로 올.. 2023. 6. 8.
[React Query] useQuery로 검색 기능을 만들던 중 마주친 문제 useQuery로 검색 기능 만들기 # 문제 상황 검색 기능을 구현하기 위해 useEffect와 if 조건문을 사용하였다. input 태그로 검색어(searchText)를 입력하면 isSearching 변수가 true가 되고, isSearching가 true일 때 백엔드에 데이터를 요청하는 함수가 실행된다. 이를 구현하기 위해 사용한 코드는 다음과 같다. const [submitCheck, setSubmitCheck] = useState(true); const getItems = async (page: number) => { try { const response = await fetch(`/api/items?page=${page}`); const result = await response.json(); .. 2023. 5. 15.
[React] Context API와 useReducer 사용법 알아보기 Context API와 useReducer로 상태관리하기 # Redux 대신 Context API 로그인 기능을 구현하고 나면, 사용자의 정보를 변수에 담아 전역적으로 사용해야 한다. 그래서 Redux를 사용할까 하다가... 이 프로젝트는 전역적으로 관리해야할 정보가 사용자 정보 딱 하나밖에 없는데 Redux까지 사용할 필요가 있을까? 라는 생각이 들었다. 그래서 Redux 대신, React에서 제공하는 Context API를 사용해보기로 했다. 사용 방법은 간단하다. Context를 생성할 컴포넌트를 하나 만들고, creactContext와 useContext를 사용해주면 된다. // AuthContext.tsx import { createContext, useContext, useEffect, use.. 2023. 5. 11.
[자료구조] Hash Table Hash Table # 해시 테이블(Hash Table)이란 자료 구조의 한 종류로, key와 value라는 쌍으로 이루어진 값들의 리스트이다. 특정 프로그래밍 언어에만 있는 것이 아닌, 다양한 프로그래밍 언어에서 사용할 수 있는 자료구조이다. 다음은 해시 테이블이 아닌 일반적인 배열이다. list = [ { name: "A", age: 20 }, { name: "B", age: 21 }, { name: "C", age: 22 }, { name: "D", age: 23 }, { name: "E", age: 24 }, ] 만약 이 배열에서 "E"의 나이를 찾고 싶다면, 차례대로 하나하나 확인하는 선형 검색을 해야할 것이다. 그러나 선형 검색은 원소를 하나하나 확인해야 하기에 시간이 오래 걸린다는 단점이 있.. 2023. 5. 3.
[Next.js] getServerSideProps와 Head 태그로 검색 엔진 최적화하기 getServerSideProps와 Head 태그로 검색 엔진 최적화하기 검색 엔진에 유리하다는 Next.js를 사용해보자! # getServerSideProps 이용해서 API 데이터 가져오기 우선 코드 가장 하단에 getServerSideProps를 작성해주고 export default function에 { results } 형식으로 데이터를 가져온 뒤, 타입을 지정해주면 된다. // TypeScript 이용 시 타입 지정을 위해 아래 내용을 import 해주기 import { GetServerSideProps, InferGetServerSidePropsType } from "next"; export default function Home({results }: InferGetServerSideProp.. 2023. 4. 16.
[자료구조] 정렬 정렬 정렬되지 않은 배열이 주어졌을 때, 어떻게 오름차순으로 정렬할 수 있을까? 알고리즘에서 정렬의 방식은 크게 3가지로 설명할 수 있는데, 바로 버블 정렬, 선택 정렬, 삽입 정렬이다. 각 정렬이 무엇인지 알아보고 Big O를 비교하며 그 의미를 파악해보자. # 버블 정렬 : 두 개의 아이템 비교 1. 배열의 두 개 아이템을 비교한다. 만약 왼쪽이 오른쪽보다 크다면 순서를 바꾼다. 2. 오른쪽으로 이동하여 다시 두 개의 아이템을 비교한다. 3. 이 동작을 반복한다. 예제 (자료 출처 : https://youtu.be/Bor_CRWEIXo) 1. 5와 2를 비교한다. 5가 2보다 크기 때문에, 순서를 바꾼다. 2. 5와 6을 비교한다. 6은 5보다 작기 때문에, 순서를 바꾸지 않고 다음으로 넘어간다. 3.. 2023. 4. 2.

티스토리툴바