KEEP CODING

Props와 State props : component를 조작하는 장치(사용자 입장) state : props값에 따라서 구현에 필요한 데이터들(개발자 입장) 사용자는 props를 이용해 component 조작하지만, state까지 알 필요가 없다. (우리가 스마트폰을 터치스크린, 버튼(props)으로 사용하지만 안의 메커니즘(state)은 몰라도 된다.) 코드를 작성할 때 props와 state를 철저하게 독리시켜 양 쪽에 편의성을 각자 도모하는 것을 목표로 해야 한다. Constructor() 함수 Component가 실행될 때 render()보다 먼저 실행되어 초기화를 담당한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 class App extends Comp..

React Developer Tools 리액트 공식 사이트에서 찾을 수 있지만 크롬 extention 다운로드 링크를 아래 공유한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 582858083e on 8/24/2021. chrome.google.com 설치하면 리액트 페이지에서 마우스오른쪽-검사 에서 볼 수 있는 개발자 도구에 새로운 탭이 생긴다 새로운 탭들 중 Components를 클릭해보면 ..

스타트와 링크 https://www.acmicpc.net/problem/14889 14889번: 스타트와 링크 예제 2의 경우에 (1, 3, 6), (2, 4, 5)로 팀을 나누면 되고, 예제 3의 경우에는 (1, 2, 4, 5), (3, 6, 7, 8)로 팀을 나누면 된다. www.acmicpc.net 문제를 해결하기 위해 단계를 나눠보았다. 1. N명을 두 팀으로 나눈다. 2. 두 팀의 능력치를 구한다. 3. 능력치의 차를 구한다. 각각 함수로 만들었다. 1. N명을 두 팀으로 나눈다. 이전에 푼 문제를 변형했다. 15650번 문제는 1부터 N까지의 자연수 중 M개를 중복없이, 오름차순 수열을 구하는 문제였다. 이 문제는 1부터 N까지의 자연수 중 N/2개를 중복없이 고르는 것과 같다. (참고: ht..

N-Queen https://www.acmicpc.net/problem/9663 9663번: N-Queen N-Queen 문제는 크기가 N × N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제이다. N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오. www.acmicpc.net 일단 체스에서 퀸은 수직, 수평, 대각선으로 이동할 수 있다. 문제에서는 N개의 퀸을 N*N칸에 배열해야 한다. 수직/수평에 있으면 공격할 수 있기 때문에 같은 행, 같은 열에는 퀸이 하나씩만 있을 수 있다. 그렇기 때문에 퀸의 위치를 N*N인 2차원 배열이 아닌, 1차원 배열로 표현할 수 있다. N=4일때 가능한 이 배치에 대해서는 (2, 0, 4, 1)로 각각 (첫 번째 행, 두 번째 행, 세 ..

리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 있게 되어 구조를 확인하는데 편하다. Component Subject, TOC, Content라는 Component로 문서의 구조를 한 눈에 볼 수 있다. 각 Component가 정의된 App.js파일은 다음과 같이 만들 수 있다. 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 import..

N과 M (4) https://www.acmicpc.net/problem/15652 15652번: N과 M (4) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 이번엔 수열이 중복된 수로 구성될 수 있지만, 앞의 수보다 뒤의 수가 커야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 N, M = list(map(int,input().split())) numbers = [] def add_number(num): if len(numbers) == M: print(' '.join(map(str, numbers))) re..

N과 M (3) https://www.acmicpc.net/problem/15651 15651번: N과 M (3) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 15651번이 이전 문제들과 다른 점은 수열을 중복된 수로 구성할 수 있다는 점이다. 이전에 만든 코드에서 함수 내부만 조금 바꾸면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 N, M = list(map(int,input().split())) numbers = [] def add_number(): if len(numbers) == M: print(' ..

좌표압축 https://www.acmicpc.net/problem/18870 18870번: 좌표 압축 수직선 위에 N개의 좌표 X1, X2, ..., XN이 있다. 이 좌표에 좌표 압축을 적용하려고 한다. Xi를 좌표 압축한 결과 X'i의 값은 Xi > Xj를 만족하는 서로 다른 좌표의 개수와 같아야 한다. X1, X2, ..., XN에 좌 www.acmicpc.net 좌표 압축이라는 것이 자신의 좌표값보다 큰 서로 다른 좌표의 개수라고 한다. 예제 입력 2를 확인하면 알 수 있듯이, 999의 경우 1000이 3개가 있지만 출력에서는 1로 표시되어야 한다. 그래서 처음엔 입력받은 자료들에서 중복된 값을 제거한 후 정렬해서 입력받은 수 보다 큰 숫자가 몇 개 있는지 세는 방법으로 구했다. (시간초과한 코드..

N과 M (2) https://www.acmicpc.net/problem/15650 15650번: N과 M (2) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 15649번을 풀 때 찾아봤던 재귀함수를 떠올리며 코드를 작성해봤다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 N, M = list(map(int,input().split())) numbers = [] def add_number(num): if len(numbers) == M: print(' '.join(map(str, numbers))) return fo..

N과 M (1) https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 재귀함수를 만들어야되나 생각했는데 코드를 작성하다보니 다른 방법으로 함수를 만들었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 N, M = map(int, input().split()) def add_number(): # 중복되지 않은 수들로 수열을 만드는 함수 global result # 전역변수에 저장된 값 가져옴 ..