profile
⏰ Good things take time
태그 목록
전체보기 (153)자바스크립트(18)React(15)JavaScript(13)next.js(12)Spring(12)리덕스(12)redux(12)타입스크립트(11)정보처리기사(11)리액트(11)typescript(9)백준(9)python(8)파이썬(8)React Hooks(6)git(5)github(5)프로그래머스(5)코딩 테스트(4)computer science(4)tech-interview(4)알고리즘(4)자료구조(4)zustand(3)error(3)Java(3)CS(3)Database(3)MacOS(3)상태 관리(3)컨테이너(2)JDBC(2)구조 분해 할당(2)JSON WEB TOKEN(2)Hash Table(2)자료 구조(2)sql(2)webpack(2)스프링(2)react native(2)교차 출처 리소스 공유(2)useMemo(2)useRef(2)network(2)cors(2)branch(2)ES6(2)상태관리(2)MSW(2)디바운싱(1)programmers(1)terminal(1)data fetching(1)Styling(1)link(1)Mockoon(1)타입 호환(1)카카오 인턴(1)createRef(1)타입 별칭(1)git rebase(1)Async Logic(1)라이브러리(1)type inference(1)redux thunk(1)redux saga(1)merge(1)브라우저 렌더링(1)Knapsack Algorithm(1)소수 구하기(1)Type Aliases(1)cookies(1)Encrypted-Storage(1)stack(1)queue(1)git pull(1)REST(1)최대공약수(1)세션(1)쿠키(1)streaming(1)프로미스(1)First-class Function(1)코딩테스트(1)junit(1)BOM(1)객체(1)async-storage(1)네트워크 요청(1)Component Streaming(1)Ducks pattern(1)Class Component(1)Zulu(1)프론트엔드 개발환경(1)DP(1)해시 테이블(1)브라우저 객체 모델(1)라우팅(1)useRouter(1)MVC(1)프론트엔드(1)프로토타입(1)2024 KAKAO INTERNSHIP(1)콜백 함수(1)데이터 패칭(1)dequeue(1)react styling(1)git stash pop(1)await(1)서버(1)useEffect(1)Xcode(1)문서 객체 모델(1)searchParams(1)antialiasing(1)(1)기본 타입(1)git conflict(1)Bubble Sort(1)Insertion Sort(1)Merge sort(1)Quick Sort(1)Selection Sort(1)Spread(1)async(1)비동기(1)node.js(1)Fine Grained Reactivity(1)검색(1)class(1)SOLID(1)네트워크(1)리액트 훅(1)react hook(1)git stash(1)성능 최적화(1)바벨(1)웹 스토리지(1)store(1)리듀서(1)클래스형 컴포넌트(1)모던 자바스크립트(1)fsa(1)Deque(1)Suspense Streaming(1)리액트 네이티브(1)Diikstra Algorithm(1)Prettier(1)Debouncing(1)reducer(1)프론트엔드 개발 환경(1)DFS BFS(1)환경 설정(1)에라토스테네스의 체(1)Generic(1)Redix Sort(1)action(1)CI/CD(1)react testing library(1)DBMS(1)useNavigation(1)REST API(1)json(1)Intergration Test Code(1)baekjoon(1)클로저(1)Datagrid(1)array APIs(1)타입 추론(1)일급 함수(1)일급 객체(1)interface(1)인터페이스(1)coding test(1)async/await(1)리액트 쿼리(1)zsh(1)first class object(1)react-query(1)통합 테스트 코드(1)local storage(1)제네릭(1)데이터베이스(1)스토어(1)서버 컴포넌트(1)useContext(1)useReducer(1)함수(1)this(1)FGR(1)Code Formatter(1)DOM(1)M:1(1)event bubbling(1)LIS(1)API Mocking(1)middleware(1)CSS(1)useCallback(1)Heap Sort(1)생명주기 함수(1)Context API(1)냅색 알고리즘(1)CSR(1)SSR(1)메타데이터(1)Big-O 표기법(1)생성자 함수(1)Operating System(1)Page Streaming(1)Metadata(1)기본 설정(1)spring mvc(1)유클리드 호제법(1)클래스(1)명령어(1)params(1)로컬 스토리지(1)스택(1)array(1)키패드 누르기(1)실행 컨텍스트(1)servlet(1)자동 로그인(1)jest(1)redux-actions(1)fsd(1)LCA(1)node_modules(1)useLocation(1)Export data to Excel(1)액션 생성자(1)db(1)Binary Search(1)persist(1)OpenJDK(1)덕스 패턴(1)이벤트 버블링(1)babel(1)event delegation(1)rendering(1)Map(1)타입 단언(1)CRUD(1)Type Compatibility(1)(1)이벤트 캡처링(1)Throttling(1)깃허브(1)enums(1)시간 복잡도(1)컴포넌트 최적화(1)bitmask(1)운영체제(1)프로토타입 체인(1)devops(1).gitignore(1)boj(1)algorithm(1)data structure(1)closure(1)JPA(1)MyBatis(1)set(1)이넘(1)stash(1)sass loader(1)도커(1)session(1)container(1)세션 스토리지(1)event capturing(1)OS(1)자바스크립트 동작 원리(1)터미널(1)useSearchParams(1)routing(1)React.memo(1)스로틀링(1)Immer(1)type assertion(1)JSON Server(1)비구조화 할당(1)object(1)페이지 이동(1)mui(1)이벤트 위임(1)hydration(1)hooks(1)union type(1)웹팩(1)promise(1)
post-thumbnail

