풀스택 웹개발 부트캠프 3주차 (2)

💻 Life Manager (팀 프로젝트)

📍 https://lifemanagerbyh2j.netlify.app

소개

• 개인 맞춤형 일상 기록 및 관리 웹 페이지
• Main page, Health page, Entertainment page, To-do list page, Login page로 구성
• navbar에 위치한 아이콘을 통해 페이지 간 이동 가능

navbar

• 각 페이지별 아이콘과 날씨 아이콘을 포함
• 날씨 아이콘을 클릭하면, 현재 위치와 날씨를 나타냄
• HTML5의 geolocation api, openweathermap api, Kakao api 활용

위도, 경도 정보를 바탕으로 주소 출력하기

• Kakao api를 활용
• 주소를 가져오는 과정에서 도로명 주소를 응답값으로 받도록 설정하는 경우에 값을 제대로 가져오지 못하는 상황 발생
• 지번 주소로 응답값을 받도록 수정하여 오류 해결

fetch(
    `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${longitude}&y=${latitude}`,
    {
      method: "GET",
      headers: { Authorization: `KakaoAK ${kakao_API_KEY}` },
    }
  )
    .then((response) => response.json())
    .then((data) => {
      address =
        data.documents[0].address.region_1depth_name +
        " " +
        data.documents[0].address.region_2depth_name;
      console.log(address);
    });

Main page

• 각 페이지가 어떤 서비스를 제공하는지 소개하는 일종의 튜토리얼

Login page

• 로그인과 회원가입을 할 수 있는 페이지
• 템플릿을 가져와 해당 페이지에 맞게 수정 작업 진행
• 회원가입을 완료하면, 바로 로그인을 할 수 있도록 로그인 페이지로 이동
• 로그인 버튼을 클릭한 경우에는 메인 페이지로 이동
• 소셜 로그인 기능도 제공

소셜 로그인

• google, github, naver, kakao 계정으로 로그인을 할 수 있는 기능 제공
• 각 sns에서 제공하는 cdn을 가져와 해당 클래스로 버튼을 생성하면, 로그인 버튼 쉽게 구현 가능
• 버튼을 생성하기만 해도 로그인 기능까지 모두 구현되어 있어 별도의 개발 과정 필요 없음
• 그러나 이러한 경우에는 로그인 버튼의 디자인이 규격화 (커스텀 버튼 사용 불가)
• 4개 sns의 로그인 버튼 디자인을 동일하게 하기 위해 a 태그를 활용하여 OAuth 인증 과정 별도로 연동시킴
• access token을 가져오는 과정은 대부분 서버단에서 진행
• 해당 프로젝트는 별도의 서버를 이용하고 있지 않으므로 sns 계정을 연결하는 부분까지만 개발 진행

◼ google

<button class="btn-social-login" style="background: #d93025">
	<a href="https://accounts.google.com/o/oauth2/auth?
             client_id=클라이언트 ID.apps.googleusercontent.com&
             redirect_uri=되돌아갈 url 주소&response_type=code&
             scope=https://www.googleapis.com/auth/drive.metadata.readonly">
      <i class="xi-2x xi-google"></i>
  </a>
</button>

◼ github

<button class="btn-social-login" style="background: #24292e">
	<a href="https://github.com/login/oauth/authorize?
             client_id=클라이언트 ID&redirect_uri=되돌아갈 url 주소">
      <i class="xi-2x xi-github"></i>
  </a>
</button>

◼ naver

<button class="btn-social-login" style="background: #1fc700">
	<a href="https://nid.naver.com/oauth2.0/authorize?
             client_id=클라이언트 ID&response_type=code&
             redirect_uri=되돌아갈 url 주소&auth_type=reprompt">
      <i class="xi-2x xi-naver"></i>
  </a>
</button>

// 버튼을 클릭할 때마다 새롭게 인증을 받고 싶다면, auth_type=reauthenticate 사용

◼ kakao

<button class="btn-social-login" style="background: #ffeb00">
	<a href="https://kauth.kakao.com/oauth/authorize?response_type=code&
             client_id=클라이언트 ID&redirect_uri=되돌아갈 url 주소">
      <i class="xi-2x xi-kakaotalk text-dark"></i>
  </a>
</button>

Health page

• 사용자의 체중과 BMI, 운동 일지, 먹은 음식에 대한 누적 칼로리를 확인할 수 있는 페이지

Entertainment page

• 화면 기준 왼쪽에서는 사용자의 SNS를 한 번에 확인할 수 있음
• 화면 기준 오른쪽에서는 다양한 유튜브 컨텐츠를 보여줌

sns

• sns 내용을 웹페이지에서 확인할 수 있도록 blockquote 형태로 가져옴
• blockquote을 사용하면, 인스타그램과 트위터 div의 크기 조절이 되지 않음
• 이를 해결하기 위해 인스타그램과 트위터는 iframe을 활용함
• iframe 태그를 통해 사용자에게 보여지는 div의 크기는 조절하였으나 웹에서 데이터를 불러오는 과정에서 내부에 또 다른 iframe 태그가 자동적으로 덧씌워짐
• 이 때, 자동으로 불러오는 iframe 태그에 div 크기값이 설정되어 있음
• 자동 div 크기에서 직접 설정한 div 크기를 뺀 만큼은 여백이 공간을 차지하게 됨
  → 원하는대로 div가 배치되지 않는 문제 발생
• grid를 활용하여 div들을 배치함
• sns는 2*2 형식으로 보여주기 위해 중첩 grid 사용
• sns를 가져올 때, 스크롤을 숨기기 위해 -webkit-scrollbar에 display:none; 을 사용하였으나 적용되지 않음
• 자동적으로 덧씌워지는 태그에서 스크롤을 무조건 보여주도록 설정한 것으로 추측됨
• 컨텐츠의 width를 grid 내부의 div 크기보다 크게 만들어 grid 뒤로 숨겨지게 만듦

youtube

• iframe 태그 활용하여 유튜브로 이동하지 않아도 현재 웹 페이지 내에서 영상을 재생할 수 있도록 함

To-do list page

• 화면 기준 왼쪽에서는 해야 할 일 목록을 관리할 수 있음
• 화면 기준 오른쪽에서는 달력을 통해 원하는 날짜를 클릭함
• 목록을 추가하면, 해당 웹 페이지의 local storage에 저장되는 방식으로 구현함

✅ 피드백

• 디자인, 기능 등은 good
• 하지만 주제가 아쉬움 (헬스나 To-do list 등 개인 관리 프로젝트는 흔한 주제)
• 모바일 이용자 수가 많으므로 모바일 → pc 순서로 개발하는 것이 바람직
• 마우스 hover는 pc에만 존재 → hover했을 때 나타나도록 만든 정보는 사실상 모바일에서는 없는 정보