전체 글

📕 Prologue어떻게 벌써 2025년인지… 2024년은 정말 빨리 지나간 한 해였던 것 같다.그만큼 인생에서 제일 바빴던 한 해가 아니었을까싶다. 과연 바빴던 만큼 얻은 것도 많았는지..! 회고를 적어보려고 한다.근데 회고가 처음이라.. 어떻게 써야할 지 모르겠다..! 그냥 써야지!!🏫 학교UMC 5th Web음 이걸 2024 회고에 넣는 게 맞나..?ㅎㅎ 23-2에 시작해서 23-겨울방학에 UMC 협업 프로젝트를 3개월간 진행했다. 웹 파트장을 맡았고 내 인생 첫!! 디자이너와 함께한 협업 프로젝트를 진행했다 ㅎㅎ 당시에 React를 시작한지 한.. 4달..? 밖에 안됐어서 파트장을 맡는 게 맞나..? 하고 자신감이 없었었다. 그래도 팀원분들이 다 열심히 하시고 도와주셔서 좋았다 ㅎㅅㅎ 아쉽게도..

⚙️ Promise 일급 지원 : usefunction use(promise: Promise) : Tpromise를 파라미터로 받아 resolve된 값을 return하는 동기 함수 마치 await의 함수형처럼 기능을 함// async functionconst data = await promise;// React Component / Hooksconst data = use(promise); use 훅이 suspense를 발동시키는 트리거의 역할을 수행loading...}> // use(promise) 왜 이름이 use일까?use 훅이 가지고 있는 한 가지 특별함이 존재함 : 기존에 있던 훅들과는 달리 조건부로 호출이 가능함→ 훅의 사용으로 인한 여러 가지 문제점을 해결할 수 있을 것이라는 기대를 가짐🖥..

💡 시작하기탭바를 구현해야 하는데, 탭바에 따라 렌더링되는 데이터를 달리하려면 useRef를 써야 한다고 한다. 그래서 좀 찾아보았다.⚙️ useRefuseRef ? 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환하는 hook useRef의 가장 큰 특징은 리렌더링 없이 값을 저장한다는 점이다. 값이 업데이트 되어도 컴포넌트가 리렌더링되지 않고, 값만 메모리에 저장한다. → 훨씬 효율적임!! 현재 카페 키오스크를 구현하고 있는데, 메뉴의 종류마다 보이는 메뉴를 다르게 해야 하기 때문에 useRef를 사용하였다.🖥️ 구현해보자!1. 데이터 준비우선 카페 메뉴 데이터는 다음과 같다. ↓ 카페 메뉴 데이터 cafe.js더보기const cafe = { coffee: ..

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

⚙️ state 업데이트 큐state 변수를 설정하면 다음 렌더링이 큐에 들어간다.예제 코드import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 )}https://codesandbox.io/p/sandbox/tty55g?file=%2Fsrc%2FApp.js  각 렌더링의 state 값은 고정 → 첫 번째 렌더링의..

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

📚 시작하기 전에..한동안 기술 블로그를 쓰지 않은 이유는, 블로그 이전에 대한 고민이 많았다.결론부터 말하면 노션으로 블로그를 작성한 후 이를 배포하는 방식을 사용할 예정이다.하지만 지금 시험기간이라 할 시간도 없고, 이전에도 프로젝트 업보빔으로 인해 너무 바빴어서 방중에 배포 예정이다.우선적으로, 노션에 적어놓은 내용들을 하나둘씩 올려볼까 한다..!💡 시작하기GDG 협업 스프린트 챌린지에서 구글 로그인을 구현하는 역할을 맡았다.원래는 @react-oauth/google 라이브러리를 사용하여 구글 로그인을 구현했었다.근데 사용해봤으면 알겠지만, 라이브러리를 사용하면 구글에서 넘겨주는 response가 정해져 있다.우리 프로젝트에서는 백엔드에서 보내주는 별도의 response가 필요했기에, 라이브러리..

✏️ 들어가기 전에지금 진행하는 프로젝트를 배포했는데, 사진 렌더링이 너어어ㅓ어어어ㅓ어ㅓ어어어무 느려서 당황.. 최적화시키는 방법을 찾아보다가 가장 대표적인 방법이 lazy loading을 사용하는 방법이라고 해서 한 번 알아보려고 한다.💡 시작하기공식문서에는 이렇게 시작한다lazy를 사용하면 컴포넌트의 코드가 최초로 렌더링될 때까지 로딩을 미룰 수 있다.const SomeComponent = lazy(load)lazy loading은 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 성능을 최적화한다. 쉽게 말하면 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이라고 생각하면 된다.😄 왜 lazy loading을 사용하는가?위..