행복을 담는 블로그

1. yarn create vite (명령어 중간에 - 있으면 안 됨) *vite : 프랑스어로 빠르다 . : 현재 이 폴더에서 진행하겠다. 2. 프레임워크 정하기 : React 3. 언어 정하기 SWC : Speedy Web Compiler Rust로 짜여진 컴파일러로, 현재는 JavaScript/TypeScript 트랜스파일링을 주로 담당하고 있다. 속도와 성능 개선에 초점을 맞추고 있으며, 기존의 Babel 등의 트랜스파일러를 압도적으로 뛰어넘는 성능을 보여준다. 4. 실행하기 yarn 먼저 실행하면, 이어서, yarn dev 실행하면, 5. 파일 설명 node_modules : 사용할 라이브러리가 들어가 있는 폴더 package.json : 새로운 프로젝트 사용시, 명령어 확인 할 수 있다. de..

오늘 공부한 내용 정리💁🏻‍♀️ 1. uncontrolled component input 태그에 useState를 사용하기 위해서는 value와 onChange를 사용하였다. ▶️ 이렇게 사용할 경우, input에 `값을 입력할 때마다` 하나하나 모든 input 값을 useState로 받는다. 하지만 placeholder랑 name을 넣어주면 uncontrolled component로 사용할 수 있다. ▶️ uncontrolled component인 경우에는, input 값이 제출 시기에 `한 번만` useState에서 판단하여 값을 받는다. 2. console.dir console.log 찍었는데 원하는 값이 안 보이면, console.dir을 찍어보자. console.log : html과 같은 형태의..

오늘 공부한 내용 정리💁🏻‍♀️ 1. Git commit message 작성 rules ✅ commit message 란? : commit 명령어는 git 변경점을 구분하기 위해 작성하는 메세지 git commit -m "작성할 메세지"그렇다면 커밋 메세지는 아무렇게나 작성하면 될까? 처음에는 그냥 그 날의 날짜를 적어서 올린다거나, 1차 커밋 이런식으로 메세지를 작성했다. 하지만 개인 프로젝트가 아닌 팀 프로젝트를 할 경우, 내가 작성한 메세지를 보고 어떤 부분이 변경 되었는지를 확인 할 수 있도록 좋은 커밋 메세지를 작성해야한다. 좋은 커밋 메세지를 작성하기 위해서는 몇 가지 명령어를 따르는 것이 중요하다. feat : 새로운 기능을 추가할 경우 fix : 어떤 오류/ 버그를 수정 및 해결 build..

이 문제를 보고 나는 바로 아 그냥 for문으로 i를 ++ 하면서 더하면 되겠구나 라고 생각을 했다. // 내가 처음 작성한 답 function solution(a, b) { let sum = 0 for(let i=0; i acc += curr * b[currIdx],0) return answer } reduce 함수에 대해서 조금 더 알아보도록 하자. 내가 원래 알고 있던 reduce() 메소드는 배열 내 숫자들의 합을 구하는 함수였다. 하지만 reduce () 에서 index도 넣어서 사용할 수 있다는 것을 알게 되었다. 1. reduce () 메서드로 배열의 합 구하기 (출처 어제 오늘 내일 ) let array = [1,2,3]; const result = array.reduce(function ..

오늘 공부한 내용 정리💁🏻‍♀️ 1. Basic 세션 2회차 수업 1) map 과 filter .find, .findIndex, .indexof : 순회하면서 처음 만난 값을 가지고 온다. 그 뒤로는 더이상 찾지 않는다. .reduce(acc + curr) : 배열 내 값들의 합 구하기/ 하나로 합치기 => 배열 내 값이 4개였는데, 1개로 나온다 ✅ map : 원본과 같은 길이의 새 배열을 생성할 때 사용. array.map((element) => {/* 변환 로직 */}); ✅ filter : 콜백 함수의 조건을 통과하는 요소로 원본과 같거나 짧은 길이의 새 배열을 생성 array.filter((element) => {/* 조건 */}); !!질문!! filter 메소드를 진행하는 코드에서, user..

🚨 컴포넌트로 분리하기 본격적으로 코드를 작성하기에 앞서 반복되는 컴포넌트를 먼저 분리하면 더 쉽게 코드를 작성할 수 있다. (아니 사실 과제 할 때는 마지막에 컴포넌트 분리했는데,,, 분리하다가 계속 오류가 나서 죽을 뻔 했다,,,) 개인과제 해설 보고 깔끔하게 코드를 작성하기 위해서 컴포넌트를 열심히 분리해서 다시 작성해보았다. 크게는 App 컴포넌트 > Header / TodoController > TodoForm / TodoList > TodoCards 이렇게 여러개의 컴포넌트로 구성하였다. 📌 component를 분리하면 꼭, import/ export를 사용하여 두 컴포넌트 사이를 연결 시켜줘야한다!! 1) App 각 구역 단위로 컴포넌트를 따로 분리하여 작성하니 App 컴포넌트의 코드가 아주..

첫 번째 리뷰에서는 form 태그를 통해 입력한 값을 받아와 card로 생성을 하고, Delete 버튼을 통해 해당 카드를 삭제하는 것 까지 살펴 보았다. 이제는 Done 버튼을 누르면 아래 Done🎉 으로 카드가 내려가고, Cancle 버튼을 누르면 위 Working...🔥으로 카드가 다시 올라가는 것을 구현해보자. Todo Card 완료/취소하기 1. Todo 완료/취소하기 isDone의 false/ true 값을 활용하여 조건부 렌더링을 진행한다. cards의 배열을 map 메소드를 이용하여 재배열한다. → 만약에 todo의 객체의 id가 해당 클릭한 id와 동일하다면, 객체를 분해하여 (...todo) 해당 객체의 isDone의 상태를 반대로 바꾼다. → 이후, 바뀐 todo의 객체가 cards ..

React 입문 강의가 끝나고 React 첫 개인과제도 끝이 났다. 이번 react 개인과제로 진행한 To-do List 만들기 에 대해서 리뷰해 보고자 한다. 📝 To-Do List 만들기 1. CRA 설치하기 npx create-react-app to-do-list프로젝트를 생성한다. 2. 기본 틀 잡기 처음에는 App.jsx 파일에서 기본 html을 구성하였다. import React from "react"; function App() { /* card 기본 state */ const todoObj = { id: 1, title: "리액트 공부하기", text: "리액트 기초를 공부해봅시다.", isDone: false, }; //구조분해 할당으로 객체 내부 key 값에 접근하기 const { id..