sohyeon kim

💡 리액트 공식문서 정리 : State 관리하기 - State 를 사용해 Input 다루기, State 구조 선택하기애플리케이션이 커짐에 따라 state 가 어떻게 구성되는지, 데이터가 컴포넌트 간에 어떻게 흐르는지에 대해 파악해두면 도움이 된다.불필요하거나 중복된 state 는 버그의 흔한 원인.state 를 잘 구성하는 방법, state 업데이트 로직을 유지 보수 가능하게 관리하는 방법,멀리 있는 컴포넌트 간의 state 공유 방법에 대해 알아보자. 1. State 를 사용해 input 다루기 : 선언형 UI, 선언형 프로그래밍UI를 세밀하게 직접 조작하는 것(명령형)이 아니라 각각의 시각적 state로 UI를 묘사하는 것을 의미.React 에서는 (코드로) UI 를 직접 조작할 필요가 없다. 대신..

📝 문제수현이는 4차 산업혁명 시대에 살고 있는 중학생이다. 코로나 19로 인해, 수현이는 버추얼 학교로 버추얼 출석해 버추얼 강의를 듣고 있다. 수현이의 버추얼 선생님은 문자가 2개인 연립방정식을 해결하는 방법에 대해 강의하고, 다음과 같은 문제를 숙제로 냈다.연립방정식에서 x 와 y 의 값을 계산하시오.4차 산업혁명 시대에 숙제나 하고 앉아있는 것보다 버추얼 친구들을 만나러 가는 게 더 가치있는 일이라고 생각했던 수현이는 이런 연립방정식을 풀 시간이 없었다. 다행히도, 버추얼 강의의 숙제 제출은 인터넷 창의 빈 칸에 수들을 입력하는 식이다. 각 칸에는 −999 이상 999 이하의 정수만 입력할 수 있다. 수현이가 버추얼 친구들을 만나러 버추얼 세계로 떠날 수 있게 도와주자. 🫠 연립방정식 풀이im..

📝 문제크기가 N인 수열 A = A1, A2, ..., AN이 있다. 수열의 각 원소 Ai에 대해서 오등큰수 NGF(i)를 구하려고 한다.Ai가 수열 A에서 등장한 횟수를 F(Ai)라고 했을 때, Ai의 오등큰수는 오른쪽에 있으면서 수열 A에서 등장한 횟수가 F(Ai)보다 큰 수 중에서 가장 왼쪽에 있는 수를 의미한다. 그러한 수가 없는 경우에 오등큰수는 -1이다.예를 들어, A = [1, 1, 2, 3, 4, 2, 1]인 경우 F(1) = 3, F(2) = 2, F(3) = 1, F(4) = 1이다. A1의 오른쪽에 있으면서 등장한 횟수가 3보다 큰 수는 없기 때문에, NGF(1) = -1이다. A3의 경우에는 A7이 오른쪽에 있으면서 F(A3=2) 첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,..

💡 로그인/회원가입 시의 input 값 관리, useState VS useRef form 제작에 들어가고 input 의 값을 어떻게 관리할지 고민이 들었다.useState 로 관리하면 리렌더링이 매번 일어나지만, 값을 입력할 때 즉시 유효성 검사가 가능하다.useRef 로 관리하면 값이 변해도 리렌더링이 일어나지 않는다. 우선, 매번 리렌더링이 일어나는 것은 불필요하다 생각해 useRef 로 값을 받아오기로 했다. const idRef = useRef(null); const handleBlur = () => { // 포커스 아웃 시 실행 if (idRef.current && idRef.current.value !== "") { console.log(idRef.current.value)..

📝 문제크기가 N인 수열 A = A1, A2, ..., AN이 있다. 수열의 각 원소 Ai에 대해서 오큰수 NGE(i)를 구하려고 한다. Ai의 오큰수는 오른쪽에 있으면서 Ai보다 큰 수 중에서 가장 왼쪽에 있는 수를 의미한다. 그러한 수가 없는 경우에 오큰수는 -1이다.예를 들어, A = [3, 5, 2, 7]인 경우 NGE(1) = 5, NGE(2) = 7, NGE(3) = 7, NGE(4) = -1이다. A = [9, 5, 4, 8]인 경우에는 NGE(1) = -1, NGE(2) = 8, NGE(3) = 8, NGE(4) = -1이다.첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에 수열 A의 원소 A1, A2, ..., AN (1 ≤ Ai ≤ 1,000,0..

📝 문제N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다.이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다.예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 옮기면 24가 된다. 마지막으로 2를 버리고 나면, 남는 카드는 4가 된다.N이 주어졌을 때, 제일 마지막에 남게 되는 카드를 구하는 프로그..

💡 리액트 공식문서 정리 : 상호작용성 더하기 1. 렌더링 : 컴포넌트를 화면에 표시하기 위한 준비렌더링 과정렌더링을 트리거(요청, 발동)컴포넌트를 호출해 화면에 표시할 내용을 파악, “렌더링”은 React에서 컴포넌트를 호출하는 것DOM 이 최신 센더링 출력과 일치하도록 수정컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.컴포넌트의 초기 렌더링인 경우: 루트 컴포넌트 호출 후, appendChild() DOM API 를 사용해 생성한 모든 DOM 노드를 화면에 표시컴포넌트의 state가 업데이트된 경우: state 업데이트가 일어나 렌더링을 트리거한 컴포넌트 호출 후, DOM이 최신 렌더링과 일치하도록 변경된 부분만 수정 2. 스냅샷으로서의 state : 리렌더링을 요청하면, 렌더링이 일어난 ..

💡 리액트 공식문서 정리 : UI 표현하기 1. export default : decault 키워드는 코드를 사용하는 다른 파일에서 이 함수가 주요 함수임을 알려준다.export default function Square() { return X;} SyntaxExport 구문Import 구문다른 이름으로 가져오기Defaultexport default function Button () {}import Button from './button.js';ONamedexport function Button () {}import { Button } from './button.js';X (그래서 Named import) 보편적으로, 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을..

💡 감싸지지 않은 컴포넌트에서 "useContext" 훅을 사용하려고 할 때 발생하는 에러를 처리해보자. ✔️ 컨텍스트 프로바이더 확인하기특정 컴포넌트에서 useContext 를 사용할 때 해당 컴포넌트가 Context.Provider 로 감싸져 있는지 확인한다.Provider 컴포넌트로 감싸지지 않았다면, 컨텍스트 데이터를 가져올 수 없다. 장점 : 특정 컴포넌트에서 사용될 때만 확인하기 때문에 특정한 컴포넌트와 관련된 에러 메시지 제공 가능.단점 : 컨텍스트를 사용하는 모든 컴포넌트마다 동일한 검사 반복 필요 import React, { createContext, useContext } from 'react';// Context 생성const MyContext = createContext();con..

📝 문제수 N개가 주어졌을 때, i번째 수부터 j번째 수까지 합을 구하는 프로그램을 작성하시오.첫째 줄에 수의 개수 N과 합을 구해야 하는 횟수 M이 주어진다. 둘째 줄에는 N개의 수가 주어진다. 수는 1,000보다 작거나 같은 자연수이다. 셋째 줄부터 M개의 줄에는 합을 구해야 하는 구간 i와 j가 주어진다.총 M개의 줄에 입력으로 주어진 i번째 수부터 j번째 수까지 합을 출력한다.🫠 나의 풀이 (시간 초과)import syssys.stdin = open('input.txt', 'r')# input = sys.stdin.readlineN, M = map(int, input().split())lst = list(map(int, input().split()))for _ in range(M): st..