전체 글
-
더 프랙티스 - 세스고딘서평 2022. 12. 8. 19:25
저글링 하는 법을 배우지 못하는 건 항상 다음 공을 받으려 달려들기 때문이다. 일단 떨어지는 공을 받으려고 달려가면 다음 공을 던지는 자세가 흐트러진다. 그러고 나면 모든 게 엉망이 된다. ... 중략 우리가 할 일은 공을 던지는 것이다. 받는 건 저절로 된다. - 우리가 할 일은 공을 던지는 것이다에서 - 이 책의 주제는 사실 책 제목과 띄지에 모두 나와 있습니다. 프랙틱스란 꾸준히 실행하는 것을 말합니다. 이 것만 봤을 때는 별다른 느낌을 받지 못했지만 위에 쓴 저글링을 하는 법을 읽었을 때는 많은 생각이 들었습니다. 개인적으로 나는 과정보다는 결과를 중요시하는 사람이고, 이 책을 읽은 지금도 그건 변함이 없습니다. 하지만 저글링과 같이 던지는 것(실행)만 신경 쓰면 받는 것(결과)은 저절로 되는 것..
-
개발자에게 유용한 툴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..
-
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를 사용할 때 가장 많이 사용하는 방법입..
-
간단하게 카드 리스트 간격 주기 (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처럼 줄 단위로 설정한..
-
부의 본능 - 슈퍼리치가 되는 9가지 방법 - 우석서평 2022. 11. 17. 16:27
- 정리 1. 9가지 끊어야 될 본능 무리 짓는 본능의 오류 무리 짓는 본능을 극복하고 외로운 늑대가 되어라 (다수의 의견에 이끌려 투자하지 말자. ex. 고점 매수 저점 매도) 영토 본능의 오류 영토 본능을 극복하고 들개처럼 돌아다녀라 (젊을 때는 한 곳에 정착해 안주하지 말고 다양한 곳으로 이사를 다녀보며 부동산 감각을 익히자.) 쾌락 본능의 오류 쾌락 본능을 극복하고 자린고비로 다시 태어나라 (남들처럼 입을 것 다 입고, 놀 것 다 놀고, 먹을 것 다 먹고 부자 되기 어렵다.) 근시안적 본능의 오류 근시안적 본능을 극복하고 진득하게 버텨라 (무리 짓는 본능과 유사하고 다른 사람의 유혹에 빠져 일확천금을 노리지 말자.) 손실 공포 본능의 오류 손실 공포 본능을 극복하고 손절매 원칙을 손목처럼 지켜라 ..
-
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입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..
-
NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기Tip 2022. 11. 12. 18:11
npm update 명령어로도 package.json의 dependencies을 업데이트할 수 있습니다. 하지만 npm-check-updates를 사용하면 peer dependencies를 제외하고 의존성을 훼손하지 않는 한도 내에서 최신 버전으로 업데이트를 진행할 수 있습니다. 그림 이제 간단한 사용법을 알아보겠습니다. 1. 설치 npm install -g npm-check-updates 2. 확인 $ ncu Checking package.json [====================] 5/5 100% eslint 7.32.0 → 8.0.0 prettier ^2.7.1 → ^3.0.0 svelte ^3.48.0 → ^3.51.0 typescript >3.0.0 → >4.0.0 untildify
-
Expo SDK 47 정리Expo 2022. 11. 10. 15:40
React 생태계는 확실히 업데이트가 무척 빠른 것 같습니다. Next.js가 13 버전이 나온 것처럼 Expo 역시 47 버전의 Beta가 나온 지 얼마 안 되어 47 버전이 정식 출시되었습니다. React Native CLI를 대체하기 위해 많은 고민과 노력을 하고 있다는 것이 보이는 업데이트였습니다. 아래의 4가지 항목 이외에도 지원하는 React, React Native버전이나 iOS의 최소 지원 버전과 같은 내용들도 있지만 이번 정리는 제가 업데이트를 봤을 때 가장 흥미로웠던 부분들 위주로 정리해 봤습니다. 1. Expo modules 정식 출시 Alpha단계였던 Expo modules가 SDK 46 > SDK 47인 한 번의 업데이트 만에 1.0으로 정식 출시를 했습니다. 개인적으로 무척 기대..