안녕하세요. 구독자님 처음으로 뉴스레터를 보내봅니다 😄
먼저 구독해주셔서 감사합니다. 🤗
처음으로 써보는 뉴스레터라서 부족한점이 있을 수 있습니다 🙇🏻
점점 나아지는 모습도 보여드리도록 하겠습니다.
그럼 시작해보겠습니다🚀
1. 타입스크립트 타입 챌린지
https://github.com/type-challenges/type-challenges/blob/main/README.ko.md
타입스크립트 타입 챌린지 모음입니다.
주말에 지인이 공유해줘서 해봤는데 생각보다 어렵더라고요. 🤯
하면서 좀 더 타입스크립트에 친해지는 느낌이라 좋은거 같아서 공유드립니다.
2. 2023년 웹 개발 트렌드
https://ykss.netlify.app/translation/10_web_development_trends_in_2023
위의 문서에서는 REST, GraphQL 대신 tRPC 같은 타입 안전성 API가 새롭게 등장하고 있으며, Vite와 같은 새로운 빌드 도구가 등장하고 있습니다.
또한 AI 주도 개발도 현실이 되고 있습니다. ChatGPT와 같은 언어 모델이 프로그래밍 작업까지 처리할 수 있게 되었습니다.
이외에도 Tauri, Playwright, Warp, Fig, CSS Container Queries, htmx 등의 새로운 기술도 등장하고 있습니다.
매일 매일 발전하는 기술들 정말 빠른거 같아요! 😵💫
ChatGPT가 사실 정확성이 낮아서 잘 못 쓰고 있지만 여러분들은 어떻게 쓰고 있으시려나요~
3. Number(evant.target.value) 안녕
https://www.builder.io/blog/numbers-and-dates
event.target.value 에서 항상 string으로 값이와서 숫자로 바꿔야했던게 귀찮았던 적이 있는데 event.target.valueAsNumber로 된다고 합니다 😳
그 동안 열심히 숫자로 바꿨는데 세상에 사파리 4부터 되어왔다니!
valueAsDate도 있는데 네이티브 input date나 time쓰는일 없으면 안 써볼거 같네요~
4. 리액트 패턴들
https://www.patterns.dev/posts/
리액트에서 사용되는 여러 패턴들을 정리해놓은 사이트를 공유해봅니다.
해당 페이지에선 디자인패턴(Container/Presentational Pattern, Hooks Pattern 등)과 렌더링 패턴(Server-side Rendering, React Server Components 등), 퍼포먼스 개선 패턴(Route Based Splitting, Tree Shaking, Bundle Splitting 등)을 소개합니다.
5. vue.js 2, 2023년까지만 지원
유용하게 쓰였던 vue.js의 2버전이 2023년까지 지원한다고 밝혔습니다.
vue3, svelte 등 여러 선택지들이 있어보이는데 어디로 다들 가실지 모르겠군요!
국내에선 역시 react일까 싶습니다 🤔
6. 잘 알려진 UI 패턴을 사용하여 리액트 애플리케이션 모듈화하기
https://velog.io/@eunbinn/modularizing-react-apps
위 글은 는 잘 알려진 UI 패턴을 사용하여 리액트 애플리케이션을 모듈화하는 방법에 대해 설명합니다.
계층 구조를 사용하여 코드를 분리하고, 모듈성, 가독성, 유지보수성, 확장성 및 마이그레이션 가능성을 향상시킬 수 있습니다.
이러한 계층 구조를 사용하면 프런트엔드 애플리케이션의 로직을 모델 계층에 저장하고 데이터 접근을 다른 계층에 저장할 수 있습니다.
7. back to the SSR
https://deno.com/blog/the-future-and-past-is-server-side-rendering
이 글에서는 웹 개발에서 서버 측 렌더링(SSR)의 역사와 미래에 대해 설명합니다. 저자는 SSR이 웹 초기부터 동적 웹 애플리케이션을 만드는 데 널리 사용되어 왔지만, Angular 및 React와 같은 클라이언트 측 렌더링(CSR) 프레임워크가 등장하면서 인기를 잃었다고 설명합니다.
하지만 저자는 검색 엔진 최적화(SEO), 성능, 접근성 측면에서 SSR이 갖는 장점으로 인해 다시 인기를 얻고 있다고 주장합니다. 또한 Deno 및 Next.js와 같은 새로운 도구와 프레임워크가 SSR을 그 어느 때보다 쉽고 효율적으로 만들고 있다고 언급합니다.
이 글은 개발자가 웹 개발 도구 상자에서 특히 우수한 SEO, 빠른 로딩 시간, 범용 액세스가 필요한 애플리케이션을 위한 유용한 도구로 SSR을 고려할 것을 권장하면서 마무리합니다.
8. module extraction the silent web revolution
https://www.builder.io/blog/module-extraction-the-silent-web-revolution
이 글에서는 모놀리식 웹 애플리케이션을 재사용 가능한 작은 모듈로 분해하는 웹 개발에서 모듈 추출의 개념에 대해 설명합니다. 저자는 모듈 추출이 혁신을 주도하고 보다 효율적인 개발 프로세스를 가능하게 하는 웹 개발의 조용한 혁명이라고 주장합니다.
저자는 모듈 추출을 통해 코드 정리를 개선하고 코드 재사용을 촉진하며 개발자 간의 협업을 개선할 수 있다고 설명합니다. 또한 모듈 추출은 서버리스 컴퓨팅 및 마이크로서비스와 같은 최신 웹 기술의 사용을 용이하게 할 수 있다고 언급합니다.
이 글은 웹 개발자가 프로젝트의 유연성, 확장성, 민첩성을 향상하기 위한 수단으로 모듈 추출을 도입할 것을 권장하며 마무리합니다.
9. the evolution of signals in javascript
https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob
이 글에서는 이벤트나 변경 사항이 발생했을 때 코드에 알리는 데 사용되는 자바스크립트 시그널의 진화에 대해 설명합니다. 저자는 브라우저에서의 초기 사용부터 시그널 API의 도입을 통해 언어에 통합된 것까지 자바스크립트에서 시그널의 역사를 추적합니다.
저자는 네트워크 요청이나 사용자 상호작용과 같은 복잡한 비동기 작업을 관리하는 데 시그널을 사용할 수 있다고 설명합니다. 또한 페이지 전환 처리 및 애니메이션 로딩과 같은 실제 웹 개발 시나리오에서 신호를 어떻게 사용할 수 있는지에 대한 예시도 제공합니다.
이 글은 개발자가 자바스크립트 코드에서 비동기 연산을 관리하기 위한 강력한 도구로 시그널을 도입할 것을 권장하면서 마무리합니다. 저자는 시그널이 코드 구성을 개선하고 복잡성을 줄이며 웹에서 더 나은 사용자 경험을 제공할 수 있다고 말합니다.
10. next meta framework
https://github.com/TanStack/bling
react-query로 유명한 tanstack에서 next.js와 같은 메타 프레임워크를 내놓을 준비를 하고 있습니다.
기존 next.js의 문제점들을 고치기 위해서 remix등이 쏟아져나오고 있지만 생각보다 서버컴포넌트에 대한 지원들이 빈약하고 문제점들이 각각 있어서 TanStack Start가 더욱 주목 받는거 같습니다~
11. Everything you need to know about Concurrent React
이 글에서는 프레임워크가 컴포넌트를 병렬로 렌더링하여 성능과 사용자 경험을 개선할 수 있게 해주는 React의 동시 렌더링에 대해 설명합니다. 저자는 동시 렌더링을 가능하게 하는 React의 새로운 조정 엔진인 파이버의 개념을 포함해 동시 렌더링이 어떻게 작동하는지 설명합니다.
또한 데이터를 가져오거나 처리하는 동안 개발자가 렌더링을 일시 중지하고 폴백 컴포넌트를 표시할 수 있는 React의 기능인 Suspense의 사용법에 대해서도 다룹니다. 이 글에서는 사용자가 데이터 로드를 기다리는 시간을 줄여 React 애플리케이션의 체감 성능을 개선하기 위해 Suspense를 사용하는 방법에 대한 예를 제공합니다.
이 글은 개발자가 React 애플리케이션의 성능과 사용자 경험을 개선하기 위한 도구로 동시 렌더링과 Suspense를 수용하도록 권장하면서 마무리합니다. 저자는 이러한 기능이 아직 비교적 새로운 기능이며 기존 코드를 일부 조정해야 할 수도 있지만 성능과 사용자 경험 측면에서 이점을 고려할 가치가 있다고 말합니다.
12.함수형 프로그래밍을 배워보자!
https://velog.io/@teo/functional-programming-study
이 글은 함수형 프로그래밍을 배우는 저자의 여정에 대한 개인적인 성찰입니다. 불변성, 순수 함수, 고차 함수 등 함수형 프로그래밍의 주요 개념에 대해 설명하고 명령형 프로그래밍 패러다임과 어떻게 다른지 설명합니다.
또한 하스켈, 스칼라, 클로저 등 다양한 함수형 프로그래밍 언어를 다루고 함수형 프로그래밍 개념이 실제 프로그래밍 시나리오에서 어떻게 적용될 수 있는지에 대한 예제를 제공합니다.
저자는 개발자가 보다 유지 관리 가능하고 테스트 가능하며 효율적인 코드를 작성하기 위한 수단으로 함수형 프로그래밍을 채택할 것을 권장하며 글을 마무리합니다. 저자는 함수형 프로그래밍이 명령형 프로그래밍에 익숙한 개발자에게는 사고방식의 전환이 필요할 수 있지만 코드 품질과 유지보수성 측면에서 이점이 있으므로 배울 가치가 있는 기술이라고 말합니다.
이번주 준비한 것은 여기까지입니다 😄
읽어주셔서 감사합니다 😉
댓글
의견을 남겨주세요