[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국

1주차 발자국

강의 수강

이번 주에 객체지향 프로그래밍(OOP)까지 강의를 수강했습니다.

취업준비와 진행중인 프로젝트 일정과 겹처서 이번 주에는 객체지향 프로그래밍(OOP)까지 학습하였습니다. 매일 1~2시간씩이라도 강의를 듣고 실습을 진행하고자 했고 공부 방식은 강의를 들으며 실습을 통해 배운 내용을 코드에 적용해보는 방식을 선택했습니다. 자바스크립트 개념을 점검한다는 마음으로 강의를 수강했고 함수와 객체지향 개념을 집중적으로 다루었으며 실습을 통해 이론을 체계적으로 익힐 수 있었던 것 같습니다.

학습 요약

시간이 부족하여 계획한 모든 학습을 다 진행하지는 못했지만 강의에서 배운 내용을 하나하나 실습하면서 놓쳤던 부분이나 몰랐던 부분을 다시 복습할 수 있었습니다. 자바스크립트의 기초 개념과 함수와 객체지향 개념을 실습하면서 코드의 구조를 더 잘 이해하게 되었고 실제 코드 작성에 적용하는 연습을 했습니다. 실습 과정에서 코드를 수정하고 예상한 결과를 얻기까지 반복적인 실험을 통해 점차 이해도를 높였습니다. 단순 강의내용을 따라하는 것이 아닌 다른 방식으로도 작성해보려고 노력했습니다.

강의 내용 요약

자바스크립트 기초

var, let, const의 차이점, 호이스팅, 스코프, 자바스크립트의 데이터 타입과 타입 변환에 대해 학습했습니다.
var의 함수 레벨 스코프와 let, const의 블록 레벨 스코프 차이점에 대해 더 깊이 이해할 수 있었습니다.

느낀 점

이전까지 자바스크립트의 변수 선언 방식에 대해 큰 생각 없이 의미없이 사용하고 있었는데 이번 기회를 통해 변수의 선언을 이해하고 적합한 방식으로 사용하는 것을 체계적으로 정리하고 연습할 수 있어서 좋았던 것 같습니다. var와 let의 차이와 호이스팅이 실제 코드에서 어떻게 적용되는지를 정리했고 명확한 변수 사용을 위해 연습한 시간이었습니다. 프로젝트를 진행했을 때 var를 잘못 사용하여 문제가 생긴 적이 있었는데 호이스팅에 대해서 배우면서 다시 생각해볼 기회가 생겼고 기존에 배운 개념을 다시 한번 점검하고 상기시킬 수 있었습니다.

윈도우 객체 및 DOM

DOM이란 웹 페이지의 구조를 트리 형태로 표현하는 방식
이를 통해 자바스크립트로 HTML 요소를 선택하고 조작 가능!
getElementById, querySelector 등의 메서드를 사용하여 HTML 요소를 선택하고
createElement, removeChild 등의 메서드로 DOM을 조작하는 방법을 학습

느낀 점

동적 데이터를 사용하거나 DOM 조작에 자신이 없어서 항상 어렵게 느끼고 부담스러워하며 사용을 했었는데 예제와 실습을 반복하면서 자신감을 되찾아갔던 것 같습니다. DOM 트리 구조를 다시 한번 복습하고 이를 예제와 함께 실습하니 DOM에 익숙해졌고 비효율적으로 작성했던 코드들을 배운 내용을 바탕으로 수정해보았더니 더 개선됨을 확인 할 수 있었던 것 같습니다. querySelectorAll을 사용해본 적이 없었는데 이번 기회로 공부하고 사용해봤더니 다수의 요소를 선택하고 처리하는 방식이 매우 유용하다는 것을 배웠으며, 앞으로 더 효율적인 코드를 작성하는 데 많은 도움이 될 것이라고 느꼈습니다.

Event

이벤트 처리 방식, addEventListener를 사용해 입력, 클릭 등 다양한 사용자 액션을 감지하고 처리하는 방법 학습

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing), 이벤트 위임(Event Delegation) 학습

느낀 점

아직도 간단한 작업이거나 동적인 요소가 없는 경우 메인 페이지나 헤더, 푸터를 작성할 때는 여전히 onclick 속성을 사용해 이벤트를 처리하는 방식이 익숙하고 편리하게 느껴져 자주 활용하곤 합니다. 그러나 이번 강의를 통해 성능 측면에서 더 나은 방법인 이벤트 위임 방식에 대해 다시 한 번 깨달을 수 있었습니다. 리스트나 테이블 같은 동적 UI에서 부모 요소에 이벤트를 위임하면 더 깔끔하고 성능이 향상된 코드를 작성 가능한 것을 알고 있었으나 간편함으로 인해 필요할 때만 사용했던 것을 반성하게 되었습니다. onclick의 간편함에 의존하기보다는 이벤트 위임 방식을 더 많이 연습하고 익숙해져야겠다고 느꼈습니다. 이번 학습을 통해 성능을 고려한 코드 작성 방법을 다시 한 번 상기할 수 있는 좋은 기회였습니다.

자바스크립트 중급

