개발기록창고

taskgrow 프로젝트에서 할 일 리스트를 유저가 중요도에 따라 자유롭게 순서를 변환할 수 있도록 UX 개선이 필요하다. 불필요한 리렌더링을 줄이기 위해 useRef를 사용해서 구현했다. 순서를 바꾸는 구현에 있어 생각이 많았다. 단순한 것이지만 드래그라 쉽게 변경 가능함 -> 많은 요청 으로 유저가 최종적으로 수정을 마친 후 한 번만 요청을 보낼 수 있도록 생각을 해보았지만.. 클라이언트에서 순서 저장해두고 있다가 해당 테스크를 벗어나면 변경된 order 서버에 요청 -> 순서 옮기고 브라우저 창을 닫으면 적용 안됨 순서 변경 버튼 생성 -> 버튼 클릭 후 자유롭게 순서 변경 가능 -> 확인 버튼 클릭시 변경된 order 서버에 요청 -> 유저 번거로움 와 같은 문제로 딱히 좋은 방법이 떠오르지 않았..

Taskgrow라는 뽀모도로 프로젝트에서 UX를 개선하기 위한 작업을 시작했다. 현 서비스는 뽀모도로(타이머를 활용해서 25분간 집중해서 일하고, 5분간 휴식하는 기법)를 제공하고 있다. 페이지에서 타이머 시작을 클릭해놓고 다른 페이지에서 작업을 진행할 때 몇 분이 남았는지 매번 확인하기 위해서는 페이지를 방문해야하는 불편함이 있다. 이를 해결하기 위해 HTML title에 남은 시간을 표시하고 favicon은 시간의 흐름에 따라 시간의 흐름을 보여주면 1. 유저가 굳이 페이지를 클릭후 남은 시간을 확인할 필요없이 title로 남은 시간 확인 가능 2. favicon으로 시각적으로도 어느정도 흘렀는지 체크 가능 UX 개선이 가능했다. 항상 정적으로 만들다가 동적으로 처음 만들어보는 거라서 어렵지 않을까 ..

PR에 잘못 올라간 commit을 삭제해야했는데 최근 commit이라면 git reset --hard HEAD~1 해주면 될텐데 중간에 껴있는 commit이라서 애매했다. 1. git log로 삭제하려는 커밋의 부모 커밋 해시 찾기 2. git rebase -i 3. 텍스트 에디터가 열리는데 삭제하고 싶은 커밋 앞에 pick 단어를 drop으로 변경하거나 줄 자체를 삭제하기 -> 나는 drop으로 변경이 안돼서 그냥 줄 자체를 삭제했다. 4. :wq 로 에디터를 닫는다 적용해보니 깃 그래프가 이렇게 만들어진다! 삭제한 커밋을 제외한 나머지가 다시 그래프로 그려진다.

1. 옮기고 싶은 브랜치 git checkout {branch} 2. git cherry-pick {commit 해시 번호} 3. 잘못 올린 브랜치에서 git reset HEAD로 커밋 삭제

협업을 하게 되면서 그저 혼자 하면서 커밋만 하던 때와 달리 브랜치를 생성하게 되면서 PR을 알게 되었다. 코드를 병합하는 과정에서 어떤 부분이 변경됐는지 서로 확인이 가능하고 코드 리뷰도 할 수 있다. 그렇다면 브랜치는 어떻게 만들까? git checkout -b {브랜치명} git branch git checkout 으로 브랜치 생성과 체크아웃을 동시에 한다. 그러고 git branch하면 새로 만들어진 브랜치가 생성되었다는 것을 확인할 수 있다. 코드를 작성하고 새로 만든 브랜치에 Push하는 방법은 git add . git commit -m "{커밋메시지}" git push origin {브랜치명} 를 한다. PR을 생성하고 날려서 팀원들에게 코드 리뷰와 확인을 받고 문제가 없으면 main으로 m..

팀 프로젝트를 하게 되면서 처음으로 브랜치를 만들어보았다. 그동안 메인에서 push를 했는데 다른 분들이 브랜치로 PR을 만드는 걸보고 나도 브랜치를 만들어서 하려다가 꼬여서 잘못된 PR을 여러개 올렸었는데 close기능만 있고 삭제기능은 없었다. https://support.github.com/request Sign in for Software Support and Product Help - GitHub 지원 support.github.com 깃허브에 문의 넣으면 처리해준다. 나는 3개를 삭제요청을 했는데 모두 24시간내로 삭제해주었다! (close여부와 상관없이 삭제해줬음) 위에 링크를 들어가서 내가 가지고 있거나 제어하는 리포지토리에서 데이터 제거하기 클릭하고 끌어오기 요청 제거하기 클릭을 해주면 ..

프로젝트를 하면서 데이터 캐싱이 필요하여 상태관리의 필요성을 느끼게 되었고 그중 react query에 대해 알아보고자 유튜브에서 kakao tech와 우아한 테크세미나에서 좋은 내용을 보게 되어 이를 정리하고자 게시글을 작성하게 되었다. 눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유 / if(kakao)2022 1. React-Query 조금 알아보기 React-Query는 주로 데이터 패칭, 캐싱, 동기화 작업을 한다. React에서도 위의 작업은 가능하나 많은 테스트와 시간을 필요로 함 > 자체적으로 hook 만들어야함 ContextAPI, useState, useEffect, useCallback, 캐싱, 에러핸들링 등 많은 고려사항을 가져가야함 하지만 R..

프로젝트를 하면서 컴포넌트를 어떻게 나눌 것인지, 재사용을 극대화하는 방향에 대해 고민하던 중에 아토믹 디자인을 알게 되었다. 그리고 디자인 시스템인 아토믹 디자인을 알게 되면서 리액트가 컴포넌트 기반의 프로그래밍인 것은 알고 있었으나 이 개념을 충분히 활용하지 못했다는 것을 깨달았다. 아토믹 디자인이란? 컴포넌트를 가장 작은 단위부터 상위 컴포넌트까지 만들어서 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인은 컴포넌트 중심 설계 패턴에서 주목받게 되었다. 원자(atom), 분자(molecule), 유기체(organism), 템플릿(template), 페이지(pages)로 효과적인 인터페이스 시스템을 만든다. 1. 원자 가장 작은 단위의 구성 요소 (분해 될 수 없음) 애니메이션, 색상 팔레트..

API란? API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체 API 유형 1. private API 제 3자에게 노출되지 않음. 기업 내부에서 사용하는 API 2. public API 누구나 제한없이 사용할 수 있는 개방형 API 3. partner API 기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있는 API REST란? Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처로 HTTP를 기반으로 필요한 자원에 접근하는 방식을 정해놓은 아키텍처라고 할 수 있음 여기서 자원은 소프트웨어가 관리하는 모든 것(문서, 그림, 데이터 등)을 의미한다 REST는 웹의 기존 기술과 HTTP프로토콜을 그대로 활용하기 때문에..

네트워크 요청을 할 때 Axios, Fetch와 같은 HTTP 클라이언트를 사용한다. Fetch는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스로 모던 브라우저에 내장되어있어 별도의 설치가 필요없다. Axios는 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있다. 둘 다 promise 기반의 HTTP 클라이언트이다. Axios node.js환경에서 설치 방법 1. npm install axios 2. 프로젝트에서 import axios from "axios"; 기능 비교 1. 문법 - Fetch 두개의 인자를 받는다. 1. 가져오고자 하는 리소스 URL 2. 요청의 설정 옵션을 포함하는 객체 (선택적 인자로 넘기지 않으면 기본 GET 요청) fetch(url, { method..