TDD 실제 코드를 작성하기 전 테스트 코드를 먼저 작성하고, 그 테스트 코드가 패스될 수 있는 실제 코드를 작성한다. TDD의 장점 많은 기능을 테스트하기에 소스 코드의 디테일이 높아지면서 클린 코드를 만들 확률이 높아짐 실제 개발하면서 많은 시간이 소요되는 디버깅 시간과 실제 개발 시간이 줄어듬 React Testing Library npx create-react-app 으로 리액트 앱을 생성하면 테스팅 할 때 React Testing Library를 사용한다. React Testing Library는 리액트 컴포넌트를 테스트하는 라이브러리로, 실제 DOM을 사용해 컴포넌트를 렌더링한다. 이전에는 에어비앤비에서 만든 Enzyme를 사용했는데 이는 구현 주도 테스트(Implementation Drive..
📌 문제 전쟁은 어느덧 전면전이 시작되었다. 결국 전투는 난전이 되었고, 우리 병사와 적국 병사가 섞여 싸우게 되었다. 그러나 당신의 병사들은 흰색 옷을 입고, 적국의 병사들은 파란색 옷을 입었기 때문에 서로가 적인지 아군인지는 구분할 수 있다. 문제는 같은 팀의 병사들은 모이면 모일수록 강해진다는 사실이다. N명이 뭉쳐있을 때는 N2의 위력을 낼 수 있다. 과연 지금 난전의 상황에서는 누가 승리할 것인가? 단, 같은 팀의 병사들이 대각선으로만 인접한 경우는 뭉쳐 있다고 보지 않는다. 📌 입력 첫째 줄에는 전쟁터의 가로 크기 N, 세로 크기 M(1 ≤ N, M ≤ 100)이 주어진다. 그 다음 두 번째 줄에서 M+1번째 줄에는 각각 (X, Y)에 있는 병사들의 옷색이 띄어쓰기 없이 주어진다. 모든 자리에..
📌 문제 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. 는 을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오. 📌 입력 첫 번째 줄에는 지도의 크기 N(정사각형이므로 가로와 세로의 크기는 같으며 5≤N≤25)이 입력되고, 그 다음 N줄에는 각각 N개의 자료(0혹은 1)가 입력된다. 📌 출력 첫 번째 줄에는 총 단지수를 출력하시오. ..
📌 문제 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오. 📌 제한사항 컴퓨터의 개수 n은 1 이상 200 이하인 자연수입니다. 각 컴퓨터는 0부터 n-1인 정수로 표현합니다. i번 컴퓨터와 j번 컴퓨터가 연결되어 있으면 computers..
📌 문제 주어진 항공권을 모두 이용하여 여행경로를 짜려고 합니다. 항상 "ICN" 공항에서 출발합니다. 항공권 정보가 담긴 2차원 배열 tickets가 매개변수로 주어질 때, 방문하는 공항 경로를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 📌 제한사항 모든 공항은 알파벳 대문자 3글자로 이루어집니다. 주어진 공항 수는 3개 이상 10,000개 이하입니다. tickets의 각 행 [a, b]는 a 공항에서 b 공항으로 가는 항공권이 있다는 의미입니다. 주어진 항공권은 모두 사용해야 합니다. 만일 가능한 경로가 2개 이상일 경우 알파벳 순서가 앞서는 경로를 return 합니다. 모든 도시를 방문할 수 없는 경우는 주어지지 않습니다. 📌 입출력 예 tickets return [["I..
정렬 방식 align은 수직 방향 정렬, justify는 수평 방향 정렬, place는 둘의 축약형이다. content는 grid container를 기준으로 grid cell을 정렬하고, items는 grid cell/area를 기준으로 정렬한다. start, center, end, stretch는 content와 items 모두에서 사용할 수 있지만 space로 시작하는 around, between, evenly는 content에서만 사용이 가능하다. flex도 동일한데 여지껏 아무 생각없이 남용하고 있었다; place는 conten와 items의 축약형인데, 항상 align을 먼저 쓴 다음 justify가 따라온다. place-content: ; place-items: ; 만약 값을 하나만 할당하면..
grid-auto-rows/columns 크기가 지정되지 않은 grid track의 크기를 지정할 수 있는 프로퍼티 See the Pen auto by summermong (@summermong) on CodePen. 이미지 갤러리를 만들 때 각 행의 높이를 200px로 지정하고 싶다. 이 때 grid-template-rows로 200px인 grid track 3개를 생성하려고 한다. 그래서 grid-template-rows: repeat(3, 200px)를 추가하지만 텍스트가 200px 밖으로 빠져나가게 된다. 이를 해결하기 위해 카드의 기본 크기는 200px이면서 넘치는 내용이 빠져나가지 않게 minmax()라는 grid 함수를 사용해 카드의 크기를 자동으로 늘리려고 한다. 이 함수는 크기의 최대, ..
Grid flex가 줄에 대한 정렬이라면, grid는 행렬을 사용한 보다 정교하고 복잡한 정렬이다. grid의 내부는 Lines, Track, Area, Gap이라는 영역으로 이루어져 있다. grid lines: 격자를 이루는 선의 집합으로 grid를 이루는 행과 열의 선 모두를 Lines라고 한다. 행은 grid row, 열은 grid column라고 한다. grid track: 평행한 grid의 두 줄 사이의 공간 grid area: grid line 4줄로 둘러 쌓인 공간 이렇게 4줄로 둘러 쌓이고 그 안이 더 이상 쪼개지지 않는 한 칸이라면 grid cell이라고 한다. 이런 셀이 1개 혹은 그 이상일 때 이 공간을 grid area라고 한다. grid gap: 행 여러 개와 열 여러 개 사이의 ..
📌 문제 우리 나라는 가족 혹은 친척들 사이의 관계를 촌수라는 단위로 표현하는 독특한 문화를 가지고 있다. 이러한 촌수는 다음과 같은 방식으로 계산된다. 기본적으로 부모와 자식 사이를 1촌으로 정의하고 이로부터 사람들 간의 촌수를 계산한다. 예를 들면 나와 아버지, 아버지와 할아버지는 각각 1촌으로 나와 할아버지는 2촌이 되고, 아버지 형제들과 할아버지는 1촌, 나와 아버지 형제들과는 3촌이 된다. 여러 사람들에 대한 부모 자식들 간의 관계가 주어졌을 때, 주어진 두 사람의 촌수를 계산하는 프로그램을 작성하시오. 📌 입력 사람들은 1, 2, 3, …, n (1 ≤ n ≤ 100)의 연속된 번호로 각각 표시된다. 입력 파일의 첫째 줄에는 전체 사람의 수 n이 주어지고, 둘째 줄에는 촌수를 계산해야 하는 서..
네이버 로그인 폼 클론 코딩 웹 개발을 많이 해보지 않기도 했고, 특히 CSS는 항상 감으로 때려 맞춰서 했던 적이 많아서 최근 CSS 공부를 하고 있다. 그런데 설명만 들어서는 다 이해하는 것 같이 느껴져서, 직접 한 번 해보려고 네이버 클론 코딩을 해봤다. 처음부터 호기롭게 메인 화면을 하려다가 바로 포기했다. 들어갈 것이 많기도 하고 대략적인 구조도 짜지 않은 채 바로 하려고 하다 보니 계속 꼬여서, 보다 조금 간단해 보이는 로그인 폼으로 시작했다. 네이버 로그인 폼 : https://summermong.github.io/playground-js/practice_loginClone/index.html 당연하지만 왼쪽이 네이버고 오른쪽이 내 클론 코딩이다. 포기한 부분은 ID 로그인, 일회용 번호, ..
