- 리덕스 미들웨어 청크란

해당 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성할수 있도록 도와줍니다.

리덕스에서는 기본적으로 액션 자체를 디스패치합니다.

일반 액션생성자는 파라미터를 가지고 액션 객체를 생성하는 작업만 합니다.

만약 특정 액션이 몇초뒤에 실행하게 하거나, 현재 상태에 따라 무시되게 하려면 일반 액션생성자로는 할 수 없습니다.

redux-thunk 는 이를 가능하게 합니다.

이러한 동작방식을 활용하여 Redux에서 비동기적인 프로그래밍을 구현할 수 있습니다

- 비동기와 프로미스 차이

비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 
하지만 콜백 패턴은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 예외처리가 곤란하며, 
여러개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. 
그래서 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입하였다. 
프로미스는 비동기적으로 요청한 결과(성공/실패)를 나타내는 객체로서, 
콜백 패턴이 가진 단점을 보완하며, 비동기 처리 시점을 명확하게 표현한다.

- tmz

TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 뜻한다.
비유하자면 선언 단계와 초기화 단계 사이에 잠시 머물러 있는 것이라고 할 수 있다.
let과 const는 var와는 다르게 선언단계와 초기화 단계가 따로 분리되어 실행된다. 
그래서 선언 단계와 초기화 단계 사이에서는 실행 컨텍스트에는 변수를 등록했지만 
메모리가 할당되지 않은 상태라 `ReferenceError` 가 나오는 것이다. 
이런 사각지대를 TDZ(Temporal Dead Zone) 라고 하는 것이다.


- rest API 의 정의와 특징
정의=rest 기반으로 서비스 api를 구현
특징=사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.
REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.
즉, REST API를 제작하면 델파이 클라이언트 뿐 아니라, 자바, C#, 웹 등을 이용해 클라이언트를 제작할 수 있다.

- rest api에서 rest의 구성요소와 그에 따른 특징과 설명
자원 : URL
1. 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
2. 자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URL이다.
3. Client는 URL를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.

행위 : http methid
1. HTTP 프로토콜의 Method를 사용한다.
2. HTTP 프로토콜은 GET, POST, PUT, DELETE와 같은 메서드를 제공한다.

표현: represrntation of resource

1. Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보낸다.
2. REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타내어 질 수 있다.
3. JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.


- 파싱이란?
다른 형식으로 저장된 데이터를 원하는 형식의 데이터로 변환하는 것을 말한다.
1. XML, JSON : 데이터를 표현하는 문자열
2.  JSON 파싱 : JSON 형식의 문자열을 객체로 변환하는 것

'이노베이션 > WIL' 카테고리의 다른 글

2022.08.21  (0) 2022.08.21
22.08.14  (0) 2022.08.14
8월 첫째주  (0) 2022.08.07

 🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

 

유사배열과 배열의 차이를 비교하기 전에 각 용어의 개념을 정리하자.

배열(Array)

관련 있는 데이터를 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입이다.

자바스크립트는 명시적 타입이 없기때문에, 하나의 배열은 여러 자료형을 가질 수 있는 특징이 있다.

배열을 사용하면 여러 데이터를 관련성 있게 관리할 수 있기 때문에 생산성 및 코드 가독성이 높아지고 이는 유지보수 비용의 감소로 이어진다.

유사배열(Array-Like Object)

이름 그대로 배열과 유사한 객체를 말한다.그렇기 때문에 유사배열은 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다.

유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용한다.

  • 유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체이고 배열은 데이터 타입이는 점이 다르다.

유사배열의 각 요소를 수정하고 싶다면

  • Array.from( )메서드를 사용하면 된다. Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만든다. Array.from()으로 유사 배열 객체이 있는 value를 복사해 배열로 만드는 것이다. 그러면 배열 메서드를 사용할 수 있다.

또는

  • 배열에 내포되어있는 기능들을 유사배열에서 사용하기 위해 call, apply, bind을 사용한다. (apply와 call은 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내것처럼 사용할 수 있게 해준다.)

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

 

컴포넌트 A에서 “르탄이”라는 state를 “진도사우르스” 변경 -> 부모 컴포넌트에서 Updating이 발생 -> shouldComponentUpdate 가 실행 -> 바뀐 props를 이용하여 부모 컴포넌트의 렌더링 -> 마찬가지로 바뀐 props를 이어받아 컴포넌트 B의 렌더링이 실행 된다.

 

