✏️ 들어가기 전에지금 진행하는 프로젝트를 배포했는데, 사진 렌더링이 너어어ㅓ어어어ㅓ어ㅓ어어어무 느려서 당황.. 최적화시키는 방법을 찾아보다가 가장 대표적인 방법이 lazy loading을 사용하는 방법이라고 해서 한 번 알아보려고 한다.💡 시작하기공식문서에는 이렇게 시작한다lazy를 사용하면 컴포넌트의 코드가 최초로 렌더링될 때까지 로딩을 미룰 수 있다.const SomeComponent = lazy(load)lazy loading은 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 성능을 최적화한다. 쉽게 말하면 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이라고 생각하면 된다.😄 왜 lazy loading을 사용하는가?위..
전체 글
💡 시작하기오늘은 본격적으로 three.js를 사용해서 포트폴리오 사이트를 만들기 전, three.js에 관한 문서를 읽고 개념과 사용 방법을 정리하고, 포트폴리오 사이트의 배경을 먼저 설정해보기로 하였다.⚙️ Three.js의 개념과 기본 구조?Three.js란?웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리 Three.js의 구조three.js를 사용하려면 반드시 알아야 할 개념 3가지가 존재한다.⇒ Scene, Camera, RendererScene : 3D object가 존재하는 공간이다. Scene 그래프의 최상위 노드로서 배경색, 안개(fog) 등의 요소를 포함한다.Scene에 포함된 객체들 또한 부모/자식의 트리 구조로 이루어지며, 이는 각 객체의 유래와 방향..
💡 시작하기현재 Redux만 사용하고 있는데, 다른 프로젝트에서 React Query와 Zustand를 사용하자고 해서 공부를 해야됐었다. 근데 마침 우아콘2023 컨퍼런스에 저 두 개의 상태 관리 도구를 사용하는 이유와 로직을 설명하는 세션이 있었다! 그래서 냅다 선정하고 듣기로 했다.1️⃣ 이야기의 시작은 고민과 함께프론트엔드 상태관리State : A Component’s Memory컴포넌트 : UI/UX와 함께 많은 발전을 거치게 되며 많은 인터렉션과 많은 일 등을 수행 ex) 어떤 팝업을 화면에 띄울지 말지, 주문 / 배달의 진행은 어떤지-> 상태관리 필수!!프론트엔드 상태관리 방법의 변화Redux → MobX → Context API → Post Redux(Recoil, Zustand, …) ..
✏️ 들어가기 전에내가 프로젝트를 진행하면서 사용했던 React Hooks는 useEffect, useState, useRef 밖에 없다. React 공식문서를 보니까 정말정말 다양한 훅들이 많더라.. 하나하나 보면서 얼마나 다양한 기능들이 있을지 알아보자!!* 모든 내용은 React 공식 문서를 참고하여 작성하였습니다. *💡 시작하기Hooks를 사용하면 컴포넌트에서 다양한 React 기능을 사용할 수 있다.내장된 Hooks를 사용하거나 Hooks를 결합하여 직접 빌드할 수 있다.예전 버전에는 클래스형 컴포넌트를 많이 사용하였다.클래스형 컴포넌트에는 고유 기능인 상태 관리와 라이플사이클 관리 기능을 가지고 있기 때문이다.하지만 hooks가 등장하면서 함수형 컴포넌트에서도 이 기능들을 사용할 수 있게 해..
💡 왜 시작하게 되었나요?예전부터 포트폴리오 사이트를 직접 만들고 싶다는 생각을 수백번 했다.근데 진짜 시간이 없었고(는 핑계) 아직 내가 사용할 수 있는 스택들이 잘 쓰일지도 모르겠고..특히, 내가 짠 코드들이 잘 짠 코드인지 모르기 때문에 더 망설였던 것 같다. 마침 GDG에서 진행되는 스터디 중 하나가 웹 스프린트 챌린지였다.여기에서는 스스로 프로젝트 주제를 선정한 다음, 격주마다 프로젝트 진행 현황을 발표하는 거였다.이거라면,... 내가 코드를 잘 짰는지 알려줄 사람이 있지 않을까..? 하는 생각도 들었고,다른 사람들이 공부한 내용도 같이 알아가면 발전된 포폴 사이트를 만들 수 있지 않을까? 해서 결정!!! 근데 또 마침 Three.js에 관심이 있었고,Three.js로 제작한 포트폴리오 사이트..
개인적으로 시작하는 프로젝트에서 처음으로 vite를 사용하게 되었다.근데 난 CRA만 사용해봤고, vite를 처음 들어봤어서…정리를 하면서 Vite에 대해 알아가보려고 한다!! 📌 Vite란?Vite는 프랑스어로 "빠르다(Quick)"를 의미하며,빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.개발 시 다양한 기능을 제공한다. ex) Hot Module Replacement (HMR)번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. → 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다. 📌 CRA 대신 Vite를 사용하는 이유CRA(Create React A..
많고 많은 슬라이더 라이브러리 중 Swiper.js를 선택한 이유?프로젝트를 진행하다 슬라이더를 구현하게 되어, 이를 간편하게 구현할 수 없을까? 하며 슬라이더를 구현할 수 있는 라이브러리들을 찾아보았다. react-slick, slick-carousel, react-bootstrap, swiper.js 이렇게 찾을 수 있었다. 처음에는 react-slick, slick-carousel 을 사용하였는데, 자유로운 디자인이 불가능하다는 단점을 찾게 되었다. 이번 프로젝트는 디자이너가 만든 디자인이기에 섬세한 디자인이 꽤나 많이 들어가있다. 하지만 앞서 말한 두 라이브러리의 경우 섬세한 디자인 작업이 힘들다는 것을 알게 되었다. react-bootstrap은 디자인이 너무 단조로워서 탈락. swiper.js..
MVCModel(데이터) - View(화면) - Controller(컨트롤러)Model모델 == 데이터라고 생각하면 된다.View사용자에게 보여지는 부분, 화면을 뜻한다.HTML, CSS 등으로 만들어진다.ControllerView 객체와 하나 이상의 Model 객체 사이에서 중개자 역할을 한다.Model(데이터)을 가공하는 역할은 한다.사용자의 이벤트에 따라 모델 객체 또는 뷰를 변화시킨다.단순하기 때문에 보편적으로 많이 사용된다.View와 Model의 의존성이 높아, 어플리케이션이 커질수록 복잡해진다.MVVMModel(데이터) - View(화면) - ViewModel(뷰 모델)프로그램의 비지니스 로직과, 프레젠테이션 로직을 UI로 명확하게 분리하는 패턴이다.Model모델 == 데이터라고 생각하면 된다..