클론 사이트: Brunch 진행기간: 4월 18일 - 4월 30일 front-end : 아점프론트깃허브 back-end: 아점백깃허브 시연영상: 아점시영영상

• Front

  • Header
  • Nav
  • Footer
  • 메인
  • List (포스트글 목록)
  • Detail (포스트)
  • 로그인/회원가입 (카카오 소셜 로그인)
  • 글쓰기 에디터
  • 북브런치 에디터
  • 작가의 서랍
  • 작가 신청
  • 마이프로필/ 작가프로필

• Backend

  • 유저
  • 리스트
  • 북
  • 포스트
  • 키워드
  • write

브런치를 선택하게 된 이유?

• 깔끔한 UI
• 1차보다는 도전하자

브런치를 선택하게 된 이유는 간단했다. 깔끔한 UI였다. 팀원들 각자 하고 싶은 사이트를 2개씩 골라와 결정하기로 했다. 내 마음은 원래 중고 판매사이트 Kream이였지만, 세련된 브런치 UI를 보고 마음을 바꿨다.

내가 맡은 부분

• 로그인 (카카오 소셜로그인)
• 마이프로필/작가프로필

공유하고 싶은 코드 (카카오 소셜로그인)

내가 이 코드를 공유하고 싶은 이유는 그냥 처음해봐서여다. 엄청 잘 짠 코드도 아니다. 하지만 나름의 도전이었기에 공유하고 싶다.

login.js

<div className={styles.kakaologinBox}>
    <Button href={KAKAO_AUTH_URL} kakao>
      <img
        src={process.env.PUBLIC_URL + '/image/kakaotalk.png'}
        alt=""
      />
      카카오로 계정 시작하기
    </Button>
</div>

Auth.js

const code = new URL(window.location.href).searchParams.get('code');
  const bodyData = {
    grant_type: 'authorization_code',
    client_id: REST_API_KEY,
    redirect_uri: REDIRECT_URI,
    code: code,
    client_secret: CLIENT_SECRET,
  };

  const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&');

  useEffect(() => {
    fetch('https://kauth.kakao.com/oauth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      body: queryStringBody,
    })
      .then(res => res.json())
      .then(data => {
        Kakao.init(KAKAOINIT);
        sendData(data);
      });
  }, [Kakao, queryStringBody]);

1. 인가코드 받기

카카오톡 소셜 로그인을 하기로 했다면, 인가코드를 가장 먼저 받아야한다. 사이트 내에서 카카오톡 로그인 후, 내 애플리케이션에서 Rest-api-key와 redirect_uri 키를 받아 볼 수 있다. 그 다음 카카오톡에게 인가코드를 달라고 요청을 해야한다. Auth.js의 제일 상단 const code가 바로 인가코드이다.

2. 카카오로부터 액세스 토큰 받기

   카카오 개발자 문서에서 인가코드는 시작일뿐, 액세스 토큰을 받고 넘겨줘야 로그인을 할 수 있다는 글이 적혀있었다. 프론트, 카카오, 백엔드 사이에서 무엇이 오고가야하는지 이해가 제대로 되지 않은 상태에서 시작하다보니, 나는 무엇을 받고 넘겨줘야하는지 헷갈렸고, 긴 삽질의 시간을 가졌다.

내가 이해한 바는 바로 아래와 같다.

“카카오야! 클라이언트가 우리사이트에서 카카오로 로그인 했거든! 니네 카카오에 해당 클라이언트 정보 있니? 인증해줘! 내가 너한테, Client_id, redirect_uri, code, client_secret를 post 형식으로 request 날릴게!

클라이언트 인증되면 너는 res로 access token 주렴!안되면 error로 날려!”

access-token을 받는 과정도 순탄치 않았다. 나는 계속해서, parameter를 json형태로 보내고 있었고, 카카오문서에서는 분명 type=string으로 보내라고 했는데, 그 부분을 제대로 인지하지 못했다... 왜 자꾸 invalid_client KOE010 에러만 보내주는거지? ...아...json (이 부분을 캐치하고 함께 고쳐준 팀원분들께 ㅜㅜ넘나 감사해요) 다시 string 형태로 보내주자 카카오로부터 access token을 받을 수 있었다. 감격의 눈물!!!

3. 카카오로부터 받은 access token을 backend 보내주기

const sendData = async data => {
    await fetch('http://localhost:8000/user/login', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
      .then(res => res.json())
      .then(res => {
        if (!res.token) return;
        localStorage.setItem('token', res.token);
        navigate('/');
        window.scrollTo(0, 0);
      });
  };

프론트에서 access token을 백에게 보내주면서 req를 날린다. (백엔드, access-token 줄테니까 아점 토큰만들어서 줘요!) 이후는 백엔드의 영역이다. 백엔드는 다시 한번 카카오에게 요청을 날린다.

“카카오!  프론트한테 access-token 받았다. 이제 우리가 원하는 해당 클라이언트 정보 보내줘!!!” 

백엔드는 카카오에서 받은 정보를 API로 만든다. 프론트가 요청한 Token을 res로 보내주면 끝!

아쉬웠던 점

• 숲을 보는 능력: 내가 맡은 부분은 프론트엔드이다. 그렇다고 하더라도 백엔드가 어떻게 돌아가는 지는 인지하고 있었어야 했는데, 그부분을 놓치고 간거 같았다. 예를 들어서 , 백엔드에 req를 날리고, 정확히 어떤 res를 받아야하는지 알려줬어야 했는데, 백엔드 분에게 그부분을 잘 이해시키지 못했다는 점이 조금 아쉬웠다.
• 체력적인 문제 : 사실 프로젝트 시작부터 몸이 좋지 않았다. 이전까지는 나름 운동을 꾸준히 하고 있었는데, 1,2차 프로젝트를 시작하면서 운동을 거의 하지 못했다. 2주동안의 짧은 프로젝트 때문에 그렇긴 했지만, 앞으로 회사 다니면 장기전으로 갈텐데 운동을 해야겠다는 생각이 들었고, 건강관리 필수. 눈관리 필수
• styled-components과 modules.scss를 함께 쓴 나. 다음에는 하나만 써보는 걸로 해보겠습니다.

회고

• 1차 프로젝트 때도 말한 바 있지만 나는 이번에도 좋은 팀원들을 만났다. 본받고 싶은 점을 간략하게 적어봐야겠다
  • 미친 성장속도 - 2차도 함께한 1차 프로젝트 팀원. 우리코드에만 한정하지 않고, 다른 프로젝트도 보면서 이것저것 시도해 보는 모습. 또 좋은 코드가 있으면 본인 코드에 활용하는 모습에 보기 좋았다. 또 엄청난 성장속도에 또 한번 놀랬다. 내 코드에 갖혀있지 말고, 좋은 코드 많이 보고 공부해야겠다.
  • 코드 이해하는 능력 - 단기간 프로젝트가 같은 경우, 시간의 압박에......남의 코드가 잘 보이지 않는다. 한 팀원은 찬찬히 남의 코드를 보더니 빠르게 이해하고, 고쳐주는 센스
  • 즐기는 자는 이기지 못한다 - 한 팀원이 자기 맡은 부분을 완벽히 하고 신나서 코딩 설명을 해주는데 그 때 느꼈다.....정말 미쳐서 즐기면서 하는 사람을 이길 수 없구나 말이다. 그 팀원처럼 코딩에 대한 즐거움을 놓치지 않고 가야겠다는 생각이 들었다.
  • 문제점을 인지하고 해결하려는 자세 - 스탠드업 미팅 시간을 짧게 했어야 했다. 1차 프로젝트 같은 경우, 나는 어제,오늘 할일을 적고, 그 다음에 “어떤 부분이 풀리지 않는다” 라고 하면, 팀원들이 다 같이 도와줬다. 어쩌보다니 2차프로젝트도 그렇게 했는데, 데일리 스탠드업 미팅하는 시간이 길어져서, 효율적이지 못하게 됐다. 팀원 한분이 조심스럽게 이 부분에 대해서 이야기 했다. 문제에 대해서 회피하지 않고, 똑바로 문제점을 이야기하기. 그리고 지적하기 보단 어떻게 보완할 수 있는지 이야기해주는 모습이 좋았다.
  • 생각정리 시간이 필요하다. 모르는 부분이 있으면, 필기하면서 이해하기. 필기 내용을 토대로 내 생각 정리하기 (로그인때 절실히 느낌). 사실 너무 많은 양의 블로그나, 문서를 읽다보면 생각이 제대로 정리 되지 않을때가 있다. 사실 읽는 것만으로 정보가 습득되지 않는다. 완벽한 이해를 위해 내 생각을 정리할 시간이 필요하다.

처음 해본 소셜 로그인은 사실 쉽지 않았다. 정했던 스케쥴보다 지체되었고, 고생도 많이 했다.그렇지만 해내서 너무나 뿌듯하다! 프로젝트하면서 내 스스로에게 아쉬웠던 점을 보완하고, 팀원들에게 본받았던 점을 잊지 않고 내 것으로 만들어야겠다. 기업협업에서 꼭 실천하자!

프로젝트 클로 사이트 소개: 꽃 배달 정기구독 사이트 프로젝트 목표: 파운데이션 기간에 내운 내용들을 적용하여 사이트 구축하기 진행기간: 3월 28일 - 4월 8일 frontend: https://github.com/wecode-bootcamp-korea/justcode-4-1st-kukukkakka-front backend : https://github.com/wecode-bootcamp-korea/justcode-4-1st-kukukkakka-back API DOCUMENTATION : https://documenter.getpostman.com/view/15514335/Uyr4Jegx

우리팀은 꽃 정기구독 사이트를 클론코딩하기로 했다. 이유는 파운데이션때 배웠던 내용을 최대한 활용하고 복습할 수 있다고 판단했기 때문이다. 원래 5명이었지만, 한 팀원의 개인 사정으로 프로젝트를 그만 두게 되었고 4명이 함께 프로젝트를 하기로 했다. 다른 팀에 비해 인원이 적고, 2주라는 짧은 프로젝트를 기간을 고려해, 많은 기능을 만들기보다는, 할 수 있는 양을 먼저 정했다. 대신, 만약 시간이 된다면, 욕심을 내서 하고 싶은 기능 부분을 더 만들기로 했다.

구현 기능과 역할

• Front
  • Header - 꾸꾸까까 메인로고와 메뉴
  • Footer
  • List - 꽃 리스트/ 검색기능 및 추천순 정렬하기
  • Detail - 꽃 상세페이지 (계산식 기능)
  • 장바구니
  • 로그인/회원가입
• Backend
  • 상품리스트
  • 로그인/회원가입
  • 장바구니

2. 기술 스택

프론트엔드 : React

백엔드 : Node.js, Express, MySQL, JWT & Bcrypt

3. 공유하고 싶은 코드

문제: 프론트에서는 count도 잘되고, 합계도 제대로 되고 있는데, 왜 백엔드에 제대로 반영되지 않을까?

• productId과 key값이 backend API에서 보내주는 것과 다르게 사용되고 있었다 (백엔드보고 문제해결)
• count가 왜 하나씩 늦게 db에 적용될까? 그러니 합계금액도 맞지 않았다.

나는 팀원이 fetch에서 post 같은 경우, 함수 안에 적어줘어야 돌아간다는 말을 얼핏 들었다. 사실 팀원이 처한 상황과 내 상황이 달랐다. 나느 그 부분을 고려하지 않는 상태로 “function 안에 fetch를 해야겠군” 이라는 판단을 내렸고 그게 몇시간동의 고난이 펼쳐질지 몰랐다. count가 +1 된후, 백엔드에 보내줘야하는데, 자꾸 count 되기 전에 올라가, async,await도 걸어보고, 함수 위치도 바꿔보고 정말 말그대로 ....이짓저짓 다해봤다. 결국 멘토님과 리액트신 동기 덕분에 해결 할 수 있었다. 바로 useEffect를 사용하는 거였다.

사실 useEffect를 사용하려고 handleChangeCount안에 useEffect를 넣어보았다. 그러자, 너는 리액트 훅이 아닌데 왜 사용하려고 하니 라는 에러가 떴고, 렌더링이 되지 않는 상황이 발생했다. useEffect를 사용해서 하니 안됐다고 하니, useEffect 안에 fetch를 해야한다고 친절히 알려줬다. 휴...8시간만에 찾은 해답이었다.

나의 결론은 useEffect 개념 확실히 하기! 모르는게 있으면 제대로 찾아보고 사용하기!

CartList.js  (잘못 작성한 코드 )

const handleChangeCount = async() => {

      await setCount(prev => prev+1);
    fetch('http://localhost:8000/carts', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        token: token,
      },
      body: JSON.stringify({
        productId: productId,
        quantity: count,
        totalPrice: totalPrice,
      }),
    })
      .then(response => response.json())
      .then(result => result) 

