예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.

종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트

스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothes의 모든 원소는 문자열로 이루어져 있습니다. 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다. 스파이는 하루에 최소 한 개의 의상은 입습니다. 입출력 예

clothes return [[yellow_hat, headgear], [blue_sunglasses, eyewear], [green_turban, headgear]] 5 [[crow_mask, face], [blue_sunglasses, face], [smoky_makeup, face]] 3

입출력 예 설명 예제 #1 headgear에 해당하는 의상이 yellow_hat, green_turban이고 eyewear에 해당하는 의상이 blue_sunglasses이므로 아래와 같이 5개의 조합이 가능합니다.

1. yellow_hat
2. blue_sunglasses
3. green_turban
4. yellow_hat + blue_sunglasses
5. green_turban + blue_sunglasses

예제 #2 face에 해당하는 의상이 crow_mask, blue_sunglasses, smoky_makeup이므로 아래와 같이 3개의 조합이 가능합니다.

1. crow_mask
2. blue_sunglasses
3. smoky_makeup

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

입출력 설명 예제 #1 leo는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2 vinko는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3 mislav는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

문제해결

1. 배열을 정리한다.
2. 비교해서 다르면 반환한다.

1. 변수 선언 방식

var는 변수 선언방식에서 가장 큰 단점을 가지고 있다.

동일한 변수를 사용했음에도 불구하고, 에러가 나지 않고 서로다른 값이 나오는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 코드를 테스트 해보는 것은 유용하나, 코드가 많아지면 어디에서 어떻게 사용 될지도 파악이 힘들고 값이 바뀔 우려도있다.

let

const

let과 const는 name이 이미 선언됬다는 에러메시지가 나온다.

그럼 let과 const 의 차이점은 무엇일까?

let과 const의 차이점은 불변성,변경할 수 없는 것이다.

let

  let name = 'kimhanna'
    console.log(name) // kimhanna
    let name = 'hannakim'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared
    name = 'nana'
    console.log(name) //nana

**let 은 변수에 재할당이 가능하다.**

>### const

const name = 'kimhanna' console.log(name) // kimhanna const name = 'hannakim' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'nana' console.log(name) //nana //Uncaught TypeError: Assignment to constant variable. const는 변수 재선언, 변수 재할당 모두 불가능하다.

## 정리

기본적으로는 const를 변수로 선언하여 사용하고, 재할당이 필요한 경우에는 let을 한정해 변수로 선언하는 것이 좋다.
const는 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.
재할당이 필요 없는 상수와 객체에는 const 를 사용한다.

>
var: 동일한 변수 사용 가능
let: 동일한 변수 사용 불가능, 변수 재할당 가능
const: 동일한 변수 사용 불가능, 변수 재할당 불가능

• 함수형 프로그래밍이란?
  • (꼬리 질문) 자바스크립트 클로저란?
  • (꼬리 질문) 자바스크립트 프로토타입이란?

1. 함수형 프로그래밍이란?

• 함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다.
• 문이 아닌 식이나 선언으로 수행되는 선언형 프로그래밍 패러다임을 따르고 있다. (출처:위키백과)

Input이 같으면 Output이 일정한 순수함수로 코딩을 했기 때문에 예상하지 못한 Output이 나왔을 때 Input값만 점검하면 된다. 그 Input값 역시 다른 순수함수의 Output이라면, 그 순수함수를 확인해보면 된다. 전체의 코드를 모두 점검할 필요가 없다는 뜻이다.

즉, 개발을 어떻게 하면 효율적으로 잘 할 수 있을지에 대한 의문에서 출발했을 때, "순수함수를 조합하여 프로그래밍해보니 좋더라!" 라는 결론때문에 "함수형 프로그래밍" 방법을 적용하라는 것이다.

(개발 기간과 비용을 단축하여 효율적인 개발을 할 수 있는 프로그래밍 방법)

함수형 프로그래밍의 특징

1) 순수함수(Pure function)

• 동일한 입력에는 항상 같은 값을 반환해야 한다.
• 함수의 출력(return)은 오로지 그 함수에 입력된 값(input)에만 의존한다.
• 함수의 실행은 프로그램의 실행에 영향을 미치지 않아야 한다. (Self-contained되어야 한다, 즉, side effect가 없다.)
  • Side effect가 없다는 의미는 오로지 출력(return) 만 수행한다는 의미이다.

2) Function composition

• 둘 이상의 함수를 조합하는 과정을 말한다.
• 함수형 프로그램은 여러 작은 순수 함수들로 이루어져있기 때문에 이 함수들을 연쇄적으로 또는 병렬로 호출해서 더 큰 함수를 만드는 과정으로 전체 프로그램을 구축해야 한다. 재사용이 가능한 순수 함수를 원하는 Output을 위해 서로 엮는 것이다. 함수를 엮기 때문에 고차원함수(Higher-Order Functions)를 활용해야 한다.

고차원 함수(Higher-Order Functions)ex: filter(), map(),reduce()

• 함수를 인자(argument)로 받는다.
• 함수를 결과로 반환한다.
• 함수형 프로그래밍에서는 함수가 1등급 객체(first-class object)이다.
• 함수가 1등급 객체이므로, 함수는 고차원 함수를 구현할 수 있다.

