'TECH' 카테고리의 글 목록 (2 Page)

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개의 프로젝트가 있음 모든 프론트엔드의 코드와 리뷰는 하나의 레포에서 참고할..

리액트 쿼리의 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 번 반복시키는 함수가..

[React] Redux 개념 정리

TECH 2022. 3. 13. 02:04

✔️ Redux란? Redux는 자바스크립트 상태 관리 라이브러리이다. 상태(state)를 효율적으로 관리할 수 있도록 도와주는 도구 중 하나이다. ✔️ Redux 기본 개념 1. 액션(Action) 상태를 변경하기 위해서는 액션을 통해 변경해야 한다. 액션은 객체 형식으로 표현되고, type을 필수로 가지고 있어야 한다. 옵션으로 다른 프로퍼티를 가질 수 있고, 액션에 필요한 부가적인 데이터를 전달할 때 주로 사용한다. { type: 'ADD_MESSAGE', data: { id: 1 message: "리덕스 배우기" } } 메시지를 새로 추가하는 액션이고, 새로운 메시지에 대한 부가적인 data가 전달된다. 2. 액션 생성 함수(Action Creator) 액션은 객체 형식으로 바로 만드는 것이 아니..

[React] Checkbox (2) — 버튼으로 선택 해제하기

TECH 2022. 2. 21. 01:59

[React] Checkbox (1) — Context API로 상태 관리하기에 이어지는 포스팅입니다. 버튼으로 체크박스 해제하기 체크박스의 상태 관리를 할 수 있다면 버튼으로 체크박스 해제하는 방법쯤은 껌입니다. 우선 체크된 요소들을 버튼으로 출력해 보겠습니다. 버튼 요소 하나는 Selected.jsx로 만들고, 출력은 CheckboxList에서 같이 해 보겠습니다. 1. 체크된 요소 버튼으로 출력하기 {Object.keys(cateObject).map((key, index) => { return ( ); })} CheckboxList.jsx의 return 문에 이런 코드를 추가해 줍니다. value에는 텍스트를 전달해 주고, checked에는 true/false 속성을 전달해 줍니다. 그리고 모든 속..

[React] Checkbox (1) — Context API로 Checkbox 상태 관리하기

TECH 2022. 2. 19. 20:00

프로젝트를 하면서 카테고리를 체크박스로 선택하고 버튼으로 해제하는 기능을 구현해야 했는데 버튼으로 체크박스를 해제하는 방식에서 고민을 많이 해, 포스팅으로 남겨 두려고 합니다. 임의의 배열 데이터로 체크박스를 만들고 Context API로 상태 관리하기 아래와 같은 데이터로 체크박스를 만들었습니다~ 더보기 // utils/sampleData.js export const data = [ "가을", "가람", "기쁨", "구름", "나리", "너울", "누리", "노을", "눈꽃", "다솜", "마음", "마루", "미르", "무늬", "맑음", "믿음", "뭇별", "바다", "방울", "보름", "봄꽃", "별빛", "별밤", "별숲", "사랑", "솔잎", "새벽", "새싹", "샛별", "아침", "..

ABOUT ME

Foresitory 🌳 Foresitory 🌳

티스토리툴바