양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

양방향 바인딩의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만 단방향바인딩의 경우 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다.

양방향 데이터 바인딩이란 뷰와 모델의 데이터를 동기화하는 것이다.

즉 사용자의 입력값에 따라 js의 데이터가 변경되고,

js의 데이터가 변경되면 사용자의 화면도 변경된다

 

 

event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

클래스형 컴포넌트에서 componentDidMount()의 역할을

함수형 컴포넌트에선 useEffect()훅을 사용한다.

따라서, 클래스형에서 componentWillUnmount() 단계를

useEffect()에서는 return() 단계에서 동작한다.

이 단계에서 .removeEventListener()을 사용해 이벤트를 해제해줘야 한다.

 

리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

ref는 reference의 준말 (참고,참조) ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

-React 공식문서-

ref를 쓰는 이유는 ref는 특정 DOM 요소를 가져올 때 더 신뢰할 만하기 때문입니다. 라이프사이클에 따라 DOM 요소를 가져오지 못하는 경우가 있습니다 예측하지 못한 상황(대개는 라이프사이클의 흐름을 예측하지 못한 상황)으로 DOM 요소를 가져오지 못한다면 이는 해당 코드가 포함된 로직에 따라 큰 문제가 발생할수 있습니다

또 만약 컴포넌트가 하나가 아닌 여러 개가 생성되는 경우 이때 우리는 id나 class로 특정해서 원하는 DOM 요소를 가져오기가 힘들다 DOM 요소를 특정할 수 있도록 관심 영역을 특정 컴포넌트로 제한하는 역할도 ref가 할 수 있습니다.

 

SPA 방식과 MPA 방식은 무엇인가요?

SPA(Single Page Application)는 한 개 Page로 구성되어있고

MPA(Multi Page application)는 여러 개 Page로 구성되어있다

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링한다.

인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.

반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.

그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.

어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐이다.

그래서 SPA를 CSR(Client Side Rendering)방식으로, MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말한다.

 

가상DOM이란?

작업을 하다가 어떠한 부분을 수정해야 할떄

document.getElementById()라는 DOM 접근 메서드를 이용할 텐데 이 방식의 아쉬운점은 메모리 누수와 속도 그리고 코드량이 있다 만일 태그를 찾는 코드를 변수에 저장하지 않고 매번 메서드를 사용한다면 매 단계마다 수많은 DOCUMENT객체들을 전부 흝으며 찾는 현상이 발생되고 이것은 곧 메모리 누수로 이어진다 그리고 수정후 변화가 일어난다면 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 그려주는 과정에서도 시간이 든다

다른하나의 객체를 찾기 위해 작성하는 코드가 복잡할수있다 ID라는 고유성을 침해하당하지 않게 태그의 네이밍을 심사숙고해야할것이고 태그를 접근하기 위해 작성해야 하는 메서드가 짧지않다(document.getElementById())

html 마크업을 시각적이 형태로 변환하는 시간(css가 적용되고 수정되어 반영되는 시간)이 드는 것은 어쩔 수 없지만, 최소한의 DOM 조작을 통해 개선하고자하여 가상돔이라는 개념을 도입되었다

가상돔이란? 실제 돔에 접근하여 조작하지 않고 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다 (무거운 실제 돔의 가벼운 사본느낌)

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다 큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타낸다

  1. 변화가 일어났을때 변화된 버전을 가상돔으로 바꿈(데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링)
  2. 가상돔끼리 비교(변화 전의 가사돔과 변화된 가상돔 비교)
  3. 바뀐부분만 적용(바뀐부분만 실제 돔에 적용 함으로써 에이아웃 계산은 한번만 이행된다)

jsx문법의 특징

  1. 반드시 부모 요소 하나가 감싸는 형태여야 한다
  • virtyal dom에서 컴포넌트 변화를 감지할때 효율적으로 비교할수 있도록 컴포넌트 내부는 하나의 dom트리 구조로 이루어져야 한다는 규칙이 있기 때문
  1. 자바스크립트 표현식
  • jsx안에서도 자바스크립트 표현식을 사용할수있다 자바스크립트 표현식을 작성하려면 jsx 내부에 코드를 중괄호로 {} 감싸준다
  1. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
  • 자바스크립트의 if문과 for 루프는 jsx에는 쓸수가 없다 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.
  1. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다
  • JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.   카멜 표기법으로 작성해야 한다. (font-size => fontSize)
  1. JSX 내에서 주석 사용 방법
  • JSX 내에서 {/…/} 와 같은 형식을 사용 한다