1등급 객체(first-class object (citizen, type, entity, value로 표현되기도 한다.)

• 자료구조에 저장된다.
• 인자(argument)로 전달된다.
• 결과로 반환한다.
• 함수가 실행되는 동안 새로운 함수가 만들어질 수 있다.

객제지향 프로그래밍 vs 함수형 프로그래밍

명령형은 어떻게 풀어내는지(how to solve)에 집중하고, 선언형은 무엇을 풀어내는지(what to solve)에 집중한다.

예를 들어, 최종적인 목표가 '물을 마시기' 라고 해보자.

(명령형) 어떻게(how) 할 것인지를 설명

• 자리에서 일어난다.

• 부엌으로 이동한다.

• 컵과 물을 찾는다.

• 컵에 물을 부어 마신다.

  (선언형) 무엇(what)을 할 것인지를 설명

• 물을 마셔보자.

☛👉 객체지향 프로그래밍 ➲ 상태 변화 ➲ Side effect 발생 ☛👉 함수형 프로그래밍 ➲ 상태 변화 없음 ➲ Side effect 미발생

3) Immutability(불변성)

• 순수함수는 예측된 input과 함께 실행된다.
• Input이 변하면, 순수함수는 개발자가 예측하지 않은 다른 출력값을 만든다.
• 즉, 다른 출력값은 다른 함수에도 영향을 미친다.

4) Function decoration

• 순수함수를 재사용하다보면, 이미 만들어진 순수함수를 그대로 적용하기보다 일부 개선하거나, 조금 다른 방향으로 수정해야 하는 상황이 발생할 수 있다. 이 때 function decoration을 적용한다.
  • 직접적으로 순수 함수를 수정하진 않지만, 함수에 실행 시점이나 방식을 조율하는 것을 말한다.

참고사이트

• 함수형 프로그래밍
  • 함수형 프로그래밍 요약
  • 왜 함수형 프로그래밍이 좋을까?

자바스크립트 프레임워크를 써봤는지? 써봤다면 어떤 걸 쓰는지? 만약 쓴다면 쓰는 이유와 썼을 때의 장점?

1. React. Why? What?

• Application의 발전
• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

1. Why React?

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

1-2. Frontend Framework(Library)

:: React MVC(Model(data)-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.

대답: html,css,로 개발했을 때는 유지보수가 어렵다는 것을 느꼈고, 프레임워크를 찾던 중, react의 생태계가 활성화 되어있고 사용자도 많았습니다. 또한 React Native도 같이 할 수있다는 장점으로서 선택하여 공부하게 되었습니다.

this란? this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성입니다. 하지만 this 속성은 메서드를 호출할 때뿐 아니라 일반 함수를 호출할 때도 만들어지며 이벤트 리스너가 호출될 때에도 this 속성이 만들어집니다. 문제는 this 속성에 저장되는 값이 동일한 값이 아니라 각각 다르다는 점입니다.

this의 이해 this 바인딩을 통해 this가 어떤 값과 연결되는지 확인해볼 수 있습니다. 바인딩이란 this의 호출 방식에 따라 this가 특정 '객체'에 연결되는 것입니다. this 바인딩은 1.일반 함수 내부 2.메서드 내부 3.생성자 함수 내부 4.Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있습니다.

1. 일반 함수 호출 시 this는 전역 객체에 바인딩

2.메서드 호출시 this는 호출한 객체에 바인딩

3.New 바인딩 자바스크립트 함수 앞에 new를 붙여서 실행하며 다음과 같은 일이 일어난다.

• 새로운 객체를 반환한다
• 새로운 객체는 객체의 메소드 호출시 this로 바인딩 된다.

new로 반환된 obj 객체를 this 컨택스트와 바인딩 되는 규칙을 따른다.

4.Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 call과 apply 메소드는 기본적으로 함수를 호출하는 역할을 합니다. 그렇다면 기존 함수 호출고 차이점은? 바로 해당 메소드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this를 '바인딩' 할 수 있다는 것이다.반면, bind는 첫 번째 인자를 this에 바인딩하지만 함수를 '실행하지 않으며', 새로운 함수를 반환합니다.

call call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. call()는 Function.prototype 객체의 프로퍼티 중의 하나다. logName.call() 형태로 사용할 수 있는 이유다. call() 함수에 this 컨택스와 바인딩할 객체를 명시할 수 있다. logName() 함수가 실행되면 this는 글로벌 컨택스트가 아닌 obj 객체가 된다. this.name은 obj.name과 같다.

apply apply를 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. call과 차이점이라면 인자를 배열의 형태로 전달한다는 것입니다. 이때, 인자로 배열 자체가 전달하는 것이 아니라 배열의 요소들이 값으로 전달됩니다.

bind bind는 함수의 첫 번째 인자에 this를 바인딩한다는 점은 같지만, 함수를 실행하지 않으며 새로운 함수를 반환합니다. 즉, 반환된 새로운 함수를 실행해야 원본 함수가 실행됩니다.

결론

이제 네 가지 바인딩의 우선순위를 정리할수 있다.

1) new로 함수를 호출했는가? 그럼 실행결과 반환되는 값이 this다.

var obj = {} hello.call(obj) // this === obj hello.apply(obj) // this === obj hello.bind(obj)() // this === obj

3) 객체 프로퍼티로 접근하여 함수를 실행했는가? 그럼 이 객체가 this다.

