Gist 저장소와 VSCode 연동
학습활동 가이드를 통해 Gist를 사용한다는 것을 알게되어서 공통 배경지식의 설명과 마찬가지로 Gist에서 저장소를 만들고, git clone 하여 로컬로 가져온 후 편집하되, 편집 툴은 Markdown 편집 및 미리보기 기능이 가능한 VSCode에서 하는 게 편리하겠다고 생각해서 VSCode Github연동을 활용했습니다.
하지만 처음 연동 시, 맥북 사용자는 Keychain 접근에서 git credential이 자동 저장되어 계정 변경 시 에러가 발생하는 문제에 봉착했습니다. 저는 부캠을 위해 따로 계정을 만들어서 git에서 private repository를 만들고 push할 때 Repository not found 에러가 계속 발생했는데, 이 에러에 해결에 시간을 참 많이 쏟았습니다…
위 링크를 통해 문제 해결에 성공했는데, 짧게 설명드리자면 맥북의 키체인 접근에서 credential을 자동 저장하여 관리해서, VSCode에서 계정 연동을 하더라도 이전 계정의 인증 정보가 사용되어 에러가 발생하는 것입니다.
그래서 키체인 접근에서 github을 검색해서, 관련된 키체인들을 모두 삭제해줘야 문제가 해결됩니다.
Node.js 버전 변경 안되는 문제 해결(with NVM)
VSCode와 Node.js를 사용한 JavaScript 개발환경 구성은 이미 되어있는 상태였고, git 설정 및 VSCode Github 연동도 완료해서, 문제가 없을거라 생각했습니다만, Node.js 버전이 구버전(v12)이여서 이를 수정하는 데 또 시간이 걸렸답니다.
새로운 버전을 설치해도 계속 node -v가 v12로 표시되었는데, 제가 이전에 의존성때문에 설치했던 Node.js 버전관리 툴인 nvm에서 default 설정이 v12로 되어있음을 발견했습니다. 다음과 같이 입력하면 해결됩니다.
nvm install node
nvm alias default v20
nvm list
위 그림과 같이 nvm list에 default → v20이 표시된다면 정상적으로 변경된 것입니다.
새 터미널을 띄워서 실험해보세요!
한 줄 단위로 standard 입출력 (JS)
C/C++과 Python을 주로 사용해와서, Node.js에서 console stdin/stdout을 하는 것부터 막혔습니다.
다른 문법은 크게 다르지 않았지만 배열, 문자열 처리 방식과 입출력 방식이 조금 특이하더군요.
위 링크를 참조하였으며, 기본적인 구조는 다음과 같습니다.
const readline = require('readline');
const { stdin: input, stdout: output } = require('process');
const rl = readline.createInterface({ input, output });
rl.on("line", (line) => {
// 여기에 line을 활용해 줄 단위로 처리하는 로직을 구현합니다.
});
rl.on('close', () => {
process.exit();
})위와 같이 구성하면 Ctrl+C를 통한 이스케이프 명령이 호출되거나, process.exit()함수가 호출되지 않는 이상 계속해서 줄 단위의 입력과 로직 실행이 반복됩니다.
오늘 미션에서 타임 테이블 입출력에 제가 활용한 방법입니다.
fs를 사용하는 예제가 많았지만, 제 환경에서는 입력이 줄단위로 되지가 않아 readline을 사용했습니다.
정규표현식을 활용한 한글, 영어 구분 처리
예제만 보고 한글 제목만 해당되는 줄 알았더니, 한글 영어를 구분하여 처리하라는 내용이 있더군요.
javascript에서는 정규표현식이 라이브러리 없이 가능해 빠르게 구현이 가능했습니다.
다만 “영어가 포함되는 것"과 “영어만 있는 것”에 대한 표현식이 달라, 자료 조사를 좀 꼼꼼하게 했습니다.
https://kingofbackend.tistory.com/79
const regExpEng = /^[a-zA-Z]*$/;
const regExpKor = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]*$/;
if (regExpKor.test(targetText)) {
// 한글만 있는 경우
} else if (regExpEng.test(targetText)) {
// 영어만 있는 경우
} else {
// 둘 다 아닐 경우
}제가 참조한 링크와 내용이 좀 다를겁니다. 그것이 씨크릿
Flag를 이용한 중복 처리
전 처음엔 중복 처리를 고려하지 않고 구현하고, 그 후 중복 처리를 위해 코드를 수정하는 방식으로 진행했습니다.
타임 테이블로 선언한 2차원 배열을 순회할 때 원래는 빈칸이면 중복이 없다고 생각하려 했는데,
구현하다보니 영어 제목이거나 4시간짜리 일정인 경우 빈번하게 빈칸이 등장하게 되어 중복 처리가 곤란해집니다.
그래서 저는 타임 테이블과 같은 크기의 flag용 배열을 따로 만들어, 각각의 셀에 boolean으로
true면 입력 가능, false면 입력 불가능하도록 체크와 표시를 해주는 방식으로 중복 처리를 구현했습니다.
let timeObjArrFlag = Array.from(Array(19), () => Array(5).fill(true)); // 채워지면 그 자리를 false로 바꿈.
function checkAndFillFlag(dow, start, end, timeObjArrFlag){
for (let i=start; i<=end-1; i++) { // 이미 채워져 있다면 false 반환
idx = i-9;
if (timeObjArrFlag[idx][dow] === false) {
return false;
}
}
for (let i=start; i<=end-1; i++) { // 안채워져 있으면 채워질 부분을 false로 바꾸고 true 반환
idx = i-9;
timeObjArrFlag[idx][dow] = false;
}
return true;
}false에 입력을 시도하면 새로운 타임 테이블을 하나 더 만들어, 별도의 배열에 저장해두고 출력했습니다.
리팩터링
한 함수 내 들여쓰기 3개와 10줄 이내 제한은 시작하기 전엔 별 거 아닌 듯 했는데, 막상 실천하려고 하니 정말 어려웠습니다… 그래서 최대한 기준에 맞게 구현하고, 그래도 만족하지 못하면 기능 구현이 완료된 후에 고쳤습니다.
제가 함수나 기능을 합치고 분리할 때 기준점 삼았던 부분들은 다음과 같습니다.
- 코드의 재사용성 강화
- 저는 중복 처리 시 타임 테이블을 하나 더 만들어서 배열에 추가하는 방식으로 구현했는데요, 그러다보니 메인 타임 테이블과 추가 타임 테이블을 처리하는 로직들이 겹치는 코드가 많았습니다.
- 그래서 같은 코드들은 입출력 인터페이스를 통일하여 하나의 함수로 합쳐보았습니다.
- 하나의 기능은 하나의 함수로
- 이번에 구현하면서, 피어 리뷰를 고려하려면 함수명과 변수명을 누구라도 알아볼 수 있게 해야겠다고 생각하여 그렇게 명명하도록 노력했습니다. 물론 뻔한 얘기지만 사실 코테할땐 잘 안지키거든요 ㅎ
- 그래서 이렇게 기능 이름을 명명할 수 있는 로직이라면 별도의 함수로! 라는 원칙으로 함수를 구분해보니 함수 하나의 범위를 정하는 것이 훨씬 수월했습니다.
참고
- 비어있는 배열에 대한 처리 참고
- github pull request 관련
