👥 조별 과제

⚡ 개념 정리하기 !

1. OPEN API

   Public API는 말 그대로 public, 즉 개방형 API로, 모두에게 공개된다. Public API 중에서도 접속하는 대상에 대한 제약이 없는 경우를 OpenAPI라 한다.

2. 모듈화 (파일 모듈화)

   앞서 우리는 clock.js, todo.js 등 프로젝트에 필요한 JavaScript 파일들을 기능적으로 쪼개어 저장하였다. 각 .js 파일 내에서 목적에 따라 서로 다른 함수를 만들어 사용했듯이, .js 파일들도 기능적으로 나눈 것이다. 이럴 때의 이점으로는 1. 기존 코드의 수정 / 새로운 기능 추가 용이 2. 내용물의 직관적 이해 가능 등이 있다.

   +이때 여러 개의 .js파일들이 있다면 객체명은 원칙적으로 공유되지 않으나,

   export { msg, PI, addNumbers }; //main.js에서
   
   import { msg, PI, addNumbers } from './main.js'; //app.js에서
   

   와 같이 import export 을 통해 공유할 수 있다.

⚡ 토론해보아요 !

1. 자신만의 크롬앱을 만들면서 추가한 새로운 기능이 있다면 소개해주세요 !

   (공통: 스터디시간에 다같이 구현)

   1. 배경 이미지 바꾸기 (예시)

      body {
      	background-image: url('<https://path.to/image.jpg>');
      }
      

   2. 외부 폰트 불러오기 (예시)

      @font-face {
        font-family: "Fira Sans";
        src: url('fonts/fira/eot/FiraSans-Regular.eot');
        src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
             url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
             url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
             url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
      }
      

   이외에도 🙋‍♂️지혜: 클릭하면 gray-out되는 todo, 🙋‍♂️강록: 날씨에 따라 변하는 아이콘 🙋‍♂️태경: todo에서 ‘X’대신 체크표시로 지우기 등을 만들었다.

2. 관심 있는 OPEN API가 있다면 소개해주세요 !

   1. 🏄‍♂️강록: 우편번호 서비스 API

      Daum 우편번호 서비스

   2. 🏄‍♂️신비: 보건의료빅데이터개방시스템 (다양한 API)

      보건의료빅데이터개방시스템

   3. 🏄‍♂️지혜: 카카오지도 API

      Kakao 지도 API

+α

개인과제가 메인이다 보니 플러스알파를 넣지 말까하다가, 프로젝트를 GitHub에 올리면서 새롭게 알게 된 내용을 간단하게 언급하려고 합니다!

weather.js 에선 API_KEY = "658bxxxxxxxxxxx"; 와 같이 API키를 hard-coding해서 사용했지만, GitHub과 같은 공개 레포지토리에 production code를 올릴 때는 이를 포함하지 않도록 조심해야 합니다. 악성 bot 등이 해당 API키를 악용하여 많은 양의 request를 보내거나, 내부용 API에 대한 비정상 접근을 얻을 수 있기 때문입니다.

node.js를 이용하는 경우, dotenv 패키지를 통해 API키가 클라이언트에게 노출되지 않도록 할 수 있습니다.

5 JavaScript API Key Mistakes (and how to fix them)

3.4 Hiding API Keys with Environment Variables (dotenv) and Pushing Code to GitHub

█ 여섯번째 스터디 끗ㅡ