obj.hello() // this === obj

4) 이외의 경우는 this는 전역 객체다.

브라우져의 경우 this는 Window 객체이고 엄격모드에서는 undefined 값이된다.

정리

this는 함수 호출 방식에 따라 동적으로 결정된다. 함수를 일반 함수로 호출할 경우 this는 전역 객체를, 메서드로 호출할 경우 이를 호출한 객체를, 생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스를 가르키게 됩니다. call, apply,bind메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 됩니다.

예전에도 배운적이 있지만, 다시한번 개념을 확실하게 정리하기 위해 글을 써보기로했다. 다른사람에게 촤르르르르! 설명할 수 있게!!

📌About

CSR , SSR 그리고 SPA는 현대 웹개발에서 반드시 집고 넘어가야 할 개념입니다. SPA는 3세대 웹이 등장하면서 기존에 웹이 제공해 주지 못했던 풍부한 UX를 구현할 수 있게 해준 중요한 키워드 입니다. 이 SPA는 CSR과 SSR 이 두가 방법으로 지원할 수 있습니다.

Web System Architecture History

1. 1세대 웹 - 전통적인 Web System Architecture. 정적 웹.

• 1세대 웹이 정적인 이유? HTML, CSS 자체가 정적
  • Hyper Text : 링크로 연결된 문서
  • Markup Language : “이렇게 보여줘라” 에 대한 지시
  • - HTML : 웹페이지의 내용을 브라우저에게 어떻게 렌더링(rendering) 해주라고 마크업 해주는 것*
• 어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다. 정적.

2. 2세대 웹 서비스 - User Interaction 증가. 동적 웹 (JavaScript).

• 웹서비스들이 점점 발전함에 따라 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구됨.
• 웹 기반의 언어인 자바스크립트가 출현. 자바스크립트의 역할이 커지기 시작함.
• 참고) 그 이전의 언어들은 사용할 수 없었을까? 왜 자바스크립트가 필요했을까?
• : 그 이전의 언어는 브라우저에서 동작을 안 함.*
• 이렇게 2세대 웹 서비스가 출현
• Web server에서 전체 HTML 페이지 뿐만이 아니라 JavaScript를 통해 서버와 필요한 데이터만 주고 받음으로 dynamic한 user interaction을 구현하게 됨.
• 그러나 아직 JavaScript 는 일부분에서만 사용되었고, 또한 현재 통용되는 API 의 개념이 아직은 널리 사용 되지 않음 → 동일한 서버에서 HTML, Javascript(프론트 영역) 데이터(백엔드 영역) 둘 다 전송.
  • ex. Django Template

3. 3세대 웹 서비스 - SPA. 구별되기 시작하는 Frontend / Backend.

• 동적인 기능이 주가 되버림. → 자바스크립트가 주가 되고 그 안에 일부 HTML, CSS 가 포함.
• 이게 바로 SPA(Single Page Application) - 하나의 파일로 전체 사이트를 구현
• 이름 그대로, 단일의 html 페이지에서 전체 웹 사이트/서비스를 구현.
• 기존의 방식대로 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송하는 것이 아니라, 파일은 처음 한 번만 송수신. 그 뒤로는 실시간 데이터만 주고 받음.
• - 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript 에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식.*
• HTML 태그 자체를 자바스크립트가 동적으로 생성
• “명확히 두 개로 나눌 수 있겠다!” → 프론트엔드와 백엔드가 나뉘게 되는 기점.
• 즉 HTML/JavaScript 부분과 데이터 부분이 구조적으로 분리 되기 시작
• → Frontend 개발과 Backend 개발이 독립적으로 분리 (프론트 - UI UX / 백엔드 - Data)
• 명확히 나뉘어진 두 개의 시스템으로 웹이 동작하게됨.
• 기술 스택도 각자에 맞는 스택을 시용하기 시작함. (ex. React 의 출현!)
• 프론트엔드가 개발의 혁신이 빠른 이유도 이 분야 자체의 역사가 짧음.
• Frontend 와 Backend가 구조적으로 분리가 되면서, Frontend 서버와 Backend API 서버도 분리가 되며 그에 따라 Frontend 개발과 Backend 개발 업무가 분리가 되는 구조로 발전된다.

<html파일 수>

MPA이란?(Multi Page Application)

• 일견 당연해보이기도 한다

  ⇒ 우리는 이미 여러 페이지를 넘나들며 사용하는 것처럼 보이기 때문

• 정적 웹사이트로 구성된 html 파일이 여러 개.

• 정적 웹사이트?

  • 한번 만들어 놓으면 거의 안 바뀌는 페이지
  • html 자체가 만들어져서 날아오고 그걸 그대로 브라우저에 보여주는 방식

• 페이지 이동 시 화면 깜빡임 O

  

SPA이란?(Single Page Application)

• html 파일이 한 개.
• npm run build ⇒ html 파일 하나 생김 (ex. AWS 배포할 때)
• 페이지를 이동하려고 하면 자바스크립트 내의 특정 함수를 타서 <div id="root" /> 의 내용을 싹 교체하는 것.
• 서버로부터 html 자체를 받아서 페이지를 바꾸는게 아니다.
• 페이지 이동 시 화면 깜빡임 X

