리액트의 생애주기 인간마냥 리액트도 생애주기가 있다. 아기 리액트, 어른 리액트, 노인(!) 리액트...는 아니다. 이런 나이에 따른 생애 주기는 아니지만 탄생과 성장, 소멸이라는 부분은 비슷하다. 화면에 나타나는 리액트의 탄생을 Mount 무언가 업데이트 되거나 변화해 리렌더되는 성장(업데이트)을 Update 화면에서 사라지는 소멸을 Unmount 라고 표현한다. 이 3가지 생애주기마다 사용할 수 있는 메서드가 있으나 오로지 클래스형 컴포넌트에서만 사용할 수 있었다. 그러나 지금은 react Hooks가 나타나 함수형 컴포넌트도 useEffect를 사용하면 리액트의 생애주기를 나타낼 수 있게 되었다. react Hooks는 use 키워드를 붙인 약간의 함수와 같은 형태인데 원래 클래스형 컴포넌트에 있던..
📌 문제 무한히 큰 배열에 다음과 같이 분수들이 적혀있다. 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … … 3/1 3/2 3/3 … … … 4/1 4/2 … … … … 5/1 … … … … … … … … … … … 이와 같이 나열된 분수들을 1/1 → 1/2 → 2/1 → 3/1 → 2/2 → … 과 같은 지그재그 순서로 차례대로 1번, 2번, 3번, 4번, 5번, … 분수라고 하자. X가 주어졌을 때, X번째 분수를 구하는 프로그램을 작성하시오. 📌 입력 첫째 줄에 X(1 ≤ X ≤ 10,000,000)가 주어진다. 📌 출력 첫째 줄에 분수를 출력한다. 📌 예제 입출력 📌 풀이 알아야 하는 것 문제를 잘 이해해야 한다. 아래 그림처럼 지그재그 형식으로 전개된다. 이 때 각 층..
한입 크기로 잘라먹는 리액트 강의를 수강하는 중에 새로운 방식을 알게 됐다. 이런 일기장을 만들 때 첫 번째 input이 작성자, 두 번째 input이 본문이라고 할 때 const [author, setAuthor] = useState(""); const [content, setContent] = useState(""); 로 useState를 작성한다. 둘 다 input 안에 무언가를 작성할 때, 즉 change할 때 값을 상태 변화 함수에 넣어줘야 한다. {setAuthor(e.target.value);}} /> {setContent(e.target.value);}} /> 모두 미세한 차이가 있긴 하지만 구조 자체는 동일하다. 이럴 때 하나의 객체로 통째로 묶고 객체의 프로퍼티 개념으로 접근하면 코드의..
콜백 함수 다른 함수의 인자로 넘겨지는 함수 (함수가 부른 다른 함수) 콜백 함수를 둘러싼 콜백 수신 함수에 의해서 특정 시점에 실행이 된다. 동기 콜백 함수라면 호출 즉시 실행되지만, 비동기 콜백 함수라면 특정 조건을 만족했을 때 실행된다. 아래 코드처럼 userInput의 인자로 넘겨지고 있는 greeting 함수를 콜백 함수라고 할 수 있다. function greeting(name) { console.log("안녕하세요" + name); } function userInput(callback) { const name = prompt("이름을 입력하세요."); callback(name) } userInput(greeting); 비동기 콜백 함수의 예시로는 크게 아래 3가지를 들 수 있다. 1. se..
📌 문제 10709번: 기상캐스터 출력은 H 행으로, 각 행에는 공백으로 구분된 W 개의 정수를 출력한다. 출력의 i 번째 행 j 번째 정수 (1 ≦ i ≦ H, 1 ≦ j ≦ W) 는, 지금부터 몇 분후에 처음으로 구역 (i, j) 에 구름이 뜨는지를 표시 www.acmicpc.net JOI시는 남북방향이 H 킬로미터, 동서방향이 W 킬로미터인 직사각형 모양이다. JOI시는 가로와 세로의 길이가 1킬로미터인 H × W 개의 작은 구역들로 나뉘어 있다. 북쪽으로부터 i 번째, 서쪽으로부터 j 번째에 있는 구역을 (i, j) 로 표시한다. 각 구역의 하늘에는 구름이 있을 수도, 없을 수도 있다. 모든 구름은 1분이 지날 때마다 1킬로미터씩 동쪽으로 이동한다. 오늘은 날씨가 정말 좋기 때문에 JOI시의 외부..
📌 문제 1417번: 국회의원 선거 첫째 줄에 후보의 수 N이 주어진다. 둘째 줄부터 차례대로 기호 1번을 찍으려고 하는 사람의 수, 기호 2번을 찍으려고 하는 수, 이렇게 총 N개의 줄에 걸쳐 입력이 들어온다. N은 50보다 작거나 같 www.acmicpc.net 다솜이는 사람의 마음을 읽을 수 있는 기계를 가지고 있다. 다솜이는 이 기계를 이용해서 2008년 4월 9일 국회의원 선거를 조작하려고 한다. 다솜이의 기계는 각 사람들이 누구를 찍을 지 미리 읽을 수 있다. 어떤 사람이 누구를 찍을 지 정했으면, 반드시 선거때 그 사람을 찍는다. 현재 형택구에 나온 국회의원 후보는 N명이다. 다솜이는 이 기계를 이용해서 그 마을의 주민 M명의 마음을 모두 읽었다. 다솜이는 기호 1번이다. 다솜이는 사람들의 ..
📌 문제 디지털하드웨어설계 과목의 최종 프로젝트는 16-bit CPU를 설계하고 Verilog 언어로 구현하는 것이다. 본인이 구현한 CPU가 제대로 동작하는지 테스트하기 위해서는 기계어 코드를 입력으로 주어야 한다. 하지만 대부분의 사람은 0과 1로만 이루어진 기계어 코드를 이해하기 힘들어서 C++, Java와 같은 프로그래밍 언어로 코드를 작성하고 컴파일러를 통해 기계어 코드로 번역하는 과정을 거친다. 여러 가지 프로그래밍 언어 중에서 어셈블리어는 사람이 이해하기 쉬우면서 기계어와 가장 유사한 언어이다. 어셈블리어 코드는 어셈블러를 통해 기계어 코드로 번역된다. 그리고 어셈블리어는 기계어와 일대일로 대응하는 특징이 있다. 예를 들면, 두 수의 합을 구하는 연산의 어셈블리어 코드가 ADD이고, 기계어 ..
📌 문제 10810번: 공 넣기 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 www.acmicpc.net 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 들어있지 않으며, 바구니에는 공을 1개만 넣을 수 있다. 도현이는 앞으로 M번 공을 넣으려고 한다. 도현이는 한 번 공을 넣을 때, 공을 넣을 바구니 범위를 정하고, 정한 바구니에 모두 같은 번호가 적혀있는 공을 넣는다. 만약, 바구니에 공이 이미 있는 경우에는..
📌 문제 선영이는 C, C++, Java와는 다른 아주 세련된 언어를 만들었다. 선영이는 이 아름답고 예술적인 언어의 이름을 i#으로 정했다. i#은 기본 변수형과 배열([]), 참조(&), 포인터(*)를 제공한다. 배열, 참조, 포인터는 순서에 상관없이 혼합해서 사용할 수 있다. 즉, int의 참조의 참조의 배열의 포인터도 올바른 타입이다. int&&[]* i#은 여러 개의 변수를 한 줄에 정의할 수 있다. 공통된 변수형을 제일 먼저 쓰고, 그 다음에 각 변수의 이름과 추가적인 변수형을 쓰면 된다. 예를 들면 아래와 같다. int& a*[]&, b, c*; a의 타입은 int&&[]*, b는 int&, c는 int&*이 된다. 변수의 오른편에 있는 변수형은 순서를 뒤집어서 왼편에 붙일 수 있다. 따라서..
카운트 먼저 App을 간단하게 만들어주는데, 테스트를 진행할 부분은 그냥 data-testid라고 적어줘도 된다. 왜냐하면 쿼리 함수로 쓴 getByTestId가 data-testid를 찾는 역할을 하기 때문이다. TestId가 "counter"인 엘리먼트의 텍스트가 0인지 확인하고 싶은데, 그냥 숫자 0이라고 테스트를 진행해 통과되지 않았다. toBe(0) -> toHaveTextContent(0)으로 작성하면 테스트가 정상적으로 통과된다. 버튼 테스트 플러스 버튼과 마이너스 버튼을 만들었다. 각자 버튼이 "-" "+"라는 텍스트를 가지고 있는지 테스트를 진행했다. 컴포넌트를 쭉 훑어보면서 testid가 minus-button인 돔 요소를 찾아 buttonElement라는 변수에 그 부분을 할당했다. ..