Class Component와 Function Component의 차이점

Class Component는 여러 단계의 상속으로 이어져있어 복잡성과 오류 가능성을 증가시킨다. 이로 인해 Function Component가 탄생하게 되었고, Class component는 라이프 사이클을 가지며 이로인해 각각 생명주기 메소드에 대해 알고 있어야 한다. 하지만 function component는 이러한 기능을 hooks을 사용하여 생명주기에 원하는 동작을 하게해 좀더 자유롭다.

 

styled-components의 의미와 예시

기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다.

css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다

이런식으로 따로 css를 따로 만들지 않고도 쉽고 직관적으로 속성을 적용시키고 수정이 가능하다.

 

css 중첩을 막기 위한 방법과 예시

클래스 이름으로 인해 중첩이 일어나는 경우가 흔치 않다.

이를 막기 위한 방법으로 CSS Moduel이라는 것을 사용하게 되는데

그 이유는

  1. 클래스 이름이 중첩되는것을 방지해준다.
  2. 유지보수하기 편해진다
  3. 사용 범위를 제한하여, 스타일링 하고싶은 컴포넌트가 다른 컴포넌트와 중복되는클래스 이름에 의하여 방해되는것을 막아준다.

아래 사진들은 css module을 사용하지 않았을때 일어나는 상황이다.

 

Module1.js에 module1.css를 import 했는데, Module2.js에도 스타일이 들어갔다.

이런 경우를 방지하기 위해 CSS Module을 사용한다.

CSS Module 사용해서 css를 적용하게 되면 이런 식으로 원하는 곳에만 적용하는 게 가능하게 된다.

리액트 개인과제를 하느라 정신이 없었던 주차였다

아직 자바스크립트에 대해서도  다 알지 못해서 더 어려운거 같다

하루아침에 되지 않는다는걸 또 느꼈고 공부 방식이라던지 어떤한걸 먼저 공부를 해야하는지 최대한

가져가고 이노베이션 캠프중에도 물론이지만 캠프가 끝나고 공부해야겠다

 

가상DOM이란?

작업을 하다가 어떠한 부분을 수정해야 할떄

document.getElementById()라는 DOM 접근 메서드를 이용할 텐데 이 방식의 아쉬운점은 메모리 누수와 속도 그리고 코드량이 있다 만일 태그를 찾는 코드를 변수에 저장하지 않고 매번 메서드를 사용한다면 매 단계마다 수많은 DOCUMENT객체들을 전부 흝으며 찾는 현상이 발생되고 이것은 곧 메모리 누수로 이어진다 그리고 수정후 변화가 일어난다면 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 그려주는 과정에서도 시간이 든다

다른하나의 객체를 찾기 위해 작성하는 코드가 복잡할수있다 ID라는 고유성을 침해하당하지 않게 태그의 네이밍을 심사숙고해야할것이고 태그를 접근하기 위해 작성해야 하는 메서드가 짧지않다(document.getElementById())

html 마크업을 시각적이 형태로 변환하는 시간(css가 적용되고 수정되어 반영되는 시간)이 드는 것은 어쩔 수 없지만, 최소한의 DOM 조작을 통해 개선하고자하여 가상돔이라는 개념을 도입되었다

가상돔이란? 실제 돔에 접근하여 조작하지 않고 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다 (무거운 실제 돔의 가벼운 사본느낌)

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다 큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타낸다

  1. 변화가 일어났을때 변화된 버전을 가상돔으로 바꿈(데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링)
  2. 가상돔끼리 비교(변화 전의 가사돔과 변화된 가상돔 비교)
  3. 바뀐부분만 적용(바뀐부분만 실제 돔에 적용 함으로써 에이아웃 계산은 한번만 이행된다)

 

 

jsx문법의 특징