• 즉, 우리가 지금 얘기해볼 SSR은 SSR for SPA다.

  • 또한, SPA(결과물) = CSR, SSR (렌더링 방법)로 나누어 이해하면 좋다.

CSR이란?(Clinet Side Rendering)

Clinet Side Rendering의 약자로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때 마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다.

• 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미.
• 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드.
• 최초로 불러온 html의 내용은 비어있음. (html, body 태그만 존재)
• js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작.
• 백엔드 호출을 최소화 할 수 있음
  • 최초 호출 때만 html, js, css를 요청
  • 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청 (ex. JSON)
• 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 JavaScript 차원에서 새로운 화면을 그려내는 것!

1. Create React App (CRA) ← Only CSR

• 아무런 초기 설정 없이도 CRA를 통해 React 기반의 SPA 사이트를 구현할 수 있게 됨.
  • (과장 조금 보태서) 터미널에 npx create-react-app my-app, npm run build 명령어 만으로 사이트 하나를 만드는 것이 가능.
  • webpack, babel 등 복잡한 세팅을 거치지 않아 React 기반 웹 프로젝트 확산에 큰 기여.
• 그런데 얼마 간 시간이 지나면서 조금씩 이상한 점이 드러나기 시작.
  • 🤔: "우리 사이트가 검색에 너무 안 걸리는걸?"
  • 원인) CRA로 build한 프로젝트는 Only CSR(Client Side Render)로 실행되기 때문.

SSR이란?(Server Side Rendering)

Server Side Rendering의 약자로써 단어 그대로!! 서버에서 렌더링을 작업합니다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 html,view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다.

웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했습니다.

CSR과 SSR의 차이점

1. 초기 렌더링 속도

:CSR의 경우, 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 반응속도를 기대할 수 있습니다.클라이언트 측에서 렌더링을 하게 되면 서버 사이드 렌더링이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성할 수 있습니다. CSR은 페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 그리고 자바스크립트가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여집니다. 여기서 웹서버에서 콘텐츠 데이터라도 가져와야 한다면 그 시간은 더욱 길어집니다. 즉, **초기 구동속도가 느려집니다. 초기 구동속도를 제외하고는 빠른 반응을 보여줍니다.

이와 반대로 SSR의 경우 서버에서 view를 렌더링하여 가져오기 때문에 view를 보기까지 초기 구동속도가 빠릅니다. 물론 JS파일을 전부 다운로드 받기 전까지는 제대로 동작하지 않지만 사용자 측면에서는 빠르다 느낄 수 있습니다.

2.SEO

SEO(Search Engine Optimization(최적화)) 대부분의 웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집합니다. 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 됩니다. 검색엔진에 제대로 노출이 되지 않는 다면 웹페이지의 유입이 줄어든다.

그렇다면....그 웹사이트는.....

• 🤔 : "SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까?"

  ⇒ SSR (Server Side Rendering)

SSR은 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없습니다.

3.보안

기존에 SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하지만 CSR방식은 클라이언트 측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 없습니다.

CSR + SSR? ⇒ Next.js (like CRA)

• 그렇다면 SSR과 CSR을 섞어 쓸 수는 없나요?
• 사용할 수 있다! ⇒ 생산성을 위해 Next.js가 주로 채택됨
• SSR의 CRA, 간단히 구성 가능
• 원티드, 토스, 배민, 카카오커머스 등 사용 중

Next.js는 간단하게 말하면 리액트에서 SSR을 쉽게 적용할 수 있게 해주는 라이브러리이다. 첫 번째, 사용자가 처음 페이지를 접속을 요청 했을때 Next.js 서버는 사용자에게 랜더링될 HTML을 응답 값으로 보내줍니다 ( SSR 방식 ). 두 번째, 그 후 브라우저는 추가적인 자바스크립트 번들을 다운로드 받아 실행합니다. 세 번째, 사용자가 해당 페이지에서 다른 페이지로 이동할때는 Next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 합니다. ( CSR 방식 )

>:: 원리 & 구조

• SSR은 다음과 같은 요소로 구성된다
  • node.js로 구성된 FE 서버
  • pyhton, django로 되어 있는 BE 서버
• 다음과 같은 과정을 거쳐 SSR이 진행된다
  1. 유저가 브라우저에 /index를 입력.
  2. 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링.
  3. 만들어진 html 을 브라우저에게 보냄.
  4. 브라우저가 응답받은 html 을 그림.
  5. html 에 기능을 부여할 main.js파일을 다운로드 받음. (hydration)
  6. 다운로드가 완료된 이후, go to second 링크를 클릭.
  7. /second로 라우팅하고 second 페이지 코드를 생성.

용어

hydration

• 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 말한다.
• render와 동일하지만, dom은 이미 그려져 있는 상태이기 때문에 event listener만 부착하는 식으로 작동.

