devlog

문제 ‘파핑 파핑 지뢰 찾기’라는 유명한 게임이 있다. 이 게임은 RXC 크기의 표를 이용하는 게임인데, 표의 각 칸에는 지뢰가 있을 수도 있고 없을 수도 있다. 표의 각 칸을 클릭했을 때, 그 칸이 지뢰가 있는 칸이라면 ‘파핑 파핑!’이라는 소리와 함께 게임은 끝난다. 지뢰가 없는 칸이라면 변이 맞닿아 있거나 꼭지점이 맞닿아 있는 최대 8칸에 대해 몇 개의 지뢰가 있는지가 0에서 8사이의 숫자로 클릭한 칸에 표시된다. 만약 이 숫자가 0이라면 근처의 8방향에 지뢰가 없다는 것이 확정된 것이기 때문에 그 8방향의 칸도 자동으로 숫자를 표시해 준다. 실제 게임에서는 어떤 위치에 지뢰가 있는지 알 수 없지만, 이 문제에서는 특별히 알 수 있다고 하자. 지뢰를 ‘*’로, 지뢰가 없는 칸을 ‘.’로, 클릭한 지..

문제 component를 만들고 export시켜 app.js에서 사용하려 했다. but.. 문제가 생겼다. 아래와 같은 오류가 뜬다. 사실 나는 react를 처음 사용하면서 공식 문서를 읽지않고 사용해서 이런 문제를 만난 것 같다. 나는 지금 react hook을 사용하고 있고 hook을 사용할 때 rule이 있다. 지금 이 문제는 내가 아래와 같은 코드를 사용해서다. import React from 'react'; import { useQuery } from '@apollo/react-hooks'; const roomList = () => { const { loading, error, data } = useQuery(GET_ALL_ROOMS); if (loading) ret..

문제 백준시의 시장 최백준은 지난 몇 년간 게리맨더링을 통해서 자신의 당에게 유리하게 선거구를 획정했다. 견제할 권력이 없어진 최백준은 권력을 매우 부당하게 행사했고, 심지어는 시의 이름도 백준시로 변경했다. 이번 선거에서는 최대한 공평하게 선거구를 획정하려고 한다. 백준시는 N개의 구역으로 나누어져 있고, 구역은 1번부터 N번까지 번호가 매겨져 있다. 구역을 두 개의 선거구로 나눠야 하고, 각 구역은 두 선거구 중 하나에 포함되어야 한다. 선거구는 구역을 적어도 하나 포함해야 하고, 한 선거구에 포함되어 있는 구역은 모두 연결되어 있어야 한다. 구역 A에서 인접한 구역을 통해서 구역 B로 갈 수 있을 때, 두 구역은 연결되어 있다고 한다. 중간에 통하는 인접한 구역은 0개 이상이어야 하고, 모두 같은 ..

문제 왕비를 피해 일곱 난쟁이들과 함께 평화롭게 생활하고 있던 백설공주에게 위기가 찾아왔다. 일과를 마치고 돌아온 난쟁이가 일곱 명이 아닌 아홉 명이었던 것이다. 아홉 명의 난쟁이는 모두 자신이 "백설 공주와 일곱 난쟁이"의 주인공이라고 주장했다. 뛰어난 수학적 직관력을 가지고 있던 백설공주는, 다행스럽게도 일곱 난쟁이의 키의 합이 100이 됨을 기억해 냈다. 아홉 난쟁이의 키가 주어졌을 때, 백설공주를 도와 일곱 난쟁이를 찾는 프로그램을 작성하시오. 입력 아홉 개의 줄에 걸쳐 난쟁이들의 키가 주어진다. 주어지는 키는 100을 넘지 않는 자연수이며, 아홉 난쟁이의 키는 모두 다르며, 가능한 정답이 여러 가지인 경우에는 아무거나 출력한다. 출력 일곱 난쟁이의 키를 오름차순으로 출력한다. 일곱 난쟁이를 찾을..

문제 방향 없는 그래프가 주어졌을 때, 연결 요소 (Connected Component)의 개수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 정점의 개수 N과 간선의 개수 M이 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ M ≤ N×(N-1)/2) 둘째 줄부터 M개의 줄에 간선의 양 끝점 u와 v가 주어진다. (1 ≤ u, v ≤ N, u ≠ v) 같은 간선은 한 번만 주어진다. 출력 첫째 줄에 연결 요소의 개수를 출력한다. 문제: https://www.acmicpc.net/problem/11724 11724번: 연결 요소의 개수 첫째 줄에 정점의 개수 N과 간선의 개수 M이 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ M ≤ N×(N-1)/2) 둘째 줄부터 M개의 줄에 간선의 양 끝점 u와 v가..