반드시 부모 요소 하나가 감싸는 형태여야 한다

  • virtyal dom에서 컴포넌트 변화를 감지할때 효율적으로 비교할수 있도록 컴포넌트 내부는 하나의 dom트리 구조로 이루어져야 한다는 규칙이 있기 때문
  1. 자바스크립트 표현식
  • jsx안에서도 자바스크립트 표현식을 사용할수있다 자바스크립트 표현식을 작성하려면 jsx 내부에 코드를 중괄호로 {} 감싸준다
  1. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
  • 자바스크립트의 if문과 for 루프는 jsx에는 쓸수가 없다 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.
  1. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다
  • JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.   카멜 표기법으로 작성해야 한다. (font-size => fontSize)
  1. JSX 내에서 주석 사용 방법
  • JSX 내에서 {/…/} 와 같은 형식을 사용 한다

'이노베이션 > WIL' 카테고리의 다른 글

과제  (0) 2022.09.02
22.08.14  (0) 2022.08.14
8월 첫째주  (0) 2022.08.07

알고리즘 주차가 끝났다

코드테스트 연습을 했는데

프로그래머스랑 백준사이트로 공부를 하는거였다

함수 변수 이런것들은 스파르타 코딩클럽에서 웹개발 들으면서 배웠던게 전부였어서 힘들긴 했지만 

팀원들을 잘만나서 지난 주차에 많은 걸 배웠고 스스로도 실력이 좀 는게 느껴졌다

혼자공부하는 자바스크립트도 도움이 되었다

아직 100프로 다 알지는 못하기때문에 계속 문제도 풀어보고 공부를 해야겠다

가면갈수록 코딩이라는게 재밌다

그치만 또 하나 느낀점은 이노베이션 캠프 과장광고 아니냐...의지만 갖고 오라매..

이 캠프를 제대로 활용하려면 의지만으론 안된다 노베이스는 공부를 많이 하고 기본 지식은 탑재한후에 참여하는게 맞는거같다

어떻게든 버텨서 많이 배워가긴 하겠지만 확실히 따라가는게 좀 벅차다..

9월에 일정이 겁나 많은데 어카냐;; 뭐 하는데 까진 해봐야겠다!! 

 

 JavaScript의 ES란?, ES5/ES6 문법 차이

 

