본문 바로가기

전체 글74

[자료구조] Stack과 Queue Stack과 Queue 스택(Stack)과 큐(Queue)는 데이터를 임시로 저장하기 위해 디자인된 추상적인 데이터 구조이다. 데이터를 저장하는 순서에 따라 구분된다. # 스택(Stack) 한쪽 끝이 막혀 있는 형태의 저장 공간이다. 데이터가 차곡차곡 쌓아 올려지는 형태로 저장되고, 저장한 자료를 빼낼 때는 마지막으로 저장한 데이터부터 사용하게 된다. 즉, 나중에 저장한 데이터를 가장 먼저 사용하는 데이터 관리 방식인 후입선출 방식(LIFO, Last In First Out)이다. 데이터는 스택의 끝에서만 삽입, 삭제할 수 있으며 스택의 마지막 원소만 읽을 수 있다. 스택 사용 사례 : 웹 브라우저 방문 기록 (뒤로 가기), 실행 취소 등 # 큐 (Queue) 스택과는 달리 양쪽이 열려 있는 형태의 저장.. 2023. 10. 6.
[고민] 주니어 개발자의 고민: 같은 내용, 다른 코드 주니어 개발자의 고민: 같은 내용, 다른 코드 좋은 코드란 무엇일까에 대한 고민 고민의 시작 좋은 코드란 무엇일까? 개발 공부를 시작한 이후로 늘 하게 되는 고민이다. 개발이라는 분야에 처음 들어왔을 때는 단순히 '개발자가 되는 것'이 목표였는데, 개발자가 되고 난 후에는 '좋은 코드를 짜는 개발자가 되는 것'이 목표가 되었다. 시간이 흐르고 연차가 차면 무조건 좋은 코드를 짤 수 있게 될까? 꼭 그렇지만은 않을 것 같다😢 매일 의미 없는 코드만 작성한다면 시간이 흘러도 개발 실력에는 발전이 없을 것 같다는 두려움이 있다. 그렇다면 어떻게 해야 의미 있는 코드를 작성할 수 있을까? 이제 막 개발 분야에 발을 들인 주니어로서 좋은 코드를 위해 어떤 연습을 해야 할지 고민이 되었다. 같은 내용, 다른 코드 .. 2023. 9. 4.
[React] 반응형 디자인 직접 코드로 구현해보기 반응형 디자인 직접 코드로 구현해보기 커스텀 반응형 구현하기 웹 개발을 하던 중 문득 궁금해졌다. 반응형 디자인을 직접 만들어 보면 어떨까?! css 라이브러리 혹은 @media로 구현하던 반응형 디자인을 React 코드로 구현할 수 있을까? 직접 구현해보면 재밌을 것 같아서 찾아본 결과, useEffect를 사용하면 가능하다는 걸 알게 되었다. 🥴 # 화면 사이즈에 event 걸기 const [screenWidth, setScreenWidth] = useState(window.innerWidth); useEffect(() => { const changeScreenWidth = () => { setScreenWidth(window.innerWidth); }; window.addEventListener(".. 2023. 8. 9.
[Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법 간단한 상태 관리, React에서 Zustand 사용하는 방법 Redux에서 벗어나 봅시다 Zustand 도입 계기 프로젝트를 개발하다 보면 전역 상태 관리는 거의 필수이다. 컴포넌트에서 컴포넌트로 변수를 넘겨줄 일이 많은데, 그 많은 변수들을 전부 props로 넘겨줄 수는 없기 때문이다. 따라서 전역 상태 관리 라이브러리를 도입할 수 밖에 없고, 그중에서도 가장 대표적인 툴은 아마 Redux일 것이다. 나 또한 Redux를 사용했다. 정확히 말하면 Redux Toolkit을 사용했다. 이미 많은 사람들이 사용하는 툴이고, 그래서 정보도 많고, 공부할 때 참고할 자료도 많았다. 그래서 너무 당연하게도 나에게 상태 관리란 곧 Redux Toolkit이었다. 하지만 점점 문제를 느꼈다. 뭐가 문제나면... .. 2023. 7. 15.
[고민] 기술 블로그에는 어떤 글을 작성해야 할까 기술 블로그에는 어떤 글을 작성해야 할까 좋은 글이란 뭘까에 대한 고민 기술 블로그 시작 계기 처음 기술 블로그를 시작한 이유는 단순 공부 기록용이었다. 개발 공부를 시작한지 얼마 안 된 시점이었을 때의 나는 기본적인 개발 지식이 부족했다. 그런 의미에서 내가 공부한 내용을 노트 정리하듯 글로 기록하면 더 이해가 잘 되지 않을까? 라는 마음으로 기술 블로그를 시작하게 됐었다. 학창 시절 수업 시간에 배운 내용을 노트에 다시 정리하며 공부했던 것처럼, 공부한 내용을 나의 언어로 다시 작성해보는 것이 얼마나 도움이 되는지 알기 때문에 기술 블로그에 꾸준히 공부한 내용을 기록하는 글을 작성했었다. 또한 기술 공유의 의미도 있었다. 내가 개발 과정에서 알게 된 것, 그리고 개발하는데 필요한 기본 지식을 글로 올.. 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.

티스토리툴바