y.developer

2023.11.07 화 리빌딩한 파일을 토대로 추가 작성 필요 ver1 ~ ver4 타임어택과 리팩터링을 진행하면서 수많은 오류들을 만났다. 이를 기록하고 어느 부분에서 모르는지 체크해볼 수 있었다. TodoList를 리빌링 해보면서 온갖 오류들을 다 만났다. 처음에 작성했을 때와는 또 다른 부분에서 막혔던 것도 있고, 동일한 부분에서 또 막힌 부분도 있었다. 다음에 같은 오류를 만났을 때 대처하기 위해서 정리해보려고 한다. 컴포넌트 jsx 파일 이름 변경시 오류 newTodo [] import react-uuid / uuid 차이 ▶컴포넌트 앞에 대문자 안붙여서 변경시 오류 자주 발생하는 상황 : 컴포넌트 jsx파일을 생성할 때 파일이름의 첫글자를 소문자에서 대문자로 바꿔야하는 경우. 즉, 파일 이름을..

2023.11.06 월 ver1, ver 4 리액트를 활용하여 Todo List 기능을 구현했다. input 값을 추가하고, 불러와서 사용할 때 이용하는 useState를 처음 다뤄봐서 어려웠지만, 하나하나 뜯어가며 다시 분석해 보자 초기 화면 구성하기 title 값 저장하기 content 값 저장하기 todos 값 저장하기 초기 화면 구성하기 최종적으로 구축하려고 하는 디자인을 잡아놓고 들어가는 것이 훨씬 작업에 수월했다. 기능이 작동할 것도 예상해서 미리 구성해 놓는다면 기능을 완성시켰을 때 바로 확인을 할 수 있고, 기능 구현에 실패하더라도 바로 시각적으로 확인 가능하고 다음 스텝의 그림을 그려볼 수 있다. App.jsx import './App.css'; import React from "reac..

2023.11.03 금 메서드를 더 추가하여 배열 API 사이트를 완성했다. IndexOf Includes Find Some Every Sort Join IndexOf "배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다." 배열 요소를 돌며 해당하는 값과 일치하는 요소의 index를 반환한다. const handleIndexOf = () => { const IndexOf = newArr.indexOf(query); return (IndexOf === -1) ? alert("확인하려는 값을 정확히 입력해주세요.") : setResult(IndexOf); } 원본 배열 ▶ apple, banana, cherry, date, elderberry 입력 값 ▶..

2023.11.02 목 메서드를 활용한 배열 API 사이트를 만들어 보았다. Today 배열 API 사이트 만들기 학습내용 배열 API 사이트 만들기 ForEach Filter Map Reduce Push Pop Slice Splice 초기 세팅 // useState를 사용하기 위해서 import 필요 import { useState } from "react"; // 메인 함수 function App() { const initialState = ["apple", "banana", "cherry", "date", "elderberry"]; const [array, setArray] = useState(initialState); // 배열 값 const [result, setResult] = useState..

2023.11.01 수 리액트 입문 강의와 스탠다드 강의를 들었다. 실제로 React을 다뤄보며 어떤 매커니즘으로 작동하는지 알게 되었다. Today 리액트 입문 강의 스탠다드 강의 스탠다드 과제 학습내용 리액트 입문 강의 Props Filter & Map Slice & Splice Reduce State Hook 불변성&순수함수 명령형 vs 선언형 프로그래밍 렌더링 & 리렌더링 Props prop drilling 어플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다. 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만, 해당 값을 직접 사용하지 ..