>wecode 18 Westagram 마무리

1. Code Kata

nums는 숫자로 이루어진 배열입니다.
자주 등장한 숫자를 순서대로 k 개수만큼 return해주세요.

function topK(nums, k) {
let sortNums = nums.sort();
let SumOfNums=sortNums.lastIndexOf(2)+1
-sortNums.indexOf(2);
let obj ={};
let result=[];

for(let i=0; i<nums.length; i++){
if(sortNums[i]!==sortNums[i+1]){
  obj[sortNums[i]]=sortNums.lastIndexOf(sortNums[i])+1- sortNums.indexOf(sortNums[i]);
  for (j=0; j<k; j++){
    result.push(Object.values(obj).sort().reverse()[j])
    };
    }
}
return result};

2. Westagram 마무리 by. 멘토 신영님

총정리

React를 사용하는 이유, CRA, 프레임워크와 라이브러리의 차이, route, sass, 컴포넌트, props, state, Mock data, map 등등

코드리뷰 공유

계속나오는 나의 피알...... ㅎ

• 메인 페이지 컴포넌트를 분리해서 유지보수에도 좋고 구조를 파악하기에도 좋다.
• 기억하자 React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일) import 순서
• 기억하자 Self-Closing Tag

Mock data 실습

본죽에서 이미지 데이터 가져와서 mock data 만들고, 데이터 뿌려보기

3. 모각코

• 코드리뷰 반영하여 리팩토링 진행
• React-Westagram 5팀 Read Me 수정

지영님이랑 피드 데이터 통신 해보기

프론트는 배우지 않은 부분인뎅.......??..

새롭게 알게된 것!!!

• method: POST 일 때, header에 userID Token을 가져올 수 있다.
• 로그인 할 때 userID Token을 localstorage에 저장하면, 메인페이지 에서도 userID를 불러와 게시물을 작성할 수 있다.!!!
• (참고) jwt-authorication

// Login 페이지에서 Login 버튼 클릭 시 실행되는 함수
 goToMain = (e) => {
    e.preventDefault();
    fetch("http://10.58.3.143:8000/user/signin",{
      method:"POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: this.state.userId,
        password: this.state.userPassword
      })
    })
    .then(res => res.json())
    .then(result => result.message === "SUCCESS" ? 
    this.props.history.push('/main-naeunsong')
          // userId 토큰을 localStorage에 저장하기
          && result.token && localStorage.setItem('wtw-token',result.token)
    : alert("아이디와 비밀번호를 확인해주세요"))
  }
 
 // main 페이지에서 데이터 통신
 componentDidMount(){
    fetch('http://10.58.3.143:8000/posting/upload',{
      method:"POST",
      // localStorage에 저장한 토큰으로 권한 확인 요청
      headers: {
        'Authorization': localStorage.getItem('wtw.token')
           },
      body: JSON.stringify({
        image : '',
        content :''
    })
  })
    .then (res => res.json())
    .then (res => this.setState ({
      feed: res
    }))
  }