인생 투자 노트 📒

다음은 todo list의 일부 코드이다.각각의 할 일을 완료 여부를 클릭할 때마다 다른 할 일 목록도 리렌더링 되는 문제가 발생한다. 리렌더링을 방지하기 위해서 2가지 방법이 있다. memo 사용 방법import { memo } from "react";const TodoItem = ({ todo, onDelete, updateDone }) => { const onClickButton = () => { onDelete(todo.id); }; const onChangeIsDone = () => { updateDone(todo.id); }; return ( {todo.content} {new Date(todo.date).toLocaleDateString..

React useEffect는 다양한 기능을 제공한다.React도 기존에는 라이프사이클에 맞게 각각 분리되었는데 통합되었고 Vue의 경우 기존의 속성을 그대로 유지하고 있다.구분React useEffectVue3특징과 차이마운트useEffect(fn, [])onMounted(fn) 언마운트useEffect(() => { return () => {} }, [])onUnmounted(fn) 업데이트(리렌더링)useEffect(fn) (배열 없음)onUpdated(fn) 특정 값 감시useEffect(fn, [val])watch(val, fn)watch는 기본적으로 변경 시에만 실행(Lazy) Vue는 이전 값(oldVal)을 기본 제공즉시 실행 + 감시watchEffect(fn)사용된 반응형 변수를 자동..

공통점DOM 접근: 포커스 제어, 스크롤 위치 조작, 외부 라이브러리(D3, Google Maps 등) 연결값의 유지: 컴포넌트가 다시 렌더링 되어도 초기화되지 않고 유지되어야 하는 변수 저장렌더링 유발 방지: ref 내부의 값이 변하더라도 UI가 다시 그려지지(Re-render) 않습니다구분React useRefVue3 ref반응성없음. 값이 변해도 React가 감지하지 못함있음. Vue의 반응성 시스템에 의해 추적됨값 접근 방식refVariable.currentrefVariable.value주요 용도DOM 참조, 렌더링 간 변수 유지DOM 참조, 반응형 상태 데이터 정의렌더링 유발유발하지 않음.value를 템플릿에서 쓰면 렌더링 유발차이점React의 useRef는 단순 자바스크립트 객체로 { curr..

Next.js를 학습하면서 Nuxt.js와 다른 점과 같은 점을 비교해 보면 좋을 거 같아 글을 작성해 봅니다. 공통점은 Pages 폴더 하위에 파일 시스템 방식으로 URL path가 정해진다는 점입니다.예를 들어 https://localhost/book 경로를 생성하고 싶다면 다음과 같은 폴더 구조를 만들어야 합니다. Next.js 경우 pages/book/index.tsx 또는 pages/book.tsxNuxt.js 경우 pages/book/index.vue 또는 pages/book.vue쿼리 파라메터(Query Parameter)https://localhost/book?q=리액트 같이 쿼라 파라메터를 넘기는 경우 사용 방법이 다릅니다.Next.jsimport { useRouter } from "ne..

25년 10월 희망 퇴직을 하게 되었다.희망 퇴직은 자발적 퇴사로 분류되어 실업 급여를 받을수 없다.교육비라도 지원 받을 방법이 있을까해서 알아 보던 중에 국민 취업지원 제도를 알게되었고 신청하게 되었다.그 과정을 잘 정리한 글이 없어서 남겨본다.1단계: 신청하기고용 24 사이트 아래 링크를 통해 들어가면 제도에 대한 소개가 있고 "취업지원신청" 버튼이 있으니 신청하면 된다.https://www.work24.go.kr/ua/z/z/1300/selectEmssRqutIntro.do 취업지원신청 소개 | 국민취업지원제도 | 취업지원취업지원신청 소개 국민취업지원제도 참여 요건을 갖추신 분은 취업지원서비스를 제공받으실 수 있고 생계를 위한 최소한의 소득도 지원받으실 수 있습니다. 수급자격 및 지원 내용 수급자격..

JSX 문법에 주의사항은 다음과 같다.중괄호 내에 자바스크립트 표현식만 넣을 수 있다. ( 삼항 연산자, &&, ||)숫자, 문자, 배열만 렌더링되고 boolean, undefined, null은 출력되지 않고 object를 에러가 발생한다.태그 시작과 종료가 반드시 매칭되어야한다.최상위 태그는 반드시 하나만 있어야 한다. ( 빈태그 가능)class 키워드 대신 className 키워드 사용label for 키워드 대신 htmlFor 키워드 사용버튼 컴포넌트를 만들어 보자.Button.jsx 파일을 하나 생성한 후 다음과 같이 작성하면 컴포넌트를 생성할 수 있다.컴포넌트는 대문자로 시작되어야 한다는 규칙이 있다.const Button = ({ children, text, color = "black" })..

그동안 Vue로만 프로젝트를 주로 진행했어서 React를 다시 공부하는 차원에서 글을 정리하기로 했다.우선 React 프로젝트로 만들기 위해서는 node를 설치 해야한다.https://nodejs.org/ko 사이트에서 node를 다운로드 받은 후 설치 하도록 하자.그리고 npm create vite@latest 명령어로 리액트 프로젝트를 생성할수 있다.마지막에 "Install with npm and start now?" 문구가 나오고 "Yes" 선택하면 자동으로 패키지들이 설치된다"No"를 선택했다면 npm install로 패키지들을 설치하면 된다. npm run dev 명령어로 프로젝트를 시작하고 터미널의 url로 접속하면다음과 같은 기본 화면을 볼수 있다.

뷰로 개발을 하다 보면 페이지를 이탈 시 confirm을 통해 확인을 체크하는 로직을 구현하게 된다. beforeRouteLeave (to, from, next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } } 그런데 콘솔 에러에 promise 에러라고만 뜬다. 에러가 난 구간을 확인해보니 onAbort에서 에러가 발생했다. 무슨 일이지? 검색을 통해서 답을 찾았다. https://github.com/vuejs/vue-router/issues/2873#issuecomment-519274203 결로부터 말하면 아래..