React로 todoList 만들어보며 사용한 주요 개념들을 정리해보았습니다.    import "./App.css";import Header from "./component/Header";import TodoEditor from "./component/TodoEditor";import TodoList from "./component/TodoList";import { useState, useRef } from "react";function App() { const idRef = useRef(3); const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().get..

수많은 디버깅을 하다보면, console.log를 미처 지우지 못해서 console.log 창이 지저분해지기도 하고, 디버깅의 편리를 위해 남겨두고 싶기도 한데요. 일일히 지우기도 번거로운 것이 사실입니다.  빌드 시에는 불필요한 수많은 console log들을 일괄적으로 없앨 수 있는 방법 정리해보았습니다.   vite.config.js 설정 export default defineConfig({ build: { minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true }, format: { comments: false }..

리액트의 자주 사용하는 훅인 useRef 와 useEffect에 대해 정리해보았습니다. useRef는 리액트의 DOM 요소들을 직접 조작하고자 할 때 사용하며, useEffect의 경우 마운트, 업데이트, 언마운트와 같은 리액트의 라이프 사이클을 조절하기 위해 사용합니다.  useEffect의 경우 이번 시간에는 간단한 사용법까지만 알아보고, 다음 글에 이어서 라이프 사이클을 제어하는 방법을 상세히 알아보겠습니다.  useRef리액트의 Ref(Reference)를 이용하면 DOM 요소들을 직접 조작할 수 있습니다. 마치 실제 DOM의 getElementById()와 비슷한 역할을 한다고 볼 수 있습니다.  사용법useRef를 이용해 특정 요소에 focus를 주는 jsx 코드를 구현해보았습니다.  1) 먼..

State는 상태라는 뜻으로, 어떤 사물의 형편이나 모양을 의미합니다. 전구의 On/Off 상태와 유사하게 리액트의 컴포넌트도 State(상태)따라 다른 결과를 렌더링 할 수 있습니다. 리액트에서 사용되는 State에 대해 좀 더 이해하면서, 사용하는 방법도 함께 정리해보았습니다.  컴포넌트와 State(상태)React의 컴포넌트는 사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 컴포넌트로 만들 수 도 있습니다. 이를 위해 사용되는 기능이 바로 React의 State 입니다.  State의 기본 사용법State를 사용하려면 먼저 useState라는 함수를 통해 State를 생성해주어야 하는데요.아래와 같이 생성해주면 되고, 각각은 [ State 변수, set 함수 ] = 생성자(초기값) 을 의미합니..

문제 설명정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.제한사항numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다.  풀이 풀이 1import java.util.ArrayList;import java.util.Arrays;import java.util.Collections;class Solution { public int[] solution(int[] numbers) { ArrayList result = new ArrayList(); for(..

리액트는 페이스북, 인스타그램, 넷플릭스 등을 비롯한 유명 서비스들에 사용된 기술로 많이 사용되고 있는 프론트엔드 기술입니다. 2013년 페이스북 팀이 개발한 오픈소스로, 서비스의 변화가 쉽고 사용자와 상호작용이 원활하도록 할 수 있는 기술 개발을 목적으로 만들어졌습니다.  그럼 이러한 React 사용을 위해 로컬 환경(Visual studio 이용)에서 리액트 프로젝트를 시작하는 방법을 설명하고, 그 작동 원리를 이해해보겠습니다.  리액트앱 생성하기 Create React App  프로젝트를 생성할 폴더를 Visual Studio 로 열고, 터미널을 열어 아래 코드를 입력합니다. 여기서 만일 Need to install the following packages: ... 라는 메세지가 뜰 경우 y를 입력..