eastjun-dev / frontend Goto Github PK

License: MIT License

CSS 43.22% HTML 13.11% JavaScript 43.67%

frontend's Introduction

🏴 Mission Dashboard

mission	ready	PR	Merged
M001
M002
M003
M004
M005
M006

☕️ 코드리뷰 모임 - Black Coffee

'훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다'.
A.M. 린드버그(미국의 작가, 수필가) -

블랙커피처럼 서로를 자극해주고, 동기부여 해주며, 그 성장과정으로 인해 의미있는 가치를 만들어내고자 하는
코드리뷰 모임 ☕️ Black Coffee입니다.

⚙️ Before Started

로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법

로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 npm install 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.

npm install -g live-server

실행은 아래의 커맨드로 할 수 있습니다.

live-server 폴더명

🚀 Getting Started

mission001/eastjun과 같은 형태로 본인의 브랜치를 생성하고, mission001 디렉토리의 하위에 자신의 아이디로 네이밍하여 디렉토리를 생성하고 미션을 시작해주세요.
미션 수행 후 [mission001] mission title 형태로 PR을 보내주세요.
PR에는 이 미션의 issue number를 태그로 추가해주세요.
최소 3명의 리뷰어가 본인의 코드에 대해 리뷰해주고 approve 해줘야만 PR이 끝이나고, master에 merge될 수 있습니다.

👨‍💻 Code Review 👩‍💻

아래 링크들에 있는 리뷰 가이드를 보고, 좋은 코드 리뷰 문화를 만들어 나가려고 합니다.

👏 Contributing

만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.

🐞 Bug Report

버그를 발견한다면, Issues 에 등록 후 @eastjun에게 dm을 보내주세요.

📝 License

This project is MIT licensed.

frontend's People

Contributors

Stargazers

Watchers

Forkers

yonghoonjjo amorfati0310 pci2676 parkchu

frontend's Issues

misson01을 제출한다 :)

mission006를 제출한다.

mission004를 제출한다.

이슈를 추가한다.

[191219] mission002

🔥 TODOS 시스템에 비동기/온오프라인을 고려하여 업데이트하기

mission001에서 TodoList의 기본적인 CRUD를 복습하였는데요. 이 기능들에 비동기 통신과, 온오프라인을 고려한 기능을 추가하려고 합니다. 요구사항은 아래와 같습니다.

🏴 Missions

fetch를 이용해 데이터 CRUD 하기

fetch를 이용해 Todo 목록 data를 불러오고, 특정 Todo를 삭제하고, 완료처리를 하는 것을 적용합니다.

json data

{
  "_id": 할 일의 고유값. 숫자와 문자가 섞여있는 문자로 되어있음,
  "content": 할 일 text,
  "isCompleted": 할 일의 완료여부
}

1. 불러오기

API: http://todo-api.roto.codes/:username

api에는 username이 들어갑니다. 본인의 username이 들어가게 넣어주세요

fetch('http://todo-api.roto.codes/eastjun').then()...

2. 추가하기

API: http://todo-api.roto.codes/:username

api에는 username이 들어갑니다. 본인의 username이 들어가게 넣어주세요

fetch('http://todo-api.roto.codes/eastjun', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    content: 'mission review 하기'
  })
}).then(function(){
  ....
})

3. 삭제하기

API: http://todo-api.roto.codes/:username/:todo_id

서버에서 불러온 todo 데이터에 있는 _id를 이용해주세요.

fetch('http://todo-api.roto.codes/roto/5d11cf671e050d3f7c583166', {
  method: 'DELETE'
}).then(function(){
  ....
})

4. 토글

API: http://todo-api.roto.codes/:username/:todo_id

서버에서 불러온 todo 데이터에 있는 _id를 이용해주세요.

fetch('http://todo-api.roto.codes/roto/5d11cf671e050d3f7c583166/toggle', {
  method: 'PUT'
}).then(function(){
  ....
})

5. localStorage에 데이터 넣기

하드코딩 된 mock데이터를 사용하는 경우 모두 삭제해주세요.
localStorage를 활용해 todo data가 변경될 때마다 localStorage에 저장합니다.
프로그램에 초기에 접근할 때 localStorage에 저장해둔 데이터가 있다면 todo data를 가져옵니다.

