[인프런 워밍업 클럽 0기] FE 1주차

[인프런 워밍업 클럽 0기] FE 1주차

1주차 학습 요약


2일차 - 자바스크립트 기초, Window 객체 및 DOM, Event

자바스크립트 기초 강의에서는 Console 객체, 변수 선언 방법과 참조 범위, 호이스팅에 대한 개념, 타입 종류와 타입을 변환하는 방법, 연산, Template Literals, 반복문을 배웠으며, Window 객체 및 DOM 강의에서는 Window 객체에 대한 개념과 사용법, DOM에 대한 개념과 Document 객체를 사용한 DOM 조작법을 배웠습니다. 또한 Event 강의를 통해 여러가지 이벤트 상황에 대해 동작을 설정할 수 있는 방법과 버블링, 캡처링, 위임에 대한 개념을 배울 수 있었습니다.

 

3일차 - 자바스크립트 중급(1)

this 키워드에 대한 개념과 사용법, bind/call/apply 메서드를 사용한 this의 참조값 변경, 삼항 연산자 사용법, 간단한 동기/비동기 개념과 이벤트 동작에 대한 내부 작동 과정, Closure에 대한 개념과 사용법, 배열/객체에 대한 구조 분해 할당 방법, 전개 연산자 사용법, 배열에 대한 Map/Filter/Reduce 메서드 사용법을 배웠습니다.

 

4일차 - 자바스크립트 중급(2)

1일차에 배웠던 undefined와 null의 공통점과 차이점, 얕은 비교/복사 와 깊은 비교/복사에 대한 개념과 사용법, 함수 표현식과 선언문의 개념과 차이점, 즉시 실행 함수(IIFF)의 개념과 사용법, Intersection Observer 사용법, pure/impure 함수의 개념, 커링 개념과 사용법, 엄격 모드에 대한 개념과 적용법, 특징을 배웠습니다.

 

5일차 - OOP, 비동기

OOP 강의에서는 객체 지향 프로그래밍에 대한 개념과 특징, 프로토타입에 대한 개념과 사용법, 클래스에 대한 개념과 사용법을 배웠으며, 비동기 강의에서는 callbacks, promise, async/await에 대한 개념과 사용법을 배웠습니다.

 

6일차 - Iterator / Generator, Design Pattern

Iterator / Generator 강의에서는 1일차 타입 설명 때 간단하게 지나갔던 심볼에 대한 개념과 사용법, Iterator와 generator에 대한 개념과 사용법을 배웠으며, Design Pattern 강의에서는 디자인 패턴에 대한 개념과 장점 그리고 가장 자주 사용되는 패턴인 Singleton 패턴과 Factory 패턴, Mediator 패턴, Observer 패턴, Module 패턴에 대한 개념을 배웠습니다.

 

미션 해결 과정


미션 1 : 음식 메뉴 앱

  • 각 메뉴를 클릭할 때, 메뉴에 맞는 음식 리스트를 보여준다.

  • 음식 메뉴가 아닌 투썸 플레이스 카페 메뉴로 변경했고, 메뉴 부분의 스타일과 전체적인 색상을 변경했습니다.

  • 이미지는 투썸 플레이스 카페의 홈페이지에서 이미지 주소 복사를 통해 가져왔습니다. 스타일을 수정할 때 가장 시간이 오래 걸렸으며, 현재 화면 크기에 따라 음식 아이템들의 내용이 잘리는 문제가 있어 검색을 통해 수정하고 있는 중 입니다.

 

미션 2 : 가위 바위 보 앱

  • 컴퓨터와 진행하는 가위 바위 보 게임입니다.

  • 전체적인 색상만 변경하고, 전체적인 스타일은 과제 예시와 비슷하게 만들었습니다.

  • 스타일을 구현하는 것이 가장 고민이 됐고 시간도 가장 오래걸렸습니다. 현재 전체적인 스타일이 과제 예시와 비슷하게 만들어져 있지만 이미지를 넣어 조금 더 보기 좋게 바꾸려고 생각 중입니다.

 

회고


스터디를 시작하기 전에는 그래도 어느 정도 자바스크립트에 대해 알고 있다고 생각했었는데, 한 주 동안 자바스크립트에 대한 강의를 들으면서 제가 알고 있었던건 기초뿐이었다는 사실을 알게 되었습니다.

 

그래서 자바스크립트 강의를 들으면서 처음에는 조금 이해하기 힘든 부분도 있었고, 개념은 이해했지만 이 개념을 코드에 어떻게 적용하면 좋을지 언제 사용하면 되는지는 알기 힘들었습니다. 검색을 통해 더 알아보면서 완벽하게는 아니지만 어느 정도는 이해하고 사용할 수 있게 되었습니다.

 

하지만 과제는 웹에 대한 공부를 올해부터 시작했던 만큼 HTML과 CSS에 대해서도 부족한 점이 많아 이번 주에 있던 모든 과제를 완성하지 못한 것이 아쉬웠습니다. 그래도 점점 속도가 붙고 있어 과제 제출 전까지 모든 과제를 완성하는 것이 목표입니다. 역시 직접 만들어 보는 것이 배운 것을 확실하게 익힐 수 있는 시간이 된 것 같습니다.

댓글을 작성해보세요.

  • John Ahn
    John Ahn

    아무래도 자바스크립트를 사용하면 항상 사용하던 것들만 사용하기에 개념을 다시 배우다 보면 새롭게 생각되는 게 많을 것 같습니다! 저도 개념을 새로 보면 항상 새롭게 배우는 게 있더라고요!! 그래서 복습이 중요한 것 같습니다 ^^

    과제가 많고 커리큘럼이 빠르게 지나가서 시간이 부족할 수도 있을 거 같아요!! 그래도 하나씩 꾸준히 해나가는 모습이 너무 좋습니다!! 경희님 응원할게요!! 파이팅입니다.