CartList.js 

useEffect(() => {
    fetch('http://localhost:8000/carts', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        token: token,
      },
      body: JSON.stringify({
        productId: productId,
        quantity: count,
        totalPrice: totalPrice,
      }),
    })
      .then(response => response.json())
      .then(result => result);
  }, [count]);

4.console.log를 생활화

• 데이터를 붙여주면서 느낀점은 콘솔로그가 얼마나 중요한지 깨닫게 됐다. 우리 팀은 3일만에 list API를 만들고, 데이터를 붙여주기로 했다. fetch함수도 제대로 적었는데 계속 fetch할 수 없다는 에러만 뜨고 있었다. 백엔드도 제대로 다 잘 적은거 같은데 무엇이 문제였을까 라는 생각이 들었다. 팀원들과 각자 시간을 가지고 5시까지 문제를 해결하자고 했다.
• 리스트에서 mockData를 잘 불러왔다. list API도 postman에서 잘 돌아가고 있었다. 이건 fetch를 잘못 썼던지, 라우터에 문제가 있을 거 같다고 생각했다. 그래서 그냥 생각없이 index.js에서 콘솔로그에 cors를 적었다. [Function: middlewareWrapper]하면서 잘 작동하고 있었다. 그리고 app.use(cors)를 콘솔로그에 찍었다. 근데 undefined이 뜨는거다. 그래서 cors 사용법을 구글링했다.MDN에서 app.use(cors()) 를 사용하라는 글을 읽고 고쳐주니, fetch가 잘 작동되서 get으로 받아올수 있었다.
• 그날 깨달은 건 console를 잘 찍어보자

5. 1CM 성장

• 참고한 꾸까페이지 같은 경우, 검색기능과 추천순(가격 높음-낮음)정렬순은 없다. 대부분의 유저라면 가격에 대해 민감하게 반응하지 않을까라는 생각이 들었다. 먼저 저렴한 가격대에서 괜찮은 꽃을 찾아보지 않을까 라는 생각이 들었다. 본인이 원하는 꽃들을 검색해서 찾아보지 않을까 라는 생각이 들었다. 나는 그부분을 보완하고자 찾기 기능과 정렬하는 기능을 만들었다. 디자인적 요소는 마켓컬리를 참고했다. 추천순 같은 경우, 추천순>가격높은>가격 낮은으로 펼쳐 놓았다. 하지만 나중의 UI를 생각해서 추천순 버튼을 누르면 팝업창이 나와 원하는 대로 정렬할 수 있도록 만들었다.

6. 아쉬웠던점/발전하고 싶은 부분

• 아쉬웠던 점은 이번 프로젝트는 파운데이션에서 배웠던 내용을 복습하다는 점에 의의해서 기능 개발을 많이 하지 못했다. 물론 멘토님들은 다른 사람들과 비교하지 말라고 하셨지만, 사람인지라 다른 사람과 비교를 안할 수 없었다. 너무 배운것을 복습하는 거에만 몰두 했던게 아닐까 라는 생각 들었다. 실력향상보다는 내가 할 수 있는 거에만 안주했던 게 아닐까라는 아쉬움이 있었다. 그래서 2차 프로젝트에서는 기능도 조금 더 많이 만들어보고 싶다는 생각이 들었다.
• 또 한가지, 문제가 발생하면, 내가 어떤 문제가 발생한지 조금 더 정확히 알아야겠다는 생각이 들었고, 그 내용을 잘 정리해서 구글링을 하거나, 다른 팀원들에게 물어봐야겠다는 생각이 들었다. 나조차 문제가 정리가 되지 않는데, 정리 안된 내용을 듣는 사람은 얼마나 괴로울까! 듣는 사람도 내 문제를 캐치 할 수 없고, 이런 나도 내가 .... ㅜㅜ힘들다. 다음번에는 문제가 발생하면 생각을 먼저 정리하고, 설명할 수 있도록 노력해야겠다.
• 만드는게 급급하느라, 클린코딩은 생각할 엄두가 나지 않았다.가끔 문제가 발생하면 도대체 어디서 부터 고쳐야할지 대략난감할때가 있었다. 휴... 만드는것도 중요하지만 훗날 리팩토링이랑, 다른 사람들이 읽기 편한 코딩을 적자!

7. 회고

프로젝트 협업하면서 배운점이 많다. 먼저 기록하는 습관, 서로 공유하기 그리고 커뮤니케이션과 같은 점이다. 매일 데일리 스탠드업 미팅을 통해서 어떻게 프로젝트가 각자 진행되는지 공유했다. 노션 페이지에 꼭 본인이 할일과 어제 한일에 대해서 적었다. 사실 프로젝트가 정신없이 진행되다 보면, 내가 어제 무엇을 하고 있었는지 , 내가 앞으로 무엇을 해야하는지 종종 까먹는 경우가 많다. 그럴때마다 기록해둔 팀 노션 공유 페이지를 보면서 방향성을 잃지 않았다. 또한 백엔드 모델링을 세세히 적어서, 코딩할 때 새삼 편하기도 했다.

프로젝트 진행중 커뮤니케이션의 약간의 미스가 있었다. 백엔드와 프론트 네이밍이 달라 데이터를 불러오지 못하는 문제가 발생했다. 각자 branch에서 작업하다보니 발생한 일이었다. 프론트에서 분명 fetch는 잘 됐는데, 왜 특정데이터가 계속 불러지지 않았다. 알고보니 팀원이 작업한 백엔드key값과 내가 만든 front 키값이 달라서 였다. 하지만 팀원과 코드를 찬찬히 보다가 문제점을 알게 됐다. 다시 한번 느꼈다. 커뮤니케이션이 엄청 중요하구나!

나는 운좋게 좋은 팀원들 만났다. 나는 늘 생각하지만 인복이 타고난 사람이다. 어딜 가든 좋은 사람을 만난다. 종종 빌런도 있지만 대체적으로 좋은 사람들을 만났다. 이번 역시 우리 팀원들을 보면서 배운점도 많고 고마웠다.

한 팀원은 문제가 발생하면, 끝까지 늘어져서 문제를 해결했다. 그런 점에 놀랐다. 사실 나는 문제가 발생하면, 동공지진부터 와서 우왕좌앙할 때가 많았다. 하지만 이번 프로젝트는 조금 달랐다. 앞서 말한 문제해결력이 높은 팀원들을 본받고자 했다. “에라 모르겠다 안할래”보다는 무엇이 문제인지 보자, 어떻게 해결할지 생각해보자, 어떻게 구글링하지, 이렇게 풀었는데도 모르겠다.했을때 그때 멘토님과 실력자 동기들에게 물어 해결방법을 물었다.

한팀원은 정리요정이었다. 조근조근한 말투로 회의 내용을 잘 정리해줬다. 가끔 회의를 하다보면, 우리 지금 왜 이야기 한거죠? 회의 끝나고 무엇을 해야하나요? 라고 의문이 들 때면, 정리요정팀원이 촤라라락 오늘했던 미팅을 정리해 방향성을 놓지 않게 해줬다. 또 본인이 처한 문제를 남들이 알아듣기 쉽게 잘 설명했다. 그녀를 보면서 와...저건 배워야겠다 라는 생각이 들었다. 메모: 예쁜 말투로, 조근조근하게 조리있게 말하기!

