코딩왕이 될 남자

- 리덕스 미들웨어 청크란

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

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

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

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

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 형식의 문자열을 객체로 변환하는 것

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

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

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

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

가상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 내에서 {/…/} 와 같은 형식을 사용 한다

알고리즘 주차가 끝났다

코드테스트 연습을 했는데

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

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

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

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

아직 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로 리턴, 검사 로직 수행 가능

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일을 그러니 엄청 예민해졌다 그런데 에이스팀원분도 나랑늘 비슷한시간에 잤는데 열정이 넘쳐서 그런가 컨디션 기복이 없었다 대단했다 본받아야겠다

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