하루하루 개발 일기 하루하루 개발 일기

1. Three.js Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리이다. WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다. https://threejs.org/docs/index.html#manual/ko/introduction/Creating-a-scene three.js docs threejs.org 한글 문서도 지원한다. 다양한 example이 있지만 이번 프로젝트에서는 https://threejs.org/examples/#css3d_periodictable three.js examples threejs.org 이 유용해 보인다. 별자리 튜토리얼도 있다. https://sb..

1. MVC 아키텍처 Model(데이터) - View(화면) - Controller(컨트롤러) Model의 데이터를 받아서 화면에 그리고, 화면으로부터 사용자의 동작을 받아 Model을 변경 Ajax로 부터 받는 데이터를 Model HTML과 CSS로 만들어지는 화면을 View javascript가 데이터를 받아 조작하여 서버에 전달하는 Controller의 역할을 수행 Model과 View의 종속성을 최대한 분리하기 위해 HTML과 jQuery를 따로 관리하는 것이 주효 Ajax를 통해 서버에서 HTML을 만들지 않고 데이터만 교환이 가능하게 되었고 JS로 DOM을 조작하는 작업이 중요함에 따라 jQuery를 통해 Ajax와 DOM을 다루게 됨 2. MVVM 아키텍처 선언적(Declarative) 프로..

React Query는 API 통신과 비동기 데이터 관리에 사용되는 React 라이브러리 입니다. 1. React-Query 이전 state에 비동기 데이터를 보관할 경우 다수의 component의 lifecycle에 따라 비동기 데이터가 관리되기 때문에 캐싱 등 최적화를 하기 어려움 다수의 component에서 동일한 API를 호출하거나, 특정 API응답이 다른 API에 영향을 미치는 경우 등에 대응하기 어려움 Redux를 사용하여 비동기 데이터를 관리할 경우 componet의 lifecycle과 관계없이 비동기 데이터를 관리할 수 있어 최적화가 쉬우며 복잡한 사용자 시나리오에도 대응 가능 장황한 Boilerplate 코드로 인해 비동기 Action 처리에 복잡성 증가 Redux는 API 통신 및 비동..

1. useNavigate를 사용하여 state로 전달 [ 이동 전 페이지 ] const navigate = useNavigate(); navigate('/home', {state:{id: 1, name: 'test'}}); 경로로 이동하면서 파라미터로 state의 id, name을 넘긴다. [ /home으로 이동 후 ] const location = useLocation(); const state = location.state as { id: number; name: string }; const id = state.id; const name = state.name; useLocation 훅을 이용하여 location.state로 id, name 인자를 전달 받는다. state의 타입 값이 unknown..

정적으로 이미지를 로드하는 방법은 다음과 같다. import timeIcon from "@/assets/icons/time.png" import placeIcon from "@/assets/icons/place.png" 하지만 필요한 이미지가 경우에 따라 달라질 때가 있다. 예를 들어 프로필 사진을 보여주어야 한다면 사람의 수는 100명, 1000명이 넘는데 이 모든 이미지를 정적으로 불러와 사용할 수는 없을 것이다. Webpack으로 빌드하는 방식에서는 require을 사용해서 동적으로 이미지를 불러올 수 있지만 Vite와 같이 ESBuild로 할 경우 require이 import와 export로 대체되기 때문에 사용할 수 없다. 그러면 어떻게 동적으로 이미지를 불러올 수 있을까? https://sta..

좋은 Frontend Developer로 성장해 나가기 이해 블로그에 공부한 개념들을 정리해 나갈 생각이다. 다음은 진행한 프로젝트 개요 및 기술 스택, 라이브러리에 대한 정리이다. 프로젝트를 진행할 수록 추가할 계획이다. 1. 1학기 SSAFY FINAL 관통 프로젝트 JIPSEE [개요] 부동산 매물 소개 및 맞춤 매물 추천 서비스 [기술스택] Vue Vuex TailwindCSS 2. 2학기 SSAFY 공통 프로젝트 PLAYGROUND [개요] 운동(농구, 축구, 배드민턴 등)을 같이 하기를 원하는 사람들을 위한 운동 매칭 서비스 [주요 기술 스택] "react": "^18.2.0", "typescript": "^4.9.3", "react-query": "^3.39.3", "react-redux":..