전체 글

못 본 척한 리페인트, 리플로우

# 그땐, 못 본 척했습니다. 3차 프로젝트 중반쯤 될 무렵, velog 글을 구경하다 웹 성능 최적화 방법이라는 글을 보게 되었다. 웹 성능 최적화 가 중요하다는 것은 이미 알고 있었지만, 구현에 집중하다 보니 , 나쁜 코드가 되지 않도록 주의하며 구현하는 것만으로도 내 실력으로는 벅찼기에 모른 척하고 있었다. 그나마 하는 것은 번들 사이즈를 줄이기 위해 무분별한 라이브러리 사용을 지양한다는 것 정도... 위 사이트에서 CSS 최적화에는 리플로우, 리페인트를 고려한 스타일 작성이 있다는 것을 알게 되었다. 리플로우를 발생시키는 속성과 리페인트를 발생하는 속성이 각각 있고, "리페인트 속성 사용하는 것이 성능에 좋다." 와 각 속성이 기재되어있었는데, 사실 제대로 이해가 되지 않았고, 이미 프로젝트는 중..

React Query (이젠 TanStack Query 라고 불리는 ..) 적용 (1)

1. 공식문서 읽어보자. ✔️ React Query is hands down one of the best libraries for managing server state. 이미 리액트 쿼리 공식문서에서도 자신 있게 best libraries라고 기재되어있는 리액트 쿼리를 Todo 프로젝트 적용해보기 전에 React Query에 대해 알아보자! # React Query 특징 1. 선언적이면서 자동화적이다. 구성이 필요 없는 즉시 캐싱, 백그라운드 업데이트 및 오래된 데이터를 처리한다. 2. 간단하면서 친숙하다. promise, async/await를 알고 있다면, 이미 react-query를 마스터했다고 할 수 있다. 3. 다양한 조작으로 확장 가능하다. 쿼리의 모든 observer 객체마다 다양한 설정을..

🧬 Atomic 디자인을 적용해보자.

# 아토믹 디자인 왜 사용하고 싶은지? 팀 프로젝트에서 pages, components 폴더로 나누고 공통으로 사용하는 컴포넌트들은 components 폴더에, 해당 페이지에 사용하는 컴포넌트들은 페이지 폴더에서 관리하도록 하였다. 아토믹 구조를 적용하고 싶었지만, 적용하지 못했는데 그 이유는 1. 피그마가 완벽히 되지 않은 상태, 그리고 계속 구현하면서 변경될 확률이 높음. -> 잘게 쪼개는 방식인 아토믹 구조를 적용하기에는 어려움이 생길 것 같은 생각이 들었다. 2. 개인 프로젝트가 아닌 팀 프로젝트, 정해진 기간 내에 프로젝트 마무리. -> 구조적인 측면에 시간을 쏟는 것보다 다른 코드 부분에 집중하는 것이 맞다는 생각이 들었다. 이러한 이유로 과할 수도 있지만, TodoApp에 적용해보기로 하였다..

💡 TypeScript 사용한 후기

TypeScript 을 공부하고 나서, 처음으로 TodoApp 에 적용하여 만들어 보았다. 사용하면서 느낀 장점과 소감을 간단하게 정리해보았다. # 객체 안의 속성 값을 기억하지 않아도 IDE 가 자동으로 리스트업 해준다. 객체, 함수의 매개변수로 들어오는 변수의 이름, type 까지 알 수 있기 때문에, 코드를 작성하는 데 있어서 개인적으로 훨씬 편했다. 복잡하지 않은 구조인 TodoApp 에서도 간편함을 느꼈기에, 훨씬 복잡한 구조였던 팀 프로젝트에 적용했더라면 하는 아쉬움도 생겼다. # 협업의 개발 생산성 향상 - 회사 프로젝트 사실 위의 글과 연결된 내용인데, 협업할때 개발 생산성을 높일 수 있다는 생각이 들었다. 개인 프로젝트는 단기간, 혼자 구현하는 코드이기에 나만 알아보는 코드가 되어도 실행..

💡 axios await/async vs then

📅 본 글은 2022년 5월 13일 개인 github 에 작성된 글입니다. 🚀 axios await / async vs then 프로젝트 배포 당일 밤을 꼬박 새우고 아침에 급하게 기능을 추가해야하는 일이 생겼다. 프론트에서는 내가 맡아서 하게 되었는데, 간단한 기능이여서 빨리 끝낼 수 있다는 내 예상과 달리,백 연결에서 문제가 생겼다. axios 를 이용해서 get 요청을 했는데, data를 가져오지 못했다..😵‍💫 처음에는 axios 문제인지 모르고 다른 부분에 문제인건가 하는 생각이 들어 이리저리 고쳐보다, 왜 이럴까...한참 고민하다 그냥 then 을 이용하니 data 를 가져올 수 있었다...거의 1시간 동안의 삽질이였다... 문제의 코드..🥲 const [commentList, setComme..

💡 평소대로 e.target.value를 이용했는데, 요소값을 가져오지 못한다..? - 팀 프로젝트

📅 본 글은 2022년 5월 12일 개인github 에 작성된 글입니다. 🚀 currentTarget vs target 2차 팀프로젝트에서 발생한 문제점이다...!! 평소처럼 e.target.value 를 이용해서 클릭한 요소를 가져올려고 했으나, undefined 이 출력되었다. 다행히 구글링을 통해서 알아낸 e.currentTarget.value 를 사용하니 문제는 해결되었다. 그럼 event target 와 currentTarget 차이점은 무엇일까..? ✅ event.target vs event.currentTarget 블로그에 기재되었는 코드를 먼저 실행해보자. (출처 아래에 기재) 위의 코드를 실행하고, yellow을 클릭하였때 결과는 아래와 같이 나온다. green 이라는 className ..

✏️ 비구조화 할당

📅 본 글은 2022년 5월 1일 개인github 에 작성된 글입니다. 🚀 비구조화 할당 비구조화 할당 사용법에 대해 잘 모르고 있다는 생각이 들었다. 제대로 알아보자! ⚠️ mdn, 블로그에 정리된 내용들을 직접 실행해보며 익혀나가는 방식으로 공부하였습니다. 출처는 글 하단에 기재하였습니다. 비구조화 할당이란? 비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식! ✅ 배열 let [a, b, c, ...f] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); //2 console.log(c); // 3 console.log(f); // [4,5] 스프레드 연산자를 이용하여 나머지 배열 값 할당..

💡 얕은 복사, 깊은 복사

📅 본 글은 2022년 4월 8일 개인github 에 작성된 글입니다. 🚀 얕은 복사, 깊은 복사 팀 프로젝트때 사용했던 노션을 정리하다가 발견한 물음표 가득한 제목의 글.. 아쉽게도 제목만 적혀져있다. 당시 상황이 잘 기억은 나지 않지만, 최신순 정렬 기능을 구현하기 위해 공부하던 중에... 배열이 정렬이 제대로 되지 않아, 찾아보니 원인이 얕은 복사때문! 이라는 것 까지 기억이 난다. 과거의 내가 미뤄둔 글을 오늘의 내가 정리하면 좋을 것 같아서, 주제는 얕은 복사, 깊은 복사 로 정했다. ✅ 복사에 대해 살펴보기 전에 원시 값과 참조 값에 대해 알고 있어야 한다. 원시값 객체가 아니면서 메서드도 가지지 않는 데이터를 뜻한다. 기본형 데이터는 값을 그대로 할당한다. String, Number, Big..