#TIL wecode Bootcamp Day 22(프로젝트 전 개념 정리🤗 )

Jung Hyun Kim·2020년 6월 20일
ReactTILWeCodemixin
0

wecode

목록 보기
26/42

본격 프로젝트 시작 전 개념 및 중요 포인트 정리🙋



프로젝트 전 이해 하고 있어야 할 checklist✅

1. (백/프론트 공통)스크럼 방식에 대해 이해하고, 스크럼 방식대로 프로젝트 진행 가능👩🏻‍🤝‍👩🏻👫

  • Scrum은 대표적인 Agile 협업/개발 프로세스이다.

  • 개발 주기에 맞추어 필요한/기능 구현을 목표로 한다.

  • sprint : 계획, 개발, 리뷰 작업 등 최소 단위의 cycle을 가지고, 스프린트 계획 회의를 통해 계획을 잡고, 스프린트 백로그에 각자의 목표를 모두 작성한다.

  • 칸반보드(To-dos/Doing/Done)를 작성해 시작적으로 업무를 보고 흐름을 볼 수 있게 하는데, Trello 로 보면 될 것같다.

  • 일 일 스크럼 회의 : 매일 몇 분간 (개발업무의 본질을 방해 하지 않는 기준으로) 정해 모든 참여자가 공유 차원에서 진행해야 할 미팅 진행)

    도움 받은 스크럼 가이드 한글 판
    도움 받은 스크럼 가이드 영문 판

2. scss를 왜 쓰는지 알고, mixin 기능 활용 가능⭕

  • mixin이란 css function의 개념으로 생각할 수 있다. mixins syntax를 사용해 , 자주 사용하는 css code를 저장해서 재 사용 할 수도 있고, 또 변수를 전달해주어서 유연하게 사용이 가능하다!
    잘 설명된 블로그
    잘 설명된 블로그2

  • mixin 만들기

    1. 예를 들어 flex 값을 주고 싶은 부분이 많다고 가정할 때(가정이 아니라 레이아웃 짤때 보통 플렉스 덕지덕지를 확인할수 있음 ㅜㅜ) 적용 시켜줄 flex mixin을 만들어 보자

    2. 먼저 @mixin라고 작성 한 뒤, 그 뒤에 mixin name을 붙여주는데 지금의 경우 flex를 적용하고 싶은 곳에 넣어줄 mixin을 만드는 것이므로 flex라고 지어준다.

    3. 이후에 { } 안에 넣고자 하는 css code를 넣어준다.

      @mixin flex {
display : -webkit-flex;
display : flex;
}

  • mixin 사용하기
    : 만든 mixin을 사용하기 위해선 @include + mixin name 의 형태로 사용하고자 하는 class,tag, id 값에 넣어주면 된다.
    : 만약 "row" class 에 기존에 만든 mixin flex를 적용하고 싶다면 아래와 같이 입력하면 된다. 

    .row  {
@include flex;
}

  • mixin에서 변수 설정하기
    : theme color 나 font를 상단에 저장해서 사용할 수 있다.

    $color : #bada55;
$grey : #ddd;

h1 {
color : $color 
}

  • mixin을 통해 변수 전달하기
    : 다양한 브라우저 벤더에 적용할 수 있게끔 붙이는 코드는 변수로 저장함으로서 코드 양을 많이 줄일 수 있다.
    : 예를 들어 box class에 border -radius를 3px 값만 주고 싶다고 한다면 아래와 같이 간편하게 적용할 수 있다. 

    @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box{
  @include border-radius(3px);
}

  • 이 외에도 nesting을 통해 css 부모자식 요소를 구분해서 더 직관적인 css 코드 관리도 가능하다. 

    li {
  a {
  img {
   }
 }
}



3. CRA 초기세팅 가능✌🏼

4. map을 이용해 jsx 리턴하여 목록 구현 가능📝

