최근 Good Code, Bad Code 책을 완독하며 "좋은 단위 테스트"에 대하여 인상깊게 보게 되었다.책을 읽었으니 이제 실천해 볼 차례!최근 진행하고 있는 프로젝트에서 작은 단위의 기능 테스트에 책에서 얘기한 방법론을 적용해보기로 했다.스크린샷 202

Next.js 13 기준으로 공부 중본 글은 패스트캠퍼스의 Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기 의 강의내용을 따라가며 작성하고 있어서 공식문서 내용이랑 혼재 기억용이기 때문에 빠진 내용 다수App 폴더 안에서 구조화됨소괄호로 싸매기 (e.g

Chap 4.3 ~ 4.6 🗓 \*\*TIL 날짜 \*\* 2023.2.15 오늘 읽은 범위 📍 오늘 TIL 요약 명시적/암시적 오류처리 기법 중 어느 것을 사용할 지에는 팀에 따라 달려있다.컴파일러의 경고를 무시하지 말라.복구할 수 없는 오류일 경우는 암시적

Chap 3.3 - 3.4 오늘 읽은 범위 \- 3.3.2 세부 조항에 너무 의존하지 말라📍 오늘 TIL 3줄 요약 코드 계약으로 코드에 관해 설명하는 것이 더 바람직 할 때가 많다.세부 조항에 있는 어떤 항목에 대해 발생 자체가 불가능 하도록 명백한 항목으

Chap 2.3 오늘 읽은 범위 2.3.1 API 및 구현 세부사항2.3.2 함수2.3.3 클래스2.3.4 인터페이스2.3.5 층이 너무 얇아질 때📍 오늘 TIL 3줄 요약 계층을 너무 크게 만드는 것 보단 너무 얇게 만드는 것이 차라리 낫다.경험이 풍부한 개

Good Code, Bad Code - 제이펍 프로그래머의 코드 품질 개선법평소 코드를 작성하며, 나의 코드 품질에 대한 고민과 불확신으로 인해 답답함을 느끼곤 했는데, 이를 해소하기 위해 읽기 시작. 회사 내의 좋은 코드 리뷰문화를 잘 정착 시키려면 나부터 좋은 코드

최근 Next.js를 공부하고 있는 와중에 발견한 좋은 글들을 정리해본다.Next.js에서 Hydration 과정에서 JSON으로 인해 HTML의 크기가 커지는 문제를 아키텍처 개선을 통해 해결한 사례.graphQl을 사용한 것이 관건https://github

https://github.com/MartinXPN/profound.academy/issues/292여기서 토론 진행중

next.js로 당근마켓 클론 코딩, 3:3으로 간단 팀프로젝트 하기, 알고리즘 스터디 등… 한 가지 주제로 팀원이 다 같이 한 가지 주제로 함께 공부하는 방법을 생각해보긴 했지만, 아래와 같은 것들이 우려됨팀원마다 스스로 필요하거나 원하는 공부가 다름업무 외의 일이

button에 onClick 이벤트로 페이지를 이동시켜야 하는 일이 생겼다.<button onClick={()=>location.href=data.url}></button>이 때 http로 시작하는 프로토콜이 있는 경로를 받으면 문제 없지만www로 시작하는

https://techblog.yogiyo.co.kr/%EB%A7%A4%EC%9D%BC-%EB%82%98%EB%A5%BC-%EB%8F%8C%EC%95%84%EB%B3%B4%EA%B3%A0-%EC%84%B1%EC%9E%A5%ED%95%98%EB%8A%94-be-

최근 회사에서 SSR과 SEO의 중요성을 깨달은 적이 있었다.회사 프로젝트는 현재 순수 react로만 구성되어 있어서, 동적 seo를 위해 seo helmet으로 구현을 했지만 이것이 완벽한 대체제가 될 순 없었다. 동적 seo를 지원하지 않는 봇들이 있고 무엇보다 o

타입스크립트를 좀 더 세련되게, 클린코드하게 작성하기!유틸리티 타입을 잘 활용한다면 더욱 유지보수성 높고 잘 정의된 엄격한 타입을 정의할 수 있다😀잘 만들어진 라이브러리들의 타입 정의 파일을 보면 이 유틸리티들을 굉장히 세련되게 잘 활용해두었다. 이를 본받아 나도 촘

회사에서 사용하고 있는 리덕스를 공부하던 중typesafe-actions 이라는 라이브러리를 발견했다.https://react.vlpt.us/using-typescript/05-ts-redux.html위 블로그에서 에서 확인할 수 있듯이 redux를 다룰 때

그동안 api요청 client.ts 와 같은 곳에서 와 같이 주소를 관리해왔다. 여기서 production 인지 dev인지 체크하는 분기를 나누는 정도? 그런데 오늘 http-proxy-middleware 이라는 것으로 api 호출 패턴에 따른 url 타겟을 변경하

typesafe-actionshttps://choi95.tistory.com/204Ducks patternhttps://velog.io/@tlatjdgh3778/React-Redux-Ducks-Pattern-%EC%A0%81%EC%9A%A9%ED%95

깃 로그 관리?깔끔하면 보기야 좋겠지만, 풀리퀘스트로만 잘 정리하면 되는거 아냐?라고 생각했던 나...구냥 구글에서 긁은 이미지구냥 구글에서 긁은 이미지하지만 현업에 들어온 후, 첫 임무를 받으며커밋 로그들이 드디어 신경쓰이기 시작했다.처음에 기세좋게 DT-nnn 어쩌

잦은 api 호출 횟수를 줄이기 위해 디바운스 로직 적용폼 리렌더링. 데이터를 하나로 받아서 다 뿌려주니까 모든 폼이 onchange마다 리렌더...이거 근데 내가 잘못짰음

typescript를 사용해서 데이터타입이 강제되는 경우가 많은데useQuery를 쓸 때 제네릭 타입을 활용해서 hooks의 재사용성을 높였음.