본문 바로가기

분류 전체보기

(93)

[Side Project] 가로세로 낱말퀴즈 게임 만들기(01) 2024년 11월부터, 회사 동료분 2명과 함께 사이드 프로젝트를 해보기로 했다.일단 멤버 구성은 프론트는 나, 동료분 2명은 백엔드. 이렇게 3명이서 진행하기로 했다. 퇴근하고 매주 월요일에 온라인 또는 오프라인으로 만나서 기획하고 계획을 세웠다.처음엔 조금 큰 규모의 서비스를 생각하다가, 사이드 프로젝트인 만큼 빠르게 서비스를 배포할 수 있도록더 작은 규모의 서비스 아이디어 회의를 진행했고, 그 결과 가로세로 낱말퀴즈 서비스를 만들어보기로 했다. 퀴즈의 문제는 데이터를 쌓고, 머신러닝을 통해 추후 자동화까지 고려하기로 하였고(콘텐츠의 질과 양이 중요한 서비스이기 때문에)기술 스펙은 다들 각자 해보고 싶지만 실무에서는 경험하기 힘든 최신 기술 또는 본인들이 해보고 싶었던 스펙으로 공부하며 작업을 진행하..

[ WEB ] 웹 프론트엔드 성능 최적화 방법 웹 프론트엔드 개발에서는 사용자 경험을 극대화하기 위해 성능 최적화가 꼭 필요하다고 생각한다. 서비스를 사용할 때, 느린 로딩 속도와 성능이 저하되는 불필요한 자원 낭비는 사용자로 하여금 좋지 않은 경험을 남기고, 이런 경험은 사용자로 하여금 서비스를 이탈하게끔 만드는 주요 원인이라고 생각한다. 이번 포스팅에서는 웹 프론트엔드 성능 최적화에 대해 간단히 알아보려고 한다. 1. 초기 로딩 최적화코드 분할 (Code Splitting): 애플리케이션의 코드베이스를 여러 청크로 나누어 필요한 부분만 로드한다. Webpack, Rollup 등의 번들러에서 dynamic import를 활용하여 필요한 부분에서만 파일을 사용하여 효율성을 높일 수 있다. Lazy Loading: 이미지나 비디오 같은 리소..

[ React 18+ ] RSC(React Server Componen) 파헤치기. RSC는 React Server Components의 약자로, React18 버전부터 등장한 개념이다.서버에서 컴포넌트를 렌더링 하고 클라이언트에서 이를 효율적으로 활용할 수 있게 해주는 기능으로, 서버와 클라이언트의 역할을 분리하여 사용자 경험 향상을 위해 등장한 기능이다. RSC는 React의 자체적인 기능이기 때문에 꼭 Next.js를 사용하지 않고도 구현할 수 있지만, RSC는 서버-클라이언트의 상호작용이 필요하기 때문에 Node.js기반의 서버 환경이 필요하다. 그래서 Next.js를 사용하지 않는다면 Express.js 같은 라이브러리를 사용하여 HTTP 서버를 만들고, 서버-클라이언트 스트리밍, Webpack 번들링(서버 / 클라이언트), 데이터 통신, 성능 최적화(캐싱) 등의 추가적인 설..

[ Next.js ] Next15에 대해 알아보기. 2024년 10월 21일 Next15 버전이 공식 블로그에 업데이트되었다.공식적으로 안정화되어 프로덕션에서 사용할 준비가 완료되었다고 한다. 이번 릴리즈는 RC1과 RC2의 업데이트를 기반으로 하며, 안정성에 중점을 두면서도 흥미로운 업데이트를 추가하였다고 한다.10월 24일에 열린 Next.js Conf가 있었는데, 사전 신청하고 못 들어서 녹화본을 보고 다음에 그 내용에 대한 포스팅도 할 예정이다. Next15의 사용 방법은 아래와 같다.# 새로운 자동 업그레이드 CLI 사용npx @next/codemod@canary upgrade latest# ...또는 수동으로 업그레이드npm install next@latest react@rc react-dom@rc Next.js 15의 새로운 기능..