정리 웹서비스들이 점점 발전하고 User Interaction이 증가함에 따라 단순한 정적 페이지가 아닌 다이나믹한 user interaction을 구현한 동적인 웹으로 발전했다.이에 따라 MPA(Multi Page Application)에서 SPA(Single Page Application)으로 발전되고 SPA의 CSR, SSR 렌더링 방법이 나오게 되었다. CSR은 (Client Side Rendering) 최초에 1번 서버에서 전체페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 오면 클라이언트가 해석하고 렌더링 하는 방식이다. 아무런 초기 설정 없이도 CRA(라이브러리)를 통해 React 기반의 SPA 사이트를 구현할 수 있게 되었다.하지만 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게되어 검색엔진에 제대로 노출되지 않는 SEO(Search Engine Optimizaion)문제가 발생하게 되었다. SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까?"라는 고민끝에 SSR이 나왔다. SSR은 (Server Side Rendering)은 서버에서 렌더링을 작업하는 것을 말한다. SSR은 view를 서버에서 전부 렌더링 하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제 가 없다. CSR과 SSR의 장점과 생산성을 위해 사용할 수 있는 Next.js(라이브러리/:프론트 서버에서 백엔드 서버에게 직접 요청 가능함)있는데 SSR의 CRA 으로 간단히 구성이 가능하다.

store

• 리덕스의 상태를 가지는 단일 객체

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";
const store = createStore(rootReducer);
ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById("root")
);

action

• 스토어 어떤 값을(payload) 어떻게(type) 업데이트 할 지 적어놓는 객체 액션 생성함수는 그 액션 객체를 생성하는 역할을 하는 함수 액션 객체를 dispatch 메서드에 넣어서 호출하면 리듀서를 거쳐 스토어를 업데이트 한다.

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item,
  };
};

### reducer
- reducer는 action이 발생했을 때 새로운 상탯값을 만드는 함수

> ```
// store/reducer/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";
export default combineReducers({ cartReducer });
// cartReducers.js
function cartReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload];
        case "DELETE_ITEM":
            return [...action.payload]
    default:
      return state; 
  }
}

Reduxs 상태 값 사용법

Reduxs 폴더 구조

예시) 장바구니 페이지 src ├── Components │ ├── CartItem.js │ ├── CartNoti.js │ ├── ProductCard.js │ └── Nav.js ├── Pages │ ├── CartList.js // 상품 리스트 페이지 │ └── ProductList.js // 장바구니 페이지 ├── Routes.js ├── index.js └── store ├── actions │ └── index.js // 액션 객체들 └── reducers ├── cartReducer.js // 개별 리듀서 └── index.js // 루트 리듀서

git 초기화

git init

*git으로 관리할 파일을 추가합니다. *

git add .

commit

git commit -m "Add : 초기세팅"

main branch로 바꿔줍니다.

git branch -M main

repo에 연결

git remote add origin https://github.com/(대충 repo주소)

repo로 push

git push origin main

작업

clone받을 폴더로 이동해서 clone 받습니다.

git clone origin https://github.com/(대충 repo주소)

브랜치 생성

git branch feature/login(작업단위 프로잭트 이름)

작업할 브랜치로 이동

git checkout feature/login

작업 후 PR

git add . git commit -m "Add : blabla"

main에 변동사항, 혹은 complict 있을 수 있으니 메인으로 이동 후 pull 당깁니다.

git checkout main git pull

main코드를 내 코드와 merge 해보고 conflict가 났는지 확인하고 수정합니다.

git checkout feature/login git merge main

다시 저장 후 push

git add . git commit -m "Add : blabla" git push origin feature/login

github로 이동 후 PR

CSS-in-JS 방법으로 문서에 style을 주는 것이 새롭게 적용되고 있는 흐름이 보입니다. 그 중에서도 styled-component 라이브러리가 2018년 이후 폭팔적인 사용을 보이고 있는 것을 볼 수 있습니다.

Styled Components의 장점 스타일이 컴포넌트와 결합되어 모듈화가 수월하다. 현대 앱은 컴포넌트를 중심으로 개발되어 지고 있기 때문에 매우 강력하다. Styled Components 사용예 prop에 따른 style변화를 줄 수 있다.

render(
  <div>
    <Button>Normal</Button>
    <Button width="100">Primary</Button>
  </div>
);
const Button = styled.button`
  background: ${props => props.width < 200 ? "red" : "white"};
`;

**전역 props로 obj 전달**
>```
const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
}

index.js에 Routes위에 GlobalStyle 넣어주고 걔한테 props로 them.js를 export해서 전달해준다. 그러면 어디서든 props를 불러와서 사용할 수 있다.

get 예제에서 3이라는 user id를 path로 넘겨주었습니다. 그런데 path 말고 query string으로 넘겨줘야 할 수도 있습니다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

fetch('https://api.google.com/user?id=3') .then(res => res.json()) .then(res => { if (res.success) { console.log(${res.user.name} 님 환영합니다); } });

fetch() 함수 - res.json()의 의미

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())   // 왜 then이 두개고 res.json() 은 뭔지?
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체입니다. Response Object 라고 합니다.

그런데 console을 확인해보시면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것입니다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말입니다.

응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야합니다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있습니다.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }
응답 body:
    {
        "success": boolean
    }

> ```
fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

1.두 번째 인자에 method와 body를 보내주어야 합니다. 2.method는 post 3.body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환했습니다.

post로 데이터를 보낼 때 JSON.stringfy를 항상 하다보니 axios는 굳이 감싸주지 않고 객체만 작성해도 되는 편리한 점이 있습니다. 이렇듯 axios는 소소하게 편한한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있습니다.

fetch() 함수 기본

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

>```
fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

fetch() 함수 - method가 get인 경우

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

