💡 시작하기오늘은 본격적으로 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모델 == 데이터라고 생각하면 된다..
시작하기 전에,하.. 프론트엔드를 고집해오고 다양한 프로젝트를 하며 성장하고 있다고 생각했는데, 막상 뜯어보니 이론 하나 완벽하게 이해하지 못하고 코드만 짜고 있는 내 자신을 발견했다. 진짜 현타 너무 왔다.. 가장 뼈저리게 느꼈던 점은, 어느 회사의 멘토멘티를 지원하기 위해 치른 실기였다. 이론을 이해하면 충분히 풀 수 있는 코드 문제였는데, 얼레.. 아무것도 몰라.. 기초 지식만 가지고 풀어서 역시 불합격..^^요즘 하루에 하나씩 프론트엔드 관련 글들을 읽(으려고 노력하)고 있다.하지만 글만 읽는다고 내것이 되는 건 아니기에.. 다시 한 번 처음부터 이론 글을 써보면서 완벽하게 이해해보고 싶었다!!제발 꾸준히만 하자 꾸준히..SPA와 MPA 이 둘의 차이점은 사용하는 페이지가 몇 개인가에 따라서 구분..
