문제 뱀과 사다리 게임을 즐겨 하는 큐브러버는 어느 날 궁금한 점이 생겼다. 주사위를 조작해 내가 원하는 수가 나오게 만들 수 있다면, 최소 몇 번만에 도착점에 도착할 수 있을까? 게임은 정육면체 주사위를 사용하며, 주사위의 각 면에는 1부터 6까지 수가 하나씩 적혀있다. 게임은 크기가 10×10이고, 총 100개의 칸으로 나누어져 있는 보드판에서 진행된다. 보드판에는 1부터 100까지 수가 하나씩 순서대로 적혀져 있다. 플레이어는 주사위를 굴려 나온 수만큼 이동해야 한다. 예를 들어, 플레이어가 i번 칸에 있고, 주사위를 굴려 나온 수가 4라면, i+4번 칸으로 이동해야 한다. 만약 주사위를 굴린 결과가 100번 칸을 넘어간다면 이동할 수 없다. 도착한 칸이 사다리면, 사다리를 타고 위로 올라간다. 뱀..
8. ESLint 설정 ESLint란? ECMAScript와 Lint의 합성어로, 코딩 컨벤션과 일치하지 않는 오류, 버그, 스타일을 정적으로 분석하여 디버깅해주는 도구이다. Lint가 궁금해서 검색해보니 보푸라기… 라고 하는데, ‘Linting Tool’으로 쓰이면 위와 같은 의미를 갖는다. 관련 패키지 설치 npm i -D eslint : ESLint 패키지 설치 --init 명령어를 이어 설치하면 ESLint에서 제공하는 기본 세팅을 CLI를 통해 선택할 수 있다. (ex. 코딩 스타일 가이드 - Google / Standart / Airbnb, ECMAScript 버전, 프레임워크 및 타입스크립트 사용 여부 등) npm i -D eslint-plugin-react eslint-plugin-rea..
2개월만에 이어서 작성하는 No CRA 개발환경 구축기 2편 5. Babel 설정 Babel이란? ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 코드로 변환하는 트랜스컴파일러이다. 전세계의 모든 브라우저가 ES6를 지원하는 것은 아니기 때문에 JSX를 일반 자바스크립트 코드로 변환한다. 변환한 소스 코드를 번들링 도구인 Webpack에 전달한다. 관련 패키지 설치 npm i -D babel-loader @babel/core @babel/preset-env babel-loader : Webpack이 자바스크립트 파일을 처리할 때 Babel을 사용하도록 하기 위함 @babel/core : Babel의 핵심 기능을 제공 @babel/preset-env : 자바스크립트 코드를 변환할 때 필요..
10월 중순부터 SSAFY에서의 마지막 프로젝트를 진행하고 있다. 지금껏 두 개의 프로젝트는 CRA를 통해 빠르고 간단하게 개발 환경을 구축하였지만, Webpack과 Babel, ESLint 세팅을 하나하나 들여다보지 못했다. 올해의 마지막 프로젝트는 기존에 주어진 시간보다 1주가량 단축되었지만, 이번엔 초기 설정을 직접 하면서 앱의 내부 작동 방식을 이해해보고자 한다. 1. npm(*Node.js 패키지 관리자)으로 프로젝트 시작 npm init -y : npm init만 작성하면 프롬프트에 질문지가 띄워지지만, -y 플래그는 프로젝트명, 버전, 설명, 의존성을 기본값으로 설정하여 ‘package.json’ 파일을 자동으로 생성한다. (init은 “initialize”의 약어로, 초기 설정을 의미한다)..
TODO Highlight TODO Highlight은 VSCode의 Extension으로, 주석에 특정 키워드를 작성하면 위 사진과 같이 하이라이트되어 표기된다. ESLint 설정에서 해당 키워드를 감지했을 때 미해결된 경고를 띄우게 설정하여 같이 사용하기도 한다. 기본으로 TODO와 FIXME 두 가지를 제공하는데, BUG나 OPTIMIZE 등 사용자가 커스텀하여 키워드와 색상을 추가로 지정할 수 있다. 키워드 추가하기 VSCode의 settings.json에 다음과 같은 코드와 키워드를 작성한다. // settings.json "todohighlight.keywords": [ "HACK", "NOTE", "BUG", "INFO", "OPTIMIZE", "REVIEW" ], 색상 추가하기 색상을 변경..
SSAFY 2학기의 첫 번째 프로젝트로 7월 3일부터 약 7주간, 공동 육아일기 어플리케이션 프로젝트를 멋진 팀원들과 성공적으로 끝마쳤다! SSAFY의 보안 정책으로 인해 우리의 멋진 프로젝트를 아직 외부에 소개하진 못하고 있지만, 코드 반출 신청 후에 공개가 허용된다면 언젠가 이 공간에도 꼭 소개하고싶다 🤟 현재는 이틀간의 짤막한 휴식 후 바로 두 번째 특화 프로젝트를 진행하고 있다. 그리고... 어찌저찌 시간을 짜내 다시 지난 프로젝트를 들여다보고 있다. 왜냐하면, 지난 프로젝트때 리액트와 타입스크립트를 1도 모르던 내가!!! 이번 프로젝트부터는 팀-팀장 && 프론트엔드-팀장이 되었기 때문이다 😂 오늘은 수많은 기능들과 페이지들...을 제치고 index부터 정리해보려고 한다. 왜 다른 주요 기능들이 ..
“코드 정보에 입각한 추론” 유니언Union 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 let songwriter = Math.random() > 0.5 // let songwriter: string | undefined ? undefined : "Bon Iver" let singer: string | number = number; // 초기값은 number이지만 잠재적으로 string이 될 수도 있다 singer.toString(); // OK singer.toUpperCase(); // Error - number 타입에 없음 singer.toFixed(); // Error - string 타입에 없음 (소수점 처리 방법) 내로잉Narrowing 값에 허용된 타입을 하나로 좁히는 것..
“프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합” ‘타입’은 자바스크립트JavaScript에서 다루는 값의 형태에 대한 설명이다. ‘형태’란, 값에 존재하는 속성과 메서드, 내장되어있는 typeof 연산자가 설명하는 것을 의미한다. 원시 타입 Primitive Type null undefined boolean string number bigdint symbol 타입 추론 과정 let firstName = "SuperShy"; firstName.length(); // 멤버 을 로 잘못 호출했기 때문에 타입 오류 발생 오류 종류 어떤 프로젝트는 모~든 오류가 수정될때까지 코드 실행을 차단. tsconfig.json에서 설정 가능 구문 오류: TS → JS 변환이 차단됨 ..
문제 링크 : https://school.programmers.co.kr/learn/courses/30/lessons/172928 def solution(park, routes): dir_dict = {'N': (-1, 0), 'S': (1, 0), 'W': (0, -1), 'E': (0, 1)} # 출발 지점 탐색 r = c = 0 for y in range(len(park)): for x in range(len(park[y])): if park[y][x] == 'S': r, c = y, x break for route in routes: # 각 명령문별 방향 및 이동거리 추출 dr, dc = dir_dict[route[0]] moves = int(route[2]) # park의 범위를 벗어나지 않는지..
친구로부터 생일 선물로 받은 '브로콜리 너마저' 굿즈 후드를 입고 온 날, 밴드의 로고를 잘못 읽은 친구의 "브루트포스...너마저...?" 에서 개발로그의 제목이 탄생했습니다. 메모리와 시간 최적화를 포기하면서까지 완탐으로 접근해도 문제 해결에 실패했을 때 외치는 브루트포스...너마저...
