뚝딱뚝딱 코딩 기록_

[Typescript_ HTMLInputElement] ❓ 문제 리액트 + 타입스크립트로 작업하던 중 change event (event.target.checked)의 타입 오류가 발생했다. label 태그의 onChange 이벤트로 체크박스의 체크 여부를 확인하는 과정에서의 타입 선언이 잘못 된 것이었다. type을 any로 선언해 주어도 되지만 any는 지양해야 한다는 얘길 들었기 떄문에.. 다른 방법을 찾아보았다. ❗ 해결 알고보니 label이 아니라 input에서 onChange 이벤트를 추가해서 React.ChangeEvent 타입으로 선언해 주면 되는 것이었다...! event 타입 문제 때문에 타입스크립트를 사용하기 어려웠는데 이번 기회에 정확하게 타입 공부를 해야 할 것 같다. 내가 보려고..

[React_ eslint 오류] yarn을 생성한 리액트 프로젝트를 수정하고 저장했는데 이런 오류가 발생했다. 이유는cra와 yarn이 충돌했기 때문에 발생하는 문제이다. ❗ 해결 1. eslint-fonfig-react-app 를 설치한다. yarn add -D eslint-config-react-app 2. root 폴더에 .yarnrc.yml 파일을 아래 사진과 같이 생성한다. 3. 캐시 삭제 yarn cache clean 위 명령어로 캐시를 삭제한 후 다시 실행한다.

[Vanilla Javascript_ 프로젝트 환경 설정] Webpack과 Babel을 이용한 프로젝트 초기 환경 세팅 💡 프로젝트 생성 프로젝트 폴더(빈 폴더)에 src 폴더를 생성하고 하위에 HTML파일과 JS 파일을 만든다. 이때, 파일 이름, 위치는 원하는 대로 설정 가능! ** 꼭 src 폴더에 넣지 않아도 된다 ** 💡 package.json 생성 npm init 프로젝트에서 사용할 패키지 매니저를 사용하여 init 명령어를 사용하면 몇 가지를 물어보는데 프로젝트에 맞게 설정하고 작성해 주면 된다. 완료되면 node_modules 폴더와 package.json, README.md 파일이 생성된다. 💡 패키지 설치 npm install -D //패키지 이름 위 //패키지 이름// 부분에 아래에 ..

[환경설정_ webpack] ❓ 문제 바닐라 자바스크립트 초기 환경 세팅을 하던 중 webpack.config.js 파일에서 require를 사용하지 못해 오류가 발생하는 상황이 생겼다. es6에서는 require가 아닌 import/export 를 사용하기 때문인데, 그대로 바꿔서 실행하면 build가 되지 않는 현상이 반복됐다. ❗ 해결방법 1. package.json 수정하기 webpack.config.js 파일은 그대로 두고 package.json 에서 type 부분을 삭제해 준다. ("type": "module" 은 ES6 버전을 지원) 2. 파일 이름 ( js → cjs ) 변경하기 webpack.config.js 파일을 webpack.config.cjs로 바꿔주면 CommonJS 방식을 사용..

[Toy Project_ Habit Tracker] 🍃 토이 프로젝트 소개 🌳 목적 : React → Vue 마이그레이션 + Vue 익히기 🌳 기능 : add, count, delete habits, 반응형 웹 🌳 개발 기간 : 1일 🍃 사용 기술 : Javascript, Vue, Firebase, Vite 🍃 결과물 👉 https://habit-tracker-ez1n.netlify.app Habit Tracker habit-tracker-ez1n.netlify.app Vue를 시작하면서 가볍게 예전에 강의를 들으면서 리액트로 만들었던 habit tracker를 다시 구현해 보았다. 조금 다른 점은 리액트에서는 데이터를 저장하지 않았지만 뷰로 진행할 때에는 Firebase를 이용하여 데이터를 저장하는 것..

