개발 메모장 개발 메모장

전체 글

• 이것은 작은 브랜드를 위한 책(우주에 흔적을 남겨라) - 이근상

  서평 2022. 12. 23. 19:17

  이 책을 처음 펼치고 든 생각은 책의 페이지 수에 비해 목차가 정말 많다는 것이었다. 그 덕분에 집중력을 잃지 않고 저자가 전달하려는 내용에 조금 더 집중할 수 있었던 것 같다. 이 책은 제목 그대로 작은 브랜드들이 나아가야 할 방향성을 제시해주는 책으로, 목차별로 전달하고자 하는 주제와 그에 맞는 브랜드를 소개하면서 자연스럽게 저자의 주장에 빠져들게 되는 것 같다. 하나의 잣대로 성공을 측정하던 시대는 지나갔다. 성공의 개념을 바꾸어 각자 자기만의 잣대를 만들어라. 일등이 될 수 있는 자신만의 형용사를 찾아라. 그리고 각 챕터별로 저자가 생각하는 이 챕터의 주제를 마지막에 남겨두기 때문에 예시의 재미있는 사례를 읽으며 자칫 잊힐 수 있는 주제를 다시 한번 상기하는 식으로 구성되어 있어 만족스러웠다. 물..

  Read More
• React useEffect vs useLayoutEffect 차이점 알아보기

  React 2022. 12. 15. 16:29

  React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..

  Read More
• 더 프랙티스 - 세스고딘

  서평 2022. 12. 8. 19:25

  저글링 하는 법을 배우지 못하는 건 항상 다음 공을 받으려 달려들기 때문이다. 일단 떨어지는 공을 받으려고 달려가면 다음 공을 던지는 자세가 흐트러진다. 그러고 나면 모든 게 엉망이 된다. ... 중략 우리가 할 일은 공을 던지는 것이다. 받는 건 저절로 된다. - 우리가 할 일은 공을 던지는 것이다에서 - 이 책의 주제는 사실 책 제목과 띄지에 모두 나와 있습니다. 프랙틱스란 꾸준히 실행하는 것을 말합니다. 이 것만 봤을 때는 별다른 느낌을 받지 못했지만 위에 쓴 저글링을 하는 법을 읽었을 때는 많은 생각이 들었습니다. 개인적으로 나는 과정보다는 결과를 중요시하는 사람이고, 이 책을 읽은 지금도 그건 변함이 없습니다. 하지만 저글링과 같이 던지는 것(실행)만 신경 쓰면 받는 것(결과)은 저절로 되는 것..

  Read More
• 개발자에게 유용한 툴

  Tip 2022. 12. 7. 17:30

  1. Bundle Phobia Bundlephobia | Size of npm dependencies Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle. bundlephobia.com 번들 포비아는 간단하게 NPM 패키지 이름을 입력하는 것으로 간단하게 번들 사이즈부터 다운로드 시간, 구성 요소, 알파벳별 구성요소의 사이즈까지 까지 모두 간단하게 확인할 수 있는 사이트입니다. 이외에도 package.json을 업로드하여 한번에 다양한 패키지를 동시에 확인하는 것 역시 가능합니다. 2. Googl..

  Read More
• React에서 조건부 렌더링을 사용하는 5가지 방법

  Tip 2022. 12. 1. 16:19

  React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다. 물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다. 1. && 사용하기 조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다. const Test: React.FC = ({ anyProp }) => { ... return ( ... {anyProp && This is Show!!} ... } 2. Ternary operator True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입..

  Read More
• 간단하게 카드 리스트 간격 주기 (feat. 오늘의집)

  CSS 2022. 11. 23. 16:30

  프로젝트를 진행할 때 카드 사이에 간격을 주는 것은 대부분의 프로젝트에서 빠지지 않는 UI입니다. 그리고 그런 카드 리스트의 간격이 카드의 위치마다 달라지기 때문에 다양한 CSS를 이용하여 구현합니다. // exam 1 & li + li { margin-left: 20px; } // exam 2 & li { margin-right: 20px; &:nth-child(3n) { margin-right: 0px; } } // exam 3 & li:not(:last-child) { margin-right: 20px; } exam 1처럼 앞에 li가 있을 경우에만 margin을 20px 주는 방식도 있고, exam 2처럼 특정 배수의 카드마다 margin을 재할당 해 주는 방식, exam 3처럼 줄 단위로 설정한..

  Read More
• 부의 본능 - 슈퍼리치가 되는 9가지 방법 - 우석

  서평 2022. 11. 17. 16:27

  - 정리 1. 9가지 끊어야 될 본능 무리 짓는 본능의 오류 무리 짓는 본능을 극복하고 외로운 늑대가 되어라 (다수의 의견에 이끌려 투자하지 말자. ex. 고점 매수 저점 매도) 영토 본능의 오류 영토 본능을 극복하고 들개처럼 돌아다녀라 (젊을 때는 한 곳에 정착해 안주하지 말고 다양한 곳으로 이사를 다녀보며 부동산 감각을 익히자.) 쾌락 본능의 오류 쾌락 본능을 극복하고 자린고비로 다시 태어나라 (남들처럼 입을 것 다 입고, 놀 것 다 놀고, 먹을 것 다 먹고 부자 되기 어렵다.) 근시안적 본능의 오류 근시안적 본능을 극복하고 진득하게 버텨라 (무리 짓는 본능과 유사하고 다른 사람의 유혹에 빠져 일확천금을 노리지 말자.) 손실 공포 본능의 오류 손실 공포 본능을 극복하고 손절매 원칙을 손목처럼 지켜라 ..

  Read More
• Stylelint를 이용해 css 정리하기 (feat. Styled-Components)

  React 2022. 11. 14. 15:15

  (이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..

  Read More