Daily 1%
article thumbnail

이번 주는 JavaScript와 React를 집중적으로 공부한 한 주였습니다. 특히 노마드코더의 강의를 통해 클론 코딩 프로젝트를 따라가보면서, 코딩이 단순한 학습을 넘어 즐거운 창작 활동이 될 수 있다는 것을 경험했습니다. 그러면 간단히 어떤 내용을 학습했는지 되짚어보겠습니다.

이번 주 학습 내용

cafe-laptop
이번 주는 카페에서 거의 살았다

JavaScript 기초 완성하기

주 초반에는 JavaScript 기초 강의를 완강했습니다. 비록 간단한 페이지였지만, 직접 코드를 작성하고 그것이 실제로 동작하는 것을 보며 큰 성취감을 느꼈습니다. 앞으로 리액트와 NEXT.JS를 배워야하기 때문에 기초 체력을 쌓는다고 생각하고 수강했습니다.

Canvas API를 활용한 그림 앱 제작

JavaScript를 활용해 간단한 그림 앱을 만들어보았습니다. 8시간 분량의 강의였지만, Canvas API의 기본적인 활용법을 배우고 실제로 구현해보는 과정이 매우 흥미로웠습니다.

 

특히 HTML로 구조를 잡고, JavaScript로 기능을 연결하는 과정이 마치 레고 블록을 조립하는 것 같았습니다. getElementById로 요소를 선택하고, addEventListener로 사용자 동작을 감지하며, 함수로 원하는 기능을 구현하는 과정에서 웹 개발의 기본 원리를 이해할 수 있었습니다.

WebSocket과 실시간 통신의 세계

중반부에는 Zoom 클론코딩 프로젝트를 통해 WebSocket과 SocketIO를 학습했습니다. 실시간 양방향 통신의 개념을 처음 접하면서, HTTP와 WebSocket의 차이점을 실제로 경험할 수 있었습니다.

 

특히 WebRTC를 활용한 P2P 영상통화 구현 과정에서 ICEcandidate의 개념을 배운 것이 인상적이었습니다. 브라우저 간 최적의 연결 경로를 찾는 과정을 보면서, 현대 웹 기술의 진보를 실감할 수 있었습니다.

React의 첫걸음

리액트

주말에는 React 학습을 시작했습니다. 컴포넌트 기반의 개발 방식과 상태 관리의 개념을 배우면서, 웹 개발의 새로운 패러다임을 경험했습니다.

  • useState를 통한 상태 관리
  • props를 통한 컴포넌트 간 데이터 전달
  • react.memo()를 활용한 성능 최적화
  • prop-types를 이용한 타입 검증

이번 주 주요 성과

  • JavaScript 기초 강의 완강
  • Canvas API를 활용한 그림 앱 제작
  • WebSocket/SocketIO를 활용한 실시간 통신 구현
  • WebRTC를 이용한 P2P 영상통화 기능 구현
  • React 기초 개념 학습 및 실습

이번 주 가장 큰 깨달음은 개발이 단순한 코드 작성을 넘어선다는 것이었습니다. 예를 들어, STUN 서버의 필요성을 경험하면서 실제 서비스 구현에는 이론적 지식 외에도 다양한 인프라 요소가 필요하다는 것을 배웠습니다.

또한, React를 학습하면서 바닐라 JavaScript와의 차이점을 직접 경험할 수 있었습니다. 특히 컴포넌트 기반 개발의 장점과 상태 관리의 중요성을 체감했습니다.

마치며

이번 주는 기술적 성장뿐만 아니라 개발자로서의 마인드셋도 발전시킨 의미 있는 시간이었습니다. 특히 처음에는 불가능해 보였던 프로젝트들을 하나씩 해결해나가면서, 꾸준한 학습의 중요성을 다시 한번 깨달았습니다. 솔직히 했던 것과 유사한 프로젝트를 다시 하라고 한다면, 손쉽게 만들지는 못하겠지만 배웠던 내용과 기억을 토대로 어떻게든 구현은 할 수 있겠다는 자신감이 생겼습니다.

 

앞으로도 이러한 성장의 순간들을 기록하고 공유하면서, 더 나은 개발자로 성장해나가고 싶습니다. 새로운 기술을 배우는 것도 중요하지만, 기본기를 탄탄히 하고 실제 프로젝트에 적용해보는 경험을 쌓는 것이 더욱 중요하다는 것을 이번 주 학습을 통해 깨달았습니다.

이번 글을 굉장히 심심한 글이 되었네요. 다음 주부터는 간단하게라도 프로젝트를 할 때 스크린샷을 찍어놓았다가 주간 회고에 첨부해야겠습니다. 감사합니다.