localStorage

👨‍💻 Reviewer Match 👩‍💻

코드리뷰가 막막하다면 아래 가이드를 읽어보시면 도움이 될 거에요~!
코드리뷰 가이드

@eastjun

@s280493 @StellaKim1230 @ganeodolu

@YongHoonJJo

@eastjun @s280493 @ganeodolu

@StellaKim1230

@s280493 @ganeodolu @YongHoonJJo

@ganeodolu

@eastjun @StellaKim1230 @YongHoonJJo

@s280493

@YongHoonJJo @StellaKim1230 @eastjun

@amorfati0310

@eastjun @s280493 @ganeodolu

@HoseokNa

@eastjun @YongHoonJJo @StellaKim1230

mission002를 제출한다.

mission004를 코드리뷰 한다.

image repository

[200109] mission004

🔥 Movie List 사이트 만들기

https://developers.themoviedb.org/3/movies/get-movie-details
위 사이트의 "Movie" 카테고리에 있는 오픈 API를 활용하여 Movie List 사이트를 만듭니다.
자세한 API 사용 방법은 아래의 "API 사용 방법"을 참고해주세요.

기본 요구사항

1. 메인 화면을 구현한다.

메인 화면에는 Movie List 데이터가 보여진다.
영화의 제목, 영화 개봉 연도, 포스터 이미지 데이터를 보여줘야 한다.
메인 화면에서, 스크롤이 화면의 바닥에 닿을 경우 infinity scroll로 데이터를 불러온다.
좌측 상단의 로고를 누르면 다시 메인 화면으로 돌아온다.

2. 영화 검색 기능을 구현한다.

화면 우측 상단의 input에서 영화를 검색할 수 있다.
검색어 입력 후, enter 키를 누르거나 옆의 돋보기 아이콘을 클릭 시 검색된다.
검색 결과가 존재하지 않을 경우, <검색 결과가 존재하지 않습니다> 라는 텍스트를 뿌려준다.

3. 영화 상세 페이지를 구현한다.

상세 페이지에서는 해당 영화의 backdrop 이미지, poster, 영화 제목, 개봉 날짜, 영화 시간, 장르, overview 텍스트 데이터를 보여준다.

추가 요구사항

1. 메인 화면 스크롤 후, 상세페이지를 다녀왔을 때, 메인 화면에서의 스크롤 위치 기억하기

스크롤 위치를 기억함으로써 더 좋은 UX를 제공한다.

API 사용 방법

Movie List 불러오기

API 문서 : https://developers.themoviedb.org/3/movies/get-upcoming
API : https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=1
아래 Json Data에서, "page", "results"의 "poster_path", "release_date", "title" 데이터를 활용합니다.

Query String

{
  api_key(requirement) : 제 개인 API Key 발급받아 넣었습니다
  language(Optional) : 신경쓰지 않아도 됩니다
  reigion(Optional) : 신경쓰지 않아도 됩니다
  page(Optional) : 페이지 넘버입니다. infinity scroll 구현을 위해 필요합니다. 
}

Json Data

{
  {
    "page": 1,
    "results": [
      {
        "poster_path": 포스터 주소(string)
        "adult": 성인물 여부(boolean)
        "overview": 한줄 요약(string)
       "release_date": 영화 릴리즈 날짜(string)
        "genre_ids": 장르 id 숫자 배열(number[])
        "id": 아이디(number)
        "original_title": 영화 오리지널 타이틀(string)
        "original_language": 언어(string)
        **"title": 영화 타이틀(string)**
        "backdrop_path": 배경이미지 주소(string)
        "popularity": 인기도 (number)
        "vote_count": 투표수 (number)
        "video": 미리보기 비디오가 있는가 여부(boolean)
        "vote_average": 투표 평균(number)
      },
     ...
     ]
   }
 }

Movie Detail 데이터 불러오기

API 문서 : https://developers.themoviedb.org/3/movies/get-movie-details
API : https://api.themoviedb.org/3/movie/{movie_id}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US
{movie_id}를 path param으로 받습니다.
{movie_id}에 아무 숫자나 넣으면 일단 API 불러와집니다.
아래 Json Data에서, "backdrop_path", "genres", "overview", "poster_path", "release_date", "runtime", "title" 데이터를 활용합니다.

