2021-03-27

210327 Basic Algorithm 문자열 압축

기본 알고리즘 문제 Pseudo code + JavaScript code

처음 이 문제를 보았을때 생각났던 구현방법으로 Set()자료형이 생각이 났다. 우선 주어진 문자열을 압축하는 것이기 때문에 반복되는 문자를 생략해서 표기해야 되기 때문이다.
그래서 아래에 첨부한 코드와 같이 처음에 입력받은 문자열을 Set() 객체로 만들어서 중복되는 문자를 제거해줬다.

const fs = require('fs');
const stdin = (process.platform === 'linux' ?
    fs.readFileSync('/dev/stdin').toString() :
    `KKHSSSSSSSE`).split('\n');
const input = (() => {
    let line = 0;
    return () => stdin[line++];
})()

{
    const inputWord = input();
    let noRepeatWord = new Set(inputWord);
    let noRepeatWordList = [...noRepeatWord];

    for (let i = 0; i < noRepeatWordList.length; i++) {
        let repeatCount = 0;
        for (let w of inputWord) {
            if (noRepeatWordList[i] === w) repeatCount += 1;
        }
        if (repeatCount >= 2) noRepeatWordList[i] += repeatCount;
    }
    console.log(noRepeatWordList.join(''));

2021-03-27

Algorithm-problem-solving

210327 Basic Algorithm 가장 짧은 문자거리

기본 알고리즘 문제 Pseudo code + JavaScript code

오랜만에 이런저런 생각을 해 볼 수 있었던 알고리즘 문제인 것 같아 블로그에 포스팅 글로 남기기로 했다. 표면적으로는 매우 간단해보이는 문제이지만 그 접근방식에는 다양한 것 같다.

처음 이 문제를 보았을때 생각났던 구현방법으로 split()과 재귀호출 이 두 가지 방법이 생각이 났다.
주어진 문자열에서 특정 문자를 기준으로 구분되는 각 문자열들의 특정 문자로부터의 거리를 구하는 프로그램을 작성하는 문제인데 처음에는 아래와 같은 방식으로 Pseudo code와 JavaScript 코드를 작성해보았다. 결과값은 정답과 근사하게 출력이 되지만 정답이 되는 코드는 아니다.

다만 이 코드를 첨부하는 이유는 나의 문제해결 접근방식과 또 다른 문제해결 접근방식을 비교하기 위한 목적에 있다.

let word = 'teachermode';
let resultArr = Array.from(word.length).fill(0);
const splitWord = word.split('e');
console.log(splitWord);
const result = splitWord.map((word) => {
  const wordLength = word.length;
  for (let i = 0; i < Math.floor(wordLength / 2); i++) {
    if (wordLength % 2 !== 0) {
      resultArr[Math.ceil(wordLength / 2)] = i + 1;
    }
    resultArr[i] = i + 1;
    resultArr[wordLength - i - 1] = i + 1;
  }
  return resultArr.join('');
});
console.log(result);

우선 위의 코드에서 생각한 방식으로 코드를 구현해서 정답을 구할 수도 있다고 생각한다. 하지만 재귀호출 방식을 사용했기 때문에 시간 복잡도를 고려했을때 효율적이지 않은 코드가 된다.

2021-03-27

TIL:Self-Development

210327 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

백준 알고리즘 문제풀기
- ~~기본 알고리즘 문제 2문제 풀이~~ (완료)
블로그 포스팅
- ~~Algorithm problem solving challenge 1주차 회고록~~ (완료)
- Event capturing / Event bubbling 관련 블로그 글 포스팅하기(+이벤트 위임 todo 리스트 예시로 복습겸) (예정)
  - Event를 부착한 요소 : currentTarget
  - Event를 발생한 요소 : event.target
- Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)

2021-03-27

Algorithm-problem-solving

210327 Algorithm problem solving challenge 1주차 회고록

1일 10문제 10일 100문제 챌린지 도전

오늘은 3일전부터 시작한 1일 10문제 10일 100문제 챌린지를 시작한지 4일째 되는 날이다. 오늘 풀 예정인 10문제를 시작하기 이전에 간단하게 3일동안 진행한 알고리즘 문제풀이에 대해서 간단하게 회고를 하려고 한다.

무엇이든 혼자하게 되면 피드백이라는 과정을 간과하게 되는데 이렇게 회고를 남기면서 부족했던 부분과 개선해야 되는 부분에 대해서 정리를 하면 나 스스로에게 피드백이 되기 때문에 다른 사람에게 피드백을 별도로 받을 수 없는 경우에 좋은 것 같다.

지난 3일동안 기본 알고리즘 문제를 27문제 풀었다. 원래 계획대로라면 30문제 정도 풀이를 했어야 했는데 그래도 나름 성과가 있는 3일이었다.

2021-03-26

TIL:Self-Development

