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

Jung Hyun Kim·2020년 6월 20일

React TIL WeCode mixin

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를 정의해서 특정 이벤트에 부여 가능🎪

eventHandler와 setState를 통해서 이벤트를 설정하고 반영하는 기능을 파악한다.
인스타 리액트 클론 정리 블로그

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>

<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>;
  }
}

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

Jung Hyun Kim

코린이 프론트엔드 개발자💻💛🤙🏼

이전 포스트

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

다음 포스트

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

wecode

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

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

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

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

3. CRA 초기세팅 가능✌🏼

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

Mapping components

Filtering components

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

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

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

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

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

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

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

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

React 개념 정리 다시하기!

JSX 란?

Component 특징

Component Nesting

Component Reusability

Arrow Function 알맞게 쓰기

Conditional Rendering

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

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

0개의 댓글