React 18 변경점 정리 오늘은 React19 release version이 나오기 전에 React 18의 큰 변경점에 대해 살펴보려고 한다.현재 기준 React 가장 최신 버전은 18.3.1 이다.(2024년 4월 26일) 그리고 React18은 2022년 3월 29일에 정식 릴리즈 되었다. 1. 동시 렌더링(Concurrent Rendering) 동시 렌더링(Concurrent Rendering)은 사용자 인터페이스(UI)를 더 유연하고 효율적으로 렌더링할 수 있게 해주는 기능으로, 전통적인 렌더링 방식에서는 컴포넌트 트리가 변경될 때, 변경 사항이 한 번에 렌더링되면서 오랜 시간이 소요되며 UI가 멈추는 것처럼 보이는 문제가 발생하였다. 동시 렌더링(Concurrent Rendering)은 이러한 문제를 해결하..

[ React ] React 19 RC에 대해서 알아보자 React19 RC(Release Candidate)는 현재 개발 중이며 2024년 9월 기준으로 아직 정식 출시되지 않았다. 가장 최신 정보(2024년 4월 기준, React Blog 참고)를 바탕으로 설명하자면 React 19는 이전 버전들과 비교해 몇 가지 주요 개선사항과 새로운 기능들을 포함할 것으로 예상된다. 성능 개선: 렌더링과 상태 업데이트 성능이 향상될 전망.서버 컴포넌트: 서버 사이드 렌더링을 더욱 효율적으로 만들어주는 서버 컴포넌트의 완전한 구현이 포함될 가능성이 높다.동시성 기능 개선: React 18에서 도입된 동시성 기능들이 더욱 안정화되고 발전될 것으로 예상.새로운 훅: 개발자들의 작업을 더욱 편리하게 만들어줄 새로운 훅들이 추가될 수 있다.타입스크립트 지원 강화: 타입스크립..

[ JS ] e.stopPropagation 과 e.preventDefault 차이 알고 넘어가기 e.stopPropagation()과 e.preventDefault()는 비슷하게 사용되지만, 아예 다른 이벤트이다.e.stopPropagation()은 이벤트 핸들러가 상위 태그에서 실행되지 않도록 막는 역할을 한다. 다시말해 이벤트의 버블링을 중지하여 현재 이벤트가 상위 요소(부모)로 전파되는 것을 막는다.e.preventDefault() 는 기본 브라우저 동작을 가진 일부 이벤트가 해당 기본 동작을 실행하지 않도록 방지한다. 보통 링크 클릭 시 페이지 이동막기, 폼 제출시 페이지 리로드 방지등의 기본 동작 제어 역할을 한다. e.stopPropagation() 이벤트 핸들러의 버블링을 방지해준다.( 버블링 : 이벤트의 자식 컴포넌트에서 부모로 (안쪽 -> 바깥쪽) 전파되는 것. ) ex..

[ WEB ] 웹프론트엔드에서 앱 성능 최적화 하는 다양한 방법 웹 프론트엔드에서 어플리케이션의 성능을 최적화할 수 있는 방법은 무엇이 있을까?크게 로딩 성능 최적화와 렌더링 성능 최적화 이렇게 2가지로 나눌 수 있는 것 같다. 로딩 성능 최적화웹프론트에서 로딩 성능을 최적화하는 방법은 다양하다.우선 리소스 최소화 및 압축을 통한 사이즈 감소(JavaScript, CSS, HTML 파일 압축, 이미지 최적화-크기 조정, 압축, webP사용 등)를 통해 앱의 번들 사이즈를 줄일 수도 있고, 캐싱 전략을 구한하여 불필요한 데이터 추가 요청등을 방지할 수도 있다. 캐싱 전략으로는 브라우저 캐싱 설정을 최적화하거나, 서비스 워커를 이용한 오프라인 캐싱, CDN을 통한 리소스 캐싱등이 여기에 속한다. SSR, SSG 등을 사용하여 클라이언트 측 JavaScript 실..

이전 1 2 3 4 ··· 12 다음

티스토리툴바