부트캠프 | 3주차 정리

21.08.02 ~ 21.08.06

08.02

코플릿 - 객체

• 이 날은 코플릿 위주로 진행됐으며 그 중에서도 객체 파트 부분을 공부했다. 같이 코플릿을 풀었던 분이 기수이동을 하신 분이라 나보다 실력이 뛰어났다. 이 때문에 문제 풀면서 많이 배웠었던 것 같다. 처음엔 용어 같은 것도 뜬 구름 잡는 느낌이 강했는데 설명하는 연습을 하면서 좀 더 용어 등에 익숙해지는 시간이 됐다.

08.03

Css 및 twittler 목업

• 아주 기초적인 Css를 배운 이후로 이를 직접 사용해서 목업을 진행 했던 시간을 갖게 됐다. 이 또한 페어 프로그래밍으로 진행됐다. 주어진 과제를 정확하고 똑같이 구현해보자는 공동 목표를 가지고 코딩을 했다. 처음에 요소를 좌우에 정확하게 배치하는 것이 쉽지 않았지만 서로 추가적으로 검색과 공부를 통해 결국 똑같이 만들며 목표를 달성했다. 그 이후에는 코드를 조금 더 깔끔하게 만들며 과제를 마감했다.

08.04

스코프와 클로저

• Scope는 원래 영어 단어 자체는 범위라는 의미를 가진다. 자바스크립트에서 이야기하는 스코프 역시, 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해볼 수 있다. 컴퓨터 공학, 그리고 자바스크립트에서의 스코프도 "범위"의 의미를 가지고 있다. 더 자세하게는 "변수의 유효범위"로 사용된다.
• 자바스크립트에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있다. 그 중 종종 사용되는 클로저라는 개념에 대해서 공부했다. "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 여기서 주목할 만한 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"이다. 특이하게도 자바스크립트는 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 한다. "외부함수의 변수에 접근할 수 있는 내부함수"를 클로저 함수로 부르는 이유도 이 때문이다.

이 두 가지 개념을 배웠는데 개념을 배운 이후로 코드를 보는 개념이 늘었다. 코드를 보며 어떤 방식으로 코드가 돌아갈지 생각해보았고, 이해해보려 했다. 처음에는 익숙하지 않았지만 개념을 이해하려고 노력하니 어느정도의 기초는 잡힌 것 같다. 뭐든지 기본기가 가장 중요하지만 무심코 넘어갈 수 있다고 생각해 집중해서 하려 노력했던 것 같다.

08.05

Spread/Rest 문법

• Spread 문법
  주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다.

• Rest 문법
  파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용하다.

Spread와 Rest문법을 공부하면서 예전에 배운 것들을 전체적으로 복습하는 식으로 수업을 진행했다. 개인적으로 여러가지 개념을 배우면서 뭔가 개념들이 섞여서 이해가 되지 않았던 부분들이 있었는데 문제들을 풀어보며 복습하니 어느정도 정리된 느낌이 들었다. 아무래도 수업 시간이 길기 때문에 복습시간을 많이 가져 갈 수 없었는데 필요한 공부를 한 것 같다.

08.06

DOM

• DOM에 대한 개념을 처음 배웠는데 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. createElement를 사용해 새로운 Element를 만드는 것을 해보았다. 그리고 자바스크립트에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있다. 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수 있다. 그러나 DOM은 조금 특별한 방법을 사용해야 한다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있다.

• 그리고 배운 것들을 이용해서 유효성 검사를 할 수 있게 코딩을 했다. html에 class를 지정하고 자바스크립트에서 querySelector를 통해 회원가입 시 일정 조건의 코드를 부여하고 이를 충족 했을 때 디스플레이 상에 메시지가 표현되게 구현했다. 내가 만든 것은 아이디를 만들 때 4글자 이상일 땐 성공 메시지가 4글자 미만일 땐 실패 메시지가 표현되게 구현했고, 비밀번호는 1차, 2차 시도 비밀번호가 일치했을 때 성공 메시지가 표현될 수 있도록 만들었다. 이를 통해 우리가 평소 웹사이트에서 회원가입을 할 때 사용되는 패턴을 학습할 수 있었다.