ECMA Script(European Computer Manufacturer's Association Script)

정보와 통신 시스템을 위한 국제적 표준화 기구 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어

ECMAScript는 JavaScript와 같은 스크립트 언어의 표준을 말한다

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다

JavaScript는 ECMAScript를 기반으로 하며 ECMAScript 사양을 준수하는 범용 스크립팅 언어다

ECMAScript 언어 중 가장 인기 있는 언어로 알려져 있다

ES5와 ES6의 차이점

★Let, Const

- 기존의 var 키워드에 비해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가

- 변수에 생명주기에 영향을 끼리며, 키워드만 보아도 변수의 변화가 생기는지 안 생기는지 알 수 있음

- 호이스팅에 있어서도 변화가 생김

 

★Arrow Function

- 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있음

- 가독성 및 유지 보수성이 올라갔다고 판단, 단 기존의 함수와 this 바인딩이 다름

- 화살표 함수에서 매개변수가 하나일 때 () 괄호 생략 가능, {} 소괄호 및 return도 생략 가능

- Default parameter

 기존에 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6이후 - -   default parameter가 추가

- Template literal 추가

ES6 이전 문자열 관리가 불편했음. Template literal 이 도입되어 간편해짐

- Multi-line string

문자열이 라인을 넘어가게 되면 관리가 불편했음, ``을 사용하면 여러 라인의 문자열도 쉽게 사용 가능

- Class

객체 생성 방식 중 하나, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍

클래스 기반의 객체지향 프로그래밍에 익숙한 개발자들에 요청에 의해 생기지 않았나 추측

자바스크립트에서 클래스는 문법적 설탕이라는 생각, 자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각

단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작함

- Module

모듈이란 재사용하기 위한 코드 조각을 의미, 세부사항을 캡슐화 시키고 API 부분만 외부에 노출시킨 코드들

모듈은 모듈 스코프를 가지며, export, import 키워드로 사용

- Destructuring

디스트럭쳐링이란 비구조화, 파괴를 뜻하는 단어로, 크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것

- Promise

비동기통신에 있어 기존에는 콜백함수를 사용한 콜백 패턴을 사용

결과론적으로 콜백 헬을 발생

이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게됨

 

- String Method(includes, startsWith, endWith)

문자열 메서드가 추가됨

해당 메서드는 true/false로 리턴, 검사 로직 수행 가능

'이노베이션 > WIL' 카테고리의 다른 글

과제  (0) 2022.09.02
2022.08.21  (0) 2022.08.21
8월 첫째주  (0) 2022.08.07

1. 깃헙

우선 프로젝트 시작할때만해도 깃헙을 크게 생각하지 않았다 어찌되었던 코드를 전달만 하면 되지 않나?하고

그런데 팀원들의 코드를 받고 병합을 하는 과정에서 너무 불편하고에러 고치느라 시간을 너무 허비해버릴만큼  에러가 많이 났다  다른 팀들도 멘토링 시간 질문사항에 깃허브관련 내용이 많았다 그래서 구글링도 해보고 멘토링 시간에 질문도 해보았는데 멘토님 말씀을 듣다보니 깃허브 사용을 무시할수 없다는걸 알았다

지금이야 직접 보내는게 편하긴 하지만 프로젝트 규모가 커지거나 많은 사람들이 협업을 하는 상황에서 원활한 소통을 하기 위해서는 깃허브를 잘 활용해야겠다 라는 생각이 들었고

당장의 미니 프로젝트에서는 기능, 프로젝트 완성이 목표이긴 했지만 이 캠프의 취지 자체가 취업후 혹은 다른 팀원들과의 협업을 연습하는 과정이라 바로 당장 다음 프로젝트를 위해서라도 많이 활용하려고 노력하였다

 

깃헙을 쓰면서도 많은 에러들이 나왔지만 가만 보면 에러가 엄청 다양하지않고 전에 떴던 에러가 또뜨는등 비슷한 애러가 많아서 '어 이 에러는 저번에 코드로 해결이 되었지'하고 해결하는 코드도 많이 알게되었다!

아직은 완벽하진 않지만 깃허브에대해 많이 알게 되었다

 

2. JWT

JWT로그인을 구현이 프로젝트 필수사항이었는데 생소한 개념이었다

강의로 공부하고 구글링을 하며서 알게되 점들이 있다

우선 방식은 브라우저에서 LOGIN 요청을 보내고 서버에서 JWT를 생성시켜준다

그리고 새로 생성된 JWT 다음 요청할때 발급된 JWT를 함꼐 보내준다

서버에서 JWT를 확인한후 유저 정보를 REQUET에 담고 요청을 처리해준다

이후 브라우저로 다시 RESPONSE를 보내거나 COOKIE를 보낸다

보안에 좋다고 하는데 구글링 해보면 

다른 팀원분이 담당을 해서 100프로 모든걸 이해하진 못했지만 나중에 개인프로젝트에서 써보면서 확실히 이해해 봐야겠다

 

3. API

이노베이션 캠프에 참여하면서 지금은 잠시 중단되긴했지만 따로 진행하던 프로젝트에서 API를 많이 만져보기도 했고 재미도 있었어서 어렵게 생각하진않았다

하지만 우리 미니프로젝트에서 API가 큰 문제중 하나였다 팀원 4명이 붙었는데도 해결하기가 힘들었다

메인페이지에서 회원가입후 db에 post로 데이터 보내고 다시 로그인 요청을 하고 서버에서 jwt토큰 확인하고 브라우저로 다시 보내주고 역 검색하고 해당 데이터 보내주고..지금 다시 생각해봐도 우리가 처음 와이어프레임 짤때 api를 너무 많이 넣었다 그것도 나름 빼긴했지만

지금 회고록에쓰고는 있지만 api 생각도 하기싫다 팀원들 코드 병합하는 과정에서 

내 파이참CSS파일과 인프라,깃헙부분 그리고 에러가 동시에 터져서 내 멘탈도 터졌다 나도 localshost로 열어봐야 api문제라도 알텐데.. 하다못해 그냥 미리보기 창에서도 에러때문에 열리지가 않았다 열받아서 빡종하고 한 1시간 머리 식히고 돌아왔다 팀원들이 API문제로 다들 힘들어 했다 API이름이 다 비슷비슷하고 불필요한 api가 많아서 통일시켜달라는 요청을 받았다

그런데 내가 볼땐 딱히 통일시킬게 없어 보였다 하지만 팀원분들이 다들 실력이 좋으셔서 내가 잘 몰라서 그런가보다 하고 이전 항해99에서 했던 프로젝트들을 참고하면서 최대한 단순화 시켜보려고 수정을 한창 하던중 api부분이 해결이 되었단다.아...

 

4.jinja

이건 우리팀에 에이스 분이 오픈 qpi가져다가 혼자 해결을 해버렸다 ㅋㅋ

 

 

느낀점)