한 팀원은 현직 기획자인데, 모든 프로젝트가 어떻게 굴러가는지 숲을 보시는 분이었다. 사실 나는 내가 맡은 업무만 신경쓰느라, 다른 사람들 코드를 제대로 읽지 못했다. 한마디로 나무만 신경쓰느라, 숲이 어떻게 형성되는지 몰랐던 거다. 그분을 보면서 느낀점은 내가 맡은 부분도 잘 해나는 것도 중요하지만, 결국 프로젝트는 협업이다. 남의 코드를 보면서 흐름을 읽히고 숲을 보는게 중요하다는 점을 깨닫게 됐다. 팀이 어떻게 돌아가고 있는지 계속 체크하고, 큰 그림을 계속 보고 있어야 프로젝트의 방향성이 잃지 않고, 또 프로젝트를 잘 이해할 수 있다는 점을 말이다.

그래서 나는 무엇을 팀에게 해주었는가? 생각이 들었다. 나는 웹퍼블리셔의 짧은 경력 덕분에 HTML,CSS에 알려 줄 수 있었다. 팝업창 만드는 법, cors의 덕분에 콘솔로그를 잘 찍자는 경험을 하게 해주었다. 또 일명 주접을 잘 떨어줬다. 여기서 주접은 팀원들에게 내가 할 수 있는 한 칭찬을 많이 해줬다. 사실 나는 칭찬을 잘 하지도 못하고, 잘 받지도 못하는 사람이다. 그런 내가 왜 칭찬을 하게 됐냐면 말이다. 올해 들어서 느낀건데, 이 험난한 취업기에 많은 사람들이 자존감이 떨어져 있다. 또, 코로나 시국이라 긍정적인 거보다는 부정적인 일들이 가득한다. 이런 상황에 같이 꿈을 향해 달려가는 이들에게 칭찬해주고 싶었다. 그냥 칭찬해주고, 좋은 말들을 많이 해주고 싶었다.

여튼 혼자 공부했다면, 몰랐을 내용을 프로젝트를 통해 많이 얻어갔다. 그래서 다음 2차 프로젝트도 너무 기대된다.

ORM(Object Relational Mapping)란?

• 데이터 하나를 하나의 객체로 생각하겠다는 패러다임에서 출발한 개념
• 데이터베이스는 그대로 유지되고, 데이터베이스의 테이블 하나를 클래스 하나라고 생각하고, 하나씩 대응시켜 데이터를 코드로 관리할 수 있는 시스템이다.

활용

• ORM 사용시, 데이터베이스 직접 쿼리를 날리지 않고, ORM이 javascript 혹 다른 언어로 작성된 코드를 MySQL 등의 쿼리문으로 번역하여 데이터베이스에 명령

 Migration 🎀

• 코드로 작성한 모델을 데이터베이스 적용하는 과정!

Prisma

• 원하는 위치에 directory를 생성하고, npm으로 패키지 설치

npm install prisma --save-dev
npm install @prisma/client --save-dev

• dotENV 패키지 설치

ENV란? 웹,앱 개발을 하다보면, 민감한 정보(db관련정보, API_Key)를 오픈소스에 노출시키면 안된다. 해킹의 우려가 있기 때문이다. 그래서 dotenv 패키지를 사용하여 민감한 정보를 넣어 관리해야한다.

npm install dotenv 

• prisma 시작 & 데이터베이스 연결

npx prisma  // 명령어 확인
npx prisma init // prisma 초기세팅

//prisma/schema.prisma 
datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

// .env 
DATABASE_URL = "mysql://USERNAME:PASSWORD@localhost:3306/DATABASE_NAME"

• Prisma 모델 생성

model Artist{
    id Int @id @default(auto_increment())
    name String @unique 
    created_at Datetime? @default(now())
}

• Migration

npx prisma migrate dev --name init

npx prisma migrate dev --폴더명

npx prisma migrate dev create_artist_table

• 데이터베이스(DB: Database)는 통합하여 관리되는 데이터의 집합체를 의미합니다.

왜 사용하는가?

• 데이터를 오래기간 저장 및 보존하기 위해서
• 체계적으로 보존하고 관리하기 위해서

관계형 데이터베이스

관계형 데이터베이스는 모든 데이터는 2차원 테이블로 표현할 수 있습니다.

• Column 열 ( id, 책제목, 작가, 출판사, 가격)
• Row 행 (위대한 개츠비, 향수, 오만과 편견 등등)

One to One

관계형 데이터베이스란?

• DB를 구성하고 있는 데이블들이 서로 상호관련성을 가지고 연결 되어 있다는 의미
• 각 테이블이 완전히 독립적이지 않고, 테이블 A,B가 서로 연관된 사이

관계형 데이터베이스 종류

• one to one
• one to many
• many to many

One to One

user

id_num

| --- | --- | --- |

id_num의 user_id는 user의 id를 참조하고 있다.

서로가 서로의 오로지 한 행(row)에만 연결

One to Many

user

Pets

Pets 테이블의 user_id 칼럼은 user 테이블의 id (pk)를 참조한다.

테이블 user와 테이블 pets는 서로 일대다 관계이다.

로우 하나에 다른 테이블 행에 여러개가 연결

many to many

Books

Author

Author_Books

Books

테이블 authors와 테이블 books는 서로 다대다 관계이다

• UI(User Interface)는 유저가 소프트웨어와 만나는 경계면
• 웹 서비스에서 UI를 만든다 라는 표현은 사용자가 직접 사용하고 정보를 알아들을 수 있는웹 페이지 화면을 만든다 는 의미로 사용.

API

• 어플리케이션과 어플리케이션이 서로 의사소통을 하고 데이터를 교환할 수 있는 매개체가 되어주는 대상
• 서로 다른 프로그램 간에 소통할 수 있게 도와주는 통신 규약
• 서버에게 요청해서 데이터 가져오는 방법(함수)

Http vs Express

const http = require('http')
const { sendPosts } = require('./sendPosts')

const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')

  if (url === '/') return res.send({ message: '/ endpoint' })
  if (url === '/signup' && method === 'POS') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
  if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
  if (url === '/products' && method === 'GET') return sendPosts(res)

  res.send(JSON.stringify({ message: 'this response answers to every request' }))
})

server.listen(8080, () => { console.log('server is listening on PORT 8000')})

Http 차이점 
- 서버 만드는 법 
- if 사용됨 
const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')
  if (url === '/signup' && method === 'POS') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
})

const http = require('http')
const express = require('express')
const { sendPosts } = require('./sendPosts')

const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  res.json({ message: '/ endpoint' })
})

app.post('/signup', handleSignUp) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', handleLogin) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣는다.
app.get('/products', sendPosts)

const server = http.createServer(app)

server.listen(8000, () => {
  console.log('server is listening on PORT 8000')
})

express을 사용했을 때 다른 점

- const express = require('express');
- const app = express();
- app.use(express.json());
- const server = http.createServer(app)

res.send() vs res.json() vs res.end()

• res.send()
  • res.send([body])의 body에는 Buffer, String, Object, Array가 올 수 있다. 그리고 response Header에는 Body의 Content-Type이 자동으로 정의된다
• res.json()
  • json이 아닌 것도 json 형식으로 바꾸어서 보내준다. 즉 content-type 헤더를 application/JSON으로 고정한다. 그런데 결국 res.json()도 마지막에 res.send()를 호출한다.
• res.end()
  • 보내줄 아무 데이터도 없는데 response를 끝내고 싶을 때 사용한다.ex) res.status(400).end();

Status Code

• Status Code는 사용자가 웹 서버에 요청을 보냈을 때, 응답으로 보내주는 숫자 코

2XX Success

• 200 OK - 대표적인 성공코드, 에러 없이 요청이 성공적으로 진행, 주로 Get 요청에 대한 응답으로 사용된다.
• 201 Created - 요청이 성공적으로 처리되어, 서버가 새로운 리소르를 생성했을 때 사용하는 코드. POST,PUT 등의 요청에 대한 응다브올 주로 사용
• 204 No Content - 서버에 대한 요청이 성공적으로 처리, 제공해줄 응답 데이터 없을 때 204 사용

3XX Redirection

• 301 Moved Permanently - 요청한 리소스가 응답 헤더의 Location에 주어진 URL로 완전히 옮겨졌음을 의미.
• 302 Found - 일시적으로 이동한다

4XX Client Error

• 400 Bad Request
• 401 Unaurhtoized / 403 Forbidden
• 404 Not Found

5XX Server Error

-500 Internal server Error

-클라이언트의 요청을 처리하는 과정에서 DB에서 오류가 발생하는 등 요청이 잘못된 것이 아니라 서버측에서 문제가 생겼을 때 사용한다.

참고한 블로그: https://velog.io/@geeneve/자주-사용하는-HTTP-상태-코드

Monster.js

1) useEffect()를 사용해서 Data 붙여주기

import React, { useState, useEffect } from "react";

const API = '[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)'
useEffect(() => {
        fetch(API, {
     method: "GET"
     })
        .then(response => response.json())
        .then(result => console.log("result :", result));

},[])

데이터가 잘 들어오는 지 확인 후, setState에 data를 넣어 주었다🔻

import React, { useState, useEffect } from "react";
const [ monsters, setMonsters ] = useState([]);

const API = '[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)'
useEffect(() => {
        fetch(API)
        .then(response => response.json())
        .then(result => setMonsters(result));

},[])

• 먼저 useEffect를 선언해주었다.
• const API를 선언하고, 주소를 할당해주었다
• useEffect (() ⇒ {}, []) : 인수로 콜백 함수와 빈 배열을 전달한 경우, 처음 컴포넌트가 렌더링이 된 이후 무조건 한번 호출이 되고 이후에는 호출되지 않는다. (읽어보면 좋은 블로그)