오늘은 공부한 내용이라기보다는 git을 사용하며 문제가 되었던 것을 정리해보려고 한다. 문제 얼마 전 VScode에서 Javascript로 웹 개발을 하던 중 css 파일명을 바꿨다. 원래 이름이 Hello.css였다면 hello.css로 파일명을 변경했는데 git에는 반영되지 않았다. 반영되지 않은 것도 모르고 있었다. 그런데 html에서 css파일을 읽어와야 하는데 hello라는 css파일을 찾지 못해서 css가 적용되지 않았다. 찾아보니 git은 대소문자를 구분하지 않는다고 한다. 그래서 나는 hello로 파일명을 바꾸고 commit하여도 git은 Hello안에 내용만 바꿀 뿐 파일 명이 바뀌지는 않았던 것이다. 그런 문제때문에 git에 대소문자 변경 사항을 적용하는 방법을 찾았다. 해결 1. gi..

1. 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점인 connectionless,stateless를 보완하기 위해 사용한다. 2.쿠키(cookie) 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 쿠키에는 이름, 값, 만료날짜(쿠키 저장기간), 경로 정보가 들어있으며 일정시간동안 데이터를 저장할 수 있다. (로그인 상태 유지 등에 활용) 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다. - 쿠키 프로세스 브라우저에서 웹페이지 접속 클라이언트가 요청한 웹페이지를 받으면서 쿠키를 클라이언트 로컬(하드)에 저장 클라이언트가 재 요청시 웹페이지 요청과 함께 쿠키값도 전송 지속적으로 로그인 정보를 가지고 있는 것처럼 사용 3. 세션(Session) 일정 시간..

1. 응답 코드란? HTTP 통신 시, 클라이언트(웹 브라우저)가 서버에 어떠한 요청(request)를 하면 서버는 응답(response)를 보내준다. 서버에서 클라이언트가 보낸 요청이 어떻게 되었는지 알려주는 것이 응답코드이다. 오늘은 그 응답코드의 종류와 의미에 대해서 알아보려고 한다. 2. 성공(Success), 2XX 200번대 응답코드는 이 작업을 성공적으로 받았고, 이해했으며, 받아들여졌다는 의미이다. 200 : 요청은 정상이고, 본문은 요청된 리소스를 포함하고 있다. 또한 가장 일반적으로 볼 수 있는 HTTP상태이다. 201 : 어떠한 생성 작업을 요청받았으며, 생성 작업을 성공하였다. 202 : 요청은 받아들여졌으나, 아직 동작을 수행하지 않은 상태로 요청이 적절함을 의미한다. 203 : ..

웹 개발자라면 HTTP에 대해서 잘 알아야 원하는대로 동작하게 만드는 것이 수월할 것이다. 하지만 글쓴이도 프론트엔드 개발을 하면서 HTTP를 공부하지 않았다. 그리고 백엔드를 개발하는 과정에서 HTTP를 공부하며 느낀 것이 프론트엔드를 개발할 때도 HTTP의 개념을 아는 것이 중요하다는 것이다. 프론트엔드를 개발할 때 데이터를 서버로 전송하는 등 HTTP를 이해해야 하는 부분들이 있다고 생각한다. 1. HTTP란? HTTP란 HyperText Transfer Protocol의 약자로 하이퍼텍스트 문서를 교환하기 위하여 사용된 통신 규약이다. 즉, 웹 서버와 클라이언트 간의 통신을 하기 위한 통신 규약이며 HTTP는 1989년 팀 버너스-리에 의해 처음 설계되었다. HTTP는 웹에서만 사용하는 프로토콜로..

Git에서 파일을 관리할 때 3가지의 상태가 존재한다. 그 상태와 의미에 대해 알아보자. 1. Git File 상태 Committed : 데이터가 로컬 데이터베이스에 안전하게 저장됐다는 것을 의미한다. Modified : 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것을 말한다. Staged : 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태를 의미한다. 2. Git Area 이 세 가지 상태는 Git 프로젝트의 세 가지 단계와 연결되어 있다. 아래의 그림을 보며 Git directory, working directory, Staging Area 이 세가지의 영역을 알아보자. Git directory는 Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳을 말한다. 다른 컴퓨터에 ..