[Vite_ env variables] 1. .env 파일 생성 ❔ 환경변수 파일은 반드시 root directory (최상위 폴더)에 위치해야한다. ❗ 그렇지 않으면 인식하지 못하므로 주의해야함! 2. 환경변수 설정 ❔ 환경변수는 [ VITE_ ]으로 시작해야 읽을 수 있다. 3. 환경변수 사용 ❔ Vite에서는 [ import.meta.env ] 를 사용해야한다. ❗자바스크립트에서 환경변수를 사용할 때 보통 [ process.env ] 를 사용하기 때문에 헷갈리기 쉬움 Vue로 프로젝트를 진행하면서 환경변수를 쓸 일이 생겼다. process.env로 불러오면 되는 줄 알았는데 Vite에서는 import.meta.env로 불러와야해서 잠시 헤맸다. 이번 일을 참고하여 다음부터는 헷갈리지말고 제대로 사용..

[Project_HNTECH Hompage Dev] 🚒 프로젝트 소개 🧯 목적 : HNTECH 회사 홈페이지 제작(개발) 🧯기능 제품 정보 확인 (제품 소개 게시판) 자료 업로드 / 다운로드 (사진, 문서) 게시글 업로드 / 댓글 작성 관리자 페이지 - 로그인, 회사 정보 수정 등 PDF 프리뷰어 (미리보기) 반응형 모바일 웹 화면 🧯개발 기간 : 2022.08 - 2022.10 🚒 사용 기술 🧯 front Language : TypeScript, HTML, CSS Library : React, Redux, Material-UI, react-dnd, react-pdf Tool : Redux Toolkit, Vite API : axios 🧯 back Spring Boot (Kotlin), MySQL, Sp..

[React_ useReducer + ContextAPI] ❓ 전역으로 state 관리하기 리액트로 개발을 하면서 느낀 점은 컴포넌트 층이 많아지면 prop로 state를 전달하는 과정(prop drilling)에서 prop을 추적하기 어려워 유지보수에 영향을 미친다는 점이었다. 이러한 현상을 해결하기 위해 상태 관리도구인 Redux, Recoil, Mobx 등을 사용하여 과도한 prop drilling을 줄이는 방법을 사용한다. ❓ useReducer useState를 대체하는 hook으로 state가 여러 하위 값을 포함하는 복잡한 상태거나 다음 state가 이전 상태에 종속되는 경우 선호되는 방법이다. [state, dispatch] 한 쌍으로 반환되며 컴포넌트 밖에 state를 정의하여 사용할 수..

[Javascrip_ new Date()] sns처럼 00분 전, 00시간 전 같이 표기하는 방법에 대해 알아보자 ❓ SNS처럼 시간 표기하기 - 위 사진과 같이 00분 전, 00시간 전으로 표기하기 위해서는 시간차를 계산해 주어야 한다. 1. 시간 나누기 💡 위처럼 시간을 split 하여 "연, 월, 일, 시, 분, 초"로 나눈다. 💡 오늘 날짜를 new Date()로 구한 뒤 게시글 생성 날짜와 오늘 날짜를 따로 정의해준다. 2. 시간 차 계산 💡 new Date() 안에 "0000-00-00 00:00:00"의 형태로 넣어준 뒤 뺀다. 💡 시간 계산 ❕ beforeHours / 1000 : 초 ❕ beforeHours / 1000 / 60 : 분 ❕ beforeHours / 1000 / 60 / 6..

[JS_URL.createObjectURL()] 로컬 객체 경로를 만들어 주는 URL.createObjectURL()을 img 태그 안에 직접 입력했을 때 반복적으로 객체를 생성하는 것과 그에 대한 해결 방법 대해 알아보자 ❓ URL.createObjectURL()을 이용하여 이미지 미리보기를 구현하던 중 text를 입력할 떄마다 계속해서 이미지 객체를 생성하는 현상을 발견했다. 이전 프로젝트와 같은 방법으로 구현했는데 이번에만 발생한 이슈라서 이유를 몰라 조금 헤맸다. 전역 스테이트 (useReducer, useContext 이용)로 관리하며 state를 복사해서 그런 것인 줄 알고 따로 빼서 분리하는 등 이것 저것 시도해 보았지만 똑같은 현상이 일어났다. 그런데 이유는 바로 img 태그 안에 바로 U..