Monster.js를 하면서 알게 됐던 점

• method가 ‘GET’이면 설정을 생략할수 있다.

useEffect(() => {
        fetch(API)
        .then(response => response.json())
        .then(result => console.log("result :", result));

},[])

Monster.js에서 했던 실수

• Monster.js 에서는 데이터만 자식컴포넌트에 넘겨주면 되는데, 왜 map메서드를 돌렸다. 맵을 돌려야 자식컴포넌트에 값을 넘길 수 있다는 잘못된 생각을 했던 것 같다. CardList에서 card로 데이터를 넘기려고 했다. 당연히 오류가 떴다.
• 당연히 이미 맵을 돌린 상태니, cardList에서는 오브젝트{}로 들어온 상태이니 map이 안된다고 떴다.
• 에러 메시지에 “you may use Array” 라고 적혀있었다. 나는 값을 array로 받고 있는지 확인하니 object였다. 그래서 곰곰이 생각하다가, 아... 값만 넘겨주만 되니까, Monster.js에서는 map 돌릴 필요가 없다는 것을 깨달았다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

실수한 코드 🔻

return (
        <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      {monsters.map((monsters) => (
        <CardList monsters={monsters} />
      ))}
    </div>
  );

다시 바꾼 코드 🔻

<div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <CardList monsters={monsters} />
    </div>

CardList.js

해결방안

• Monster.js(부모 컴포넌트)에서 받아온 data가 잘 들어오는지 먼저 확인부터 했다.
• console.log(props) ——> 콘솔로그로 확인하니 잘 들어오고 있었다.
• map함수를 돌렸고, 원하는 정보를 적어둠. key, id, name, email

function CardList({monsters}) {
  return <div className="cardList">
        {
          monsters.map(monster => 
             <Card key={monster.id} id={monster.id} name={monster.name} email={monster.email}/>)
        }
    </div>;
}

CardList.js하면서 알게된 점

• 부모 → 자식 컴포터는 props를 표현방식(?)이 다양한다.

ex)

첫번째 방법: props를 넘겨준다. props.monsters.map(monster → monster)

두번째 방법: props를 넘겨준다. const { monsters } = props로 사용한다. monsters.map

세번째 방법: function Cardlist({monsters}){} 로 받아온다. 이 방법이 코드를 간략하게 쓸 수 있어 유용하게 쓰일 것 같다!

function CardList({monsters}) {
  return <div className="cardList">
        {
          monsters.map(monster => 
             <Card key={monster.id} id={monster.id} name={monster.name} email={monster.email}/>)
        }
    </div>;
}

Card.js

function Card({ id, name, email}) {
  return (
  <div className="cardContainer">
     <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="monster" />
      <h2>{name}</h2>
      <p>{email}</p>
  </div>
  )
}

Input에서 monster 이름을 찾기

const [userInput, setUserInput] = useState("");

// SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
  const handleChange = ( event) => {
       setUserInput(event.target.value);
  }

  const serachMonster = monsters.filter(monster => 
      monster.name.toLowerCase().includes(userInput.toLowerCase())
  )

return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={handleChange} />
      <CardList monsters={serachMonster} />
    </div>
  );

내가 했던 실수

• handleChange 함수 만들때 도대체 어떻게 해야할지 감도 안 잡혔다.

  • 먼저, input에 event,target.value 값을 받아야와겠다 라는 생각이 들었다.

  • setUserInput안에 받아온 값을 넣어주면 되겠다고 생각

    const handleChange = (event) => {
           setUserInput(event.target.value)
    }

• 그래...그렇다면 filter를 사용하라는 guideLine을 보고 정말 감이 잡히지 않아, 풀이 영상을 보았다.

  • 그렇구나. 그러고 저거를 어디에 선언해줘야 하는걸까? 고민을 했다.

const searchMonsters = monsters.filter(monster => 
     return monster.name.toLowerCase().includes(userInput.toLowerCase())
)

잘못한 실수

• serachMonster과 Monsters를 동시게 넘겨줬다.
• 그렇게 생각했던 이유는 일단 monsters안에 있는 data를 넘겨줘야, searchMonster가 작동할거라고 생각했다.
• 풀이를 다시 보니, monsters={searchMonsters}로 바꿔준다.
• 왜일까 고민을 해보니, 사실 searchMonster에 이미 monster에서 넘겨준 함수가 포함된거다. 내가 Input에다가 무언가를 치지 않으면, 없는 상태의 모든 monster 데이터를 보여주는거고, input에 이름을 치면 조건에 맞는 데이터만 보여준다
• 개발자가 되어가는 과정이 어렵군요 ㅜㅜ

내가 실수한 코드

return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={handleChange} />
      <CardList monsters={monsters} searchMonsters={searchMonsters}/>
    </div>
  )

수정 코드

return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={handleChange} />
      <CardList monsters={searchMonsters}/>
    </div>
  )

동기는 순차적, 직력적으로 테스크를 수행한다. 비동기는 병렬적으로 테스크를 수행한다.

동기란?

• 동기는 요청을 보낸 후 응답 (결과물)을 받아야지만 다음 동장이 이루어지는 방식을 말한다.
• 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다.
  • 장점: 설계가 간단하고 직관적
  • 단점: 결과를 볼대 까지 아무것도 못하고 대기해야한다

비동기란?

• 비동기는 동시에 일어나지 않는다 의미한다. 요청과 결과가 동시에 일어나지 않는 거라는 약속.
• 요청한 그 자리에서 결과가 주어지지 않음
• 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.
  • 장점: 결과가 주어지는 데 시간이 걸리더라도 그동안 다른 작업이 가능해 자원의 효율적인 사용이 가능
  • 단점 : 설계가 동기보다 복잡함

아래의 사진을 보면서 동기와 비동기를 이해해보자!

• 동기
  • 첫번째 손님이 아메리카노를 시켰다. 첫번 째 손님의 커피가 나올때 까지 2번째 손님은 기다려야한다.
  • 첫번째 손님이 요청한 아메리카노가 나온 뒤에 , 2번째 손님의 주문을 받을 수 있다.
  • 즉, 앞의 손님의 요청과 결과가 다 나올때까지 뒤의 손님은 계속 기다려야한다.
• 비동기
  • 카운터에서 일단 첫번째 손님의 커피주문을 받는다. 첫번째 손님은 진동벨을 가지고 커피를 기다린다.
  • (첫번째 손님의 커피는 나오지 않았지만) 카운터에서 두번째 손님의 주문을 받는다.
  • 진동벨이 울리면, 첫번째 손님이 카운터로 와 커피를 받아간다.
  • 비동기 같은 경우, 일단 손님들의 요청을 계속 받으면서, 요청한 결과를 처리하는 한다.

출처: https://simju9397.tistory.com/45

그렇다면 비동기는 왜 필요할까?

만약 우리가 데이터를 서버에서 받아오는 앱을 만든다고 가정해보자. 먼저, 서버로부터 데이터를 받아오는 코드가 실행되어야 한다. 만약 비동기로 처리하지 않고, 동기적으로 구성을 하게 된다면, 데이터를 받아오기까지 기다린 다음에 앱이 실행될 것이다. 서버에 가져오는 데이터 양이 많을 수록 앱의 실행속도는 기하급수적으로 느려진다. 데이터를 불러오기까지 앱이 대기하는 상태가 발생된다. 이런 불편을 없애기 위해서 데이터를 수신하는 코드와 페이지를 표시하는 것은 비동기적으로 처리를 해야한다. 가장 대표적인 예가 setTimeOut과 AJax다.

출저: https://velog.io/@lsj8367/Javascript-동기와-비동기방식의-차이점

동기 처리 

console.log(1);
console.log(2);
console.log(3);

//1
//2
//3 

비동기 처리 

console.log(1);
setTimeout(() => {
    console.log(2)
},2000)
console.log(3);

//1
//3
//2

Callback

콜백함수란?

• 이름 그대로 나중에 호출되는 함수를 말한다.

• 특정함수에 매개변수로 전달된 함수를 의미한다.

• 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록 하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

  콜백은 좀 더 쉽게 이해해보기 🔻

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있습니다. 자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다. 출저: 캡팁판교 비동기/동기

콜백 함수에는 동기,비동기가 있다.

• synchronous callback
• asynchronous callback

console.log(1);
setTimeout(() => {
    console.log(2)
},2000)
console.log(3);

// synchronous callback
function printImmediately(print){
    print()
}

printImmediately(() => console.log('hello'))

//Asynchrouns callback
function printWithDelay(print, timeout){
    setTimeout(print, timeout)
}

printWithDelay(() => console.log('async callback), 2000)

//1
//3
//'hello'
//'async callback' 

• 자바스크립트 execute 했을 때 컴퓨터가 인식한 모습 (hoisiting )

    //hoisting 된모습 
  
    // synchronous callback
    function printImmediately(print){
        print()
    }
  
    //Asynchrouns callback
    function printWithDelay(print, timeout){
        setTimeout(print, timeout)
    }
  
    console.log(1);  ----> 동기
    setTimeout(() => {
        console.log(2)
    },2000)          -----> 비동기 
    console.log(3);
  
    printImmediately(() => console.log('hello'))  ----> 동기 
    printWithDelay(() => console.log('async callback), 2000) ----> 비동기 
  

callBack 지옥

function Callback(callback){
    console.log('콜백 함수');
    callback();
}
Callback(() => {
    console.log('콜백을 받는곳!')
})

• 가독성이 떨어짐
• 비즈니스 로직을 한 눈에 보기 어려움
• 에러가 발생했을때, 문제를 찾기 어려움
• 유지보수가 어렵다

Promise

• Promise is a JavaScript Object for asynchronous operation.
• 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리를 제어하는, 혹은 기존 비동기 처리 코드들을 동일한 (표준) API 형태로 사용할 수 있게 해주는 ES6에 추가된 기능이다.
• when a new Promise is created, the executor runs automatically.

Promise 객체 사용법

const getThreePromise = () => new Promise((resolve, reject) => {
    resolve(3);
});

getThreePromise().then(console.log);

Producer vs Consumer

//producer 
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("hello world!!!!");
    //  reject(new Error('no network'))
  }, 2000);
});

