개발 일지

현재 팀 내에서 ESLint Airbnb 컨벤션을 따르고 있다. Github Action으로 PR 템플릿이 열릴때마다, 그리고 오픈된 PR 에 새로운 커밋이 추가될 때마다 Docker local build를 실행하고 있는데, lint 설정에 오류가 있으면 build가 실패처리 된다. build가 성공해야 PR을 close 할 수 있기 때문에, 빌드시 lint 설정을 끌 수 있는 방법을 알아보자. 먼저, 다음의 명령어로 로컬 환경에서 lint 검사를 수행한다. next lint * 일반적으로 next production build 시 ESLint 오류가 감지되면 빌드가 실패한다. next.js 공식 홈페이지에서 다음과 같은 방법을 안내하는데, 이미 워크플로우의 별도 부분(예: CI 또는 pre-commit..

클라이언트 전용 애플리케이션으로 작업하는 데 익숙하다면 서버에서 localStorage에 액세스할 수 없다는 사실이 의외로 느껴질 수도 있다. 이는 localStorage가 window 객체에 정의되어 있지 않고 Next.js가 클라이언트 렌더링 전에 서버 렌더링을 수행하기 때문에 발생하는 이슈이다. 즉, 클라이언트에서 페이지가 로드되고 window 객체가 정의될 때까지 localStorage에 액세스할 수 없다는 의미이다. 따라서 window가 브라우저에 마운트 되었을때만 웹스토리지를 세팅하도록 코드를 변경하면 된다. view(string) 에 따라서 화면에 보여지는 UI가 달라진다. (list kanban) export const useViewName = () => { const view = useR..

📌오늘 TIL 3줄 요약 1. 쿠키는 웹사이트에 접속할 때마다 서버에 전송되어서 서버의 기억을 되살리는 역할을 한다. 2. 서버는 컴퓨터다. 항상 켜져있고 연결되어 있으며 요청에 응답해야 하는 컴퓨터. 3. 서버리스는 서버가 없는게 아니라, 서버 운영에 필요한 것들을 대신해주는 것을 의미한다. 단점도 있으니 상황에 맞게 사용하자. 📆TIL (Today I Learned) 날짜 2023-10-11 📖오늘 읽은 범위 에피소드 16 ~ 에피소드 21 에피소드 06 ~ 에피소드 10 📑책에서 기억하고 싶은 내용을 써보세요. [에피소드 16] 인터넷 익스플로러가 사라진 이유와 브라우저 엔진 첫번째, 최신 기술을 가장 빨리 지원했던 IE 1996년, 익스플로러 3.0ver - IE는 CSS를 최초로 지원한 웹 브라..

📌오늘 TIL 3줄 요약 1. 오류가 생겼을 때는 침착하게 오류 메세지를 읽고, 디버깅하자 2. 파이썬이 인기있는데는 다 이유가 있다..! 3. 인터프리터 vs 컴파일 언어 차이점 설명하기 📆TIL (Today I Learned) 날짜 2023-10-11 📖오늘 읽은 범위 에피소드 06 ~ 에피소드 10 에피소드 16 ~ 에피소드 21 📑책에서 기억하고 싶은 내용을 써보세요. [에피소드 06] 왜 나만 자주 오류가 생길까? - 문제가 생겼을 때, 그 중심에는 '내'가 있다. - 오류부터 고치려고 무작정 달려들기 보다는, 한 발짝 물러나서 왜 오류가 발생했는지를 고민해보자. 고민하는 시간을 충분히 거치면, 동일한 실수의 빈도가 확연히 줄어들 것! - 오류 메세지를 읽을 것 이것은 매우 공감되는 부분이다. ..

📌오늘 TIL 3줄 요약 1. 중꺽마..! 2. 고민보다 GO 3. 프로그래밍 언어 이름은 진짜 그냥 만든사람 마음이구나.. 📆TIL (Today I Learned) 날짜 2023. 10. 07.Sat 📖오늘 읽은 범위 에피소드 01 ~ 에피소드 05 📑책에서 기억하고 싶은 내용을 써보세요. [에피소드 01] 개발자에 대한 오해 5가지 - 개발을 잘하려면? 중꺾마~ - 좋은 개발자는 "개발 과정"을 이해하는 사람이다. - 근면 성실함을 무기삼아.. [에피소드 02] 어떤 언어부터 공부해야 할까? - 무엇을 만들고 싶은지 고민하고 선택하자. - 대표적인 언어 4가지(C언어, 자바, 파이썬, 자바스크립트)의 쓰임새를 알아보자. 첫번째, C 언어 상대적으로 기계 친화적인 언어이다. 제한된 상황에서 최고 성능을..

북클럽 시작합니다... 한 달에 한 권 읽기도 힘들었으니, 이렇게라도 실천해보려 합니다. 🔥🔥🔥 📚 북클럽 소개글 노마드 개발자 북클럽 (aka 노개북)이 2023 버전으로 업그레이드 되어서 돌아왔어요! 한 달에 한 권! 스케쥴표를 따라 함께 책을 읽고 감상평을 공유하면서 으쌰으쌰 독서할 수 있도록 도와드립니다. 읽는 책은 'IT 5분 잡학사전' 입니다! 📚 한 달 1권 읽기 개발자 필독서, 이번에 200% 완독 해보는건 어때요? 한 달 1권 읽기. 지금 시작해보세요! 🔥 뭐 하냐구요? 1. 매일매일 다같이! 책을 읽을꺼에요! 2. 감상평(TIL)을 작성해주세요. 3. 각종 미션 및 퀴즈를 수행하면 끗! 💪🏻 무슨 책? "IT 5분 잡학사전" 잘하는’ 주니어 개발자는 이미 다 알고있어요! 코딩 입문, 웹..

[비개발]화면설계 & 프로토타이핑 툴 정리프론트엔드 개발자라면 반드시 알아두어야 할 32가지 ui 요소 번역 웹/모바일 화면사이즈 기준 참고초보자를 위한 스토리보드 작성 Tip [개발]모바일 터치, 제스처 등이 적용되는 하이브리드 웹에 적용하기 좋은 라이브러리 : PhotoSwipe(강추)개발자도구 파헤치기 : 크롬 개발자도구 사용설명서 ✨공개적으로 학습하라!GraphQL 가이드북읽기 좋은 코드가 좋은 코드다 ✨신입에게 추천하는 프론트엔드 가이드 ← 링크모음집유용한 10가지 자바스크립트 유틸 함수스토리북 소개글 강추얕은 코드 리뷰 가이드 [유용한 라이브러리 모음]mozilla pdf.js : https://github.com/mozilla/pdf.js#online-demoalert javascript 라..

프로젝트를 공동 작업하다보면, 윈도우 사용자와 Mac OS 사용자의 줄바꿈 설정이 다른 경우가 있다. Line Seperator 윈도우 기본 설정 : CRLF (\r\n) Mac , Linux 기본 설정 : LF (\n) ‣ 차이점 : https://www.aleksandrhovhannisyan.com/blog/crlf-vs-lf-normalizing-line-endings-in-git/ CRLF vs. LF: Normalizing Line Endings in Git | Aleksandr Hovhannisyan Line endings can differ from one OS to another. Learn the history behind CRLF and LF line endings and how to ..

React.memo를 사용하면 컴포넌트의 props가 변경되지 않았을 때 리렌더링을 건너뛸 수 있다. = 컴포넌트의 props가 바뀔 때만 리렌더링 한다. (항상 보장되지 않는다.) const MemoizedComponent = memo(SomeComponent, arePropsEqual?) memo로 감싸져 있는 컴포넌트는 메모화된 버전의 컴포넌트를 만들 수 있다. 메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는다면, 부모 컴포넌트가 리렌더링 될 때 같이 리렌더링 되지 않는다. memoization이 성능을 최적화하지만, 항상 보장되는 것이 아니므로, React는 여전히 컴포넌트를 렌더링 할 수도 있다. 예시: import { memo } from 'react'; const SomeCo..

1. 타입스크립트가 객체 타입 리터럴의 타입을 해석하는 방법 기존 객체에서 타입을 추론하게 하는 것도 좋지만, 가끔 명시적으로 객체 타입을 선언하고 싶을 때가 있을 것이다. 객체 타입은 객체 리터럴과 유사하지만, 필드 값 대신 타입을 사용해 설명한다는 특징이 있다. 1) 별칭 객체 타입 [덕 타이핑 참고하기 좋은 글] https://velog.io/@thms200/Typescript-Duck-Typing-%EB%8D%95%ED%83%80%EC%9D%B4%ED%95%91 Typescript Duck Typing (덕타이핑) 타입스크립트의 인터페이스에 대한 글을 읽다가 Duck Typing에 대해 알게되었다. 먼저 코드로 개념을 이해해보자. (위의 코드는 [Typesrcipt playground](https..