📚 제미나이 인공지능 프로그래밍

구글 코랩: 구글이 무료로 제공하는 파이썬 개발 환경구글 코랩에서 프로그램을 노트북(.ipynb)라는 파일에 작성 및 관리하며, 노트북은 구글 드라이브에 저장작성한 노트북을 열면 구글 코랩의 인스턴스 실행( 인스턴스: 클라우드상의 가상 서버)노트북에서 파이썬 스크립트를

2025년 8월 28일
·
0개의 댓글
·

인증과 사용자 세션

stateful session: 사용자 상태를 전부 서버에서 관리하고 특정 세션 쿠키를 사용해서 이 세션을 해당 클라이언트와 연결→ 초기 구현 단계에서는 사용하기 쉽지만 규모가 커지면 복잡도 증가예를 들어, 로그인 성공 시 웰컴 페이지를 렌더링해야 한다고 가정할 때사용

2025년 8월 25일
·
0개의 댓글
·

기능 분할 설계(Feature-Sliced Design, FSD)

기능 분할 설계(Feature-Sliced Design, FSD)레이어, 슬라이스, 세그먼트의 세 가지 개념으로 구분레이어레이어는 최상위 디렉토리이자 애플리케이션 분해의 첫 번째 단계각 레이어에는 고유한 책임 영역이 존재app - 프로바이더, 라우터, 전역 스타일, 전

2025년 8월 21일
·
0개의 댓글
·

FGR(Fine Grained Reactivity): 리액트 리렌더링 문제 해결 (ing)

사용하지 않는 프로퍼티를 바꿔도 리렌더링이 일어나지 않는 방법많은 컴포넌트들이 불필요하게 리렌더링됨에 따라 앱이 버벅거리며 느려지는 현상 발생→ useMemo, useCallback, React.memo를 써서 최적화할 수 있지만, 근본적인 해결책은 아님(이러한 방법들

2025년 8월 20일
·
0개의 댓글
·
post-thumbnail

[Zustand] 불변성과 중첩 상태 관리 (immer)

불변성을 유지하면서 가변처럼 상태를 바꿀 수 있게 해주는 도구draft는 프록시 객체원본은 변하지 않고새로운 불변 객체를 생성

2025년 8월 10일
·
0개의 댓글
·
post-thumbnail

[Zustand] 미들웨어 (persist)

상태를 새로 고침하거나 앱을 닫았다가 다시 열어도 상태를 유지할 수 있게 해주는 기능persist 미들웨어 옵션으로 partialize 속성을 전달예) context 내부에 위치 정보 이외에도 유저 정보나 설정 값 등이 들어가 있을 수 있는데, 이때 position만

2025년 8월 8일
·
0개의 댓글
·
post-thumbnail

[Zustand] Zustand 설계 및 패턴

① 스토어 내부에 비동기 함수 정의 상태 관련 로직이 한 곳에 집중 상태 변경 흐름이 캡슐화 컴포넌트가 심플② 비동기 로직을 외부에서 호출, 내부에서 상태만 관리 상태 업데이트와 API 호출 분리 복잡한 로직도 관리 용이 API 함수 재

2025년 8월 7일
·
0개의 댓글
·
post-thumbnail

[Next.js] Streaming

큰 파일을 여러 개의 조각으로 잘게 쪼개어 연속적으로 전송하는 기술먼저 도착하는 컴포넌트만 화면에 렌더링하고, 아직 도착하지 않은 컴포넌트는 스켈레톤 UI나 로딩 UI 등을 활용해서사용자에게 아직 로딩이 완료되지 않았다는 점을 명시적으로 보여줌스트리밍은 Dynamic

2024년 12월 6일
·
0개의 댓글
·
post-thumbnail

[Error] Next.js 15 searchParams, params 사용 방법 변경

검색어에 해당하는 도서 아이템의 정보를 가져오는 코드를 작성하는 도중, 빌드시 타입 오류로 인해 다음과 같은 에러가 발생했다.참고로 useSearchParams는 현재 URL의 query string을 읽을 수 있게 해주는 Client Component 훅이다.awai

