프론트엔드 개발자의 기록 공간

❗❗ 데브코스 54일차 (10.14) 오늘도 자주 사용되는 컴포넌트 로직을 함수로 뽑아내는 연습을 진행한다. 프론트 개발을 하다 보면, 프론트에서 자체적으로 저장해야 하는 데이터들이 있다. (임시저장 데이터, 토큰 등) 이를 위해서 localStorage, sessionStorage를 이용하게 된다. 또한, 특정 이벤트가 발생하고 몇 초 뒤에 어떠한 로직을 수행하는 setTimeOut() 함수도 자주 사용된다. 몇 초 뒤 다른 페이지로 이동 등등... 이 두 가지를 Custom Hook으로 만들어보는 과정을 설명하겠다. ✅ useLocalStorage - Custom Hook import { useState } from "react"; // localStorage 저장할 key값, 초기값 const us..

❗❗ 데브코스 53일차 (10.13) 53일차 두 번째 시간 또한, 컴포넌트 연습하기로 진행된다. 또한 사용자 정의 Hook 만드는 연습도 진행된다. 사용자 정의 Hook 코드 하나를 예시로 설명을 하겠다. ✅ useHover - 마우스 hover Hook 마우스를 컴포넌트에 올렸을 때, 올리지 않았을 때 처리를 위한 Hook이다. 이와 같은 useHover Hook은 많이 사용된다. 버튼에 hover 했을 때 css 처리, 이벤트 발생 등등 다양하게 사용할 수 있다. import { useCallback, useEffect, useState, useRef } from "react"; const useHover = () => { const [state, setState] = useState(false);..

❗❗ 데브코스 46일차 (10.04) 6일차에는 Vue에서 Router를 활용하여 페이지 이동을 다루는 방법을 다룬다. 간략하게 Vue Router에 대해 기본적인 개념만 다룰 예정이다. ✅ Installation npm install vue-router@4 yarn add vue-router@4 Vue3 버전에 맞게 사용할려면 router4버전을 설치해주면 된다. (포스팅 당시 기준) ✅ Router 사용법 - Router 구성 방법 import { createRouter, createWebHistory } from 'vue-router' import "필요한 컴포넌트 경로" export default createRouter({ history: createWebHistory(), routes: [ //..

❗❗ 데브코스 45일차 (10.01) 밀리고 밀리다 한 달 만에 다시 이어서 작성하는 Vue 강의... 5일차에는 Vue의 상태 관리 개념을 익힌다. 같은 레벨의 컴포넌트에서의 여러 단계의 props 전달과, 중앙 상태 관리인 Vuex에 대해 다뤄 볼 것이다. ✅ Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야 할 때 props를 사용한다. 상위에서 하위의 deth가 깊어지면 지속적으로 props를 사용해서 전달해야 할까? ex) root -> parent -> child1 -> child2 ->.... child5의 컴포넌트 구조가 있을 때, root에서 child5로 데이터를 넘긴다면 수많은 컴포넌트에서 props가 타고 타고 내려갈 것이다. 같은 계층에서 이러한 ..

❗❗ 데브코스 44일차 (09.30) 4일차는 Vue 강의 뿐만 아니라 라이브러리 통한 개발 과정에서 필요한 환경설정인 Webpack에 대한 강의로 이루어진다. ✅ Webpack 자바스크립트 기반으로 개발 규모가 커지면서 js, jsp, cjs, sass 등의 파일들과 모듈들이 많아지게 되면서 이를 관리하는 시스템이 필요해지게 된다. Webpack은 여러개의 파일을 실제로 웹 브라우저에서 동작할 수 있도록 하나의 파일로 합쳐서 반환해주는 모듈 번들러(Module bundler)이다. 이러한 Webpack은 개발 환경에서 webpack.config.js로 생성해서 필요한 옵션을 지정해서 사용해주면 된다. 몇 가지 기본적인 예시를 보자 const path = require('path') module.expo..

❗❗ 데브코스 43일차 (09.29) Vue3일차...React가 그리워지기 시작했다... Vue의 강력한 장점 양방향 바인딩과 Vue 프로젝트를 사용하기에 앞서, 환경세팅을 위한 node, npm에 대해서 강의가 진행 됐다. ✅ 양방향 바인딩 "v-model" 디렉티브를 사용하면 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다.코드 예시를 통해 알아보자. 1. Input 예시 //Vue 코드 Message is: {{ message }} data() { return { message: '' } } 위의 코드를 실행하면 input값에 적힌 내용에 따라 "message" 변수가 실시간으로 바뀐다. Vue를 처음 학습하면 이 문법이 좋은지 이해가 안 될 것이다. 리..