내가 왜 팀장이었는지는 모르겠는데 팀의 전체적인 흐름까지 생각하다보니 머리가 터지는거같았다 나도 엄청난 실력자가 아닌데.. 부족한데..뭐 어찌되었던 여기서의 팀장은 사회에서 실력으로 올라가는 팀장이 아니라 그냥 반장정도..?담임쌤 심부름하고 팀원 소통원활하게 하고 궂은일 도맡아 하는 그런 역할이기 때문에 학창시절에 매 학년마다 1기 반장을 했던 경험을 토대로 팀분위기, 최종 목표로 가기위한 교통순경역할을 수행했다ㅋㅋㅋ반장, 주장은 꼭 내가 해야 직성이 풀리기도하고...ㅋㅋ

 

하지만 프로젝트 주제가 현재 우리의 실력으론 시간이 많이 필요한데 주어진 시간은 너무 짧았다

새로운걸 하나하나 습득하면서 가는게 아니라 한번에 여러개를 이해하고 습득하면서 나가야 하는 과정이더라,,

프로젝트야 잘 끝났지만 너무 힘들었다

처음 회의때 자기소개를 했는데 전부 프론트 앤드를 희망했다 나야 트론트나 백 둘다 관심이 있지만 나도 기능 만들고 싶었는데 프로젝트 제출 기한까지도 시간이 매우 부족하고 팀원들이 프론트에만 집중할수있게 내가 깃헙사용법과 빽,인프라 부분을 맡았다 빠르게 해결하고 도움이 필요한 팀원들 도와야지 했다 그런데 금방 해결할수있을줄 알았다

 

쉬울거라 생각했던 AWS인스턴스에 원격 접속이 안되었다 권한이 없다고 에러가 나왔는데 얼마전까지도 문제 없이 사용했는데 갑자기 그러니 짜증이 났다 결국 에러는 해결했지만 그 다음 큰 문제가 있었다 내 파이참이 STYLELINT에러가 난것이다 경로를 설정하는 오류였는데 구글링을 해도 정보가 너무 없었다 보니까 흔한에러가 아니고 나한테 있는 에러였다 그래서 멘토님한테 여쭤보고 담임매니저님, 기술매니저님한테도 물어봤는데 다 해결이 안되었다 글쓰고 있는 지금도 해결이 안되어있다  vs코드 만세!

 

깃허브도 에러~ 인스턴스도 에러~ 파이참도 에러~ 그냥 오로지 에러 파티였던 첫주였다 팀원들 힘들어하는 부분들 같이 구글링 해주고~ 먼저 끝난분한테 다음 역할 요청하고~

제출기한에 맞춰서 기간까지 제출하려면 적어도 이때는 이게 다 되어있어야하고, 저때는 저게 되어있어야 한다 라는 틀은 나누고 계획에 딱딱 맞게 진행이 되어서 마무리까지 되긴 했지만 그 계획짜는 과정에서 서버는 어떻게 설계 할것이며 qpi는 어떻게 할지는 한번에 생각이 안나서  항해99 코드 구글링하고 에이스팀원분이랑 사람들 다 자러간 새벽 4시에 의논하고 ㅋㅋ 시간 얘기가 나와서 그런데 이번 4일동안 하루에 평균 3시간씩 잤다 약간 뭐 하나에 집중하면 밤새긴 하지만 4일을 그러니 엄청 예민해졌다 그런데 에이스팀원분도 나랑늘 비슷한시간에 잤는데 열정이 넘쳐서 그런가 컨디션 기복이 없었다 대단했다 본받아야겠다

마지막으로 다시는 팀장 하고싶지 않다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

'이노베이션 > WIL' 카테고리의 다른 글

과제  (0) 2022.09.02
2022.08.21  (0) 2022.08.21
22.08.14  (0) 2022.08.14
  • 5조
    프로젝트 제목 - 지하철에서 살아남기
    간단설명 - 지하철역에서 누릴 수 있는 편의 시설과 관련정보들을 제공하는 서비스 입니다. 

  • 와이어프레임



  • 개발해야하는기능

+ Recent posts