Mapping components

  • Map은 기본적으로 array의 element를 돌면서 return 문 이후의 조건을 적용해서 새로운 array로 출력하는 함수이기때문에 Component의 재사용에 적용하기에 적합하다!
  • contacts.js 파일에 각각의 정보를 객체로 가지고 있는 contacts object를 넣어주고, 사용하고자 하는 파일(아래의 경우App.js)로 import 해온 뒤 map함수를 돌려 매개변수로 임의의 값(이 경우 contact이 적합하겠다. 하나하나의 contact에 접근하는 것이므로) 을 주어 return 문 이후에 화면에 보여주고자 하는 내용을 입력한다. 
class App extends React.Component {

  render () {
  
  return (
    <div>
      <h1 className="heading">My Contacts</h1>
      {contacts.map( (contact) =>  {
        return <Card name={contact.name} 
        img = {contact.imgURL}
        tel = {contact.phone}
        phone = {contact.phone}
        email = {contact.email}
        /> })}
     </div> )

}}

Filtering components

  • 기존에 monster 카드에서 검색 기능 구현할 떼 사용한 filter method를 다시 정리해보자!
  • 이전엔 includes를 사용했지만 indexof를 이용해서 만들수도 있다. 
render() {
let filteredContacts = this.props.contacts.toLowerCaser().filter(
(contact) => {
	return contact.name.toLowerCase().indexOf(this.state.search)!=== -1;
    }
}



5. Routes.js에 라우트 추가 가능 ☝🏼

6. 로그인 사용자의 token을 왜 localStorage에 저장하는지 설명 가능 🆔

  • 일회성 로그인으로 필요한 정보를 잠시동안 저장하고, 브라우저를 닫으면 로그아웃하게 구현하자면 sessionStorage가 적합할 것이고, 사용자가 지우지 않는 이상 영구적으로 브라우저에 남아있고, 지속적으로 필요한 정보를 저장하게 한다면 localStorage에 저장하는 것이 맞다.

  • 로그인이 성공하면 jwt로 만든 access token을 받게 되는데, 프론트엔드는 localStorage.setItem method를 통해서 저장한다.
    -access token을 다시 보내줄때에는 보통 Authorization 에 넣어서 보내주게 된다.

    fetch("api 주소", {
    headers: {
    'Authorization' : localStorage.getItem("token")
    }
})
.then() //중략
.then() //중략

    참고한 블로그 예시


7. query string이나, path로 동적 라우팅을 구현 가능🉑

  • 아직 프로젝트를 진행해 보지 않아서 정확하게 내용을 이해할 수 없어서 잘 설명 된 준식님 블로그 를 참고한 후, 실제 프로젝트 진행하면서 모르는 부분은 와서 확인해야 겠다.

  • When should you use Path Variable, and how about Query Parameter?
    : As a best practice, almost of developers are recommending following way. If you want to identify a resource, you should use Path Variable. But if you want to sort or filter items, then you should use query parameter. So, for example you can define like this:

/users # Fetch a list of users
/users?occupation=programer # Fetch a list of programer user
/users/123 # Fetch a user who has id 123
  • 즉, 경로만 보여주면 되는 형식의 웹페이지는 path로, 상품이나 특정 유저에 국한된 페이지를 보여주는(filtering) 웹페이지는 query string으로 구현하면 된다는 것 같다.

출처 블로그


8. Pages, Components의 차이점을 알고 어디에 어떤 컴포넌트를 만들어야 하는지 이해 📁📂

  • Pages 폴더에는 전체 웹페이지를 구성하는데 필요한 page 별 폴더와 각 폴더안에는 js 와 css 파일이 구성되게 한다.

  • Components 폴더에는 페이지를 구현하기 위해 사용된 Components들을 위치시킨다.

  • 예를들어, Main 페이지를 구성한 컴포넌트 들을 컴포넌트 파일에 위치시킨다. <Feeds /> <Header />


9. event handler를 정의해서 특정 이벤트에 부여 가능🎪

10. fetch나 axios를 사용하여 백앤드에 api를 호출하고, 응답받은 데이터를 활용하여 화면에 보여주기 가능 💨

  • fetch 사용해서 백엔드 api 호출까지 정리 하였었다. 회원가입/로그인 실습 블로깅
  • 응답받은 데이터를 활용해 화면에 보여주기 기능은 몬스터 과제 를 통해 화면에 리스트 보여주는 형식으로 구현했다.
  • Axios는 아직 적용한 적은 없지만, Axios도 fetch 같은 Promise base지만 fetch에서 지원하지 않는 기능을 지원해준다고 한다. (형태를 보니 거의 비슷하게 생겨서 아직은 잘 모르겠다 ㅜㅜ ) 예를 들어 요청 취소같은 기능이 필요하다면 Axios 를 사용하는게 적합하다고 한다.
    fetch vs Axios



11. 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지 이해 💞

  • 자식컴포넌트에서 부모컴포넌트에 데이터를 넘길 때 props를 사용한다.
  • 자식 컴포넌트에서 {this.props.name} 으로 지정된 부분이 있고, 부모 컴포넌트가 Jojo라면 에서<Jojo name = {this.state.name} />처럼 값을 state에서 줄 수 도 있고, 하드코딩 할수도 있고 변수로 줄 수도 있고 방법은 다양하게 전달이 가능하다.


12. 포스트맨을 사용하여 api를 호출하고, 응답 을 확인 가능 🔅

  • postman에서 new request 를 사용해서 get 탭에서 호출하고자 하는 url을 입력하고 아래 key value 키 값에 parameter와 value 를 입력하고 send를 누르면 structured 된 응답값을 확인할 수 있다.
  • 예를 들어 open weather api에서 weather을 확인한다면 아래와 같이 확인해 볼 수 있다.






React 개념 정리 다시하기!

JSX 란?

  • 형태나 기능이 HTML과 매우 유사해 보이나, JavaScript의 special dialect라고 생각할 수 있다.
  • 예를 들어, inline styling을 한다면 html과 jsx의 차이는 아래와 같다.
  • html
<div style = "background-color : red"></div>
  • jsx
<div style = {{backgroundColor : "red"}}></div>

  • 중 괄호를 두 개 넣는데, 바깥 중 괄호는 JS code를 넣겠다는 약속, 안 의 중괄호는 js code는 js object를 넣는다는 의미이고, js로 inline 하는 것이기 때문에 camelCase로 입력하고 값도 ""안에 넣어준다.

  • 브라우저는 JSX code를 이해하지 못하기 때문에, CRA에 기본으로 설치된 BABEL을 통해 JSX를 보통 JavaScript 코드로 변환해서 보여주는 것이다. (CRA에 Babel이 설치되어 있는데, 어떠한 버젼의 JS 코드도 모든 브라우저에서 읽힐 수 있도록 해준다.)



Component 특징

Component Nesting

  • <App /> 컴포넌트 안에 <Comments /> <Image /> 등등 컴포넌트안에 컴포넌트가 있는 구조

Component Reusability

  • 똑같은 format으로 이루어진 contents, 피드 등이 컴포넌트의 복합체로 있음


Arrow Function 알맞게 쓰기

  • anonymous fuction에서 유용하게 사용가능 하다.
  • 매개변수가 하나이면 () 도 삭제할 수 있다. 두 개 이상일 경우만 ()로 감싸 주어야한다.
  • 하나의 요소만 return 한다면 return 또한 생락 할 수 있다.
const newNumbers = numbers.map (x=> x*x)

Conditional Rendering

  • state값에 따라 보여주고 싶은 부분 control 하기
render(){
  if(this.state.errorMessage && !this.state.lat) {
    return <div> Error : {this.state.errorMessage}
                          </div>
  if(!this.state.errorMessage && this.state.lat) {
    return <div>Latitute : {this.state.lat} </div> 
  }
    return <div>Loading!!</div>;
  }
}


당장 내일부터 프로젝트 시작이다 다 잘되길... 화이팅!!!개발자 개그를 이해하는 것 만으로도 재미있다 ㅎㅎㅎㅎㅎㅎ 이백오케

profile
Jung Hyun Kim
코린이 프론트엔드 개발자💻💛🤙🏼
이전 포스트

웹서비스 역사와 발전의 이해🌐Web System Architecture History

다음 포스트

#TIL wecode Bootcamp Day 23(1차 프로젝트 Day 1)👆🏼

0개의 댓글