TIL | 07

[본캠프 7일차]

 

25.01.02 Today I Learned💡

1. JS 문법 종합반 1주차 강의

2. 1주차 과제

---

 

그래서 Node.js가 뭔데?

 

JavaScript 종합 문법 강의를 수강하면서 Node.js 설치가 필수라고 하셨다.
자세한 설명 없이 설치했고,
vscode에 작성하는 코드를 터미널에서 'node 01.js' (01.js는 문서 이름) 를 통해 바로바로 결과 확인할 수 있었다.

대체로 이런 식이며
console.log의 값을 웹 개발자모드에서 확인했던 것과 같았다.

 

그러다가 아침에 문득 "Node.js 가 뭔데? 이렇게 결과 보여주고 끝이야?" 하는 생각이 들어 찾아보니

 

📍Node.js 란

• JavaScript는 웹 브라우저에서만 동작하는 프로그래밍 언어지만, 
node.js를 통해 독립적으로 서버 구현이 가능해졌다.
• 런타임이란 특정 언어가 구동되는 환경을 뜻한다.
• 즉, JavaScript의 런타임은 node.js로 인해 서버 구현까지 가능한 새로운 런타임이 생기게 되었다.

고 한다. 한 마디로 웹이 아닌 곳에서 독립적으로 서버를 구현하는 기능!

 

튜터님의 기습 방문으로 혼란 한가득

오전 일과를 진행하던 중, 담담 튜터님이 1조 방으로 오셔서 잘 되고 있냐- 며
다음주에 있을 서버 구현에 대한 이야기를 꺼내셨다.
그와 관련하여 간단히 To-do list를 함께 작성해보자고 하셨는데...

처음에는 내가 아는 것처럼 vscode에 html 문서를 작성하시다가
어느 순간 개발자 도구로 넘어가서 내가 알 수 없는 코딩을 막.. 작성하셨다..

아무말도 못하고 코딩은 끝이 났고, 차라리 따로 여쭤보자 싶어 질문지나 실컷 작성했다 ㅋㅋ

 

📍Q&A

• vscode에서 하는 것과 다른 점은?
  -> 개발자도구에서는 바로바로 화면 변화를 확인 할 수 있다.
  사용하는 언어도 같다. 
  
• vscode에서 개발자도구로 넘어간 이유는?
  -> 학생들에게 바로바로 변화하는 화면을 보여주기 위해 사용함
• 개인과제에서도 동일한 방식으로 진행해야 하는지?
  -> 편의에 따라 활용 가능하다.
  보통 JavaScript는 vscode에서 코딩, 수정하며
  Css 처럼 세밀한 부분을 조정하기 위해서는 개발자도구를 사용한다.
  개발자도구에서 적용한 css를 <우클릭-규칙복사> 해서 vscode에 적용하는 방법이 편리하다.
• 사용하는 언어가 다른 것 같은데.. 내가 모르는 건지 아님 mdn에서만 이 내용을 참고할 수 있는지?
  -> 사용하는 언어는 동일하며 구글링 (ex.태그 추가 mdn)을 통해 문서를 확인할 수 있다. 다만 mdn은 처음에 사용하기 어려울 수 있으니 ‘모던자바스크립트’를 활용해도 좋다. mdn에는 웹 개발 전반적인 내용이 있다.
• 페이지를 새로고침해도 적용이 다른지?
  -> 개발자도구에서 적용한 내용은 새로고침하면 날아감.
  변경 내용을 꼭 vscode에 적용해야 함.

 

MDN 사이트: https://developer.mozilla.org/ko/

MDN Web Docs

모던 자바스크립트 사이트: https://ko.javascript.info

모던 JavaScript 튜토리얼

 

 

추가로 확장 프로그램 중 '라이브서버'를 통해 코드 저장(새로고침 X)만으로 변경 내용 확인 가능하다는 걸 알려주셨다!

 

 

이게 바로 개발자의 생각회로인가..

 

JavaScript 종합 문법 강의는 참 친절하고 자세하지만..
확실히 문법이라 그런지 많고, 어렵고, 헷갈리는 것들 천지이다 하하
여차저차 2시간 반 분량의 1주차 강의를 마쳤고 (쉽게 봤다가 하루 종일 + 반나절을 다 쓴..)
끝으로 1주차 과제 두 문제를 풀었다.
1주차 마지막에 배운 'for문'을 활용한 두 문제인데,
나 분명 배웠는데.... 왜 실전에 적용이 전혀 안 되는 건지🥲
뒷골이 당겨와서 선생님의 풀이를 봐야했다...
여러 번 반복하면서 익히는 수밖에..!

사실 두 문제 모두 프로그래머스의 알고리즘 문제들이어서 헷갈리는 건 알았다만
내가 생각한 것과 선생님을 비롯한 다양한 개발자의 접근 방식은 전혀 달랐다..!

 

01 문자열 내 p와 y의 개수

문제

 

 

생각한 로직

1. split을 이용해서 글자 하나하나 쪼개기

2. 그것에서 p와 y의 개수 비교하기

  였지만 split을 어떻게 활용할 지 몰라 기본 틀만 만지작..

+) split을 활용하여 한 단어에 갖고 있는 p와 y의 개수를 비교하는 풀이방법

 

선생님의 풀이 방식

1. for문을 사용하여 단어 내 요소를 하나하나 분리하기

2. p 를 +1, y를 -1로 생각하여 개수가 같다면 0(true), 다르다면 0이 아닌 수(false)가 나온다.

 

 

02 음양 더하기

문제

 

 

생각한 로직

1. signs배열의 값을 변환하기 (true=+ / false=-)
2. ab배열의 하나하나 요소 + si배열의 하나하나 요소 = 새로운 배열
3. 새로운 배열의 모든 값을 따로 뽑아내기
4. 값을 더하기

배열 하나하나 뽑아내고 해봤는데 도저히 아닌 것 같았다..

 

선생님의 풀이 방식

이번에도 for문이었다.

+) for문과 삼항연산자를 사용해서 아주 간단히 나타내는 방법도 있다.

 

---

 

내일 할 일

1. JS 문법 종합 2주차 강의 수강