Query String

{
  api_key(requirement) : 제 개인 API Key 발급받아 넣었습니다
  language(Optional) : 신경쓰지 않아도 됩니다
  append_to_response(Optional) : 정확히 모르겠으나.. 신경쓰지 않아도 됩니다
}

Json Data

{
  {
  "adult": false,
  "backdrop_path": "/8HqSxB9VLJkbRXRdlocbLq9wxwY.jpg",
  "belongs_to_collection": {
    "id": 141290,
    "name": "The Lord of the Rings Animated Collection",
    "poster_path": "/pQuazFOlGRdn2Lb3oWFJYPeASOc.jpg",
    "backdrop_path": "/uUG532EWfyhtKDzsA0sLb1PsHhL.jpg"
  },
  "budget": 4000000,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": null,
  "id": 123,
  "imdb_id": "tt0077869",
  "original_language": "en",
  "original_title": "The Lord of the Rings",
  "overview": "The Fellowship of the Ring embark on a journey to destroy the One Ring and end Sauron's reign over Middle-earth.",
  "popularity": 13.134,
  "poster_path": "/1l3WpoF7TX9pOprX4XepCXjQXUV.jpg",
  "production_companies": [
    {
      "id": 60,
      "logo_path": "/oJXpAs4I3W46e4dkaOEzCa4yBko.png",
      "name": "United Artists",
      "origin_country": "US"
    },
    {
      "id": 286,
      "logo_path": null,
      "name": "Fantasy Films",
      "origin_country": ""
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "US",
      "name": "United States of America"
    }
  ],
  "release_date": "1978-11-15",
  "revenue": 30471420,
  "runtime": 132,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Fantasy...beyond your imagination",
  "title": "The Lord of the Rings",
  "video": false,
  "vote_average": 6.5,
  "vote_count": 391
}
 }

👨‍💻 Reviewer Match 👩‍💻

@eastjun

@YongHoonJJo @StellaKim1230 @ganeodolu

@YongHoonJJo

@StellaKim1230 @ganeodolu @s280493

@StellaKim1230

@ganeodolu @s280493 @eastjun

@ganeodolu

@s280493 @eastjun @YongHoonJJo

@s280493

@eastjun @YongHoonJJo @StellaKim1230

mission002를 코드리뷰 한다.

📋 리뷰 진행상황 dashboard 📋

리뷰이: @eastjun

리뷰어: @s280493
- code review
- approve
리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve

리뷰이: @YongHoonJJo

리뷰어: @eastjun
- code review
- approve
리뷰어: @s280493
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve

리뷰이: @StellaKim1230

리뷰어: @s280493
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve
리뷰어: @YongHoonJJo
- code review
- approve

리뷰이: @ganeodolu

리뷰어: @eastjun
- code review
- approve
리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @YongHoonJJo
- code review
- approve

리뷰이: @s280493

리뷰어: @YongHoonJJo
- code review
- approve
리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @eastjun
- code review
- approve

mission003을 코드리뷰 한다.

📋 리뷰 진행상황 dashboard 📋

리뷰이: @eastjun

리뷰어: @YongHoonJJo
- code review
- approve
리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve

리뷰이: @YongHoonJJo

리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @s280493
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve

리뷰이: @StellaKim1230

리뷰어: @s280493
- code review
- approve
리뷰어: @ganeodolu
- code review
- approve
리뷰어: @eastjun
- code review
- approve

리뷰이: @ganeodolu

리뷰어: @eastjun
- code review
- approve
리뷰어: @s280493
- code review
- approve
리뷰어: @YongHoonJJo
- code review
- approve

리뷰이: @s280493

리뷰어: @YongHoonJJo
- code review
- approve
리뷰어: @StellaKim1230
- code review
- approve
리뷰어: @eastjun
- code review
- approve

mission005를 제출한다.

[191214] mission001

🔥 TODOS 시스템의 CRUD를 구현하기

이 템플릿은 vanilla javascript를 학습을 위한 todos template입니다.
이 template은 링크의 저장소에서 클론하여 필요한 부분만 사용하였습니다.
이번 미션에서 우리는 기존에 학습 했던 내용들을 복습하며 todo list를 다시 만들어보는 작업을 진행할 예정입니다.
요구사항은 아래와 같습니다.

