본문 바로가기

Develog/Study

Next.js 보일러 플레이트 만들기 개념🔥 **보일러플레이트(Boilerplate)**란?1. 개념 : 반복적으로 자주 사용하는 코드 구조나 파일. 2. 이름의 유래 : 신문 인쇄소에서 자주 쓰던 금속판에서 온 말로, 자주 쓰는 문구를 금속판으로 찍어두고 복사 붙여넣기 하듯 사용했던 것에서 유래된다. 소프트웨어에선 반복적으로 쓰는 코드라는 의미 3. 개발에서의 의미매 프로젝트마다 거의 비슷하게 생기는 기본 뼈대 코드처음부터 직접 하나하나 다 작성하지 않아도 되도록, 초기 세팅을 미리 해둔 코드 묶음4. 보일러 플레이트의 장점 시간 절약: 매번 똑같은 설정 안 해도 됨.일관성 유지: 팀원들이 같은 구조에서 개발.생산성 향상: 중요한 로직에만 집중 가능. 목적스토리북이나, 다른 라이브러리 등을 공부하거나 테스트하고 싶을때, 매번 설정을 새로.. 더보기
[기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket 주제선정이유 사이드 프로젝트 CHIT을 개발하고 있습니다. CHIT의 주요 핵심기능은 순번대기 기능인데요. 다들 티켓팅 해보셨나요? 티켓팅 화면에서 서버대기 화면 한번쯤 다들 보신적 있을텐데, 그거랑 비슷한 기능이라고 보시면 됩니다!   이 기능을 구현하기 위해 SSE(Server-Side-Events) 를 사용하고 있습니다. 간단히 말하자면 SSE는 서버로부터만 이벤트를 받는 단방향 통신입니다. 채팅과 달리 서버로부터 일방적으로 메시지를 받기만 합니다.  사용하는 기술인 SSE를 제대로 알고싶었고 겸사겸사 WebSocket에 대해서도 알아보려합니다. (부채질중) 1.✅ 개념알아보기SSE(Server-side-events) 란 무엇인가 보통 웹브라우저에선 웹이 request를 보내면 서버가 respons.. 더보기
시맨틱 태그 (SemanticTag) 시맨틱태그(SemanticTag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그. block element 이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다.,,,,등이 있다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고, 각 부분의 역할과 기능을 전달하는데 도움이 된다. 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주는 태그 시맨틱 태그 종류 article독립적인 글을 다루는데 사용하는 태그, 블로그 게시물, 뉴스기사, 제품 리뷰 등 독립적으로 배포하거나 재사용 할 수 있는 독립형 콘텐츠aside옆에 위치하는 콘텐츠를 담는 태그, 페이지 콘텐츠를 제외한 콘텐츠를 정의, 주로 문서에선 사이드바details사용자가 보거나 숨길 수 있는 추가 세부 정보를 .. 더보기
SEO(search engine optimization : 검색엔진 최적화) 조사하기 SEO는 검색엔진 최적화를 뜻하며, 웹사이트나 웹페이지가 검색엔진의 검색결과에서 상위에 노출 될 수 있도록 하는 다양한 전략과 기술을 말한다. 웹사이트 검색을 통해 상단에 게시되면 사이트의 트래픽을 증가시킬 수 있다.SEO는 크게 두가지로 나눌 수 있다.온페이지 SEO (On-page SEO)온페이지 SEO란 사이트 내부의 요소를 최적화 하여 검색 엔진과 사영자에게 관련성 높은 정보를 제공하는 것이다.이작업은 콘텐츠와 HTML 요소를 중심으로 이루어진다.콘텐츠 최적화 : 검색어와 관련높은 키워드들을 글에 게시하는게 속한다.메타 태그 : 페이지의 제목 태그와 설명태그를 최적화해서 (title, description) 검색엔진이 잘 이해할 수 있게 한다.이미지 최적화 : 이미지에 alt 태그를 대체텍스트를 .. 더보기
[꼬랑지랑] next.js 사이트 개선기 (2) 이커머스 상세페이지 더보기 구현 안녕하세요 주니어 프론트엔드 개발자입니다!이번엔 사이드 프로젝트로 만들었던 꼬랑지랑(이커머스 사이트)의 상세페이지 더보기 기능을 구현하겠습니다.- 상세페이지 탭 고정, 미리보기 이미지의 화면 상단에 보이게 하기 등  꼬랑지랑에 적용하기상품정보 더보기 기능상품상세 메뉴바가 위에 고정되는 기능BeforeAFTER 문제정의문제 : 미리보기 페이지가 이미지의 중간부터 보여줌=> 미리보기 부분이 이미지의 가장 윗부분 으로 바꾸기문제 : 화면을 펼쳤을 당시 아랫부분에 렌더링되야하는 상품후기 탭 레이아웃이 깨진다=> 이미지 더보기를 클릭해도 레이아웃이 깨지지 않고 그 하단에 탭이 생성되게 하기기존코드 상품설명 .. 더보기
[리액트 성능최적화] useCallback 과 useMemo의 차이와 React.memo 1. React 성능최적화에 사용되는 useCallback() 과 useMemo(), React.memo의 차이는 무엇일까?useMemo()는 특정 계산의 결과를 메모이제이션 하며 의존성 배열이 변경되지 않는 한 동일한 결과를 반환하는 리액트 훅이다. 비용이 많이 드는 계산을 반복하지 않도록 방지하여 성능최적화에 쓰인다. useCallback()은 '함수'의 메모이제이션에 사용된다. 컴포넌트가 리렌더링 될 때마다 동일한 함수가 재생성되는 것을 방지하며, 불필요한 리렌더링이나 성능 저하를 방지한다. React.memo()는 자식컴포넌트가 부모컴포넌트에게서 전달받는 props가 변하지 않으면 자식컴포넌트가 리렌더링 되지 않게 해준다. 부모컴포넌트가 자식컴포넌트에 함수를 props로 전달해준다면 useCall.. 더보기
실전으로 배우는 웹 성능 최적화 for React 강의를 듣는 이유1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?2. 리액트에서 성능개선을 하는 법을 알고싶었다.3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다.  1. 프론트 성능 최적화는 두개로 나눌 수 있다.1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다.  2. 성능 최적화 방법들1) 로딩성능 최적화이미지 사이즈 최적화 : 이미지의 크기를 줄인다.code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.2) 렌더.. 더보기
[꼬랑지랑] next.js 사이트 개선기 (1) 요약 : 1. next.js로 만든 웹사이트의 성능을 개선하려고 했다.2. next.js는 Image 태그를 사용하면 자동으로 최적화가 되는데 나는 안됐다. 어째서?3. 나는 unoptimized 옵션으로 next.js의 최적화 기능을 사용 안하고 있었다 ^0^ 1. Next.js로 만든 웹사이트 성능최적화를 해보자 주인공은 이 웹사이트다2.결과 미리보기 처음엔 이랬다 개선 후 LCP가 확 줄어들었다 3. 개선기1. 문제파악하기 구글의 Light House는 최적화를 위한 방법들을 분석하고 제안해 준다. 그 예로 우리 사이트는 이렇다  3.6초나 차지하는 LCP 요소가 무엇일까?메인엔 이미지 밖에 없었다. 나는 이 이미지들을 로드하는데 시간이 많이 걸린다고 생각했다.  방법 1. 배너와 같은 관리자가 설.. 더보기

티스토리툴바