우아한 테크 코스 생활/글쓰기
레벨1) 레벨 인터뷰 : 레벨로그
Rulu_
2023. 4. 24. 17:00
우아한 테크 코스에서는 각 레벨이 끝나면 레벨에서 학습한 내용을 인터뷰 형식으로 진행하는 레벨 인터뷰를 진행한다.
각 레벨에서 학습한 내용에 대한 자신의 현재 상태를 파악하고, 자신이 알고 있는 지식을 말로 표현하는 연습을 통해 메타인지를 기르는 것을 목적으로 한다.
진행방식
- 레벨 인터뷰는 그룹 당 6명(또는 7명)이 진행한다.
- 1명은 인터뷰이, 3명은 인터뷰어, 2명은 옵저버 역할을 맡는다.
- 한명당 총 시간은 30분이며, 인터뷰 20분 + 피드백 10분으로 진행한다.
- 위 과정을 반복해 모든 크루가 인터뷰를 진행할 수 있도록 한다.
레벨 로그 작성 목적
- 레벨 1에서 자신이 학습한 내용을 복습하고, 피드백을 받기 위함이다.
- 레벨 인터뷰에서 자신있게 답변할 수 있는 내용을 적기 보다 레벨 1에서 어떤 부분을 학습했는지 정리하면서 작성하는 것을 목적으로 한다.
레벨 로그 작성법
- 형식은 자유
- 레벨 별, 미션 별로 학습한 내용을 A4 한장 내외로 요약해 작성한다.
- 학습로그 링크나 블로그 링크를 첨부하지 않고, 그 내용을 요약해 작성해야 한다.
나는 매 미션별 주요하게 학습한 개념 몇개를 선정해 레벨 로그를 작성했다. 하지만 생각보다 작성하지 않은 곳에서 질문이 많이 나왔다ㅋㅋ 그냥 학습에 도움을 주는 것이 목표니 크게 부담 가지지 않으려고 노력했지만 엄청나게 긴장했던 것 같다. 심지어 첫번째 순서라 더 떨었다. 근데 하고보니 오히려 첫 순서인게 다행이었다. 뒤로가면 갈 수록 겹치지 않는 질문 한다고 더 어려운 질문하더라,,,
아래는 내가 작성한 레벨 로그이다. 피드백은 따로 피드백 카테고리에 적어둘 예정
우아한테크코스 웹 프론트엔드 5기 루루(송지은)
온보딩: 자동차 경주
- 명령형 vs 선언형
- 명령형 프로그래밍은 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명한다. ‘어떻게’계산 할지 보다는 ‘무엇’이 계산될 것인지 집중하는 프로그래밍으로 목표를 명시하지 않고 알고리즘을 명시한다. 개념적으로 친밀하고 직접적으로 구체화되어있다.
- 선언형 프로그래밍은 프로그램이 어떤 방법으로 해야하는지 보다는 무엇과 같은지 설명한다. 목표를 명시하고 알고리즘을 명시하지 않는다. 선언형 프로그램의 특징은 추상화에 있다. JS에서는 내장형 함수를 사용하여 선언형 프로그램을 작성할 수 있다.
- 비동기 처리
- 비동기 프로그래밍이란 어떤 일이 완료되기를 기다리지 않고 다음 코드를 실행해 나가는 방식이다. fetch를 통한 api요청, setTimeout(), readline 등이 비동기의 대표적 예시이다.
- 비동기 프로그래밍을 동기처럼 사용하기 위해 여러가지 방법이 있다.
- 콜백 함수 사용: 비동기로 작동하는 함수의 마지막에 또 함수를 호출, 호출, 호출 해서 마치 동기처럼 작동하게 한다.
- Promise: promise의 콜백인자로 비동기 함수를 넣어준다. 이후 .then() 을 사용해 마치 동기처럼 작동하게 한다.
- async,await: promise를 더 세련되게 사용하는 방법이다.. async는 function앞에 위치한다. async를 붙이면 해당 함수는 항상 promise를 반환한다(프로미스가 아닌 값을 반환해도). await는 async 키워드가 붙은 function안에서만 사용가능하다. await 붙이면 그 함수의 어딘가에서 항상 promise 객체를 반환해야만 의미가 있다.
레벨1: 로또
- css: position
- position 속성은 HTML문서 상에서 요소가 배치되는 방식을 결정한다. 많은 경우 position 속성은 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용한다.
- static: postion 속성의 기본값이다. static일 경우 top, left, bottom, right 속성 값은 무시된다. 요소들이 차례대로 배치된다.
- relative: 원래 위치에서 벗어나 배치할 수 있게 된다. 요소의 원래 위치를 기준으로 상대적 배치를 한다.
- absoulte: 배치기준이 본인 기준이 아닌, 부모 요소를 기준으로 배치된다. DOM트리를 따라 올라가다 position속성이 static이 아닌 첫 번째 상위 요소를 찾으며 그 요소 기준으로 배치한다. static이 아닌 부모요소가 없다면 <body>를 기준으로 배치된다.
- fixed: 언제나 고정된 위치에 배치할 수 있다. 배치기준이 viewport이다. top, left, bottom, right은 브라우저에서 얼마나 떨어져있는지를 결정한다.
- position 속성은 HTML문서 상에서 요소가 배치되는 방식을 결정한다. 많은 경우 position 속성은 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용한다.
레벨1: 점심 뭐 먹지
- customElement
- 자율적 custom element: 추상 클래스(HTMLElement)를 확장하는 완전히 새로운 요소를 만드는 것
- customElement에서 constructor은 항상 super()을 호출해야함
- connectedCallback: 문서에 custom element가 포함될 때(연결될 때) 행동에 대한 요청을 보낼 수 있는 메서드이다.
- customElements.define() : 사용자 정의 요소를 페이지에 등록하는 방법이다.
레벨1: 영화 리뷰
- TS: type vs interface
- 명명된 타입을 정의하는 방법은 type과 interface 두 가지 방법으로 나뉜다.
- 대부분의 경우 타입과 인터페이스 모두 가능하다.
- 따라서 같은 상황에서는 동일한 방법으로 정의해 일관성을 유지해야 한다.
- 인덱스 시그니처 사용, 함수 타입 정의, 제너릭 사용 모두 둘 다 가능하다.
- 인터페이스는 타입을 타입은 인터페이스를 확장할 수 있다.
- 타입과 인터페이스의 다른점
- 유니온 타입은 있지만 유니온 인터페이스는 없다. 인터페이스 확장을 유니온으로 할 수 없다.
- 인터페이스는 속성을 확장하는 선언 병합을 통해 보강이 가능하다.
JS
- Closure
- 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상이다.
- 가비지 컬렉터의 동작 방식과 밀접한 연관이 있다.
- 접근 권한 제어와 부분 적용 함수(디바운스), 커링 함수(여러개 인자를 다 받은 후 실행) 으로 활용이 가능하다.
- 스코프
- 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.
- 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. (전역, 지역)
- 함수 레벨 스코프는 함수에 의해서면 지역 스코프가 생성되는 것이고 블록 레벨 스코프는 모든 코드 블럭이 지역 스코프를 생성하는 것이다.
- JS는 렉시컬 스코프로 상위 스코프를 결정한다. 함수 정의가 평가되는 시점에 상위 스코프가 결정되는 것이다.