react

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

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

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

✏️ 들어가기 전에내가 프로젝트를 진행하면서 사용했던 React Hooks는 useEffect, useState, useRef 밖에 없다. React 공식문서를 보니까 정말정말 다양한 훅들이 많더라.. 하나하나 보면서 얼마나 다양한 기능들이 있을지 알아보자!!* 모든 내용은 React 공식 문서를 참고하여 작성하였습니다. *💡 시작하기Hooks를 사용하면 컴포넌트에서 다양한 React 기능을 사용할 수 있다.내장된 Hooks를 사용하거나 Hooks를 결합하여 직접 빌드할 수 있다.예전 버전에는 클래스형 컴포넌트를 많이 사용하였다.클래스형 컴포넌트에는 고유 기능인 상태 관리와 라이플사이클 관리 기능을 가지고 있기 때문이다.하지만 hooks가 등장하면서 함수형 컴포넌트에서도 이 기능들을 사용할 수 있게 해..

개인적으로 시작하는 프로젝트에서 처음으로 vite를 사용하게 되었다.근데 난 CRA만 사용해봤고, vite를 처음 들어봤어서…정리를 하면서 Vite에 대해 알아가보려고 한다!! 📌 Vite란?Vite는 프랑스어로 "빠르다(Quick)"를 의미하며,빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.개발 시 다양한 기능을 제공한다. ex) Hot Module Replacement (HMR)번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. → 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며,     미리 정의된 설정(Pre-configured)을 제공한다. 📌 CRA 대신 Vite를 사용하는 이유CRA(Create React A..

너무나도 힘들어했던 이미지 업로드를 드디어 해냈다!! 야호야호~! input - file input에는 type 중 file 이라는 속성이 존재한다. file은 이미지, 동영상과 같은 파일을 업로드하는 기능을 가지고 있다. export default function Image() { return ( ); } 위 코드를 적용시키면 아래와 같이 [파일 선택]이라는 버튼과 함께 화면에 렌더링된다. 이미지 선택 & 미리보기 이미지를 선택하고 서버에 전송하기 전, 선택한 이미지를 화면에 렌더링을 할 것이다. 그래서 handleImageChange 라는 함수를 만들고, input의 onChange에 함수를 넣어주었다. import { useState } from 'react'; function App() { con..