'분류 전체보기' 카테고리의 글 목록 (2 Page)

TECH 2023. 12. 16. 00:39

이번 포스팅에서는 React + Vite 환경에서 정적 에셋을 public과 src 디렉토리에서 관리한 경험을 살펴보고 스스로 도출한 결론을 설명해 보려고 합니다. 6주 동안 진행된 morak 프로젝트에서는 정적 에셋을 관리하는 assets 디렉토리를 src → public → 그리고 다시 src 디렉토리로 옮겨 관리하게 되었는데요. 이 의사 결정 과정에 대해 서술해 보고, 결론적으로 왜 src에서 관리하게 되었는지, public과 src 디렉토리에서 관리했을 때 각 어떤 장단점을 얻을 수 있는지를 설명해 보겠습니다. . ├── public │ └── assets # 어디에 두는 것이 └── src └── assets # 맞을까? assets을 src → public으로 옮기게 된 배경 assets을 s..

CSS의 우선순위, CSS Cascading

TECH 2023. 9. 4. 01:29

CSS는 웹 페이지의 디자인과 레이아웃을 정의하여 사용자들을 시각적으로 사로잡을 수 있는 웹 개발자에게 필수적인 스킬입니다. 하지만 CSS는 단순한 문법 뒤에 숨겨진 규칙들로 초보자들에게 어려움을 안겨 주기도 합니다. HTML/CSS로 호기롭게 코딩 세계에 발을 들였다가 지레 겁을 먹고 (백엔드로) 탈주하는 사람들을 여럿 보기도 했습니다. 🤣 아주 슬픈 일입니다. "왜 스타일이 제대로 적용되지 않을까?"와 같은 고민은 캐스캐이딩의 영향일 가능성이 높습니다. 이 포스팅에서는 바로 그 CSS의 캐스캐이딩 원칙에 대해 이야기해보려고 합니다. CSS의 Cascading이란? CSS는 Cascading Style Sheets의 약자로, CSS의 네이밍에서부터 녹아 있는 캐스캐이딩 개념은 스타일 규칙이 계단식으로 ..

모노레포 도입 후기(Feat. Nx)

TECH 2023. 8. 27. 17:49

최근 모노레포라는 개념이 주목받고 있습니다. 모든 코드와 리소스가 하나의 저장소 안에서 관리되는 모노레포 방식은 개발자의 생산성을 높여 준다는 장점을 가지고 있습니다. 제가 속해 있던 팀에서도 단순히 새로운 트렌드를 따라가는 것이 아닌, 개발자의 작업 효율과 생산성 향상을 주 목적으로 멀티레포 환경에서 모노레포 환경으로의 전환을 결정하게 되었습니다. 이 마이그레이션 과정의 경험과 그 결과에 대한 후기를 작성해 보려고 합니다. 모노레포 도입 배경 우선 마이그레이션 전의 상황은 다음과 같았습니다. . ├── AProject ├── BProject └── CProject 레포지토리의 형식은 모노레포보다는 모놀리식 한 레포지토리 안에 n개의 프로젝트가 있음 모든 프론트엔드의 코드와 리뷰는 하나의 레포에서 참고할..

부스트캠프 웹・모바일 8기 챌린지 후기

ETC 2023. 8. 19. 02:08

부스트캠프 챌린지 코스를 드디어 끝마쳤다. 사실 지금은 챌린지가 끝난 지 이 주 정도 된 시점이고, 멤버십 합격 발표가 나서 챌린지 후기를 드디어 업로드하게 되었다. 부스트캠프는 내 생각보다 훨씬 더 강도 높은 곳이었다. 미션은 저녁 7시 제출이었지만, 7시 이전에 미션을 끝마친 날은 첫 날 빼고는 없었다. 월요일부터 목요일까지 주어지는 과제를 해결하면서 느낀 점은 수많은 CS 지식을 제대로 알지도 못하고 일했던 게 부끄러울 만큼 정리되지 않거나 모르는 지식이 많았다는 것이다. 프론트엔드와는 조금 거리가 있는 지식부터 시작해서 현업에서 일하면서 자주 사용했던 키워드들도 내 머릿속에 제대로 정리가 되어 있지 않다는 것을 느꼈다. 이때다 싶어 자주 헷갈려했던 개념들을 정리할 수 있었고, 이전에는 대강 어림짐..

