20230602(금)_프로그래머스 0Lv 풀기, 혼자공부하는 자바스크립트 공부

금일 달성 항목

1) 혼자 공부하는 자바스크립트 진행 (343 Page 까지 진행)

2) 프로그래머스 0Lv 팀원과 같이 풀기

3) 영화 검색사이트 리뷰 강의 참여

 

---

문제 해결 과정 1 

[문제]

겹치는 선분의 길이

선분 3개가 평행하게 놓여 있습니다. 세 선분의 시작과 끝 좌표가 [[start, end], [start, end], [start, end]] 형태로 들어있는 2차원 배열 lines가 매개변수로 주어질 때, 두 개 이상의 선분이 겹치는 부분의 길이를 return 하도록 solution 함수를 완성해보세요.

선분이 두 개 이상 겹친 곳은 [-2, -1], [0, 1]로 길이 2만큼 겹쳐있습니다.

 

제한 사항

• lines의 길이 = 3
• lines의 원소의 길이 = 2
• 모든 선분은 길이가 1 이상입니다.
• lines의 원소는 [a, b] 형태이며, a, b는 각각 선분의 양 끝점 입니다.

입출력 예

lines	result
[[0, 1], [2, 5], [3, 9]]	2
[[-1, 1], [1, 3], [3, 9]]	0
[[0, 5], [3, 9], [1, 10]]	8

 

[시도]

혼자가 아닌 팀원들의 도움을 받아 같이 해결하였습니다.

처음에 하나의 구역을 카운팅해서 세는 방법으로 진행했는데 자꾸만 통과가 되지 않았습니다.

 

[해결]

저는 코드로 구현하진 못했지만 문자로 설명을 해보았습니다.

1) -100~100 까지는 200이다.

2) 최대와 최솟값에서 서로가 50%이상 되어야 겹치는 상황이 발생한다.

즉 100 이상이 되어야 한다. 그러지 않으면 결과값은 0이 나온다.

 

위 내용을 상상만하긴 했는데 코드로 구현하는 방법은 모르겠어서... 솔직히 못풀었다.

 

팀원과 답안지의 도움으로 해당 문제를 풀 수 있었다.

function solution(lines) {
let answer = new Array(200).fill(0);
let cnt = 0;
for(i of lines) {
for(j=i[0]; j<i[1];j++) {
answer[j+100] += 1;
}
}
answer.filter(x => x>=2 ? cnt++: "");
return cnt
}
function solution(lines) {
let line = new Array(200).fill(0);

lines.forEach(([a, b]) => {
for(; a < b; a++) line[a+100]++;
});

return line.reduce((a, c) => c > 1 ? a + 1 : a, 0)
}

중간에 문제가 있었는데, 음수값으로 인해 카운팅이 안되는 상황이 있어서 a+100으로 모든 항목을 0부터 시작하도록 바꿨다.

 

[알게된 점]

말로는 설명할 수 있겠는데, 코드로 어떻게 구현해야할지 모르겠다. 생각보다 독창적인 아이디어로 함수를 구성하여 해결 할 수 있다는 것을 알았다.

 

 

---

특강

JS 개인 과제 해설 - 전해강 튜터님

• Perttierrc
  : 어떤 기준으로 포맷팅하는지 표현 가능, 협업할때 용이합니다.
  https://bgeun2.tistory.com/43

React(리액트): 리액트에서 Prettier 사용하기(vscode에서 prettier사용)

• reset.css
  : CSS초기화 세팅, 다른 브라우저에도 반영될 수 있도록 초기화
• form
  : 안에 어떠한 기능이 있는지 유추할 수 있습니다.
• Semantic
  : 의미적인 내용을 담고 있다는 뜻입니다.
• ul
  : 순서가 없는 리스트 이며 안에 li가 있다고 유추할 수 있습니다.
• fetch
  : API를 요청하는 함수입니다.
• ()
  :함수를 실행한다는 뜻 입니다.
• await
  : 서버에서 무언가 받아오기 전까지 넘어가지 않습니다. (구조분해 할당)
• reduce
  : 누적값을 리턴해주는 서비스 입니다.

권장하지 않는 부분

• 데이터를 한곳에서 볼 수 있도록 분할 하는 것이 중요합니다.
• 변수명을 쓸때 스네이크 Case는 주로 파이썬에서 사용됩니다. 자바스크립트에서 변수명을 사용할때는 카멜 케이스를 사용합니다.
  폴더명 ,URL에는 -를 사용하는 케밥케이스를 사용합니다.
• getElementsByClassName은 복수형으로 여러개의 이벤트가 있을때 사용합니다.
  단수로 사용할때는querySelector를 사용합니다.