우기의 알 블로그 저자 한승욱이라고 합니다.
스스로 알을 깨고 나오는 새처럼
언젠가 알을 깨고 온전한 나 자신이 되었을 때, 그때를 기다리며 제 속에서 솟아 나오는 것을 글로써 표현하고자 합니다.
'개발 기술블로그'를 위주로 저 한승욱의 다양한 관심사, 생각, 철학 등을 포스팅합니다.
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. app.js를 app.jsx로 수정 jsx란 javascrpit xml 확장자이다. javascrpit안에 html 코드를 작성했으므로 정상적인 js에서는 동작이 안되는 문법이다. 확장된 버전의 파일로 수정해준다. react routing 사용을 위한 모듈 설치 npm install --save react-router npm install --save react-router-dom 디렉토리 생성 → src 디렉토리 안에서 실제 페이지들이 들어가는 pages 라우터가 들어가 config 화면 레이아웃이 들어갈 components pages config/page-route.jsx # /config/page-route..
본 포스팅은 https://www.youtube.com/watch?v=WkILRTAcRdU 영상을 보면서 공부한 자료 입니다. eslint 추가 vscode extension에서 설치 린터로써 오류를 잡아주는 것 ecma script 코드의 문법을 사전에 검사해줌 npx install-peerdeps --dev eslint-config-airbnb 에어비앤비에서 만든 linter를 추가 # package.json에 추가된 것 확인 가능 "devDependencies": { "eslint": "^7.2.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslin..
리액트 앱 생성 npm install -g create-react-app 글로벌로 create-react-app 모듈 설치 npx create-react-app myfirstapp npx 즉 1회성으로 리액트 앱 생성 뒤에 . 을 붙이면 현재 디렉토리에 생성될 것임 yarn start or npm start 앱 실행 3000번 포트로 생성된 리액트 앱 확인 가능 app.js에 있는 html 코드가 public의 index.html의 div id로 엮여서 렌더링 되는 것임 # src/app.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn ..
치킨 배달 ❓ Q. 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸, 왼쪽에서부터 c번째 칸을 의미한다. r과 c는 1부터 시작한다. 이 도시에 사는 사람들은 치킨을 매우 좋아한다. 따라서, 사람들은 "치킨 거리"라는 말을 주로 사용한다. 치킨 거리는 집과 가장 가까운 치킨집 사이의 거리이다. 즉, 치킨 거리는 집을 기준으로 정해지며, 각각의 집은 치킨 거리를 가지고 있다. 도시의 치킨 거리는 모든 집의 치킨 거리의 합이다. 임의의 두 칸 (r1, c1)과 (r2, c2) 사이의 거리는 |r1-r2| + |c1-c2|로 구한다. 예를 들어, ..
구슬 탈출 ❓ 스타트링크에서 판매하는 어린이용 장난감 중에서 가장 인기가 많은 제품은 구슬 탈출이다. 구슬 탈출은 직사각형 보드에 빨간 구슬과 파란 구슬을 하나씩 넣은 다음, 빨간 구슬을 구멍을 통해 빼내는 게임이다. 보드의 세로 크기는 N, 가로 크기는 M이고, 편의상 1×1크기의 칸으로 나누어져 있다. 가장 바깥 행과 열은 모두 막혀져 있고, 보드에는 구멍이 하나 있다. 빨간 구슬과 파란 구슬의 크기는 보드에서 1×1크기의 칸을 가득 채우는 사이즈이고, 각각 하나씩 들어가 있다. 게임의 목표는 빨간 구슬을 구멍을 통해서 빼내는 것이다. 이때, 파란 구슬이 구멍에 들어가면 안 된다. 이때, 구슬을 손으로 건드릴 수는 없고, 중력을 이용해서 이리 저리 굴려야 한다. 왼쪽으로 기울이기, 오른쪽으로 기울이기..
새로운 게임 2 ❓ Q. 재현이는 주변을 살펴보던 중 체스판과 말을 이용해서 새로운 게임을 만들기로 했다. 새로운 게임은 크기가 N×N인 체스판에서 진행되고, 사용하는 말의 개수는 K개이다. 말은 원판모양이고, 하나의 말 위에 다른 말을 올릴 수 있다. 체스판의 각 칸은 흰색, 빨간색, 파란색 중 하나로 색칠되어있다. 게임은 체스판 위에 말 K개를 놓고 시작한다. 말은 1번부터 K번까지 번호가 매겨져 있고, 이동 방향도 미리 정해져 있다. 이동 방향은 위, 아래, 왼쪽, 오른쪽 4가지 중 하나이다. 턴 한 번은 1번 말부터 K번 말까지 순서대로 이동시키는 것이다. 한 말이 이동할 때 위에 올려져 있는 말도 함께 이동한다. 말의 이동 방향에 있는 칸에 따라서 말의 이동이 다르며 아래와 같다. 턴이 진행되던..
올바른 괄호 문자열 만들기 ❓ 문제 설명 카카오에 신입 개발자로 입사한 콘은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 컴파일하여 로그를 보니 대부분 소스 코드 내 작성된 괄호가 개수는 맞지만 짝이 맞지 않은 형태로 작성되어 오류가 나는 것을 알게 되었습니다. 수정해야 할 소스 파일이 너무 많아서 고민하던 콘은 소스 코드에 작성된 모든 괄호를 뽑아서 올바른 순서대로 배치된 괄호 문자열을 알려주는 프로그램을 다음과 같이 개발하려고 합니다. 용어의 정의 '(' 와 ')' 로만 이루어진 문자열이 있을 경우, '(' 의 개수와 ')' 의 개수..
문자열 압축 ❓ Q. 데이터 처리 전문가가 되고 싶은 어피치는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문자열에서 같은 값이 연속해서 나타나는 것을 그 문자의 개수와 반복되는 값으로 표현하여 더 짧은 문자열로 줄여서 표현하는 알고리즘을 공부하고 있습니다. 간단한 예로 aabbaccc의 경우 2a2ba3c(문자가 반복되지 않아 한번만 나타난 경우 1은 생략함)와 같이 표현할 수 있는데, 이러한 방식은 반복되는 문자가 적은 경우 압축률이 낮다는 단점이 있습니다. 예를 들면, abcabcdede와 같은 문자열은 전혀 압축되지 않습니다. 어피치는 이러한 단점을 해결하기 위해 문자열을 1개 이상의 단위로 잘라서 압..
나 잡아 봐라 ❓ Q. 연인 코니와 브라운은 광활한 들판에서 ‘나 잡아 봐라’ 게임을 한다. 이 게임은 브라운이 코니를 잡거나, 코니가 너무 멀리 달아나면 끝난다. 게임이 끝나는데 걸리는 최소 시간을 구하시오. 조건은 다음과 같다. 코니는 처음 위치 C에서 1초 후 1만큼 움직이고, 이후에는 가속이 붙어 매 초마다 이전 이동 거리 + 1만큼 움직인다. 즉 시간에 따른 코니의 위치는 C, C + 1, C + 3, C + 6, …이다. 브라운은 현재 위치 B에서 다음 순간 B – 1, B + 1, 2 * B 중 하나로 움직일 수 있다. 코니와 브라운의 위치 p는 조건 0 visited[2] = { 0 : True } # 위치 2 1 -> visited[1] = { 1: True} # 3 -> visited[..
기술개발/React, Frontend 2021. 3. 3. 23:22
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..
기술개발/React, Frontend 2021. 3. 2. 18:51
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. app.js를 app.jsx로 수정 jsx란 javascrpit xml 확장자이다. javascrpit안에 html 코드를 작성했으므로 정상적인 js에서는 동작이 안되는 문법이다. 확장된 버전의 파일로 수정해준다. react routing 사용을 위한 모듈 설치 npm install --save react-router npm install --save react-router-dom 디렉토리 생성 → src 디렉토리 안에서 실제 페이지들이 들어가는 pages 라우터가 들어가 config 화면 레이아웃이 들어갈 components pages config/page-route.jsx # /config/page-route..
기술개발/React, Frontend 2021. 2. 26. 14:10
본 포스팅은 https://www.youtube.com/watch?v=WkILRTAcRdU 영상을 보면서 공부한 자료 입니다. eslint 추가 vscode extension에서 설치 린터로써 오류를 잡아주는 것 ecma script 코드의 문법을 사전에 검사해줌 npx install-peerdeps --dev eslint-config-airbnb 에어비앤비에서 만든 linter를 추가 # package.json에 추가된 것 확인 가능 "devDependencies": { "eslint": "^7.2.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslin..
기술개발/React, Frontend 2021. 2. 25. 15:44
리액트 앱 생성 npm install -g create-react-app 글로벌로 create-react-app 모듈 설치 npx create-react-app myfirstapp npx 즉 1회성으로 리액트 앱 생성 뒤에 . 을 붙이면 현재 디렉토리에 생성될 것임 yarn start or npm start 앱 실행 3000번 포트로 생성된 리액트 앱 확인 가능 app.js에 있는 html 코드가 public의 index.html의 div id로 엮여서 렌더링 되는 것임 # src/app.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn ..
기술개발/Algorithm 2021. 2. 24. 16:54
치킨 배달 ❓ Q. 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸, 왼쪽에서부터 c번째 칸을 의미한다. r과 c는 1부터 시작한다. 이 도시에 사는 사람들은 치킨을 매우 좋아한다. 따라서, 사람들은 "치킨 거리"라는 말을 주로 사용한다. 치킨 거리는 집과 가장 가까운 치킨집 사이의 거리이다. 즉, 치킨 거리는 집을 기준으로 정해지며, 각각의 집은 치킨 거리를 가지고 있다. 도시의 치킨 거리는 모든 집의 치킨 거리의 합이다. 임의의 두 칸 (r1, c1)과 (r2, c2) 사이의 거리는 |r1-r2| + |c1-c2|로 구한다. 예를 들어, ..
기술개발/Algorithm 2021. 2. 22. 22:10
구슬 탈출 ❓ 스타트링크에서 판매하는 어린이용 장난감 중에서 가장 인기가 많은 제품은 구슬 탈출이다. 구슬 탈출은 직사각형 보드에 빨간 구슬과 파란 구슬을 하나씩 넣은 다음, 빨간 구슬을 구멍을 통해 빼내는 게임이다. 보드의 세로 크기는 N, 가로 크기는 M이고, 편의상 1×1크기의 칸으로 나누어져 있다. 가장 바깥 행과 열은 모두 막혀져 있고, 보드에는 구멍이 하나 있다. 빨간 구슬과 파란 구슬의 크기는 보드에서 1×1크기의 칸을 가득 채우는 사이즈이고, 각각 하나씩 들어가 있다. 게임의 목표는 빨간 구슬을 구멍을 통해서 빼내는 것이다. 이때, 파란 구슬이 구멍에 들어가면 안 된다. 이때, 구슬을 손으로 건드릴 수는 없고, 중력을 이용해서 이리 저리 굴려야 한다. 왼쪽으로 기울이기, 오른쪽으로 기울이기..
기술개발/Algorithm 2021. 2. 19. 14:09
새로운 게임 2 ❓ Q. 재현이는 주변을 살펴보던 중 체스판과 말을 이용해서 새로운 게임을 만들기로 했다. 새로운 게임은 크기가 N×N인 체스판에서 진행되고, 사용하는 말의 개수는 K개이다. 말은 원판모양이고, 하나의 말 위에 다른 말을 올릴 수 있다. 체스판의 각 칸은 흰색, 빨간색, 파란색 중 하나로 색칠되어있다. 게임은 체스판 위에 말 K개를 놓고 시작한다. 말은 1번부터 K번까지 번호가 매겨져 있고, 이동 방향도 미리 정해져 있다. 이동 방향은 위, 아래, 왼쪽, 오른쪽 4가지 중 하나이다. 턴 한 번은 1번 말부터 K번 말까지 순서대로 이동시키는 것이다. 한 말이 이동할 때 위에 올려져 있는 말도 함께 이동한다. 말의 이동 방향에 있는 칸에 따라서 말의 이동이 다르며 아래와 같다. 턴이 진행되던..
기술개발/Algorithm 2021. 2. 17. 21:30
올바른 괄호 문자열 만들기 ❓ 문제 설명 카카오에 신입 개발자로 입사한 콘은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 컴파일하여 로그를 보니 대부분 소스 코드 내 작성된 괄호가 개수는 맞지만 짝이 맞지 않은 형태로 작성되어 오류가 나는 것을 알게 되었습니다. 수정해야 할 소스 파일이 너무 많아서 고민하던 콘은 소스 코드에 작성된 모든 괄호를 뽑아서 올바른 순서대로 배치된 괄호 문자열을 알려주는 프로그램을 다음과 같이 개발하려고 합니다. 용어의 정의 '(' 와 ')' 로만 이루어진 문자열이 있을 경우, '(' 의 개수와 ')' 의 개수..
기술개발/Algorithm 2021. 2. 16. 16:25
문자열 압축 ❓ Q. 데이터 처리 전문가가 되고 싶은 어피치는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문자열에서 같은 값이 연속해서 나타나는 것을 그 문자의 개수와 반복되는 값으로 표현하여 더 짧은 문자열로 줄여서 표현하는 알고리즘을 공부하고 있습니다. 간단한 예로 aabbaccc의 경우 2a2ba3c(문자가 반복되지 않아 한번만 나타난 경우 1은 생략함)와 같이 표현할 수 있는데, 이러한 방식은 반복되는 문자가 적은 경우 압축률이 낮다는 단점이 있습니다. 예를 들면, abcabcdede와 같은 문자열은 전혀 압축되지 않습니다. 어피치는 이러한 단점을 해결하기 위해 문자열을 1개 이상의 단위로 잘라서 압..
기술개발/Algorithm 2021. 2. 15. 17:27
나 잡아 봐라 ❓ Q. 연인 코니와 브라운은 광활한 들판에서 ‘나 잡아 봐라’ 게임을 한다. 이 게임은 브라운이 코니를 잡거나, 코니가 너무 멀리 달아나면 끝난다. 게임이 끝나는데 걸리는 최소 시간을 구하시오. 조건은 다음과 같다. 코니는 처음 위치 C에서 1초 후 1만큼 움직이고, 이후에는 가속이 붙어 매 초마다 이전 이동 거리 + 1만큼 움직인다. 즉 시간에 따른 코니의 위치는 C, C + 1, C + 3, C + 6, …이다. 브라운은 현재 위치 B에서 다음 순간 B – 1, B + 1, 2 * B 중 하나로 움직일 수 있다. 코니와 브라운의 위치 p는 조건 0 visited[2] = { 0 : True } # 위치 2 1 -> visited[1] = { 1: True} # 3 -> visited[..