//consumer : then, catch, finally  
promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
  });

state

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

  Pending

아래와 같이 new Promise() 메서드를 호출하면 대기 상태가 된다.

new Promise()

Fullfilled -이행

콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행 상태가 된다.

function getData(){
        return new Promise((resolve, reject) => {
        let data = 100;
        resolve(data);
    })
}

getData().then(data => console.log(data));

//100

rejected - 실패

function getData(){
   return new Promise((resolve,reject) => {
       reject(new Error('에러발생'))
   })
}

getData().then().catch(console.log)
//[object Error] {....}

출처 : 프로미스 흐름 처리

여러 개의 프로미스 연결하기 (Promise Chaining)

Promise Chaining

const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then((num) => num * 2) //2
  .then((num) => num * 3) //6
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000); //5 
    });
  })
  .then((num) => console.log(num)); //5

//5 

Error Handling

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("🐓"), 1000);
  });

const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => 🥚`), 1000);
    setTimeout(() => reject(new Error(`${hen} => 🥚`) ), 1000);
  });

const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`));
  });

getHen() //
  .then(getEgg)
  .catch(error => {
      return '🥖'
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);//🥖 => 🍳

callback → promise

callback 함수

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === "min" && password === "dream") ||
          (id === "coder" && password === "wecode")
        ) {
          resolve(id);
        } else {
          reject(new Error("not found"));
        }
      }, 2000);
    })
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === "min") {
          resolve({ name: "min", role: "admin" });
        } else {
          reject(new Error("no access"));
        }
      }, 1000);
    });
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");

userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then( user =>  alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log)

promise 함수 바꾼 것

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === "min" && password === "dream") ||
          (id === "coder" && password === "wecode")
        ) {
          resolve(id);
        } else {
          reject(new Error("not found"));
        }
      }, 2000);
    })
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === "min") {
          resolve({ name: "min", role: "admin" });
        } else {
          reject(new Error("no access"));
        }
      }, 1000);
    });
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");

userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then( user =>  alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log)

async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

• Syntactic Sugar란?

  문법적인 기능은 그대로 유지하되, 코드를 작성하는 사람 입장에서 혹은 그 코드를 다시 읽는 사람의 입장에서 편의성이 높은 프로그래밍 문법을 의미합니다.

await 사용법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); 
}

logItems();

예시

function delay(ms){
    return new Promise((resolve) => setTimeout(resolve => ms))
}

// promise를 사용할때 
function getApple(){
    return delay(300)
    .then(() => console.log('🍎'))
}

// async 를 사용하면 아래와 같이 바꿀수 있다. 

async function getApple(){
   await delay(3000)
     return '🍎'
}

getApple().then(console.log) // "🍎"

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
    await delay(3000);
    return '🍎'
}

async function getBanana(){
    await delay(3000);
    return '🍌'
}