🏴 Missions

todo list에 todoItem을 키보드로 입력하여 추가
todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가)
todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

👨‍💻 Reviewer Match 👩‍💻

@eastjun

@YongHoonJJo @StellaKim1230 @ganeodolu

@YongHoonJJo

@eastjun @StellaKim1230 @s280493

@StellaKim1230

@eastjun @ganeodolu @s280493

@ganeodolu

@eastjun @s280493 @YongHoonJJo

@s280493

@YongHoonJJo @StellaKim1230 @ganeodolu

@amorfati0310

@eastjun @YongHoonJJo @StellaKim1230

@HoseokNa

@eastjun @ganeodolu @amorfati0310

[200116] mission005

🏪 가게 찾기

전국의 가게를 조회할 수 있는 웹페이지를 만듭니다.

기본 요구사항

1. 메인 화면을 구현합니다.

메인 화면에는 검색창, 검색된 갯수, 검색목록, 페이지로 구성됩니다.

2. 가게 검색 기능을 구현합니다.

화면 상단의 검색창에서 가게를 검색할 수 있습니다.
검색어 입력 후, enter 키를 누르거나 검색 버튼을 클릭 시 검색됩니다.
검색된 목록은 번호, 가게명, 주소로 구성됩니다.

3. 페이지를 구현합니다.

검색목록은 한페이지당 10개씩 구성됩니다.
페이지는 한번에 5개까지 볼 수 있으며, 이전과 다음버튼으로 이동가능합니다.

추가 요구사항

1. 검색 히스토리

검색 히스토리에 있는 검색어를 클릭하면 다시 검색됩니다.
최근 검색어 5개까지 보여줍니다.
검색 히스토리는 중복되지 않습니다.
검색 히스토리는 localStorage에 저장되며, 첫 실행시 저장된 최근 검색어를 불러옵니다.

2. 검색 결과가 느린 경우 처리방법

검색 결과가 느리게 나오도록 설정합니다.
결과가 나올때까지 로딩 효과 등으로 사용자에게 알리며, 오작동하지 않도록 합니다.

3. 카카오맵 API를 사용하여 Modal UI로 표시

검색결과 목록 중 하나를 선택하여 클릭하면 Modal UI에 카카오맵이 표시됩니다.
(#8 미션3에서 사용한 UI를 참조)
카카오맵에서 가게 주소로 검색한 결과가 표시되며 가게명이름으로 마커 📍가 표시됩니다.
ESC를 누르거나 Modal UI가 아닌 곳을 누르면 창이 닫힙니다.

가게찾기 API 사용방법

가게찾기 API 불러오기

API 설명 : https://floating-harbor-78336.herokuapp.com
API : https://floating-harbor-78336.herokuapp.com/fastfood
불러오기(기본값 : page=1, perPage=10, searchKeyword="")
fetch('https://floating-harbor-78336.herokuapp.com/fastfood').then()...
예시(판교를 검색하고, 페이지당 10개목록을 표시할 때 1페이지 목록보기)
fetch('https://floating-harbor-78336.herokuapp.com/fastfood?searchKeyword=판교&perPage=10&page=1').then()...
json 형식

{
    "list": [
        {
            "name": 가게명,
            "addr": 가게주소,
        }
    ],
    "total": 총 갯수
}

카카오맵 API 사용방법

일반설명

http://apis.map.kakao.com/web/guide/
실제 지도를 그리는 Javascript API를 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=05384f5ffa79058c52233387b2b1142b"></script>
 - 지도를 띄우는 코드 작성
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표(필수속성).
	level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

API 키 : 05384f5ffa79058c52233387b2b1142b

주소로 장소 표시하는 예시

http://apis.map.kakao.com/web/sample/addr2coord/
위 링크의 아래쪽 javascript + html 예시코드를 참고하여주세요.
코드주석의 괄호 3군데(APP KEY, 주소입력, 가게명 입력위치)를 참고하시면서 코드를 수정해주세요.

// (아래에 APP KEY를 넣어주세요)
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=05384f5ffa79058c52233387b2b1142b&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다 (아래에 가게 주소가 입력되게 해주세요)
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
        // (아래에 가게명이 입력되게 해 주세요)
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>' 
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});