항해99 플러스 프론트엔드 1주차 프레임워크 없이 SPA 만들기

손유민·2025년 1월 17일

JavaScript WIL spa 프론트엔드 항해99

드디어 항해99 플러스 프론트엔드 과정의 시작

~~사실 지금 5주차가 진행중이지만 그동안 너무 바빠 정리를 하지 못했다~~

실무에선 디자인과 퍼블리싱 업무만 보다보니, React는 고사하고 Javascript를 깊게 사용하지도 않았다.
이번에 처음 접해보는 부트캠프가 나에게 많은 도움이 되었으면 좋겠다. 프론트로 전직도 하고..

1 - 3주 발제는 항해99의 해먼드 코치께서 진행 하셨다.

다른 부트캠프들 보다 항해99의 코치진이 (개인적으로)짱짱해서 항해99를 선택했었다.

프레임워크 없이 SPA 만들기

1주차 발제는 프레임워크 없이 SPA 만들기 이다.

리액트는 써본적 없고 Javascript 중급 정도의 지식을 가진 나로썬
첫 주 발제부터 새로운 개념을 많이 배운 시간이였다.

1주차 발제 주요 목표

라우팅 구현, 컴포넌트 기반 구조 설계
상태 관리 초기 구현
이벤트 처리 및 DOM 조작

과제 셀프 회고

기술적 성장

해시 라우터 / 히스토리 라우터 동시에 적용해본건 새로웠다.

 export const getCurrentPath = () => {
   if (window.location.hash) {
     return window.location.hash.slice(1);
   }
   return window.location.pathname;
 };

이 함수로 해시 라우터와 히스토리 라우터 모두 처리할 수 있는 형태로 만들었다.

html 에선 id값을 케밥케이스 사용, javascript는 카멜케이스 사용 표준 스타일 사용
- 기존 퍼블리싱 작업들은 혼자 하다보니 어디엔 어떤 스타일을 사용하든지 내 맘대로 진행했는데,
  이번 과제를 진행하며 위와 같은 표준 스타일을 배웠다.
window.location.hash와 window.location.pathname의 차이를 알았다.
- .hash - 서버요청X / hashchange 이벤트 / 새로고침 없이 변경 가능
- .pathname - 서버요청O / popstate 이벤트 / 새로고침 시 서버로 요청 가능
?. 옵셔널 체이닝을 배웠다
- ?. '앞' 평가 대상에만 동작하며, 평가 대상이 undefined 또는 null이면 평가를 멈추고 undefined 반환한다.

기존 지식의 재발견

이번 과제를 진행하면서 표현식과 연산자를 좀 더 깊게 공부하는 시간이였다.

평소 써봐야 ===나 <=, >=처럼 비교 연산자만 주로 사용했었는데,
이번 항해99를 시작하면서 AND, OR, 널병합 연산자 등등 사용해 여러 표현식을 만들어 보는 경험을 가졌다.

// 클릭 이벤트 함수. 이벤트 위임까지
export const handleClick = e => {
  if (e.target.tagName === 'A' && e.target.getAttribute('href')) {
    e.preventDefault();
    const path = e.target.getAttribute('href');
    navigation(path);
  }
  if (e.target.id === 'logout') {
    e.preventDefault();
    localStorage.removeItem('user');
    navigation('/login');
  }
};