일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 한글 공부 사이트
- 리액트
- JavaScript
- 파이썬 for in
- tanstack query
- 타입스크립트
- 프로그래머스
- Next 팀 프로젝트
- 파이썬 for
- 내배캠 프로젝트
- 파이썬 반복문
- REACT
- 코딩테스트
- 내일배움캠프 프로젝트
- 파이썬 slice
- 자바스크립트
- 타입스크립트 리액트
- 리액트 훅
- React Hooks
- 내일배움캠프 최종 프로젝트
- useState
- typeScript
- 내일배움캠프
- 파이썬 enumerate
- 리액트 프로젝트
- 리액트 공식문서
- 파이썬 딕셔너리
- 파이썬 replace
- useEffect
- 리액트 공식 문서
- Today
- Total
목록전체 글 (310)
sohyeon kim
📝 문제수현이는 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,..
📝 문제크기가 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..
📝 문제화은이는 이번 영어 시험에서 틀린 문제를 바탕으로 영어 단어 암기를 하려고 한다. 그 과정에서 효율적으로 영어 단어를 외우기 위해 영어 단어장을 만들려 하고 있다. 화은이가 만들고자 하는 단어장의 단어 순서는 다음과 같은 우선순위를 차례로 적용하여 만들어진다.자주 나오는 단어일수록 앞에 배치한다.해당 단어의 길이가 길수록 앞에 배치한다.알파벳 사전 순으로 앞에 있는 단어일수록 앞에 배치한다 M$M$보다 짧은 길이의 단어의 경우 읽는 것만으로도 외울 수 있기 때문에 길이가 M$M$이상인 단어들만 외운다고 한다. 화은이가 괴로운 영단어 암기를 효율적으로 할 수 있도록 단어장을 만들어 주자. 🫠 나의 풀이import syssys.stdin = open('input.txt', 'r')# input =..

💡 세션과 토큰에 대해 알아보자.리퀘스트를 보낸 유저를 확인하는 방식 💡 세션 : 서버가 저장하는 사이트 방문자들에 대한 기록세션 DB 필요 (유저가 늘수록 커짐)세션 기반 인증 과정누군가 서버에 첫 리퀘스트를 보내면 서버는 그 방문에 대한 데이터를 세션에 저장(id, ip 주소, 브라우저 종류 등)리스폰스의 Set-Cookie 에 새로 만든 세션의 아이디를 추가클라이언트에게 전달다음에 같은 클라이언트가 리퀘스트를 보내면 항상 쿠키로 세션 아이디가 같이 보내짐➡️ 방문자가 누군지 확인 가능, 세션 아이디가 저장되어있지 않다면 첫 방문자세션 아이디가 확인된 유저가 로그인을 한다면 user_id 도 세션에 저장 (로그인 되어 있지 않은 유저는 null 저장)** 구현에 따라 방문자가 첫 리퀘스트를 보냈을..