function pickFruits(){
    return getApple()
    .then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`)
    })
}

pickFruits().then(console.log)

// '🍎+🍌'

그렇지만 promise 많이 쓰면 콜백지옥 같은 일이 발생한다. 

async function pickFruits(){
     const apple = await getApple();
     const banana = await getBanana();

        return `${apple} + ${banana}`
}

pickFruits().then(console.log)

// 바나나와 사과를 순차적으로 받아올 필요가 없다. 
// Promise가 생성되자마자, 실행된다는 점을 이용해보자  
async function pickFruits(){
    const applePromise = getApple();
    const bananaPromise = getBanana()
    const apple = await applePromise;
    const banana = await bananaPromise;

    return `${apple} + ${banana}`

}
pickFruits().then(console.log)

error handling (try catch)

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
    await delay(1000);
//     throw 'error가 발생함'; 
    return '🍎';
}

async function getBanana(){
    await delay(1000);
    return '🍌'
}

async function pickFruits(){
    try{
        const apple = await getApple();
        const banana = await getBanana();

       return `${apple} + ${banana}`

    }catch(err){
        console.log(err)
    }
}

pickFruits().then(console.log)

유용한 Promise API

Promise.all([ ])

function pickAllFruits() {
    return Promise.all([getApple(),getBanana()])
    .then(fruits => fruits.join(' + '))
}

pickAllFruits().then(console.log); //"🍎 + 🍌"

Promise.race([])

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
    await delay(2000);
    return '🍎'
}

async function getBanana(){
    await delay(1000);
    return '🍌'
}

function pickOnlyOne(){
    return Promise.race([getApple(),getBanana()])
}

pickOnlyOne().then(console.log) // 🍌 ---바나나만 뜸 

자바스크립트의 동작원리: 엔진: 런타임, 호출 스택

참고 블로그 :https://resilient-923.tistory.com/308

• 자바스크립트의 큰 특징 중 하나는 '단일 스레드' 기반의 언어이다. 동시에 하나의 작업만 처리 할 수 있다.
• but, 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다.

출처 : https://resilient-923.tistory.com/308

호출 스택 (call stack)

엔진의 주요 두 구성요소는

• Memory Heap : 메모리 할당이 일어나는 곳
• Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.

자바스크립트는 단일 스레드(싱글 스레드) 프로그래밍 언어인데, 이 말은 Call Stack이 하나 라는 의미이다.

MemoryHeap은 우리가 프로그래밍을 할 때 선언된 변수, 함수 등이 담겨지는, 메모리 할당이 일어나는 곳이다.

Call Stack은 코드가 실행될 때 쌓이는 곳이고, Stack형태로 쌓이게 된다.

Stack은 LIFO(Last In First Out) 선입후출 즉, 가장 마지막에 들어온 게 먼저 나가는 구조이다.

Web API

• ****Web API는 JS엔진이 아닌, 브라우저에서 제공하는 API이다. (대표적 setTimeout, AJax)
• Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 넣어준다.

Callback Queue / Task Queue

• 비동기로 실행된 콜백 함수가 보관되는 영역이다.
• Queue 자료구조는 FIFO(First In First Out) 구조로 섭입 선출, 먼저 들어간 게 먼저 나오는 구조이다.

Event Loop란?

• Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣는다
• 이러한 반복적인 행동을 틱(tick) 이라 부른다.

components

• component: 재활용 가능한 UI 구성단위

components 특징

• 재활용 가능
• 코드 유지보수에 좋음
• 페이지 구성을 쉽게 파악
• 컴포넌트는 또 다른 컴포넌트를 포함 할 수 있음

Components 종류

• class 형
• function형

1) Class Component

• 클래스형 컴포넌트 - render 필수!

import React from 'react'

class Component extends React.Component {
  render() {
    return (
            <div>
                <h1>This is Class Component!</h1>
            </div>
        )
  }
}

export default Component

2) Functional Component

• React 16.8 버전에서 Hook 기능이 추가되면서 state 사용 가능해짐

import React from 'react'

function Component(){
  return (
            <div>
                <h1>This is Functional Component!</h1>
            </div>
        )
};

export default Component

JSX (Javascript Syntax Extension)

• 리액트에서 사용하는 자바스크립트 확장 문법
• 바벨을 통해 일반 자바스크립트 형태로 변환

특징

• <></> : 모든 요소를 감싸는 최상위 요소!
• self closing Tag
• class vs className
• inline styling <div style={{color : ‘red’}}>안녕하세요!

1-1. Web Application의 발전

• 애플리케이션 규모가 커지고 다양한 UI,UX를 구현하기 위해서 이전의 방법(DOM,JQuery)으로는 어플리케이션 개발하고 코드를 유지보수 하는 것이 어려워짐
• 규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장

1-2 Frontend FrameWork 종류

• Angular
• Vue
• React

Library vs FrameWork : 참고 블로그

2. What is React?

2-1. React 정의

• React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다.
• 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다.

3. 작업 환경 설정

Node.js

• Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경

node -v 

npm

• Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다.

npm -v

CRA (create-react-app)

• 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
  • package manager - 예시) yarn, npm. 제 3 패키지 install, 업데이트를 쉽게 해줌
  • bundler - 예시) parcel, webpack. 복잡한 자바스크립트 모듈 호환.
  • complier - 예시) Babel. 옛날 브라우저에서도 모던 자바스크립트를 사용할 수 있도록 해줌

CRA - Settings

// 1. Desktop - 원하는 파일 
cd Desktop/react_practice

//2. 리액트 프로젝트 설치
npx create-react-app react_practice

//3. 프로젝트 진입
cd react_practice

//4.로컬 서버 띄우기
npm start

• npm start 입력 시 http://localhost:3000 주소를 확인할 수 있습니다.
• 같은 와이파이를 쓰는 사람이라면, on Your Network : (주소)를 주면, 배포 전이라도 현재 작업물을 알 수 있다.

1) node.modules

• CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재

3) .gitIgnore

• github에 올리고 싶지 않는 폴더와 파일을 작성할 수 있다
• push를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않음

4) public -index.html/ images폴더

5) src - index.js (작업하는 폴더와 파일들!)

1. install git

• git이 제대로 설치 되었는 지 확인하는 법

git --version

• 이름&이메일설정

git config --global user.name "이름"
git config --global user.email "이메일"

2.git init

• 터미널에서 Git으로 프로젝트를 관리 시작하려면, 원하는 폴더에 들어간다 ex) cd desktop/git_practice
• 다음 명령어를 입력해준다

git init .

• .git 폴더가 잘 설치되어있는지 확인해주기 위해 다음 명령어를 입력한다. 숨겨진 .git 폴더를 찾아볼 수 있다.

ls -al 

3. staging and committing code

git status : 어떤 파일이 변경되었는지, 어떤 파일이 추가 되었는지 전부 보여준다.

git status

git add: 원하는 파일들을 stagin area로 추가

git add

git add file1.js
git add file1.js file2.js file3.js
git add . (변경된 파일 모두 올려주기)

git commit -m “”: 커밋은 특정 시간의 코드 스냇샵의 형태로 해당 respository의 커밋 기록에 남게됩니다. git add 명령어를 사용하여 모든 파일을 staging area를 추가했으면 커밋을 해줘야한다.

git commit -m “메세지”

git log : 모든 커밋 내역을 보여준다.

git log

github

Git vs GitHub

• Git은 버전 관리 시스템으로, 시간이 지남에 따라 파일의 변경 사항을 추적하는 도구
• GitHub은 Git을 사용하는 프로젝트를 위한 호스팅 서비스

Using GitHub

Common Workflow: 내 로컬 Repository를 GitHub 에 push 하기

1. 로컬에서 add / commit 한다.
2. Github 으로 이동 후 새 repository를 생성한다.
3. 나의 로컬 repository 를 GitHub repository 와 연결한다. (remote 추가)
4. 새 remote 를 이용하여 코드를 Push 한다.

github repo 생성

• github 사이트에서 new respository 생성

• git remote add origin respository주소

• git push: git push origin main

** git add, git commit, git push 한세트!!!

이전에 같이 일하셨던 분이 내 코딩 짜는 모습을 보고 했던 말이 생각했다.

"한번에 너무 많은 경우의 수를 생각하니, 문제를 접근 못하시는 것 같아요.(ㅜㅜ코딩 한줄 쓰지 못해서...좌절중이엇음) 먼저, 간단하게 생각하기. 그리고 조건에 맞는 코딩을 단계별로 적어주면 좋을듯해요!"

Assignment index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요. rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해주세요. 가능하면 || 와 && 연산자 둘다 사용해주세요. player1과 player2 중 이긴 사람이 누군지 리턴해주세요. 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다. 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다. player1 과 player2 의 값은 다음 셋 중 하나 입니다. "가위" "바위" "보" 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.

Assignment - 다음 함수 안에 코드를 구현하세요
function rockPaperScissors(player1, player2) {
//  예시:
  // if ( (player1 === "가위" && player2 === "보" ) || (player1 === "가위" && player2 === "가위") ) {
  //     result = "player1";

}
module.exports = {rockPaperScissors};력하세요

문제를 읽고, 아래의 예시를 읽는데, 순간 예시가 이해가 안 가서 당황했다. 지금 생각해보면, 나는 true/false에 꽂혀있었고... 말도 안되게 문제를 이해하게 되는 상황이 되었다. player1 === 가위이면 true, player2 === '보'... 그러다가 만약 player2가 "보"가 아니면 false로 찍히는건가? 그럼 뭘 비교하는거지??

근데 오늘 평온한 마음 장착시키고 연산자 설명을 다시 읽었다. 그제서야 문제가 제대로 보이기 시작. 바로 해결됨 ... 와....

// Assignment - 다음 함수 안에 코드를 구현하세요
function rockPaperScissors(player1, player2) {
  let result;
  if(
    (player1 === "가위" && player2 === '보') || 
    (player1 === '가위' && player2 === '가위') || 
    (player1 === '바위' && player2 === "가위") || 
    (player1 === "바위" && player2 === "바위") ||
    (player1 === "보" && player2 === "바위") ||
    (player1 === "보" && player2 === "보")
    ){
    result = 'player1';
  } 

  if(
    (player1 === "보" && player2 === '가위') || 
    (player1 === "가위" && player2 === '바위') || 
    (player1 === "바위" && player2 === '보')
  ){
    result = 'player2'
  }

  return result;
}

rockPaperScissors('가위','바위')

// 아래의 코드는 절대로 수정하거나 삭제하지 마세요.
module.exports = {rockPaperScissors};

클린 코드인지는 모르겠지만 일단 테스트 돌렸을때 다 초록불 뜸! 내가 생각한 방법은 일단 result 변수를 선언하고 대신 값은 할당하지 않았다. 그 이유는 승패여부에 따라 player가 달라지기 때문! 먼저 if 조건식을 사용했다. Player1이 이길 수 있는 경우의 수를 다 적었다. 조건에 비길경우는 player1를 반환하라고 했기 때문에, 같은 경우도 함께 넣어줬다. 그리고 result = "player1"을 할당했다. 마찬가지로 player2도 이길 수 있는 조건식을 넣어주고, 변수result에 player2를 할당.

그래도 혼자 잘 풀어내서 행벅!

Q. 하나의 숫자를 인자로 받아 5보다 크면 true 아니면 false를 반환하는 함수를 구현해주세요.

내 답안

function isBiggerThanFive(num) {
if( num > 5){
      return true 
    }else{
      return false
    }
}

isBiggerThanFive();

개선후 )

나는 if문을 사용해서 함수를 작성했다. 물론 위의 방법은 틀린 것은 아니다. 하지만 true,false를 반환하는 경우라면 아래와 같이 한 줄로 작성할 수 있다. 와우!!

**return에 조건식을 적으면 boolean으로 반환한다. 이후 모든 문제를 ...한줄로 작성할 수 있었다는 매직!

function isBiggerThanFive(num) {
    return num >5; 
}

isBiggerThanFive(8)

05.getSecondElement

Q. 인자로 반드시 길이가 2 이상인 배열이 들어옵니다.배열의 두번째 요소를 반환하는 함수를 구현해주세요.

내 답안

function getSecondElement(numbers) {
   let result = numbers
    if(result.length > 2){
       return result[1];
    }
}

let number = [1,6,7,4];
console.log(getSecondElement(number))

개선후 )

전반적으로 이번 시험에서 내가 문제를 다소 어렵게 생각했다. “2이상인 배열이 들어온다” 라는 문구를 보고 아 조건식이구나! 라고 생각했다. 그래서 위와 같은 코드를 작성했다. 먼저, 배열의 길이를 보고 2이상인지 확인 작업을 하고 그 후에 배열의 2번째 요소를 작성한다 라고 적었다.... 그렇지만 정작 문제는 걍 배열의 두번째 요소를 보여달라는 말이었다ㅠㅠ

function getSecondElement(numbers) {
     return numbers[1];
}

let number = [1,6,7,4];
console.log(getSecondElement(number))

07 getSumOfArray

Q.아래 조건을 만족하는 함수를 구현해주세요.

배열은 길이가 1이상이며 모든 요소가 숫자로 되어있습니다.

배열 모든 요소의 합을 반환하는 함수를 구현해주세요.

내답안

• 조건이 아닌데 조건식이라고 착각했다. 그래서 배열 안에 들어가는 요소들이 먼저 숫자인지 확인하는 작업을 넣어줬다. check 변수명을 보면, 일단 배열안에 있는 요소가 숫자인지 확인!
• 그러고 난 뒤, sum 변수명에 배열안에 수를 더하는 식을 표현을 넣어줌
• 조건식을 시작
  • 먼저, 배열의 길이가 1 미만이거나, 숫자가 아닌 거를 체크해줌. 조건이 맞으면 바로 false를 반환해줌
  • 마지막으로 return sum을 반환

function getSumOfArray(numbers) {

  let arr = numbers;
  let check = arr.forEach(arr => arr === number);
   const sum = arr.reduce((a,b) => a +b);
   if(arr.length < 1 && !check ){
       return false
   }else{
      return sum 
   }
}
getSumOfArray()

개선후

• 문제를 잘못 파악한 1인. 배열 길이 1개 이상 및 숫자가 조건식이 아닌, default로 들어오는 상황임! 그래서 그것을 체크해줄 필요가 없었다고 한다.
• 멘토님께서 2가지 방법을 쓰셨는데, 1번답안은 숫자랑 배열길이 조건 빼면 나와 거의 비슷!
• 대신 다른점은 나는 reduce()라는 메서드를 사용하였고, 멘토님은 +=이라는 연산방법 사용! 내가 봤을때 이게 훨씬 직관적이고 편한거 같다
• 두번째 방법은 ... 한줄로 끝나는 매직. forEach!

function getSumOfArray(numbers) {

   let amount = 0;
   for( let i = 0; i < numbers.length ; i++){
     amount += numbers[i];
   }
   return amount; 

}

getSumOfArray()

function getSumOfArray(numbers) {

   numbers.forEach((num) => {return amount += num});

   return amount; 

}
getSumOfArray()

08. findAdultName

Q. 배열에서 성인을 찾아 그 이름을 반환하는 함수를 만들어주세요.

함수는 인자로 객체가 요소인 배열을 받습니다.

배열의 요소는 각 사람에 대한 객체이며 아래는 배열의 예시입니다.

배열 예시 : [

{ name: 'tom', age: 10, gender: 'male' },

{ name: 'sera', age: 30, gender: 'female' },

]

함수의 반환값 : 'sera'

배열에는 성인이 없거나 오직 한 명만 있습니다.

배열에 성인이 없다면 false를 반환해주세요.

19세까지는 미성년자, 20세부터는 성인으로 가정합니다.

내 답안

• 어제 적은 TIL(Javascript 시험 8)에 있다. 마지막 조건식인 성인이 없을 경우, return false를 해라! 하는 부분이 이해가 잘 되지 않았다. 오늘 자바스립트 풀이 보면서, return에 대한 개념을 잡을 수 있었다. 나랑 비슷한 생각을 하셨던 분이 질문을 하셔서 반가움 (ㅜㅜ나만 이런생각을 한게 아니군!)
• for문을 다 돌고, 성인이 없으면 그 밖에 return false를 해야한다.
  • 만약 성인이 있다면, for문 안에 if 조건식에서 return 되기 때문에 함수 끝! 이제 정확히 이해됨!!!! >_<

function findAdultName(people) {
  for(let i = 0; i < people.length; i++){
      if(people[i].age >= 20) return people[i].name
  }

  return false;

}

let obj = [
    { name: 'tony', age: 10, gender: 'male' }, 
    { name: 'sera', age: 30, gender: 'female' }, 
  ]
findAdultName(obj);

잘 풀리지 않았던 8번문제

```jsx

  08. findAdultName
  배열에서 성인을 찾아 그 이름을 반환하는 함수를 만들어주세요.

  함수는 인자로 객체가 요소인 배열을 받습니다. 
  배열의 요소는 각 사람에 대한 객체이며 아래는 배열의 예시입니다.
  배열 예시 : [
    { name: 'tom', age: 10, gender: 'male' }, 
    { name: 'sera', age: 30, gender: 'female' }, 
  ]
  함수의 반환값 : 'sera'
  배열에는 성인이 없거나 오직 한 명만 있습니다.
  배열에 성인이 없다면 false를 반환해주세요.
  19세까지는 미성년자, 20세부터는 성인으로 가정합니다.

  * @param {*[]} people - array of people

내가 풀었던 방법

let obj = [
    { name: 'tom', age: 10, gender: 'male' }, 
    { name: 'sera', age: 30, gender: 'female' }, 
  ]

function findAdultName(people){
    for(let i = 0; i < people.length ; i++ ){
                if( people.age > 20 )return people.name[i]
                else return false; 
}

findAdultName(obj);

계속 오류가 떴다.

사실 처음에는 else return false를 적어주지 않았다.
그때는 sera가 잘 나왔다. 그렇지만  
질문에 '만약 성인이 한명이라도 없으면'return false라는 말이 있어서 넣어줬다.
그러자...sera는 나오지 않고 바로 false가 나오는 사태가 나왔다.

결국 팀원들에게 물어봤고

return false의 위치가 잘못 되었다고 한다. 슬랙으로 열심히 설명해줬지만 이해가 되지 않았다.

고마운 팀원들이 설명해주셨다. (프로필사진과 이름은 지움! 개인정보는 중요하니까!)

마지막 답변을 보고 이해가 됐다. 루프를 돌려서 전체를 검사를 해야하지만 나같은 경우 for문안에 조건문 if/else때문에 에러가 난거다. 루프가 다 돌게 하고 그 안에서 성인인 경우 성인의 이름을 넣어주세요 라는 식만 필요한 거다. 루프를 다 돌고 나서도 성인으 없다면, 루프 밖에다가 return false를 해야 한다는 거다.

글이 잘 정리가 되지 않지만! 일단 루프를 다 돌고 그에 맞는 조건식을 찾아야한다는 점!!!!!!

문제 파악)

1. 뭔가 if를 넣으면 꼭 else를 넣어야한다는 생각이 있어서 오류를 범한거 같다!
2. 아직 for문, 루프가 돈다는 개념이 익숙하지 않다. 그래서 일단 돌리고 그다음은??? 어떻게 해야하지? 라는 고민이 많이 든다.
3. 가끔 다른 문제 풀때 return을 넣어줘야하나? 말아야하나? 고민할때 있다. 자바스크립트랑 논리적인 사고가 정확히 잡히지 않아서 스스로도 코드를 짜면서 “이렇게 코드 짜는게 맞나” 의심이 들어서 인거 같다 .

개선할 점!)