210326 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

백준 알고리즘 문제풀기
- 10일 100문제 완성 일일 10문제 풀이 (8/10 완성)(완료)
블로그 포스팅
- Event capturing / Event bubbling
  - Event를 부착한 요소 : currentTarget
  - Event를 발생한 요소 : event.target
- Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)

2021-03-25

Web-browser

210325 Web browser와 친해지기 1탄 브라우저의 동작과정

이번 포스팅에서는 브라우저의 동작과정에 대해서 정리를 해보려고 한다.
웹 개발자가 좋은 소프트웨어를 개발하기 위해서는 그 Platform이 되는 웹 브라우저에 대한 정확한 이해가 필요하다. 웹 어플리케이션의 성능향상은 곧 웹 브라우저의 동작과 연관되어 있기 때문이다.

우리가 무심코 사용하는 웹 브라우저는 어떻게 동작을 할까? 한 번 자세하게 분석해보자.

자 그럼 웹 브라우저에 대해서 조금씩 알아가보자.
우리가 특정 웹 페이지에서 다른 페이지로 이동을 할때 아래 첨부한 Processing model의 과정의 순서로 새로운 웹 페이지가 로드된다.

웹 브라우저의 Processing model

출처 : W3C Navigation Timing Level 2 Spec https://www.w3.org/TR/2015/WD-navigation-timing-2-20150717/

2021-03-25

TIL:Self-Development

210325 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

블로그 포스팅
- ~~브라우저의 렌더링 과정에 대해서 블로그 포스팅하기~~ (완료)
- Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)
JavaScript 메인 수업
- → 38.브라우저의 렌더링 과정 - 40.이벤트 (부분 완료)
백준 알고리즘 문제풀기
- ~~알고리즘 풀이 전용 저장소 만들기(GitHub Repository)~~ (완료)
- ~~10일 100문제 완성 일일 10문제 풀이~~ (완료)

2021-03-24

Algorithm-problem-solving

JavaScript로 코딩테스트 준비하기 - 입출력에 대한 이야기

자바스크립트에서 입력받기

Python으로는 간단하게 input()을 사용해서 키보드의 입력을 받아서 처리할 수 있었다. 하지만 이번에 VSCode에서 JavaScript로 알고리즘 문제를 풀면서 키보드로 받은 입력 값을 처리하려고 했는데 입력 이벤트를 계속 받고는 있지만 입력 이벤트가 끝나지 않았다.
왜 이런지 이해가 되지 않아서 방법을 찾아보던 도중에 해결방법을 찾았다.
바로 입력이 끝났다면 ctrl + D를 눌러서 입력 종료를 알려주는 것이다.

예상하지 못한 JavaScript 입/출력 부분의 문제로 계획하지 않은 입출력 관련된 내용으로 포스팅을 하게 되었다.

JavaScript에서 입출력은 fs(file system) 모듈을 사용한다. fs모듈의 readFileSync() 함수를 사용해서 파일이나 표준 입출력을 입력받게 되는데, 아래 예시 코드에서 0을 입력해주는 이유는 표준입력(stdin: standard input)이 파일 설명자로 0이기 때문이다.

nodejs에서 File system에 관한 공식문서 내용은 아래 링크를 참조하도록 하자.
→ https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_file_system

따라서 별도의 파일을 읽지 않고 표준 입력을 받는 경우에는 내부에 0이라는 인수를 넘겨준다. 0과 함께 encoding을 명시해줘야 하는데 별도로 명시하지 않고 표준입력의 설명자 0만을 넘겨준 경우에는 toString()함수를 사용해서 별도로 String 타입으로 변환을 해줘야 한다.
(변환을 안해주게 되면 <Buffer 31 30 0a>와 같은 raw buffer가 결과값으로 나온다)

const fs = require('fs');

const inputWithNoEncoding = fs.readFileSync(0).toString().split('\n');

const inputWithEncoding = fs.readFileSync(0, 'utf8').split('\n');

const cvtInputToNumber = fs.readFileSync(0, 'utf8').split('\n');
// ['10', '']와 같은 배열의 형태로 값이 반환되기 때문에 [0]번째 인덱스 값을 가져온다.
console.log(Number(cvtInputToNumber[0]));

참고로 readFileSync()의 내부에 작성해준 /dev/stdin은 백준 알고리즘 문제 풀이에서 입력 예제를 넣고 그 파일을 읽어 실행하게 만들기 위해서 작성해준 것이다.

JavaScript에서 입력받는 방법은 앞서 설명한 fs(File System) 모듈을 사용한 방법과 readline 모듈을 사용한 방법이 있다.
readline 모듈은 process.stdin이나 file stream과 같은 Readable stream에서 line by line으로 데이터를 읽어들이기 위한 interface를 제공한다.

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.on('line', (input) => {
  console.log(`received: ${input}`);
});