호출하려면 아래와 같이 하면됨.
> ```
fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

  리액트를 한다고 가정하면, 아래와 같이 구현할 수 있습니다.

>```
import React, { Component } from 'react';
class User extends Component {
  componentDidMount() {
    // user id가 props를 통해 넘어온다고 가정
    const { userId } = this.props;
    fetch(`https://api.google.com/user/${userId}`)
      .then(res => res.json())
      .then(res => {
        if (res.success) {
            console.log(`${res.user.name}` 님 환영합니다);
        }
      });
  }
}

rebase란

단어 그대로 기준을 설정한다는 뜻이다. 쪼꼼 바꿔말하면.. 우리가 Git에 commit한 history를 바꿔버릴 수 있는 무시무시한 녀석이다.

백업

바로 백업이다! 혹시 날릴수도 있으니 미리 백업을 해둔다. 실제로 동기님중에 rebase땜에 파일도 멘탈도 탈탈 털린분이 있다 ㅠㅠ 그냥 복붙해서 다른폴더에 저장해도 좋지만! 우린 개발을 배우는 사람이니까 명령어를 써보자.

cp -rpv adwards-frontend adwards-frontend2

cp -rpv옆에 왼쪽꺼가 현재의 폴더명, 오른쪽이 새로 생성할 폴더명

이 때 경로를 조심해야 한다! 내 폴더가 속하기 바로 전 단계의 경로에서 저걸 실행해야 한다. (나의 경우는 front-end 폴더) 명령어를 입력하면 이렇게 쌍둥이 폴더가 뙇! 생긴다.

### 다시 이동
>cd adwards-frontend 다시 원본폴더로 이동 

### 중간에 tig 깔아주었음
>apt-get install tig

### gcm
rebase를 하기 전에 우리는 로컬에 있는 master 브랜치를 업데이트 해줘야 한다! 그러기 위해선 체크아웃을 해준다.

git checkout master git pull origin master

pull까지 땡겼으면 다시 마스터에서 원래 작업하던 브랜치로 돌아간다. 쳌아웃! 그 전에 git status 명령어를 쳐서 내가 정말로 커밋을 다 끝냈는지 확인한다. rebase는 push 전 단계에서 하는거기 때문에 commit까진 다 해야한다.

### rebase
최근 커밋 리스트 개수 세는 rebase
>git rebase -i HEAD~3

### master 브랜치에 직접 접근하는 방식
>git rebase -i master feature/ad_upload

### 이미 Github에 PR을 날린 상태라면?
위의 과정과 마찬가지로 진행하는데 push 하는 과정에서 force push를 해줘야한다. 
>git push origin -f 브랜치명
이렇게 진행하면 된다!

• 기존 setState와 마찬가지로 비동기 update
• useState 실행 시 state, setState 한 쌍이 부여됨

3. Effect Hook

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