2024년 12월 5일
·
1개의 댓글
·
post-thumbnail

[Next.js] Next.js 렌더링 동작 원리 (with Hydration)

React에서 렌더링되는 과정과 Next에서 렌더링되는 과정을 살펴보면 다음과 같은 차이가 있다.HTML과 JS파일을 한꺼번에 보내고, 클라이언트에서 JS코드를 통해 웹 화면을 렌더링한다.Pre-rendering된 HTML을 클라이언트에 전송그 이후에 번들링된 Reac

2024년 12월 4일
·
0개의 댓글
·
post-thumbnail

디바운싱(Debouncing)과 스로틀링(Throttling)

디바운싱은 프로그래밍에서 많이 사용되는 개념으로, 주로 이벤트가 너무 빈번하게 발생하는 것을 최소화하기 위해 사용한다.자주 일어나는 이벤트를 감당하지 않고 일정 시간동안 이벤트가 일어나지 않으면 마지막 이벤트만 처리하는 방식이다.예를 들어, 사용자가 입력창에 글자를 입

2024년 9월 10일
·
0개의 댓글
·
post-thumbnail

React Query

React Query React Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술로 데이터 가져오기, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 상태 관리 라이브러리이다. DB에서 가져온 데이터를 클라이언트에

2024년 8월 27일
·
0개의 댓글
·
post-thumbnail

React 성능 최적화

1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처는 웹 애플리케이션의 복잡한 UI를 재사용 가능한 단위로 분할하는 방식을 말한다. 컴포넌트는 자체적으로 상태와 속성을 가지고 있으며, 독립적으로 작동한다. 각 컴포넌트는 특정 기능이나 UI의 한 부분을 책임진다.컴포넌

2024년 8월 26일
·
0개의 댓글
·
post-thumbnail

[Git] fatal: Need to specify how to reconcile divergent branches.

fatal: Need to specify how to reconcile divergent branches.git pull을 하려고 하니 fatal: Need to specify how to reconcile divergent branches. 오류가 발생했다.직역하자면

2024년 6월 18일
·
0개의 댓글
·
post-thumbnail

[Git] git stash, git stash pop

Git Stash는 새로운 브랜치에서 저장하기 전에 다른 브랜치로 이동할 때 사용한다.즉, 공식적으로 커밋하고 싶지는 않은데 다른 브랜치로 이동해야 할 때 사용한다.수정한 것을 커밋하지 않은 채로 다른 브랜치로 이동하려고 하면아래와 같은 에러 메시지가 발생하고, 다른

2024년 6월 11일
·
0개의 댓글
·
post-thumbnail

CSS: white text on black background, looks better

antialiasing 적용 전검은색 배경에서 흰색 텍스트를 사용하면 텍스트가 실제 보이는 것보다 더 두꺼워 보인다.브라우저에서 사용되는 antialiasing으로 인해 텍스트가 굵게 표시되는데,이는 일반적으로 텍스트가 검은색 바탕에 흰색일 수록 반전되어 더 두꺼워 보

2024년 6월 9일
·
0개의 댓글
·
post-thumbnail

[Git] git stash 명령어로 임시 저장하기

git stash: 하던 작업을 임시로 저장해두고 싶을 때 사용하는 명령어어떤 작업을 하던 중에 다른 요청이 들어와 하던 작업을 멈추고 잠시 브랜치를 변경해야 할 때, 아직 완료하지 않은 일을 commit하는 것은 껄끄럽기 때문에 git stash라는 명령어를 사용한다

2024년 5월 22일
·
0개의 댓글
·
post-thumbnail

[Git] Branch 작업 순서

main branch 내려받기 보통 main branch에는 기본적인 환경세팅을 마친 작업 파일이 담겨져 있다. main branch 파일을 내려받아 각자 맡은 영역을 자신만의 branch를 만들어 작업을 수행하게 된다. [repo_url] repository 주소

2024년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React-Native] Async-Storage / Encrypted-Storage 사용법

React-Native에서 스토리지를 다루기 위해 사용하는 두 가지 라이브러리에 대해서 정리해보려고 한다. 바로 Async-storage와 Encrypted-storage이다. 스토리지(Storage)를 왜 써야 하는지, 또 어떤 데이터를 넣어야 하며, redux와는

2024년 3월 28일
·
2개의 댓글
·
post-thumbnail

useEffect 내에서 async/await 사용하기

앱을 다시 실행할 때, 토큰이 있으면 자동 로그인이 되도록 코드를 구현하는 과정에서 useEffect 내에서는 async/await 구문을 사용하지 못 한다는 것을 알게 되었다. 따라서 아래와 같은 코드는 사용할 수 없다. useEffect 내에서 async/a

2024년 3월 28일
·
4개의 댓글
·