코딩 일기장

문제 링크 : https://www.acmicpc.net/problem/16928 16928번: 뱀과 사다리 게임 첫째 줄에 게임판에 있는 사다리의 수 N(1 ≤ N ≤ 15)과 뱀의 수 M(1 ≤ M ≤ 15)이 주어진다. 둘째 줄부터 N개의 줄에는 사다리의 정보를 의미하는 x, y (x < y)가 주어진다. x번 칸에 도착하면, y번 칸으 www.acmicpc.net 문제 뱀과 사다리 게임을 즐겨 하는 큐브러버는 어느 날 궁금한 점이 생겼다. 주사위를 조작해 내가 원하는 수가 나오게 만들 수 있다면, 최소 몇 번만에 도착점에 도착할 수 있을까? 게임은 정육면체 주사위를 사용하며, 주사위의 각 면에는 1부터 6까지 수가 하나씩 적혀있다. 게임은 크기가 10×10이고, 총 100개의 칸으로 나누어져 있는..

문제 링크 : https://www.acmicpc.net/problem/11779 11779번: 최소비용 구하기 2 첫째 줄에 도시의 개수 n(1≤n≤1,000)이 주어지고 둘째 줄에는 버스의 개수 m(1≤m≤100,000)이 주어진다. 그리고 셋째 줄부터 m+2줄까지 다음과 같은 버스의 정보가 주어진다. 먼저 처음에는 그 버스 www.acmicpc.net 문제 n(1≤n≤1,000)개의 도시가 있다. 그리고 한 도시에서 출발하여 다른 도시에 도착하는 m(1≤m≤100,000)개의 버스가 있다. 우리는 A번째 도시에서 B번째 도시까지 가는데 드는 버스 비용을 최소화 시키려고 한다. 그러면 A번째 도시에서 B번째 도시 까지 가는데 드는 최소비용과 경로를 출력하여라. 항상 시작점에서 도착점으로의 경로가 존재..

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다. TypeScript에서 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의한다. 컴파일러는 최한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); myObj는 label: string 이외의 값도 포함하고 있지만 label: string을 가..

타입 추론 타입스크립트는 자바스크립트 언어를 알고 있으며 대부분 경우 타입을 생성해 준다. 기본 타입 타입스크립트는 다양항 기본 타입을 제공한다. Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 등 자세한 내용 https://www.typescriptlang.org/docs/handbook/2/everyday-types.html Documentation - Everyday Types The language primitives. www.typescriptlang.org 변수에 타입 설정 let str:string = 'hello world'; let num:number = 12345; let arr:..

TypeScript란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반면 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도도 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다. 자바스크립트 슈퍼셋 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유요한 자바..

문제 링크 : https://www.acmicpc.net/problem/2667 2667번: 단지번호붙이기 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여 www.acmicpc.net 문제 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. 는 을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단..

컴포넌트 주도 개발(Component-Driven-Development) 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스 구축에 도달하는 개발 및 설계 방법론 기본적인 컴포넌트 단위부터 시작해서 UI view를 구성하기 위해 점진적으로 조립해가는 상향적 특징을 가지고 있다. 장점 디자인 체계화, 디자이너와 효율적인 협업 재사용성: 다른 프로젝트에서도 쉽게 쓰고 공유 가능 Decoupling: CSS, JS, I18n, UI 단위 테스트 등 UI 패턴이 3회 이상 사용되는 경우. 재사용 가능한 UI 컴포넌트로 간주한다. UI 컴포넌트가 3개 이상의 프로젝트/팀에서 사용되는 경우, 디자인 시스템에 포함시킨다. install npx -p @storybook/cli sb init npm run storyboo..

NFT 개념 NFT(Non-Fungible Token)는 블록체인 기술 중에 하나, 대체 불가능한 토큰이라는 의미이다. 일반적인 화폐는 내가 가지고 있는 만원짜리 지폐와 다른사람이 갖고 있는 만원짜리 지폐는 일렬번호가 다르더라도 가치가 동등하기 때문에 서로 대체가 가능하다. 하지만 NFT는 내가 가지고 있는 토큰과 상대방이 갖고 있는 토큰은 서로 성격이 달라서 대체가 불가능하다. NFT는 소유권, 저작권 등의 진위 여부를 확인하는 수단으로 쓰이고 있다. NFT의 장점 1. 위조하기 어려움 복제가 어렵기 때문에 희소성을 더 잘 보장할 수 있고, 위조품으로 인해 가치가 무너지지 않도록 보장해준다. 2. 추적하기 쉬움 블록체인의 데이터는 공개적이고 투명하며 누구나 NFT의 출처, 발행 시간 및 획수, 소유자 ..

개발 기간: 2022. 01. 11 ~ 2022. 2. 18 결과 github : https://github.com/jejinmyeong/drawing-dream (현재는 비공개) 공통 프로젝트를 마무리 하였다. 프로젝트의 시작 사실 프로젝트를 처음 시작할 때, Front-End와 Back-End중 어느 파트를 맡을지 고민이 많았다. 프로젝트를 진행하다 보면 서로 도와주어야 하는 부분이 생긴다고는 하였지만 한쪽 분야에 치우친 개발을 해야 할 것이기에 나에게 맞는 파트를 선택해야 했다. 나는 웹 개발에 경험이 전무하고 더군다나 React는 한 번도 다루어 보지 않았기에 걱정이 많았다. 이번 프로젝트에서는 Front를 선택했고, 꽤? 재밌게 개발을 했던 것 같다. 그리고 프로젝트를 하면서 HTML, CSS,..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현 되는데, 액션 객체는 { type: 'TOGGLE_VALUE' } 와 같은 형식으로 이루어져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값은 액션의 이름이라고 생각하면 된다. 그 이외의 값들은 나중에 상태를 업데이트 할 때 참고해야 할 값이며, 작성자가 마음대로 넣을 수 있다. { type: 'ADD_..