삼항 연산자, 구조 분해 할당, 전개 연산자
map, filter, reduce 등의 배열 메서드와 this 키워드의 사용법을 학습
비동기 처리 방식과 Event Loop의 작동 원리 학습

느낀 점

제가 생각했을 때 자바스크립트에서 가장 기본이고 자주 사용되는 this와 배열 메서드들에 대해 학습할 수 있어서 좋았습니다. 데이터를 처리하거나 배열을 변환할 때 입력값을 배열로 보내거나 응답값을 배열로 받아야 하는 경우가 많았습니다.

map과 filter 같은 배열 메서드는 코드의 가독성을 높일 뿐만 아니라 성능 면에서도 필수적인 도구라고 생각했고 그만큼 자주 사용되기때문에 혹시 잘못 알고 있었던 부분이 있는지 점검해가면서 강의를 수강했고 올바르게 사용하고 있는지 확인할 수 있어서 좋았습니다. this 키워드는 항상 신경을 많이 쓰는 부분 중 하나였습니다. 의도한 객체가 아닌 전역 객체를 참조해서 예상치 못한 결과를 초래하는 경우가 종종 있었고 그때마다 디버깅에 많은 시간을 할애한 경험이 많았습니다. 이번 학습을 통해 다시 한 번 this 키워드의 사용법을 점검하고 의도한 대로 사용하고 있는지 꼼꼼히 확인하면서 진행했습니다. 앞으로는 이런 문제를 더 쉽게 예방할 수 있을 것 같아 자신감이 생겼습니다.

비동기 처리 방식과 Event Loop의 작동 원리를 학습하면서 자바스크립트가 싱글 스레드 언어임에도 비동기 처리를 어떻게 구현하는지 명확히 이해할 수 있었습니다. Event Loop의 작동 원리를 배우면서 코드가 동기적으로 실행되는 것처럼 보이지만 실제로는 비동기적으로 처리되는 부분을 더 잘 관리할 수 있는 방법을 알게 된 점이 특히 도움이 되었습니다. 이 덕분에 앞으로 비동기 작업을 보다 효율적으로 처리할 수 있을 것 같습니다.

OOP(객체 지향 프로그래밍)

OOP의 개념과 자바스크립트의 프로토타입 기반 상속 구조를 학습
ES6 클래스와 super() , 상속을 통해 객체 지향 설계의 기본 원칙을 자바스크립트에서 구현하는 방법 학습

느낀 점
객체지향 프로그래밍은 클래스 기반으로 코드를 작성하면서 유지보수성과 확장성을 크게 개선할 수 있는 코드로서 반드시 알아야하는 개념이라 생각합니다. 생성자 함수를 사용해 객체를 생성하는 방법은 이제 지양하고 자바스크립트를 배운 이상 ES6 클래스를 사용하여 직관적인 코드를 작성해야한다고 생각합니다. 프로젝트에서 확장 가능하고 관리하기 쉬운 코드를 작성하기 위해 반드시 필요한 개념이라 생각해서 아는 개념이었지만 집중해서 들었던 것 같습니다. 상속의 경우 코드 중복을 줄이고 재사용성을 높이는 데 매우 유용하지만 잘못 사용하면 오히려 복잡성을 초래할 수 있다는 점을 유의하며 학습에 집중했고 실습을 통해 이러한 부분을 신경 쓰며 적용해 보았습니다.

1주차 회고

이번 주는 취업 준비로 인해 충분한 시간을 투자하지 못해 계획했던 학습 목표를 완벽히 달성하지는 못했습니다. 그러나 매일 조금씩이라도 시간을 내어 학습을 이어갔고 배운 내용을 즉시 실습하면서 개념을 내 것으로 만들기 위해 노력했습니다. 단순히 강의만 듣는 것이 아니라 직접 코드를 작성하며 개념을 이해하고 복습하는 과정이 매우 효과적이었습니다. 이과정에서 기존에 알고 있던 자바스크립트 지식을 다시 점검할 수 있었고 오랜만에 다루면서 잊고 있던 개념들도 복습할 수 있었습니다. 그동안 자주 사용하지 않았던 개념들을 이번 기회에 다시 학습하고 자주 사용하던 개념은 맞는지 점검해가면서 지식을 보충하고 이해의 폭을 넓힐 수 있어 매우 유익한 시간이었습니다.

개선할 점과 2주차 계획

1주차에 미처 완료하지 못한 부분을 평일 시간 관리를 철저히 하여 강의 커리큘럼을 모두 따라갈 계획입니다. 주말과 휴일을 활용해 부족한 부분을 보충할 예정입니다. 2주차에는 아직 수강하지 못한 강의를 마무리하고 과제를 저만의 방식으로 변형하면서 주요 기능을 유지하는 방향으로 진행할 것입니다. 목표는 미완성 과제를 완료하고 최소한 진도를 따라잡아 중간 점검 전까지 과제 3개 이상을 완벽하게 마무리하는 것입니다. 배운 내용을 실습에 적용해 개념을 확실히 다지고 워밍업 클럽을 완주를 목표로 달려나가겠습니다!