# :: How to use useEffect!
>```
useEffect(() => {
    console.log("componentDidUpdate")
})
useEffect(() => {
    console.log("componentDidMount")
    return () => console.log("componentWillUnmount")
}, [])
useEffect(() => {
    console.log("componentDidMount")
    console.log("componentDidUpdate") // + shouldComponentUpdate
    return () => console.log("???")
}, [state])
// WRONG!!
useEffect(() => {
    console.log("CDM 쓰고 싶어요")
}, [])
useEffect(() => {
    console.log("CDU 쓰고 싶어요")
}, [state])

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“ 할 수 있게 해주는 함수입니다.

• Hook은 class 안에서는 동작하지 않습니다.
• 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

1-2. 왜 사용하나요?

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다. (HOC, render props)
• 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)
• Class은 사람과 기계를 혼동시킵니다.
  • 그러나, Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했습니다. Class는 최근 사용되는 도구에도 많은 문제를 일으킵니다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶습니다. (공식 문서)
  • "클래스는 많은 기능을 한 번에 묶는데는 성공을 했지만, 그 결과 각각을 따로 쓰기 힘들게 만들어버렸습니다. 클래스는 State와 Action(메서드)의 조합이라고 이야기를 했습니다. State와 Action을 각각 따로 분리해서 생각을 할 수는 없습니다."

:: 클래스에서 클로저(Closure)로!

• 리액트에 존재하는 컴포넌트 종류?
  • 그간 왜 클래스 컴포넌트를 써왔을까?
    • state, 라이프 사이클 때문에
    • 마치 생명체처럼 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있어서
    • 반면 함수는 한번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능
  • 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재
• 함수 컴포넌트에 날개를 달아줘!
  • 2018년에 hooks 공개!
  • 그러면 어떻게 state, 라이프사이클을 구현했나?
  • 클로저! (함수 안의 함수!)

1-3. Hook 사용 규칙

규칙 1: 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요. 규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다

2. State Hook

const [state, setState] = useState(initialState);

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

// 클래스형 컴포넌트
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react';
// 함수 컴포넌트
function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);
    const [isModalActive, setIsModalActive] = useState(false);
    // 안 좋은 예시
    const [state, setState] = useState({
        color: "red",
        isActive: true,
        name: "jt".
        password: "sdaf"
    })
    return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    <button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
    );
        }

원티드랩이라는 스타트업에서 운영중인 채용 플랫폼. 2015년부터 서비스하기 시작했다. 특징은 추천이라는 기능이 있어 지원할 때 지인의 추천/추천사를 함께 붙일 수 있고, 합격한 경우 합격자와 추천인에게 50만원 이상의 보상금을 지급한다. 국내 다른 구인구직 서비스 대비 깔끔한 UI가 돋보이는 편. 웹과 iOS, Android를 지원한다.

👨‍👨‍👧‍👦 개발 기간 및 인원

👑 Team Winted

👩‍👩‍👧‍👧FrontEnd

‣ 김수연 ‣ 김한나 ‣ 민지연 ‣ 이예린

👨‍👨‍ BackEnd

‣ 김형욱 ‣ 박재용

프로젝트 기간

2020.11.02 ~ 2020.11.13 약 2주간 진행

프로젝트 영상

링크텍스트

🔧 적용 기술

Frontend . React / React-Redux / React-Hooks / React-router / Styled Component / Chart.js . JavaScript(ES6) / Sass / HTML BackEnd . Python / Django . CORS Header / Bcrypt / PyJWT / MySQL / REST API / AqueryTool (데이터베이스 모델링) 공통: git / github, Postman, Trello

⭐️ 구현 기능

회원가입, 로그인/로그아웃 (소셜로그인) ** > NAV bar** 구직정보 리스트 탐색페이지 ** > 구직정보 상세 페이지** 직군별 연봉 페이지 이력서 관리 페이지 회원 추천 페이지

🔥 기억에 남는 코드

원티드 기업 위치를 제공하기 위해 구글맵 API 사용했다. 구글맵이 주는 가이드데로만 하면 쉽게 되겠지라 생각했었는데 얼마 지나지 않아 에러와 마주하게 되었다. 백엔드에서 주는 position data가 적용되지 않는 문제가 발생했다.문제는 부모 componet 에서 자식 componet인 MapContent의 data를 원활하게 받아오지 못하는 것이었다. 해결방법은 markerPosition의 조건부 렌더링을 통해 data를 명확하게 받아올 수 있게하여 해결했다.

🦸 느낀점

1차 프로젝트가 끝나자마자 2차 프로젝트가 시작되었다. 1차프로젝트를 해봤으니 2차 프로젝트는 그보다는 수월하겠지..라는 생각했는데.그건 큰 착각이였다. 2차 프로젝트 기간동안 React hook, styled component, Redux를 배웠고 그것을 코드에 적용해야했다. 2차 프로젝트는 심적으로나 체력적으로도 많이 힘이 들었지만 함께한 팀원들이 할 수 있다! 잘하고 있다는 긍정적에너지에 금새 이겨낼 수 있었다. 프로젝트 발표 날 새벽, git rebase를 잘못해서 코드가 눈앞에서 사라지는 일도 있었고, 팀 발표 직전까지 라이브 코딩을 했었지만 그것 또한 재밌는 에피소드가 되었다. 프로젝트 기간내내 새벽까지 함께 고생한 우리 윈티드 팀! 발표하는 동안 서로의 고생을 알기에 눈시울이 붉어졌고, 발표가 끝난 후 말없이 서로의 손을 잡아주던 장면이 아직도 생생하게 남아있다. 다음에도 이런 설렘과 기대로 또 다른 프로젝트를 시작하고 싶다.

-하지만, 상세 페이지로 이동할 경우 화면이 나타나긴 하겠지만 어떤 상품에 대한 상세 페이지를 나타낼지 알 수 있는 방법이 없습니다.

-이번 시간에는 유동 라우터을 통해 리스트 페이지와 디테일 페이지를 연결하는 방법에 대해 알아보도록 하겠습니다.

동적라우팅

동적라우팅이란?

동적라우팅이란? 위에서 살펴본 경우과 같이 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing) React Router에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있습니다.

1. Query parameters
2. URL parameters

라우트로 설정한 컴포넌트의 3가지 props

history 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있습니다. 여러분들이 컴포넌트 이동(페이지 전환) 시에 this.props.history.push('/page') 를 통해 이동할 수 있었던 이유가 여기 있습니다. location 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가지고 있습니다. match 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고있습니다.

1. 로그인 성공 시 >>> 리스트 페이지

로그인 성공시 리스트 페이지로 넘어가게 하는 함수입니다.

login을 시도하면 API와 통신하고 토큰 유무를 확인합니다. 토큰이 있으면 로컬 스토리지에 저장하고, /company_list?category=3 주소의 URL로 이동하도록 설정되어 있습니다. company_list 페이지로 이동하는 건 알겠는데 category=3 은 무엇을 의미하는걸까요?

그림은 /company_list 페이지 화면입니다. 크게 3가지 카테고리가 있는데, 각각 아래와 같이 설정되어 있습니다. FrontEnd : category=1 / BackEnd : category=2 / FullStack : category=3 즉, 로그인 성공 시 /company_list?category=3 주소의 URL로 이동하도록 설정되어 있는 것은 처음 리스트 화면 진입 시에 FullStack에 해당하는 데이터를 화면에 보여주겠다는 뜻 입니다. (참고로 현재는 API가 연결되어 있지 않아 로딩 화면만 계속 보이네요🤭) 여기서 사용한 방법이 Query parameters 입니다!

🔥 Query parameters

url의 주소가 /company_list?category=3 인 경우 this.props.location을 통해서 해당 주소의 정보를 가지고 올 수 있습니다.

location

이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가지고 있습니다.

2. 리스트 페이지 진입 해당 코드는 리스트 페이지에서 componentDidMount 함수 안에 작성한 fetch 함수 부분입니다.

📌 this.props.location.search (코드 31번째 줄) this.props.location.search에 접근합니다. this.props.location.search 를 console.log로 확인 시 ?category=3 가 나옵니다. 즉, url 주소에서 /company_list 뒤에 붙은 부분이 나타납니다. 그 중, backend에서 API호출 시 필요한 정보는 숫자 3 입니다. 그래서 this.props.location.search.split("=")[1] 을 통해 숫자 3을 찾아 변수 queryId에 저장합니다.

📌 this.props.location.search (코드 31번째 줄) this.props.location.search에 접근합니다. this.props.location.search 를 console.log로 확인 시 ?category=3 가 나옵니다. 즉, url 주소에서 /company_list 뒤에 붙은 부분이 나타납니다. 그 중, backend에서 API호출 시 필요한 정보는 숫자 3 입니다. 그래서 this.props.location.search.split("=")[1] 을 통해 숫자 3을 찾아 변수 queryId에 저장합니다. 📌 fetch 함수를 통한 API 호출 (코드 36번째 줄) (이 부분에서는 URL parameters가 사용되었네요. 아래에서 자세히 볼거니깐 '그렇구나! 이렇게 생겼구나!' 하고 넘어가주세요.😬) fetch 함수를 통한 API 호출 시, API 주소 가장 뒷 부분에 변수에 담은 숫자 3을 포함시키는 것을 확인할 수 있습니다. 즉, "fullstack 데이터를 갖는 API를 호출하려면 주소 뒤에 3을 붙여줘" 라고 프론트와 백이 약속으로 정했기 때문에 프론트에서는 url 주소에서 그 숫자를 찾아 fetch 함수에서 사용하는 것입니다. 그렇다면 FULLSTACK API 호출 결과 받은 해당 데이터, 즉 FullStack에 해당하는 회사 리스트를 화면에 보여줄 수 있습니다.

라우트를 설정 할 때에는 Route 컴포넌트를 사용하고, 경로는 path 값으로 설정합니다.

첫번째 라우트 / 의 경우에는 Home 컴포넌트를 보여주게 했고, 두번째 라우트 /about 에서는 About 컴포넌트를 보여주게 했습니다.

첫번째 라우트의 경우엔 exact 가 붙어있지요? 이게 붙어있으면 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여줍니다.

먼저 우리의 라우트가 제대로 보여지는지 확인하세요.

라우트 파라미터 읽기

라우트의 경로에 특정 값을 넣는 방법을 알아보겠습니다. 방법은 두가지가 있는데요, params 를 사용하는 것 과, query 를 사용하는 것 입니다.

라우트로 설정한 컴포넌트는, 3가지의 props 를 전달받게 됩니다:

history 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있습니다. location 이 객체는 현재 경로에 대한 정보를 지니고 있고 URL 쿼리 (/about?foo=bar 형식) 정보도 가지고있습니다. match 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/about/:name 형식) 정보를 가지고있습니다.

URL 쿼리의 경우엔 컴포넌트 내에서 동적으로 사용 할 수 있고, params 의 경우엔 사용하기 전에 꼭 라우트에서 지정을 해주어야합니다.

params 그러면, 먼저 params 부터 사용을 해봅시다.

App 컴포넌트에서 다음과 같이 /about/:name 라우트를 추가하세요.

Link 컴포넌트 앱 내에서 다른 라우트로 이동 할 때에는, 일반 foo 형식으로 하면 안됩니다. 왜냐하면, 이렇게하면 새로고침을 해버리기 때문이지요.

새로고침을 하기 위해선, 리액트 라우터에 있는 Link 컴포넌트를 사용해야합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다.

그럼, 한번 사용해볼까요?

components 디렉토리에 Menu 라는 컴포넌트를 다음과 같이 만들어보세요:

페이지가 새로 로딩되지 않으면서 잘 전환이 되나요?

이 컴포넌트에 전달되는 props 들은 컴포넌트 내부의 DOM 에도 전달이 되므로, 일반 DOM 엘리먼트에 설정 하는 것 처럼 className, style 혹은 onClick 등의 이벤트를 전달 해 줄 수 있습니다.

NavLink 컴포넌트 NavLink 컴포넌트는 Link 랑 비슷한데요, 만약에 설정한 URL 이 활성화가 되면, 특정 스타일 혹은 클래스를 지정 할 수 있습니다.

Route 를 지정 할 때 처럼, 중첩될수도 있는 라우트들은 exact 로 설정을 하셔야 합니다.

-> 터미널 git init git remote add origin (주소) git add . git commit -m "" (git branch -M main : push 하기 바로 전에 main branch로 변경 git branch -M main) git push origin main

2.git branch feature/readme : 브랜치 생성 git checkout feature/readme : 브랜치 이동 git add . git commit -m "" git push origin feature/readme

3.pull request : 사이트 이용/ 요청하기

*cd : (가자!) 이동 ls : 위치에 있는 파일 불러보기

branch : main 옆 가지, main에 올리기전 하위폴더(?)로 작업할 수있다. 작업용파일올리기느낌? branch에서 최종master로... (대게 페이지나, 기능으로 나뉜다.)

remote : local과 내컴퓨터...연결