개발일지

⚙️ 스크롤 스냅 구현스크롤 스냅(scroll snap) ? 웹페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 CSS 속성 우선 스크롤 스냅을 적용할 컨테이너와, 그 안에 스냅될 컴포넌트들을 배치한다. // 첫 번째 화면 : 타이틀 // 두 번째 화면 : 프로필 // 세 번째 화면 : 스킬 // 네 번째 화면 : 프로젝트 부모 컴포넌트에는 scroll-snap-type, 자식 컴포넌트에는 scroll-snap-align 속성을 적용해주면 된다. Scroll snap 속성scroll-snap-type : 스크롤 스냅이 동작하는 방식적용 방식 : scroll-snap-type : {스냅이 적용될 축} {스냅 적용 방식}스냅..

💡 시작하기저번 개발일지에서 어떻게 하면 이미지를 객체에 매핑했을 때, 어둡지 않게 표현할 수 있을까? 하며 더 공부해봐야겠다고 했는데…음….결론적으로는 찾지 못했다.. 그냥 R3F로 예쁜 배경을 표현하고 나머지는 기존 컴포넌트를 사용하기로 하였다 😭⚙️ R3F로 만든 배경 고정시키기style을 적용해서 마우스로 배경을 움직이지 못하도록 설정해주었다.요렇게~! 진짜 왕이쁘다 ㅎㅅㅎ🖥️ 스크롤 내릴 때마다 컴포넌트 뜨게 구현하기다양한 포트폴리오 페이지를 찾아봤는데, 일정 스크롤을 내리면 프로필, 프로젝트, 수상내역 등 컴포넌트가 하나하나씩 등장하는 게 매력적이라 이를 구현해보기로 결정했다. 우선 프로필부터 후딱 만들었다.  // App.jsxfunction App() { const [scrollY,..

💡 시작하기오늘은 본격적으로 three.js를 사용해서 포트폴리오 사이트를 만들기 전, three.js에 관한 문서를 읽고 개념과 사용 방법을 정리하고, 포트폴리오 사이트의 배경을 먼저 설정해보기로 하였다.⚙️ Three.js의 개념과 기본 구조?Three.js란?웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리 Three.js의 구조three.js를 사용하려면 반드시 알아야 할 개념 3가지가 존재한다.⇒ Scene, Camera, RendererScene : 3D object가 존재하는 공간이다. Scene 그래프의 최상위 노드로서 배경색, 안개(fog) 등의 요소를 포함한다.Scene에 포함된 객체들 또한 부모/자식의 트리 구조로 이루어지며, 이는 각 객체의 유래와 방향..

💡 왜 시작하게 되었나요?예전부터 포트폴리오 사이트를 직접 만들고 싶다는 생각을 수백번 했다.근데 진짜 시간이 없었고(는 핑계) 아직 내가 사용할 수 있는 스택들이 잘 쓰일지도 모르겠고..특히, 내가 짠 코드들이 잘 짠 코드인지 모르기 때문에 더 망설였던 것 같다. 마침 GDG에서 진행되는 스터디 중 하나가 웹 스프린트 챌린지였다.여기에서는 스스로 프로젝트 주제를 선정한 다음, 격주마다 프로젝트 진행 현황을 발표하는 거였다.이거라면,... 내가 코드를 잘 짰는지 알려줄 사람이 있지 않을까..? 하는 생각도 들었고,다른 사람들이 공부한 내용도 같이 알아가면 발전된 포폴 사이트를 만들 수 있지 않을까? 해서 결정!!! 근데 또 마침 Three.js에 관심이 있었고,Three.js로 제작한 포트폴리오 사이트..