• 반복문 for 에 익숙해지자
• 인터넷에 찾아보는 건 좋은데, 먼저 스스로 생각해 볼 것
• return 개념
• 문제 보고 당황하지 말자! 제대로 읽자!!!!!! 문제에 답이 있따다닫다다

let age = "20";
let currentYear = 2022;

currentYear - age;
//expected answer : undefined or Error 발생이겠지?  
*그렇게 생각한 이유: 
1) age는 string 이고 currentYear는 number이다.
서로 다른 데이터 타입이기 때문에 연산이 되지 않을거라고 생각했다. 

콘솔창에 확인차 해보니 결과는...2002. 계산이 되서 나오네요. ㅇ_ㅇ;;?

콘솔로그에 확인차 다른 값들도 넣어보다가 이상한 결과를 발견했습니다.

• concation: string과 number를 더하면

  • console.log(”2” + 2) 를 할때는 값은 22입니다. type은 문자열입니다.
  • 사전스터디 소헌님 강의에서도 문자열과 숫자를 더한 값의 데이터는 문자열이 된다고 하셨거든요.

• substract: string과 number를 서로 빼면

  • console.log(”2022”- 2)하면 결과 값은 2022 입니다. 우리가 생각하는 연산이 되네요.
  • typeof를 사용하여 확인하니 데이터의 타입은 숫자입니다. ...문자열이 아니네요.

  

**질문

문자열과 숫자를 합치거나(+), 숫자와 문자열을 뺄때(-)로 왜 데이터 종류가 달라지나요????????

나와 비슷한 질문을 한 사람의 답변

• • 같은 경우, 디폴트가 string이라고 합니다
• • 일 경우, 스트링에 사용하지 않고, 숫자로 변환해서 사용한다고 하네요.

그렇다면 어떻게 방지해야할까?

• 물론 아래와 같이 문자열안에 숫자 “30”를 넣지않고 말그래로 문자를 넣으면 위와 같은 고민을 할 필요는 없다.
  • “abcd” + 123456 = abcd123456
  • “abcds” - 12346 = NaN
  • not a number가 뜨니 계산이 되지 않는다

하지만 예를 들어서 실수로 문자열을 받아오게 된다면?? 숫자 계산을 하고 싶어진다면???

내가 찾은 방법

String → Number로 바꿔주는 작업해주기 (참고사이트)

대표적으로 쓰이는 방법 (참고사이트 7가지 방법이 있지만 대표적인 것만 추려봄)

• parseInt()
• Number()
• Math.floor()

근데..실무에서 이런 일이 있을까...요? ..... 궁금해지네요.

멘토님한테 물어보니, 자바스크립트는 타입이 약한 타입이라서, 가끔 저런 현상이 일어난다고 한다. 그래서 가급적이면, 문자열에서 숫자를 뺴거나 숫자에서 문자열을 빼는 행위는 지양한다고 한다.

• 1세대, 2세대, 3세대 웹 서비스의 특징을 조사해 주세요.
• 3세대 웹에서 존재하는 포지션들을 조사하고 각 포지션의 역할을 요약해 주세요.
• google classroom에 제출해주세요.

세대별 특징

1. 1세대 웹 - 전통적인 web system architecture — 정적 웹
2. 2세대 - UI(User Interaction) 증가 — 동적 웹
3. 3세대 - SPA(Single Page Application) — FE/BE 개발자 구분
4. Modern Web - 규모가 커지면서 Web system 발전

3세대 존재하는 포지션

• Designer
• Front-End Developer / Web publisher
• Backend Developer
  • API을 담당하는 개발자
  • 데이터 수집, 분석, 관리 등을 데이터 관련 시스템을 개발하는 개발자
  • DevOps: 개발자가 system infrastructure 관리까지 당담
• System Operations
  • System infra를 담당하는 직군. Data center 등에 서버 설치 및 관리가 주 임무 중 하나
• Data Scientist
  • 머신러닝, AI 등의 데이터 분석 알고리즘 과 데이터 분석 모델링을 구현하는 직군
• Data Enginner
  • Data Scientist들이 코딩을 잘 하지 못하기 때문에, 데이터 사이언티스들을 도와 데이터 모델링 구현을 도와주는 개발자
• Tester
  • QA (Quantity Assurance)
  • Software Engineer in Test/Automation
• Fullstack Developer (FE+BE)
• PM
• Scrum
• SoftWare Architecture

Position이란? element를 배치하는 방법을 지정하는 속성입니다.

1. Static
2. Relative
3. Absolute
4. fixed

1. Static(기본값)

• element에 position를 주지 않아도, 기본값으로 static으로 되어있음
• z-index 적용되지 않는다
• top, bottom, left, right 적용 안됨

2. Relative

• static과 달리, top, bottom, left, right가 적용이 된다.

<div style="position: relative; top: 100px">안녕!</div>
<h1>헬로우</h1>

• 위의 사진을 보면, h1에는 Position를 주지 않았으니, top: 100px 영향을 받지 않았다.
• 다만, 다른 레이아웃에 있는 태그들과 겹쳐 보일 수 있으니, 사용시 주의바람!

3. Absolute

absolute는 element가 문서의 일반적인 흐름을 따르지 않습니다. 대신 가장 가까운 위치에 있는 조상 element(static 이 아닌)에 상대적 위치로 배치됩니다 .조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.

<style>

.outer{
position: absolute;
 right: 0;
 top: 0;
 width: 100px;
 height: 100px; 
background: aqua

}
section {
position: relative; 
width: 300px;
height: 500px; 
margin: 0 auto;
border: 1px solid red
}

.box{
position: absolute;
right: 0;
top: 0; 
width: 100px;
height: 100px;
 background: salmon
}

.box:last-child{
background-color: beige
}
</style>

<div class="outer">박스!</div>

<section>
     <div class="box">박스!</div>
    <div class="box">박스!</div>
 </section>

현재 class outer에 대한 부모는 body이다.그러니 right:0을 하니 상단 우측에 “안녕하세요”가 붙어 있는 결과가 보인다

• 반면, section에 position :relative 가 있다. Class의 box에 부모다. box들은 그 안에서 위치를 자리잡는 것을 볼 수 있다.

4. Fixed

fixed 역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.

  <style>
    *{
      margin: 0;
      padding:0;
    }

    section{
      height: 200vh;
      background-color: blue;
    }
    nav{
      width: 100%;
      height: 30px;
      background-color: red;
      color: #fff;
      position: fixed;
      top: 0; 
      left:0;
      right:0;
    }

  </style>

<body>
<section>
  <nav>메뉴 fixed</nav>
</section>
</body>

• 스크롤을 계속 했는데도, nav가 위에 붙어있는 것을 볼 수 있다.

display: inline, inline-block, block

1. inline

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

• span 태그가 대표적
• content,text 크기만큼 점유하고 동일 라인에 붙는 성질
• width/height 적용불가
• marin/padding-top/padding-bottom,float 적용 불가