부스트캠프 웹・모바일 8기 합격 후기

ETC 2023. 7. 30. 16:42

늦었지만 부스트캠프 웹·모바일 8기 합격 후기를 작성해 본다. 지원 계기 재직 중이던 직장에서 일 년을 넘기고 이직을 하고 싶어 이력서를 작성하며 서류 지원을 막 하던 참에 부스트캠프 모집 공고를 발견하게 되었다. 실력이나 포트폴리오가 부족하다는 생각이 들어서 아예 퇴사를 하고 취업을 준비해 볼까 싶기도 했지만 백수로 산다면 흐지부지될 내 성향을 알아서 그건 꺼려졌다. 새로운 교육을 받는 방안도 있었겠지만 아무리 직장을 다녀서 돈이 생겼다 해도 큰 금액을 지불하면서까지 무언가를 하고 싶진 않았다. 익명으로 참여하고 있던 단체 오픈 채팅방에서 네이버 부스트캠프는 강추 한다는 소리를 많이 들었다. 처음 이직을 하려고 맘먹었을 땐 퇴사하고 무언가를 할 생각이 없어서 고민이 됐지만(계속 돈 벌고 싶었다), 나는..

리액트 쿼리의 StaleTime과 CacheTime

TECH 2023. 1. 24. 00:27

* 이 글은 2023년 11월 6일 업데이트되었습니다. 이 글은 TanStack Query v4를 기준으로 작성되었습니다. 2023년 11월 6일 기준 최신 버전인 v5에서는 cacheTime → gcTime으로 변경된 것을 참고해 주시기 바랍니다. 리액트 쿼리를 처음 사용할 때 헷갈릴 수 있는 개념 중 하나인 staleTime과 cacheTime에 대해 알아보도록 하겠습니다. ✎ staleTime stale의 사전적 정의는 [신선하지 않은, (만든 지) 오래된]입니다. 말 그대로 staleTime은 데이터가 신선한 상태로 남아 있는 시간을 말합니다. 리액트 쿼리에서의 기본 값은 0입니다. 데이터를 페치해 오자마자 신선하지 않다고 간주하는 것이죠. 리액트 쿼리에서 데이터는 fresh한 데이터일 수도, s..

[React] useMemo와 useCallback로 리액트 렌더링 성능 최적화하기(Feat. React.memo)

TECH 2022. 4. 9. 10:00

안녕하세요. 리액트를 다루다 보면 렌더링 성능 최적화에 대한 이슈를 접하기 마련입니다. 리액트에서는 렌더링 성능 최적화에 관한 대표적인 훅으로 useMemo와 useCallback이 있습니다. 저는 개인적으로 useMemo와 useCallback이 뭐가 다른지, 어떤 상황에서 써야 렌더링 성능 최적화를 할 수 있을지 굉장히 많이 헷갈렸었는데요~ 오늘은 useMemo와 useCallback의 차이점에 대해 자세히 알아보고 이 둘의 사용법에 관해서도 간단하게 알아보도록 하겠습니다. ✔️ useMemo useMemo에서 Memo의 의미는 우리가 어떤 생각이 날 때마다 작성하는 메모라는 뜻이 아닙니다. 여기서 Memo라는 건 Memoization을 축약한 Memo라는 뜻입니다. Memoization, 메모이제이..

[JavaScript] 더 나은 비동기 통신

TECH 2022. 3. 27. 15:02

프리온보딩 팀원들과 함께 면접 스터디를 시작했다! 이번 주 주제 중 하나인 Promise, callback hell, async/await, fetch 등에 대해 자세히 알아보는 시간을 가졌다. API를 통해 데이터를 가져올 때 async/await나 fetch를 사용하면서도 내부적으로 어떻게 동작하는지는 잘 모르고 있었는데 이번 기회에 내부 동작이 어떻게 이루어지는지 공부해 볼 수 있었다. 그럼 바로 시작~ ✔️ 콜백 함수 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 한다. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수(Higher-Order Function, HOF)라고 한다. 특정 작업을 n 번 반복시키는 함수가..

ABOUT ME

Foresitory 🌳 Foresitory 🌳

티스토리툴바