AngularJS로 만든 포트폴리오 웹사이트 1일차

angцlarJS로 口ざ든 포트폴己l오 웹バr○l트 1일ㅊr 회ヱ✨

이번 프로젝트에서는 AngularJS를 사용해 그 시절 감성 그대로의 포트폴리오 웹사이트를 제작했다.

기존에는 React를 활용해 프론트엔드를 구현한 경험이 있다. AngularJS로 개발했을 때의 차이점과 특징이 궁금했다.

개발에 앞서 알아본 바로는 AngularJS는 단일 페이지 애플리케이션(SPA) 개발을 위한 자바스크립트 프레임워크로, 클라이언트 사이드에서 동적인 웹 애플리케이션을 개발하는 데 사용된다. 특히 양방향 데이터 바인딩과 MVC 구조로 개발의 편의성을 높여주는 특징을 가진다.

1일차 구현 보고

이번 주말은 기획과 대략적인 UI 구현, AngularJS 간단하게 사용해보는 걸 목표로 했다. 1차 기능 개발 후 바로 배포하고 나머지 구현 목표는 점차 반영하기로 결심했다.

AngularJS를 활용한 기능
1. 동적 탭 전환
AngularJS의 ng-click과 ng-show를 활용해서 탭마다 동적으로 콘텐츠가 전환되도록 구현했다.

<!-- 탭 전환 메뉴와 콘텐츠 -->
<div class="side-menu">
    <a href="" ng-click="selectTab('profile')" ng-class="{'active-tab': selectedTab === 'profile'}">프로필</a>
    <a href="" ng-click="selectTab('diary')" ng-class="{'active-tab': selectedTab === 'diary'}">다이어리</a>
</div>

<div class="main-content">
    <div ng-show="selectedTab === 'profile'">프로필 내용</div>
    <div ng-show="selectedTab === 'diary'">다이어리 내용</div>
</div>

$scope.selectedTab = 'profile';
$scope.selectTab = function (tab) {
    $scope.selectedTab = tab;
};

2. 방명록 작성 기능
AngularJS의 양방향 데이터 바인딩을 통해 사용자 입력을 실시간으로 반영하고, 방명록에 추가되는 로직을 구현했다.

3. 미니룸 드래그 앤 드롭
AngularJS의 이벤트 핸들링을 사용해 드래그 앤 드롭 기능을 추가했다.

방명록처럼 UI가 실시간 동기화되는 경우 양방향 데이터 바인딩이 특징인 AngularJS가 효율적이라는 점이 신기했다.

미니룸 구현이 가장 기대되지만 도메인 연결이랑 필수 기능을 먼저 구현하고 나서 할 예정이라 당분간은 디테일보단 기능 구현에 초점을 두고 개발하려고 한다.