codinghatso

기초 문제를 많이 풀어서 해결한 문제의 수는 많아 보인다. 하지만 고난도 문제와 실력 향상에 도움이 되는 문제의 수는 적었다고 생각하고 24년에는 고득점을 위한 문제들을 많이 풀어야겠습니다. 조금 더 성실하게 연습하는 개발자가 되고자 합니다.

사전 설정 Custom Instructions 구체적인 질문을 통해 답 추출하기 역할 부여하기 보이스 활용하기 자료 리서치 활용법 새로운 언어를 학습할 때 내가 지금 까지 공부했던 내용을 사전설정을 통해 AI에게 알려주고 학습한다면, 나의 경험을 활용한 학습이 가능할 것입니다. 새로운 개념을 학습할 때 가이드라인을 받아 볼 수 있습니다. 보이스는 음성(육성)으로 소통하면서 질문하는 훈련을 할 수 있습니다. 문서 요약이나 첨삭을 AI를 활용해 작업할 수 있습니다.

전체적인 틀 AttendanceBook.js import React, { useState, useReducer } from "react"; const reducer = (state, action) => { } const initialState = { } function AttendanceBook(){ const [name, setName] = useState(""); const [] = useReducer(reducer, ); return ( 추가 ) } export default AttendanceBook; 구현 import React, { useState, useReducer } from "react"; import Student from "../components/Student"; //reducer..

React 공식문서 링크 Hooks API Reference – React A JavaScript library for building user interfaces ko.legacy.reactjs.org useMemo는 메모리 최적화를 위한 Hook API입니다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,b]); useMemo()에 콜백함수를 사용하며 retrun 값을 넘겨준다. return 값에는 객체도 넘겨줄 수 있다. useMemo()의 두 번째 인자로는 의존성 배열을 표기한다. (의존성 배열의 값이 바뀔 때만 콜백을 호출한다.) useMemo는 성능 최적화를 위해 사용할 수 있지만 의미상으로 보장이 있고 생각하지는 말..

React에서 제공해 주는 Context API에 대해서 정리해 봅시다. React가 props를 내려줘 상위 컴포넌트의 요소를 하위 컴포넌트에서 가져다가 사용하는 상황에서 너무 많은 컴포넌트를 통과하여 전달하는 것을 막고자 Context를 사용합니다 기존의 React의 props를 활용해 전역데이터를 사용했을 때 도중에 오류가 발생했다면 모든 컴포넌트에서 오류가 발생하는 현상이 나타날 것이며, 오류를 수정하는 것 또한 엄청난 작업이 될 것입니다. context를 사용하기 전에 고려할 것 context의 주된 용도는 다양한 레벨에 배치된 많은 컴포넌트에게 데이터를 전달하는 것입니다. context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 사용합시다. prop drilling을 피하기..

useRef 개념 설명 const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해줍니다. ref object 란? { current: value } 형식으로 저장이 됩니다. 수정이 가능하기 때문에 언제든 원하는 값으로 바꿔줄 수 있다. 렌더링이 계속되어도 언 마운트 되기 전까지 값을 유지할 수 있다. useRef의 용도 변수 함수형 컴포넌트가 렌더링 된다는 것은 컴포넌트 내부 변수들이 초기화된다는 말입니다. Ref의 값이 변화해도 렌더링이 되는 상황이 일어나지 않고, 렌더링이 일어나도 값이 초기화되지 않기 때문에 사용됩니다. 요소 접근 Ref를 사용하면 쉽게 input요소에 접근할 수 있게 됩니다. (마치 javascript의 Document.q..

useEffect의 두 가지 형태 첫 번째 컴포넌트가 렌더링 될 때마다 실행 useEffect(() => { //작업... }); 두 번째 화면에 첫 렌더링 될 때 실행 배열 인자의 값(value)이 변화할 때마다 실행 useEffect(() => { //작업... },[value]); // [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다. useEffect의 Clean Up useEffect(() => { const timer = setInterval(() => { console.log('타이머 돌아가는 중...'); }, 1000); return () => { clearInterval(timer); console.log('타이머가 종료되었습니다.'); }; }, []); 한번..

Hook이란? React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 react의 기능들을 사용할 수 있도록 해준다. Hook은 특별한 함수이다. 예를 들어 "useState"(Hook함수)는 state를 함수 컴포넌트 안에서 사용할 수 있게 해 줍니다. 기존 에는 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했습니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 합니다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이..