분류 전체보기
-
[Typescript] Typescript Infer / 조건부 타입(Conditional Types)front-end/Javascript&Typescript 2024. 6. 23. 23:49
infer keyword 란? infer 키워드는 TypeScript에서 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입의 정보를 추론할 수 있게 합니다. 주로 타입의 일부를 추출하거나 변환하는 데 유용합니다.infer 키워드를 사용하면 타입을 변수처럼 선언하고 조건부 타입 내에서 이를 활용할 수 있습니다. infer 키워드를 사용하는 것이 유리한 상황은 주로 복잡한 타입을 다룰 때입니다.infer는 타입 시스템을 보다 강력하고 유연하게 만들어 주며, 타입 추론을 자동화함으로써 코드의 유지보수성을 높여줍니다. infer 키워드는 조건부 타입 내부에서만 사용할 수 있습니다.컨디셔널 타입의 참 부분에만 infer된 타입 변수를 사용할 수 있다. 거짓 부분에서 쓰려고 하면 에러가 발생..
-
[React] 이제는 써야한다.Suspense , ErrorBoundary feat:(Apollo Clients)front-end/React 2024. 3. 20. 23:32
개요현재 회사에서 맡고있는 프로덕트는 어드민 페이지를 관리 하고있는데, 어드민의 UI/UX가 대부분 filtering 하는 검색박스와, 이를 결과로 보여주는 AgGrid 라는 라이브러리의 table을 사용하고있습니다. 추가로 GraphQL을 사용하기에 , Apollo-client를 사용하고 , Gql query 통해 error , loading 그리고 data state를 관리하고 있습니다. 위에 말했다시피 data를 AgGrid table로 그리는 페이지가 대다수였기에, Aggrid table 컴포넌트에서 제공하는 error, loading props를 넘겨주면 각 상황에 맞는 UI가 유저에게 그려지고 있습니다. 하지만 어느 프로젝트나 시간이 지나면 그렇듯 프로덕트의 범위가 커지고, 어드민의 페이지가..
-
[Typescript] Typescript satisfiesfront-end/Javascript&Typescript 2024. 1. 15. 22:45
개요 2년전, 타입스크립트를 처음에 접할땐 interface , type 키워드만알아도 거의 개발하는데 무방했지만, 실무에서 타입스크립트와 리액트로 개발하다보면 TS의 Util을 활용을 하면 훨씬 더 편하고, 확장성 좋은 강력한 type safe 기능을 발휘 할 수 있습니다. 그래서 작년에 TS의 Util 관련하여 블로그 포스팅한게 있습니다. 지금도 헷갈리거나 기억이 안날때 가끔 제가 쓴 블로그 보면서 참고하는데요. 이번엔 타입스크립트의 "satisfies" 키워드를 포스팅 해보겠습니다. TS를 극한으로 쓰시는분들이 아니면 이 키워드는 생소(?) 할것같은데요. (저는 그랬습니다.) satisfies 키워드가 무엇이고 언제 쓰이면 유용할까요? 일단 개인적으로 저는 타입스크립트의 Type safe역할도 그렇..
-
코드 가독성에 대해 (feat: KISS, Boy scout rule)good tips for dev 2024. 1. 14. 22:17
개요 코딩을할때 어떤 방법이 100% 옳다라는 정답은 없지만 코드의 가독성에 대해 생각하고 작성 한다면 추후에 같은 코드를 보면서 개발을할때 훨씬 수월하게 할 수 있다는 생각은 100% 맞는 말 같습니다. 이 포스팅은 사내 그룹스터디 할때 토픽이 되었던 주제인데, 좋은 글인거같아 정리삼아 포스팅을 하려고 합니다. 아래의 포스팅 전체의 내용을 다루는것보다, 사내 스터디를 할때 기억에 가장 남은것들만 우선 정리한 포스팅 입니다. 1. 코드의 가독성은 왜 높아야할까? 어떤 feautre을 개발한다고 칩시다. 저는 프론트엔드 개발자이니까 보통 기획과 디자인 그리고 백엔드 개발자에게 디자인 리뷰 , API interface등 리뷰를 받고 개발을 진행 한적이 많은데, 리뷰를 받고 feature 개발 하기까지의 2주..
-
[React] useDebounce custom hook 으로 성능향상 해보기 (feat: Debounce)front-end/React 2023. 9. 13. 00:19
Debounce 란? 짧은 시간내에 연속 된 함수 및 event 호출시, 호출 되는 모든 함수를 바로 처리하지않고 정해진 딜레이 이후에 한번만 처리 하는 패턴 입니다. Debounce는 왜 필요할까? 1. 네트워크 요청의 함수나 전반적인 성능을 향상 시키기 위해서 가장 많이 쓰입니다. 2. 비용절약 측면에서도 Debounce가 필요한데요, 예를들어 어떠한 서비스앱이 유료 API가 사용되고있는데 , API의 호출 횟수의 따라 비용이 나간다면 debounce 를 사용하여 네트워크 요청의 횟수를 줄일 수 있습니다. Use case 1. input의 입력과 동시에 네트워크 요청을 통해 검색 결과를 가져올때 (유튜브에서 React와 Debounce 관련 설명 영상의 예시가 거의 위의 사용사례로 강의를 합니다.) ..
-
[Monorepo] 모노레포는 멀티레포로부터 어떻게 구원을 해줄까?feat:Turborepogood tips for dev 2023. 9. 6. 00:48
모노레포를 알아보기전에 우선 모놀리식 , 멀티레포를 알아야 합니다. 모노레포의 등장배경과 모노레포의 장점을 파악하려면 기존의 프로젝트 구성에 어떤 단점이 있는지 알아봐야합니다. 모놀리식이란? 모놀리식 애플리케이션은 모듈화 없이 모든 구성 요소가 한 프로젝트 안에 통합된 소프트웨어 애플리케이션을 이야기합니다. DB 커넥션을 맺고, 데이터를 요청하며, 화면을 그리는 로직이 한 프로젝트 안에 구현된 초기 웹 서비스를 모놀리식 애플리션으로 볼 수 있습니다. 모놀리식의 장점 소수의 개발자가 빠르게 개발할 수 있음. 모놀리식의 단점 1. 관심사 분리가 어려워서 설계, 리팩토링 어려움 2. 매번 거대한 프로젝트를 배포 해야함. 3. 일부분의 에러가 전체 서비스에 영향을 줄 수 있음. 멀티레포란 ? 폴리레포(Poly ..
-
[Yarn Berry] Yarn Berry가 node_modules의 문제를 어떻게 해결할까?good tips for dev 2023. 9. 5. 01:56
개요 2년차 주니어 프론트엔드 개발자로 일하면서 , 요즘 드는 생각이 리액트, 뷰, 앵귤러 같은 프레임워크의 변화를 지켜보고 어떤 부분이 더 좋고, 어떤 부분이 더 편리하게 변했는지 공부하는거도 중요하지만 이런 프레임워크 및 라이브러리를 설치해주는 의존성 및 관리하는것은 node_modules 입니다. 이제는 리액트 , 자바스크립트 등의 기술도 물론 중요하지만 이런 의존성 패키지의 Background에 대해서도 deep하게 공부 해야할것 같다는 생각이 들었습니다. 그래서 node_modules의 단점을 극복해줄 Yarn berry를 알아보면서 node_modules의 단점을 공부하기위해 포스팅을 하려고합니다. Package 란? 우선 패키지란 무엇인지 간단한게 알아보겠습니다. 모듈(Module) 모듈은 ..
-
[React] 왜 Create React App 대신에 Vite를 사용할까?front-end/React 2023. 8. 23. 10:39
개요 2년전쯤 리액트를 처음 배울때는 CRA 를 통해 React app을 만들어서 공부를 했었는데요 , 요새는 vite를 더 추구하는것같습니다. 그래서 Vite를 사용한지도 약 1년정도 된거같은데, 체감상으로도 확실히 빌드속도 ,세팅속도 그리고 가장 매력적이였던건 개발 중 코드를 수정하고 브라우저에 반영하기까지의 속도가 CRA에 비해 굉장히 빨랐습니다. 어떤 점이 Vite가 CRA보다 궁금해서 검색을 하다가 설명이 너무 길지도 않고 Vite의 핵심만 담겨있는 포스트를 발견해서 번역 및 참고 해서 포스트를 하려고합니다. Reference:https://makimo.com/blog/why-we-use-vite-instead-of-create-react-app/ Why we use Vite instead of..