2. block

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, an<address>

• 한줄을 점유

3. inline-block

• inline-block은 크기를 지정할수 있다.

• 가로 나열이고, 요소 사이에 여백이 있다.

  • 여백 해결방법은 margin-right: -4px

  • font-size: 0으로 해결

      <style>
          nav{
            font-size: 0;
          }
          nav a {
    
            width: 50px;
            height: 50px;
            border: 1px solid red;
            display:inline-block;
            font-size: 16px;
          }
          }
      </style>
    
      <nav>
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
      </nav>

  • flex 사용하자

float

• float 속성은 요소를 어떻게 띄울 것인지를 나타내는 것입니다. float 속성을 사용하면, 다른 요소들이 해당 요소 근처에 떠다니게 됩니다. float 속성을 사용해 이미지를 좌, 우로 정렬할 수도 있으며, 이를 활용해 웹페이지 레이아웃도 구성할 수 있습니다.
• float: left, right, none, inherit 속성이 있다.

div{
      width: 150px;
      height: 150px;
    }    

    .box-left{
      background-color: green;
       width: 150px;
      height: 150px;
      float: left;
    }

     .box-right{
      background-color: blue;
       float: right;
    }

<div class="box-left">박스1</div>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eligendi libero sequi veniam eius, eveniet recusandae saepe porro earum consequuntur. Ullam nesciunt, commodi fugiat sed voluptatem, consequuntur unde rerum atque.</span>
    <span>Laborum maiores, rerum. Officiis a doloribus quasi quam. Culpa fugiat itaque dolor impedit nostrum velit aliquam ducimus quidem dolorem odit numquam non architecto dicta quos quasi, suscipit ea, explicabo perferendis.</span>
    <span>Beatae sed optio explicabo ducimus, consequatur id delectus temporibus quas quis excepturi nesciunt veniam ipsa amet iste quam inventore at accusantium minima recusandae doloribus odio placeat, numquam facere? Molestias, modi!</span>
    <span>Quam dolor ex quibusdam, quis incidunt excepturi voluptatem fugiat unde sapiente facere veniam accusamus doloribus non dicta numquam dolores impedit error, molestias omnis! Non sint, perspiciatis nesciunt eveniet illo a.</span>
  </p>
  <div class="box-right">박스2</div>

• float을 주면, 높이가 사라지면서 원하는 layout이 안 생기는 경우가 있다.

clear로 해결

// ...위의 코드와 동일
//p에 clear를 주면 된다. 
p{
      clear:both;
    }

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과

태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

1.Semantic Web

1.1 semantic web 이란?

Semantic Web은 ‘의미론적 웹’이란 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, “의미”와 “관련성”을 가진 거대한 데이터베이스를 구축하고자 하는 발상이다.

• before semantic web

<div id="header"></div>

• after semantic web

<header></header>

2.Semantic tag

2.1 semantic tag란?

시멘틴 태그는 의미가 있는 태그란 뜻이다. HTML 태그를 통해 웹 문서를 작성할 때 좀 더 의미 있는 태그를 사용함으로써 정확하게 정보를 전달하고 웹 문서의 구조를 쉽게 파악할 수 있도록 합니다. 또한, 검색 엔진은 웹 사이트의 HTML 태그들을 분석하여 사용자가 원하는 정보를 노출시키기 때문에 시맨틱 마크업은 중요합니다. www3schools

3. img vs background-img

• img tag는 의미가 있는 semantic tag로써 컴퓨터가 이해하고, alt(alternative) 속성으로 에러 발생시, 이미지가 깨져도, 어떤 이미지인지 알 수 있도록 해준다. 반면 background-image는 의미있는 semantic tag가 아니며, 에러 발생시 어떠한 정보도 받아볼 수 없다.
• img tag를 사용할 경우, 검색엔진에 의해 웹이 잘 노출된다. 반면 웹 디자인 같은 이미지를 보여주기 위해서는 background-image를 사용하는게 좋다.

• variables
• hoisting
• TDZ

lecture

• youtube - 코딩앙마

var는 한번 선언된 변수를 다시 선언할 수 있다. 반면 let는 한번 선언된 변수는 다시 선언할 수 없다.

var name = "Mike";
console.log(name);
var name = 'Jane'

let name = "Mike";
console.log(name); // Mike
let name = 'Jane' // error

var는 선언하기 전에 사용할 수 있다. 선언만 Hoisting 되고, 할당은 hoisting 되지 않는다.

호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동!

console.log(name) //undefined
var name; 
name = 'Mike'

let 같은 경우 , error가 나온다. 그렇다면 let은 hositing이 되지 않는 걸까?

console.log(name);// ReferenceError: Cannot access 'name' before initialization
let name = 'Mike'

왜냐하면, let과 const는 TDZ (Temporal Dead Zone)의 영향을 받기 때문이다.

코드를 좀 더 예측가능하게 하고, 오류를 줄일 수 있다.

console.log(name); // 사용 불가 
const name = 'Mike' // 함수 선언 및 할당
console.log(name) //사용 가능 

let age = 30; 
function isAdult(){
  console.log(age); //erorr 발생 TDZ 이기 때문 
  let age = 20; 
}
isAdult();

변수 생성과정

var

1. 선언 및 초기화 단계 (함께 일어남)
   • let name; //값을 할당 안해도 초기값이 undefined 설정되어있다.
2. 할당 단계

let

1. 선언 단계
2. 초기화 단계 (선언과 초기화 단계가 따로 일어남. 실제 코드에 도달 했을 때 발생)
3. 할당 단계

const

1. 선언 + 초기화 + 할당

스코프

var

: 함수 스코프 (function scoped)

let,const

: 블록 스코프 (block-scoped)

함수, if문, for문, while 문, try/catch 문

function add(){
    //block-level scope
}
if(){
    //block-level scope
}
for(let i = 0 ; i < 10 ; i++){
    //block-level scope
}

const age = 30; 
if(age> 19){
  var txt = '성인입니다.'
}

console.log(txt); //'성인입니다'

//if문 안에 있는 var는 밖에서 부를 수 있다. let과 const는 안된다. 

function add(num1,num2){
  var result = num1 + num2;

}

add(2,3);

console.log(result) // error

//다만 함수안에서 var는 예외다. 함수 밖에서 부를 수 없다. 

배열이란? 관련 있는 데이터를 하나의 변수에 할당 여 관리하기 위해 사용되는 데이터 타입

Array가 필요한 이유

배열이 필요한

• 단일 데이터(Single data)가 아닌 다수의 데이터(Multiple data) 저장
• 연관있는 데이터를 함께 변수에 저장하므로 데이터를 찾는데 용이

Array 선언

let name = ['Jane','Mike','David','Alice'];

//[]안에 들어간 데이터는 element라고 부른다.

Array의 값을 추가,삭제하는 방법

• push()
• unshift()
• pop()
• shift()

push()

• push(): add items to the end of an array

let students = ['June','Willy','Anne'];
console.log(students); // ["June", "Willy", "Anne"]
students.push('George');
console.log(students); //["June", "Willy", "Anne", "George"]

unshift()

• unshift(): Add items to the beginning of an array

let students = ['June','Willy','Anne'];
console.log(students); //["June", "Willy", "Anne"]
students.unshift('George');
console.log(students);["George", "June", "Willy", "Anne"]

pop()

• pop(): Remove an item from the end of an array

let students = ['June','Willy','Anne'];
console.log(students); //['June','Willy','Anne']
students.pop();
console.log(students); ['June','Willy']

shift()

• shift() : Add items to the beginning of an array

let students = ['June','Willy','Anne'];
console.log(students); //["June", "Willy", "Anne"]
students.shift();
console.log(students); //["Willy", "Anne"]

반복문이 필요한 이유와 사용하는 방법

• 반복되는 작업을 수행하기 위해 필요

for

for(초기문; 조건문; 증감식){

//반복할 코드 작성하는 부분 

}

let result = 0;

for(let i = 0; i < 10 ; i++){
        result += i;

}

console.log(result);

초기화문

• 초기화문 작성 시 변수 선언자를 써주어야 합니다.
• 변수명은 보통 index를 의미하는 i로 선언합니다.
• index가 증가할 경우 숫자는 보통 0부터 시작합니다.

조건문

• index의 범위를 설정합니다.
• index가 증가할 경우 특정한 숫자 미만 혹은 이하로 설정합니다.
• index가 감소할 경우 0 이상으로 설정합니다.
• 조건문이 true일 경우 반복문을 계속 실행합니다.
• 조건문이 false일 경우 반복문이 종료됩니다.

증감식

• index가 1씩 증가할 경우 ++을 써줍니다.(index의 숫자가 하나씩 증가)
• index가 1씩 감소할 경우 --를 써줍니다.(index의 숫자가 하나씩 감소)
• i++은 i = i+1 을 줄여서 쓴 것입니다. i += 1 로 표현할 수도 있습니다.
• i++는 ++1로 표현할 수 있습니다.

배열과 반복문을 함께 자주 사용하는 이유

반복문은 동일한 명령을 정해진 횟수만큼 반복하여 수행하도록 제어하는 명령문으로 구문(syntax)에는 주로 변수 증감을 위한 명령을 많이 사용하는데, 배열의 index가 해당 역할을 수행하기에 적합하기 때문에 배열과 반복문은 자주 함께 쓰인다.

배열의 메서드 5가지와 사용 방법

Array - JavaScript | MDN

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다

• slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다.
• splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않습니다.
• 그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다.

const findFruits = () => {
  let foodBox = ['🍕', '🍤','🍇' ,'🥝','🍒','🍉','🍗', '🍟' ];

  let new_foodBox = foodBox.slice(2,6);
  console.log(new_foodBox);

  return new_foodBox

}

findFruits();

filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환합니다.

let numbers = [10, 4, 32, 17, 5, 2]

let result = numbers.filter((value) => value > 10);
console.log(result); // [32,17]