김재욱의 이모저모

시험 기간인 내가 할 일은 아니지만 갑자기 깃허브 프로필이 꾸미고 싶어졌다 하하하. 왜 시험기간만 되면 이런 이상한 게 하고 싶을까... Github repository 만들기 우선 github profile 을 꾸미기 위해 필요한 것은 본인의 깃허브 닉네임으로 만든 repository가 필요하다. 나는 계정명이 kjyook이어서 kjyook라는 repository를 만들었다. 다음과 같이 repository를 만들면 readme.md 파일이 생기고 깃허브 대문에도 해당 readme.md파일이 나온다. 이제 이 README.md 파일을 수정하면 된다!! shields.io 를 통해 배지를 주입하기 먼저 가장 해보고 싶었던거는 나의 skill을 이미지로 넣는 것이었다. 이런 귀여운 배지들을 넣고 싶었다! ..

최소신장트리 (Minimum Spanning Tree)란 무엇인가 최소신장트리의 특징은 크게 3가지가 있다. 그래프에서 모든 정점을 연결해야 한다. 연결된 트리가 사이클을 포함하고 있으면 안 된다. 그러한 트리들 중에서 에지의 가중치 합이 최소가 되는 트리여야 한다. 이러한 최소신장트리는 그래프에서 노드를 연결하는 에지의 부분 집합 중에서 최소한의 비용으로 모든 노드를 연결하는 트리를 찾는 문제에 나온다. 이때 사용하는 알고리즘으로는 프림 알고리즘과 크루스칼 알고리즘이 존재한다. 프림 알고리즘 (Prim's algorithm) 프림 알고리즘은 최소신장트리를 구하는 알고리즘 중 하나로 그래프에서 노드를 중점으로 탐색하여 최소신장트리를 구합니다. 프림 알고리즘의 순서는 아래와 같습니다. 시작 노드를 선택합니..

문제 BOJ 알고리즘 캠프에는 총 N명이 참가하고 있다. 사람들은 0번부터 N-1번으로 번호가 매겨져 있고, 일부 사람들은 친구이다. 오늘은 다음과 같은 친구 관계를 가진 사람 A, B, C, D, E가 존재하는지 구해보려고 한다. A는 B와 친구다. B는 C와 친구다. C는 D와 친구다. D는 E와 친구다. 위와 같은 친구 관계가 존재하는지 안 하는지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 사람의 수 N (5 ≤ N ≤ 2000)과 친구 관계의 수 M (1 ≤ M ≤ 2000)이 주어진다. 둘째 줄부터 M개의 줄에는 정수 a와 b가 주어지며, a와 b가 친구라는 뜻이다. (0 ≤ a, b ≤ N-1, a ≠ b) 같은 친구 관계가 두 번 이상 주어지는 경우는 없다. 출력 문제의 조건에 맞는 A,..

개인 프로젝트를 진행할 때 동아리에서 부탁받은 페이지를 만드는 것이어서 처음에는 해당 조직의 git에 repository를 만들고 작업을 하다가, 해당 부원 중 한 분의 실수로 git이 잠시 날아가는 이슈가 있어서 나의 git repository에 작업을 하게 되었었다. 그러고 나서 다시 git이 복구되었다고 해서 배포는 해당 조직의 git으로 하는 게 맞는 거 같아 나의 프로젝트를 다시 동아리의 git repository로 옮겨야겠다고 생각했다. 코드만 옮기는 것은 간단히 할 수 있겠지만, 커밋 내역까지 같이 옮기고 싶어서 git repository를 이사하는 법을 찾아보게 되었다. 그래서 커밋 내역, 브랜치들과 함께 이사에 성공하였고 그 방법을 적어보려고 한다. 로컬에 이미 프로젝트 폴더가 있는 경우..

https://nextjs.org/docs/pages/api-reference/components/link Components: | Next.js is a React component that extends the HTML element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. Good to know: tag attributes such as className or target="_blank" can be added nextjs.org Next/Link의 사용법 import Link from "next/Link"; .....

컴포넌트 주도 개발이란? 나는 첫 웹 프로그래밍부터 react를 활용하여 typescript로 웹 프로그래밍을 하기 시작했고 같이 작업하는 팀원의 조언으로 자연스럽게 **컴포넌트 주도 개발**을 하고 있었다. 컴포넌트 주도 개발은 CDD ( component driven development )라고 불리고 react를 대부분이 사용하는 요즘 다들 컴포넌트 주도 개발을 하고 있다고 생각된다. 컴포넌트 주도 개발은 말 그대로 컴포넌트를 중심으로 UI를 개발하는 것을 말한다. 특정 기능을 하는 요소를 컴포넌트로 만들고, 여러 개의 컴포넌트를 조립하여 페이지를 만드는 형식의 개발을 말한다. 그래 컴포넌트 주도 개발이 뭔지는 알겠다. 근데 컴포넌트 주도 개발이 있으면 다른 개발도 있을거 아니냐?!? 하시는 분들을..

오랜만에 프로젝트 수정할 것이 생겨서 Vscode를 들어갔는데 살면서 처음 보는 화면이 나를 반기고 있었다. 줄 바꿈 되어있는 모든 부분에 빨간 줄 표시가 되어있었고, error 설명은 "Expected linebreaks to be 'LF' but found 'CRLF'." 이였다. CRLF Windows 시스템에서 주로 사용된다. 줄 바꿈을 나타내는 데에는 Carriage Return (CR, '\r')와 Line Feed (LF, '\n') 두 개의 문자가 사용된다. 예시: Hello\r\nWorld\r\n LF Unix 및 Linux 시스템에서 주로 사용된다. 줄 바꿈을 나타내는 데에는 Line Feed (LF, '\n') 문자 하나만 사용된다 예시: Hello\nWorld\n 사실 줄바꿈 방식에..

대회 홍보용 웹 페이지를 만들던 중 페이지를 이쁘게 디자인하기 위해서 아이콘을 사용하고 싶었다. 그래서 내가 처음 사용했던 방법은 react-icons를 사용하는 것이었다. react-icons에 많은 icon이 존재하지만 맘에 드는 아이콘이 없어서 고민하다가 이모 지라는 것을 알게 되었다! 우리가 핸드폰에서 많이 사용하는 자그마한 이모티콘들을 이모지라고 부르는데 😄 이러한 친구들을 그냥 복사 붙여 넣기 하거나 html에 이모지 특수문자 코드를 입력하면 된다. https://snskeyboard.com/emoji/ 이 사이트에서 이모지를 찾아서 사용했습니다. 나는 vscode에서 코딩 언어로 typescript를 사용했는데 그냥 이모지 맘에 드는 걸 클릭해서 복사를 하고, vscode에 붙여 넣기를 하면..

대회 홍보용 웹 페이지를 만들다가 css적용에 어려웠던 점이 있어서 이것을 글로 남겨볼까 한다. 내가 구현하고 싶었던 것은 단순한 우측 정렬이었다. 이 사진 속의 엘리먼트들 중 제목이 아닌 메뉴들을 우측으로 보내고 싶었다. 위 엘리먼트들의 간단한 코드이다 제 3회 한국항공대학교 프로그래밍 경진대회 대회 규칙 대회 정보 유의 사항 Float 처음으로 생각난 방법은 간단하게 float를 사용하는 것이었다. float: right; 하지만 float를 사용하면 위 사진처럼 헤더의 밑 padding 부분이 깨진다. 웹 개발 경험이 많이 없어 이런 문제가 생길 줄은 몰랐는데, float를 사용하면 부모 컴포넌트 height 등 레이아웃에 문제가 생긴다고 한다. Flexbox 요즘은 위와 같은 이유로 float의 ..

문제 한 변의 길이가 같은 두 개의 정사각형이 주어집니다. 이 정사각형들은 가장 왼쪽 위의 점의 좌표 (a, b)와 (c, d), 그리고 한 변의 길이 r로 표현할 수 있으며, 정사각형의 각 변들은 X축 또는 Y축에 평행합니다. 이 정사각형들은 겹칠 수도 있고, 겹치지 않을 수도 있습니다. 두 정사각형 왼쪽 위 좌표 (a, b)와 (c, d), 두 정사각형의 변의 길이인 r이 매개변수로 주어질 때, 이 두 정사각형이 차지하는 면적을 출력하는 프로그램을 작성하시오. 제한사항 0 ≤ a ≤ 1,000,000 0 ≤ b ≤ 1,000,000 0 ≤ c ≤ 1,000,000 0 ≤ d ≤ 1,000,000 1 ≤ r ≤ 500,000 입출력 예 a b c d r result 1 2 1 2 3 9 1 2 4 2 ..