분류 전체보기49 [단상] 일 잘하는 사람의 특징 '일 잘하는 사람의 특징' 에 대한 나의 생각을 정리했습니다. 🔽 예상 독자- 일을 잘하고 싶은 주니어 개발자- 일을 잘하는 사람들의 특징을 알고 싶은 사람 🔽 들어가며최근 일 잘하는 사람의 특징에 대해 곰곰히 고민해보게 되었다.나의 해우소와 마찬가지인 #쩡킹출몰지역에 질문을 던졌고 인상깊은 내용들이 많았다. 아래는 그 대화들을 정리하고, 나 스스로 곱씹어본 생각들이다. 🔽 야근 없이 제시간에 끝내는 힘일 잘하는 사람의 첫 번째 특징은 정해진 시간 내에 업무를 완료하는 능력이다. "야근 안하는데 자기일 다 하는사람"이라는 표현이 핵심을 보여준다.이는 단순히 빠르게 일하는 것이 아니라 우선순위를 정확히 파악하고, 중요한 일부터 처리하는 능력에서 나온다. 시간을 투입하는 것과 성과를 내는.. 2025. 9. 3. [아키텍처] FSD 아키텍처 : Feature-Sliced Design 🔽 목표늘 '팀 프로젝트를 잘하려면 어떻게 구조를 설계/분리해야할까?'라는 궁금증이 생겼다. '잘 분리'하기 위해서는 재사용성이 좋게 역할과 책임을 분리해야하고, 다른사람이 이해하기 쉬운 코드가 가장 중요하다고 생각했다. 그래서 다른 개발자가 협업함에 있어서 가독성이 좋고, 역할과 책임이 잘 분리된 구조를 설계해보는걸 목표로 진행중이던 프로젝트를 수정해봤다. 🔽 현재 구조적 문제 상황아래는 기존 프로젝트 구조로 페이지 단위로 분리되었다.react-shopping-cart├─ src│ ├─ apis 👈 api│ │ ├─ cartItems│ │ └─ httpClient.ts│ ├─ pages .. 2025. 6. 12. [TypeScript] type vs interface 🔽 TypeScript에서 type과 interface의 차이 및 선택 기준최근에 TypeScript에서 데이터를 패치하고 받아오는 과정에서 데이터 response의 타입을 지정할 때, type과 interface 중 무엇을 써야 할지 고민이 생겼는데요. 두 가지 모두 객체의 구조를 정의할 수 있지만, 각각의 특징과 차이점이 존재합니다.오늘은 이 내용에 대해 정리해보고자 합니다! 🔽 type alias, interface타입스크립트에서 객체 타입을 지정하는 방식으로 거의 비슷한 기능을 가진다.type B = { a: string; b: number;};interface C { a: string; b: number;} 🔽 확장 방식type aliastype TA = { a: strin.. 2025. 6. 3. [UX 개선] 낙관적 업데이트(Optimistic Update) 🔽 낙관적 업데이트란?낙관적 업데이트(Optimistic Update)는 사용자가 어떤 작업(예: 데이터 수정, 삭제, 추가 등)을 요청했을 때, 서버의 응답을 기다리지 않고 UI를 즉시 변경하여 사용자가 빠른 피드백을 받을 수 있도록 하는 기법입니다. 즉, 서버가 요청을 성공적으로 처리할 것이라고 가정하고, 미리 화면을 업데이트하는 방식입니다. 이 방식은 네트워크 지연이나 서버 응답이 느린 환경에서도 사용자 경험(UX)을 크게 개선할 수 있습니다. 다만, 서버 요청이 실패할 경우 UI와 실제 데이터가 불일치할 수 있으므로, 실패 시 원래 상태로 되돌리는(롤백) 처리가 반드시 필요합니다. 🔽 리액트에서의 낙관적 업데이트 예시 1. 직접 상태 관리 (useState 등)예를 들어, 할 일(Todo).. 2025. 6. 3. [TanStack Query] 서버 상태 관리 라이브러리 안녕하세요오늘은 서버 상태 관리 라이브러리인 TanStack Query에 대해 정리해보고자 합니다. 🔽 TanStack QueryTanStack Query(이전 명칭 : react-query)는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해줍니다. 🔽 왜 사용하는 가? (Why?)클라이언트 상태(useState, useReducer)와는 달리, 서버에서 가져온 데이터는 시간이 지나면 바뀔 수 있고, 언제든 다시 가져와야 할 필요가 있습니다.하지만 전통적인 방식(예: useEffect + axios + useState)으로 이걸 처리하려면 다음과 같은 문제가 발생합니다: ❌ 기존 방식의 문제점loading, error, data 상태를 직접 관.. 2025. 6. 2. [CPH] VSCode에서 테스트코드 편하게 돌리기! 안녕하세요아래와 같이 백준 문제 풀이를 하면서 테스트 코드를 편하게 돌리는 방법을 찾아보다가! CPH라는 방법을 알게되어 공유하고자 정리겸 왔습니다. 🔽 1. VSCode or IDE에서 'CPH(Competitive Programming Helper)'설치왼쪽 익스텐션 창에서 CPH를 검색하셔서 Install 버튼을 눌러주시면, 아래와 같이 install된 것을 확인할 수 있어요.저는 vscode가 아닌 Cursor를 사용하고 있어서 동일한 방법으로 설치했어요. 🔽 2. Competitive Companion은 크롬 익스텐션입니다. 아래의 링크로 접속해서 'Chrome에 추가'버튼으로 크롭 익스텐션을 추가해주세요.https://chromewebstore.google.com/detail/.. 2025. 5. 11. [nodejs] 백준 1057번 https://www.acmicpc.net/problem/1057 안녕하세요오늘 풀 문제는 백준 1057번, 실버4입니다. c/c++로 계속 코테를 준비해오다가 최근 python을 거치고 nodejs로 왔습니다 .. ㅎㅎ 🔽 입력 조건- 첫째 줄에 차례대로 N A B 를 입력받음.- N은 참가자의 수 (2보다 크거나 같고, 100,000보다 작거나 같은 자연수)- A는 김지민의 번호, B는 임한수의 번호이다.- A, B는 N보다 작거나 같은 자연수, 서로 다르다. 🔽 출력 조건- 첫째 줄에 김지민과 임한수가 대결하는 라운드 번호를 출력한다. - 만약 서로 대결하지 않을 때는 -1을 출력한다. ( 🔽 입출력입출력부터 까다롭더라구요우선 입출력 부터 확인해보겠습니다.const fs = .. 2025. 5. 9. [회고] 레벨2 1주차 회고 👉 우테코 FE 7기 레벨2 첫번째 미션 Payments를 진행하면서 2주간 들었던 생각과 배운 내용들을 정리한 회고글입니다. 🔽 새로 배운 내용들!- 새로운 미션으로 배운 것도 있지만, 페어 프로그래밍으로 페어에게 배운것들도 많았다. - [StoryBook] : 각각의 UI 컴포넌트를 독립적으로 개발·테스트하고, 다양한 상태를 시각적으로 빠르게 확인할 수 있는 도구 - [FSD 아키텍처] : 기능(feature) 기반으로 폴더 구조를 나누어 모듈화와 유지보수를 쉽게 하는 아키텍처. - 핵심 철학 - 기능 단위로 모듈화 → 관련된 UI, 상태, 비즈니스 로직을 한 폴더에 묶어 관리 - 의존성 방향을 명확히 → 상위 레이어에서 하위 레이어로만 의존 (예: shared .. 2025. 5. 3. [Git] 귀찮은 coauthor 설정 최근 페어프로그래밍을 하면서 계속해서 커밋 메세지에 "Co-authored-by .."를 써주는게 번거로웠다.템플릿으로 설정해서 설정하는 방법을 알아내서! 정리한다. 방법은 아주 간단하다. 🔽 1. coauthor.txt 생성Co-authored-by: {페어 닉네임} 🔽 2. git 에 템플릿 파일 지정터미널에 아래 명령어 실행git config commit.template coauthor.txt 🔽 다시 지정한 템플릿을 제거하는 경우터미널에 아래 명령어 실행git config --unset commit.template 2025. 4. 16. [Leethub] LeetCode와 Github 연동 🔽 목적최근에 리트코드로 코테 준비를 변경하면서, 백준허브와 같은 확장 프로그램이 없을까?를 찾아보다가 리트코드에 대해서도 있다는 것을 확인했다. 오늘은 리트코드를 백준허브처럼 LeetHub를 통해 깃허브에 연동해보자. 🔽 LeetHub 설치Leethub 확장 프로그램을 설치한다. 기존에 있던 확장 프로그램이 바뀌면서 v2로 설치해주어야한다.나는 이미 설치된 상태라서 삭제라고 뜨지만 처음 설치하는 경우 "크롬에서 설치"를 눌러주면 된다.위의 우측 사진과 같이 연동을 마치면 .. 아래와 같이 깃허브 레포지와 연동할 수 있는 창이 뜬다. 나는 기존에 깃허브 레포지가 있기 떄문에 해당 레포지의 이름을 작성해주었더니 아래와 같은 화면으로 연동되었다는 내용이 뜬다. 🔽 리트 코드에서 깃허브 레포지 .. 2025. 3. 8. 이전 1 2 3 4 5 다음
