이안의 평일코딩

0. 이진트리(binary tree)란 각각의 노드가 최대 두개의 자식 노드를 가지는 트리 자료 구조로, 자식 노드를 각각 왼쪽 자식 노드와 오른쪽 자식 노드라고 한다. (참고로 트리 자료 구조란 노드들이 나무 가지처럼 연결된 비선형 계층적 자료구조를 말한다.) 1. 위 그림에서 각 점은 node 혹은 vertex라고 말하고 두 점을 잇는 선을 edge라고 한다. 그래프는 V(vertex 혹은 node), E(edge)의 집합이다. 따라서 G(V, E)로 표현하기도 한다.

재귀함수(Recursion) 자기자신을 호출하는 것을 재귀함수라 하는데, 반복문과 동일하지만 조합할 때 사용할 수있다. return하면 반환한다는 의미도 있지만 함수에서는 종료를 의미하기도 한다. function solution(n){ function DFS(Level){ if(Level==0) return; else{ console.log(Level); // 3 2 1 DFS(Level-1); console.log(Level); // 1 2 3 } } DFS(n) } solution(3); console을 찍었을 때 왜 반대로 찍힐까? 재귀함수 이후에 찍은 console은 stack에 쌓여있다가 복귀(pop)를해서 가장 늦게 들어온 메서드부터 console을 출력한다. Stack 자료구조와 같이 FIL..

파라미터 한글깨짐 문제 해결 encodeURI, encodeURIComponent 현재 MobX로 상태관리 중이며 검색핸들러에 이용할 getIphone을 만들어줍니다. searchInfo에 데이터를 바인딩해두는데 거기서 iphoneName이 event.target으로 입력이되면 encode를 해줍니다. 그리고 인코딩된 입력값을 아래와 같이 보내주고 받아온 정보를 setIphone에 저장해둡니다. const getIphone = async () => { let iphoneSearch = encodeURI(encodeURIComponent(searchInfo.iphoneName)); let findIphone = await iphoneRepository.getIphone(iphoneSearch); setIp..

$git reset 옵션에는 3가지 종류가 있다. 1. --hard : 돌아가려는 지점 이후 모든 내용 삭제. 2. --soft : 돌아가려는 지점으로 돌아가지만 해당내용은 남아있으며 인덱스도 그대로 있다. 3. --mixed : 옵션을 생략하면 mixed로 설정되며, 돌아가려는 지점으로 돌아가지만 인덱스는 초기화 된다. 위의 상황에서 Login state 이후의 커밋들을 삭제하고 싶다면 아래와 같이 터미널에 입력하면 된다. $git reset --hard d075bf9 $git push -f origin master revert은 원하는 지점으로 되돌려주지만 revert는 현재에서 지우려는 지점을 없애준다.

문제 게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 ..

설치하기 // with npm npm install @material-ui/styles // with yarn yarn add @material-ui/styles styles styles를 생성하여 적용하기 위해서는 3가지 API를 사용할 수 있다. Hook API import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, border..

Material-UI에서 제공하는 컴포넌트의 종류는 도큐먼트들을 다 읽어보기 힘들 정도로 많다. 크게 Layout, Inputs, Navigation, Surfaces, Feedback, Data Display, Utils, Lab로 나눌 수 있고, 세부적으로 다 다루기보다 활용해서 적응할 수 있게끔 대표적인 예시를 들어가며 배우면 좋다. Layout 먼저, 레이아웃에는 Box, Container, Grid, Hidden, Image List가 있다. Box는 div를 대체하는 강력하고 편리한 컴포넌트로 tailwind CSS 방식이고 Container는 레이아웃을 잡을 때 좌우 간격, 중앙 위치시킬 때 사용하며 최대 너비 제한 fluid모드와 동일 너비 강제 fixed 모드가 있다. Grid는 Cont..

Material-UI란? 부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크이다. 설치하기 Material-UI는 npm패키지로 제공된다. 터미널에 아래와 같이 입력하고 설치해준다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core 아래와 같이 간단하게 import해와서 Material-UI에서 이미 지정해 둔 스타일로 버튼을 만들 수 있다. import React from 'react'; import { Button } from '@material-ui/core'; function App() { return Hello World; } 아이콘을 사용하고 싶다면 @m..