@Devme

TypeScript에서 string key로 객체에 접근하기

****7**** — Sat, 17 Aug 2024 11:38:46 +0900

항해플러스 FE 2기 참여해서 사전스터디로 자바스크립트와 타입스크립트 기초 강의를 받았다.

타입스크립트 2주차 강의에서 pure javascript의 배열 내장함수를 사용하면 하드코딩하지 않아도 될 부분이 있어

평소 하던대로 작성해보았는데 타입 에러가 발생했다.

기능 : Student 타입의 객체인 학생의 각 과목 접수를 합산해서 평균을 내는 함수

▼강의 내 정답 함수 코드

interface Student {
  name: string;
  age: number;
  scores: {
    korean: number;
    math: number;
    society: number;
    science: number;
    english: number;
  };
}

function calculateAverage(student: Student): number {
  const sum = student.scores.korean + student.scores.math + student.scores.society + student.scores.science + student.scores.english;
  const average = sum / 5;
  return average;
}

▼ 내가 작성한 코드

function calculateAverage(student: Student): number {
  const keys = Object.keys(student.scores);
  let sum = 0;

  keys.forEach((e) => {
    sum += student.scores[e];  // 이 부분에서 error 발생
  });

  return sum / keys.length;
}

▼ compile error 내용

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ korean: number; math: number; society: number; science: number; english: number; }'.
No index signature with a parameter of type 'string' was found on type '{ korean: number; math: number; society: number; science: number; english: number; }'.ts(7053)

sum += student.scores[e];

pure javascript를 사용했을 때 아무런 문제가 없던 부분인데 왜 타입스크립트에서는 타입 불일치 에러가 발생했을까?

문제는 바로! 인터페이스로 선언한 Student 타입에서 key 값에 대한 타입 선언을 하지 않았기 때문이다.

객체의 key에 대해 타입 선언을 하지 않는다면 String literal 타입으로 String 타입보다 좁은 의미의 타입으로 선언된다.

예를 들면,

type obj = {
    name : string
    age : number
}

위와 같이 obj 라는 타입은 name, age를 key로 가지고 있는데

해당 key의 각각의 타입 또한 name, age 로 String literal 타입이다.

문자열의 형태를 가지고 있다고 해서 string 타입이 아니고 값까지 타입 결정의 일부가 되는 것이다.

이와 같이 string literal 타입이 아닌 string 타입으로 해석하고 싶다면, index signature를 사용하면 된다.

type obj = {
  [index: string]: string
  name: string
  age: string
}

index signature 란 타입의 속성(키, 프로퍼티) - 값 페어의 타입을 선언해두는 것이다.

key의 타입이 다른 index signature는 여럿 선언할 수 있지만, index signature의 value type은 모두 일치해야한다.

interface Student {
  name: string;
  age: number;
  scores: {
    [key: string]: number;
    korean: number;
    math: number;
    society: number;
    science: number;
    english: number;
  };
}

function calculateAverage(student: Student): number {
  const keys = Object.keys(student.scores);
  let sum = 0;

  keys.forEach((e) => {
    sum += student.scores[e];  // ok
  });

  return sum / keys.length;
}

이렇게 index signature를 사용하면 동적으로 key를 변경하여 객체 내의 값의 가져올 때 타입 불일치 에러를 피할 수 있다.

참고

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/#index-signature-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0

Python pip 명령어 사용 안될때 버전 업그레이드도 안될때

****7**** — Sun, 31 Jul 2022 21:18:56 +0900

클래스 101에서 파이썬으로 자동매매봇 만들기 클래스를 수강하며,

vscode에 첫 python 명령어(라이브러리 인스톨)을 입력했더니

버전이 맞지 않아 1차 에러가 발생되었다.

1. error 내용

WARNING: Failed to write executable - trying to use .deleteme logic
ERROR: Could not install packages due to an
EnvironmentError: [WinError 2] 지정된 파일을 찾을 수 없습니다: 'c:\\경로\\Scripts\\normal
WARNING: You are using pip version 20.2.3; however, version 22.2.1 is available.
You should consider upgrading via the 'c:\경로\python.exe -m pip install --upgrade pip' command.

내가 인스톨 하고자하는 라이브러리는 pip 22.2.1 버전을 요구 하고 있었고 현재 적용되어있는 pip version은 20.2.3

2. 친절하게 제시된 '-m pip install --upgrade pip' 을 사용했지만 권한 때문에 안되었다.

그래서

2-1. 사용권한을 변경하거나

2-2. -m pip install --upgrade pip --user 로 명령하면 사용 업그레이드가 된다.

f2py.exe.deleteme 파일 자체가 권한을 요구하고 있으므로 일반 명령어를 실행했을때

ERROR: Could not install packages due to an OSError: [WinError 2] 지정된 파일을 찾을 수 없습니다:

경로/ ~~~~ f2py.exe.deleteme

가 등장한다면 명령어 뒤에 --user를 붙여서 권한을 주면 된다.

[패스트캠퍼스 챌린지 최종 미션] 한번에끝내는React의모든것초격차패키지Online. 강의 후기

****7**** — Wed, 8 Dec 2021 15:42:09 +0900

내가 패스트캠퍼스 환급챌린지를 하게 된 이유

귀차니즘과 게으름의 끝판왕이라 정말 강제성이 없으면 공부를 거의 못하는 편이라

우연찮게 보게된 광고 덕에 패스트캠퍼스 환급챌린지를 참여하게 되었다.

정말 개발이라는게 남의 코드 복사붙여넣기 하는게 아니라 이해하고 써먹고 활용할 줄 알아야 코더가 아닌 진짜 개발자라고 생각해서

끊임없이 공부해야된다고 생각은 한다. 생각은...

생각만큼 실행에 옮기기란 정말 힘들더라, 공부해야겠다 싶어서 회사 책장에 있는 리액트 책 한권, 노드 책 한권,

자리에 두고 한번도 펼쳐보지 못했다.

진짜 책을 읽으면서 따라 쳐보고 이해가 안되면 콘솔도 찍어보고 디버깅도 하고 그러면 이해가 더 잘되는거 알고

몰라서 구글에 검색해보면 나오는 내용이 모두 책 속에 있는거 다 알고 있는데 안하니까 온라인 강의 결제했다.

처음엔 인프런, 정말 무료 강의도 좋은거 많고 커리큘럼 보면 탐나는 강의도 많아서 결제도 좀 했는데,

완강한 강의는 이전에 리액트 스터디 진행하면서 클론코딩했던 강의 세개가 끝이다.

그나마 스터디도 벌금제도가 있어서 했지 없었으면 이렇게까지 할 수 있었을까싶다.

다시 스터디를 진행하게 된다하더라도 벌금제도 있는, 참가비가 있는, 동기부여형, 강제형 스터디에 참여해야만 진짜 공부를 할 것 같다.

이런 우유부단함, 귀찮니즘, 게으름, 그리고 강제성 때문에 환급챌린지를 성공할 수 있었던거 같다.

초반에 실패했다면 강의를 그 때 이후로 강의를 듣지 않고 있을 수도...

(자랑은 아니지만 11/30일 마지막 일일 포스팅 이후 아직 한번도 강의를 안들었다.)

그렇기 때문에 나같은 성향을 가진 사람이라면 환급챌린지나 챌린저스, 강제성이 부여된 스터디를 통해서 공부하는 것을 추천한다.

사실 이것도 어느정도 의지가 있고 포기하지 않아야 끝까지 할수 있지만 말이다. (포기하지 말고 같이 공부합시다!)

그래서 한번에 끝내는 React의 모든것 초격차패키지 Online. 어떠한가

사실 우리 회사에서 온라인 강의를 결제해둔게 있다. (프론트엔드 관련 강의)

그런데도 한번에 끝내는 React의 모든것 초격차패키지 Online. 을 수강하게 된 이유는

내 계정으로 접속에 구애받지 않고 자유롭게 강의를 수강하고 싶은 마음도 있었고, 커리큘럼이 마음에 들었기 때문이다.

강의를 수강하기 전에(결제 전에) 커리큘럼을 꼼꼼하게 보는 편이라 한번에 끝낸다고 하고 기초만 알려주거나

투두리스트 클론코딩 한두개 하는 거라면 결제하지 않았을거다.

일단 내 경우는 인프런에서 무료 클론코딩을 하면서 조금 나온지 된 강의라 트렌드나 코드를 따라 치면서 에러가 발생하는 상황이 많긴했지만 그래도 모르는 부분, 그 당시에는 리액트의 모든 것들을 잘 몰랐기 때문에 하나하나 검색해보고 공식문서도 봤고,

벨로퍼트(김민준)님의 기초 강의도 듣고, 회사에서 프로젝트를 진행하면서 막히는 부분도 많이 찾아보고 고민해봤기 때문에

(프로젝는 결국 빠그라졌지만..)

리액트 기초 개념은 나름대로 이해를 하고 알고있다고 생각했다. 그래서 강의에 대한 기대치가 좀 있었다.

그런데...

part1. React 기초 부분은 chapter 01. React 맛보기 부터 chapter 02. React 공식문서로 디테일잡기(초급), chapter 03. React 공식문서로 디테일잡기(고급) 까지 모두 공식문서를 바탕으로 정말 기초를 알아본다.

여기서 내가 공부한다가 아닌 알아본다라고 한 이유는, 정말 공식문서를 읽는게 아닌가 하는 정도의 수준이다.

가끔 부가적으로 설명하긴 하는데, 옛날 초등학교 땐가 중학교 땐가 내가 싫어하던 영어 선생님의 수업이 생각나는 정도였다.

그냥 교과서 읽는 수준...

하지만 강의를 스킵하지 않고 꾸준히 들은 것을 후회하지 않는다.

왜냐하면 나는 그동안 리액트를 공부한다고 해놓고 공식문서를 전부 읽어본 적이 없기 때문이다.

국비지원 교육(학원)을 거쳐 지금 첫 회사에 입사해서 일하는 동안 어떤 라이브러리나 언어에 대해 자세히 나와있는 공식문서를 처음부터 끝까지 읽어본적도 없었고,

여태 보아왔던 공식문서 중에 제일 깔끔하고 명확하게 제공되고 있는 공식문서가 리액트라고 생각한다. (겪은 바에 의하면 말이다.)

그래서 오히려 공식문서를 환급챌린지 포스팅을 위해서라도 정독하게 해준 강의에 감사를 표한다.

강의를 듣고, 공식문서를 읽으면서

와.... 내가 궁금했던 내용들, 구글링해서 본 글들에서 이해하지 못했던 내용들이 여기에 다있네 라는 생각을 끊임없이 했었다.

만약 패스트캠퍼스 환급챌린지 최종 후기 글을 검색해서 보는 리액트 입문자들은 정말 꼭! 공식문서 읽었음 좋겠다.

두 번, 세 번도 필요없다. 진짜 한 번만 읽으면 나중에 필요할 때 다시 확인할 때 이해가 쏙쏙 될 거다.

part2. React 라이브러리는 아직 듣고 있는중이다. (사실상 중단 중이지만 ㅋㅋ)

chapter 01. 라이브러리 기초, chapter 02. 스타일링 라이브러리, chapter 03. UI 라이브러리 까지 완강했는데,

여기서 좋았던 점은 프론트엔드는 트렌드에 굉장히 밀접하달까??

사용하는 기술의 변화가 굉장히 빨라서 개발시작전에 어떤 라이브러리를 선택해서 사용해야되는지를 결정하는 것이 중요하다고 생각하고 있었기 때문에 다양한 라이브러리를 겪어볼수 있었다는 점이다.

단지 그 뿐....

솔직히 국비지원 학원을 수료했기 때문에.. 음 내가 java 웹개발 과정을 수료했기 때문에 코드스테이츠나 위코드 등 프론트엔드 부트캠프에 비해 커뮤니티나 트렌드를 읽을수 있는 정보를 얻을 수 있는데 굉장히 제한적이었다.

(인사이트가 좁기 때문에 검색을 해도 내가 보이는 범위만 보인다는 뜻이지, 국비지원과정을 수료한 모든 이가 그렇다는 것이 아니다.)

그렇기 때문에 리액트 뿐만 아니라 자바스크립트로 작성된 라이브러리에 대한 정보가 적었다.

어떤 라이브러리가 유명하고, 많이 사용하고, 트렌드한지 비교할 수 있는 곳을 몰랐다.

하지만, 역시 리드 개발자?? 셔서 그런지 도입부에 https://www.npmtrends.com/ 을 언급하여 비교하는 방법을 알려주었다.

이외에는 기본적으로 공식문서를 볼 줄 알고 공식문서에 나와있는 예제를 이해할 수 있을 정도면 강의를 듣지않고 혼자해봐도 무관하더라

간단하게 라이브러리 인트로 하고(공식문서 소개에 나와있는 내용의 한국어 패치인 줄 알았다).

예제를 따라 치는게 강의의 대부분이다, 공식문서에 나와있는 예제 외에 응용부분은 전무하다고 보면 된다.

사실 내 경우는 지금까지 학습했던 부분에 대해서는 거의 기대하지 않았기 때문에 현재까지의 강의 만족도는 쏘쏘, 보통이다.

빠그라진 프로젝트에서 적용하느라 고생했던 상태관리 라이브러리 부분을 제일 기대 많이하고 있다.

상태관리 라이브러리는 redux, mobx, recoil, zustand 네 개인데,

redux와 mobx 같은 경우, 공식문서가 부실하달까?? 내가 부족한거였겠지만.... 적용하는데 고생을 많이 했었다.

redux의 경우 redux, redux-saga, redux-toolkit 또 뭐였더라... 여튼 redux 기반의 상태관리 라이브러리가 엄청 많기 때문에

사실 어떤 라이브러리로 강의가 진행되었는지도 궁금하다.

(현재 들어가있는 오픈카톡방에서 redux-toolkit이 제일 진보?? 활용하기 쉽다고 해서 내심 redux-toolkit 이길 기대하고 있다.)

회사 다른 프로젝트 코드를 보니 recoil도 조금 사용한 것 같아서 상태관리 라이브러리의 조합해서 사용하는 방향이라던가 상태관리 외의 다른 목적으로 사용 가능한지 등 응용방법에 대해 기대가 크다.

데이터 모킹이나 데이터 패칭은 처음 들어보지만 swr의 경우 axios 대체제로, redux 등 상태관리 라이브러리 대체로 많은 포스팅이 있더라

프론트엔드 개발자들 사이에서도 굉장히 핫하기에 경험을 제대로 할 수 있었으면 좋겠다.

제대로 된 프로젝트를 진행해 본 적이 없어서(리액트 프로젝트) 유행하는 라이브러리를 사용해본 경험도 적기 때문에

Next.js, GraphQL 등 최신 기술을 경험해 볼 수 있다는데에서 앞으로 예정된 삽질을 조금 줄 일 수 있겠구나싶다.

클론코딩 2개 강의와 타입스크립트, 타입스크립트를 이용한 기본 기능을 구현하는 강의도 얼른 듣고 싶은데,

원래 계획대로라면 이번달 안에 한번에 끝내는 React의 모든 것 초격차 패키지 Online. 강의를 완강해야되는데

챌린지 기간이 끝났다고 강의도 안듣고 있는 판국이라 언제할 지 모르겠다.

챌린지 끝나고 공부한 내용 포스팅으로 정리하려고 맘먹었었는데 플젝하면서 쌓아둔 임시저장글 숫자도 안늘고 아예 정체된 상태...

그나마 다행이라고 생각하는건 최종 오픈 일정이 계속 미뤄지고 있다는 것 ㅋㅋ

내가 들을 강의가 아직 다 오픈되지 않아서 뭔가 부채가 덜 한것 같은 느낌적인 느낌이다.

최종오픈이 1월 7일이긴한데 느낌은 몇 번 더 미뤄질 것 같다. 그전에 꼭 다시 듣기 시작해야지..ㅋㅋㅋ

완강이 목표가 아닌 다시 듣기가 목표!

리액트 강의 커리큘럼의 50%도 수강하지 않았지만, 결론은 혼자하기 어려운 사람이라면 결제해볼만 하다.

독학은 정말 독한 사람만이 가능하다는걸 알고 있기 때문에 절대 안하는데, (독학하더라도 나는 정독파기 때문에 엄청 오래걸린다.)

온라인 강의는 강사가 코스를 안내해주기 때문에 헤메이지 않고 내가 필요한 부분을 습득할수 있기 때문에,

저렴한 비용으로 최고의 효율을 뽑아낼 수 있는 장점이 있다. 물론, 꾸준히 제대로 공부한다면 말이다.

프론트엔드 스택 관련 과정은 국비지원과정으로 개설되어있는게 없기 때문에 패스트캠퍼스 초기나 인프런 초기에는 강의가 많이 없어서 부트캠프밖에 답이 없나 싶었는데, 커리큘럼이 많이 탄탄해져있어서 괜찮은 것 같다.

이정도면 부트캠프에 비해 금액도 저렴한 편이고!

맨날 패스트 캠퍼스 강의 소개페이지를 보면 나오는게 있다. 강의 비용 비교! 진짜 동일한 스킬셋을 배운다고 봤을때 단순 가격비교만하면 패스트 캠퍼스가 가장 저렴한 것은 맞는거 같다.그러나 모두가 알고 있듯이 수강생에게 맞는 강사가 다 다르기 때문에 꼭 샘플 강의를 들어보고 결제했으면 좋겠다.

물론 나는 그렇게 하지 않았다. 왜그랬을까..?

나름 꼼꼼하게 소개페이지를 읽고 커리큘럼까지 다 보고 강사 강의스타일이랑 맞는지 체크를 안하다니...그냥 까먹은거 같기도 하고 커리큘럼이 너무 맘에 들었던거 같기도하다.

게으름 타파하고 아마 새해목표로 리액트 강의 완강이 들어갈거같긴한데,얼른 완강해서 개인 프로젝트 진행해보고싶다. 하고 싶은 주제는 있는데 언제 다 들을런지... 허허

>> 패스트캠퍼스 환급챌린리 다시하라고하면?? 한다!!! 근데 4000자는 좀 힘들다 ㅜㅜ

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.강의

패스트캠퍼스 챌린지 30일차 - 리액트 UI라이브러리 (Tailwind CSS)

****7**** — Tue, 30 Nov 2021 13:14:59 +0900

Tailwind CSS

인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링 할 수 있으면서 일괄된 디자인을 가능하도록 해준다.

부트스트랩의 css 클래스 네이밍과 매우 유사하고,

클래스 네임으로 스타일링을 미리 다 구현했기 때문에 빠른 스타일링을 위해 익히고 있으면 효율은 배가 될수 있다.

// 설치하기
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

PostCSS

CSS 전처리기이며, CSS 작성을 더 편하게 만들어주는 javascript 도구들(Plugins)이다. javascript를 이용해서, CSS를 변경한다

// postcss.config.js

module.exports = {
    parser: 'postcss-scss', // 파서 옵션을 설정하고 싶다면 여기에서
    plugins: {
    	tailwindcss: { config: './tailwindcss-config.js' },
        <플러그인>: {},
        ...
    },
};

다양한 플러그인을 사용하여 css를 편하게 변경할 수 있다.

(위에서부터 아래로 실행하기 때문에 플러그인 실행순서가 중요하다.)

Tailwind css에서는 PostCSS와 함께 autoprefixer를 설치하여 모든 브라우저에 일괄된 css를 적용할수 있도록 했다.

vscode extention - Intelli Sense

미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.

Creating your configuration file

다크모드, 디바이스 설정에 따른 테마 전환, css 적용 등 설정파일을 작성해서 쉽게 설정할 수 있다.

purge 옵션을 통해 프로덕션 빌드시 설정된 파일에서 사용되지 않는 모든 클래스를 제거하여 파일 크기를 최소화해준다.

Utility-First

버튼이나 사이드바 메뉴 등 동일한 스타일을 여러 번 사용하게 되는 경우

@apply 하여 유틸리티 클래스를 추가로 만들어서 사용할 수도 있다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 29일차 - 리액트 UI라이브러리 (Material UI)

****7**** — Mon, 29 Nov 2021 23:52:00 +0900

Material UI

구글에서 안드로이드 스마트폰에 적용하면서 알려진 UI 라이브러리이다.

현재 Antd와 더불어 가장 많이 사용되고 있다.

// 설치하기 (emotion)
npm install @mui/material @emotion/react @emotion/styled

// 설치하기(styled-components)
npm install @mui/material @mui/styled-engine-sc styled-components

Material UI에서 제공하는 아이콘을 사용하고 싶다면

npm install @mui/icons-material

를 함께 인스톨해주면 된다.

Material UI는 다른 라이브러리와 다르게 css 파일을 따로 import하지 않고 emotion 또는 styled-components을 지원한다.

따라서 프로젝트 생성시 함께 설치해주면 바로 스타일이 적용된다.

컴포넌트에 대한 예제코드 뿐 아니라 무료 템플릿도 git으로 제공하고 있어 다른 UI라이브러리보다 쉽게 접근할 수 있다.

유료 템플릿이 아닌데도 기본적으로 많이 사용하는 페이지들이 구현되어있다. (예 : 대시보드)

Material UI 스타일링

1. CssBaseline 컴포넌트

브라우저 종류에 상관없이 일괄적인 스타일 적용을 위해 css를 전역에서 정규화시켜주기 위해

App.js에 <CssBaseline /> 컴포넌트를 추가한다.

2. makeStyles Hook

Material UI에서 직관적으로 사용자 정의 스타일을 적용할수 있도록 제공하는 React hook이다.

커스텀 스타일 객체를 인자로 받기 때문에 커스텀 스타일 객체의 클래스 이름을 키로 갖고

해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖는다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 28일차 - 리액트 UI라이브러리 (React BootStrap)

****7**** — Sun, 28 Nov 2021 19:44:10 +0900

React BootStrap

부트스트랩은 바닐라JS에서도 흔히 사용되었던 라이브러리? 툴킷이다.

국비지원학원 팀프로젝트 때 부트스트랩을 적용할까 하는 의견이 나와 둘러보았던 경험이 있다.

그 당시엔 css를 공부할 겸 부트스트랩을 적용하지 않고 대부분의 css를 직접 코드했었다.

(일부 팀원이 작성한 부분에서 부트스트랩을 사용하긴 했었다.)

// 설치하기
npm install react-bootstrap bootstrap@5.1.3

// css 적용하기
import 'bootstrap/dist/css/bootstrap.min.css';

// sass로 css 설정시 import
@import "~bootstrap/scss/bootstrap";

부트스트랩도 다른 ui라이브러리와 마찬가지로 scr/index.js 나 App.js에 css를 import 해주어야 적용이된다.

Sass로도 작성되어있어서 메인 Sass/scss 파일에 import 하여 사용할 수 있다.

부트스트랩 테마와 변수들도 customize 가능하다.

"as" Prop API

'as' prop을 이용하여 작성한 컴포넌트를 렌더링시 다른 컴포넌트나 html태그로 수정할수 있다.

RTL 지원

Set dir="rtl" on the <html> element.
Add an appropriate lang attribute, like lang="ar", on the <html> element.
Include the RTL version of the CSS bootstrap.rtl.min.css in your project.
Set dir="rtl" in a ThemeProvider:

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 27일차 - 리액트 UI라이브러리 (React Semantic UI)

****7**** — Sat, 27 Nov 2021 23:21:55 +0900

React Semantic UI

semantic web이란, 기계가 사람을 대신해서 웹페이지의 정보를 이해하고,

우리에게 필요한 정보만 보여주거나 정보를 우리가 필요로 하는 형태로 가공해주는 것을 의미한다.

리액트 시맨틱 UI는 시맨틱 웹의 의미와 유사하게 웹 접근성을 좋게 만든 UI이다.

(웹 접근성을 확인하기 위해서는 스크린리더를 통해 웹페이지를 읽어보면 알 수 있다.)

처음에 Jquery 기반으로 만들어진 Semantic UI가 React용으로 제공된 라이브러리다.

// 설치하기
npm install semantic-ui-react semantic-ui-css

// CSS FILE IMPORT
import 'semantic-ui-css/semantic.min.css'

다른 UI 라이브러리와 마찬가지로 설치 후 CSS 파일을 import 해주어야 css가 적용된다.

semantic ui 공식문서에서는 다른 라이브러리와 다르게 Try it으로 예제 코드를 복사하는 것 뿐 아니라

해당 예시 내용을 바로 수정해서 확인 할 수 있도록 playground를 제공한다.

Declarative API

- 선언적 프로그래밍하여 prop으로 전달된 내용을 자동적으로 Dom 요소로 변환한다.

Augmentation

- 'as' prop을 이용하여 원래의 컴포넌트 요소가 아닌 as prop으로 기재된 요소로 변경하여 리턴한다.

Shorthand Props

- 아이콘이나 이미지 등을 컴포넌트에서 prop으로 정의하면 로드 될때 child로 자동 적용된다.

Auto Controlled State

- 자동으로 state 관리를 해주기 때문에 onChange 없이 내부적으로 값을 저장할 수 있다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 26일차 - 리액트 UI라이브러리 (Ant Design)

****7**** — Fri, 26 Nov 2021 23:09:28 +0900

Ant Design (antd)

이번 강의에서 소개된 라이브러리는 중국 ant그룹에서 사용하기 위해 만든 Ant Design이다.

사실 이 라이브러리는 전에 클론코딩을 하면서 사용한 적이 있는데 거의 복붙 수준의 기본기능 구현 위주의 강의라

깊게 다뤄보지 않았는데 이번 기회에 공식문서를 자세하게 볼수 있었다.

Antd는 OnsenUI와 다르게 React base의 라이브러리이다. 그래서인지 document의 예제도 리액트로 코드를 제공하고 있다.

npm install antd

@import '~antd/dist/antd.css';

antd에서 제공하는 디자인을 적용하기 위해서 App.css (또는 대표적으로 사용하고 있는 css 파일)에 antd.css를 import 해주어야한다.

antd는 앞서 배웠던 sass와 다른 css 전처리기 less 기반으로 작성되었다.

(less variables를 이용하여 커스텀을 좀더 쉽게할수 있다.)

기존에 Moment.js를 기반으로 적용되었던 컴포넌트들을 dayjs 와 date-fns도 지원한다.

따라서 프로젝트에 Moment.js를 사용하지 않더라도 dayjs와 date-fns 라이브러리를 사용하면 날짜관련 디자인에 아무런 영향을 주지 않는다.

디자인된 컴포넌트 뿐만 아니라 다른 UI라이브러리에서는 제공하지 않는 antd의 디자인 철학에 관해서도 자세히 설명되어있다.

색의 팔레트라던지 폰트 크기를 어떻게 정하게 되었다던지 아이콘을 어떻게 만들었는지 상세하게 담겨있어서

디자인 관점에서도 배울점이 있는 것 같다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 25일차 - 리액트 UI라이브러리 (Onsen UI)

****7**** — Thu, 25 Nov 2021 09:34:18 +0900

OnsenUI

하이브리드앱과 모바일에 특화된 UI 라이브러리이다. (JS, 앵귤러, 뷰, 리액트 모두 지원한다.)

npm install onsenui react-onsenui --save

OnsenUI도 스타일링 라이브러리처럼 install 후에 모듈을 import하여 사용하면 되지만,

UI를 적용하려면 index.html에 css를 import 해주어야한다. (사용될 컴포넌트에 import, 또는 전역에서 사용한다면 App.js에 import)

Onsen 뿐 아니라 UI 라이브러리는 대부분 css파일이 따로 있어서 import 해주어야된다고 한다.

import { Page, Toolbar, Button } from 'react-onsenui'; // Only import the necessary components
// import * as Ons from 'react-onsenui'; // Import everything and use it as 'Ons.Page', 'Ons.Button'

// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

OnsenUI의 기본 형태는 Page 컴포넌트에 모든 UI 컴포넌트가 감싸져 있어야 한다.

각 컴포넌트마다 required(필수) prop과 optional(선택) prop이 존재한다.

강의에서는 OnsenUI documents에 나와있는대로 css가 적용되어 나왔는데,

실습해보니 React.StrictMode가 적용되면서 findDOMNode 사용이 불가능해져 일부 적용이 안되는 현상이 발생했다.

<Page> 바깥으로 ui컴포넌트를 빼내어보기도 하고 <></>로 감싸보기도 했지만 css를 적용할 수 없었다.

공식문서에도 이에 대한 대처나 방안이 따로 마련되어 있지 않아보였다.

OnsenUI 강의가 총 3개(약 50분)인데 첫강의에서 react에 적용안되는 것을 보고

다른 라이브러리에서 반응형이나 모바일에 대응이 쉽다면 절대 안쓸것 같다고 생각이 들었고, 나머지 두 강의는 스킵했다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 24일차 - 리액트 스타일링하기 Sass(Scss)

****7**** — Wed, 24 Nov 2021 17:32:57 +0900

Sass(Syntactically Awesome Style Sheets)

#sass 설치하기
npm install sass

Sass는 css의 확장을 도와주는 전처리기이다.

때문에 공식문서의 가이드를 보면 Sass를 사용 후 애플리케이션이 실행될때 css로 치환된 내용도 함께 보여준다.

DRY(Don't Repeat Yourself)하지 않은 css를 sass로 작성하면 반복하여 작성해야되는 코드를 확 줄일수 있다.

Sass 공식문서를 보면 SCSS도 같이 나와있고 심지어 SCSS를 default 값으로 코드를 보여준다.

Sass와 SCSS는 동일한 기능을 제공하지만 SCSS에서 CSS를 사용하던 방식과 유사하게 중괄호와 세미콜론을 이용하여 보기 쉽고,Sass는 좀더 간결하게 작성되어있다. (강사님은 SCSS 기준으로 강의를 진행하셨고 나도 SCSS가 보기 편하다)

본 포스팅에서는 Sass는 SCSS 문법을 사용하는 것을 의미한다. (확장자도 .scss)

강의에서 컴파일러 소개는 하지 않았지만 Sass로 작성한 코드가 내가 원하는대로 css 적용되었는지 SassMeister에서 컴파일 테스트를 할 수도 있다.

SassMeister | The Sass Playground!

SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...

www.sassmeister.com

javascript처럼 변수를 선언할수 있고, 함수도 만들수 있다.

심지어 모듈처럼 다른 파일을 @use나 @import하여 해당 파일에서 선언한 변수를 가져와서 사용할 수도 있다.

그래서인지 size가 다른 라이브러리에 비해 큰데도 다운로드가 1위이다.

각 라이브러리마다 장단점이 있기 때문에 상황에 맞는 라이브러리 선택이 중요하다.

강사님의 경우,

반응형 웹을 대응하기 위해 media query를 많이 쓰고 design system이 없는 곳에서는 sass를,

개발 편의성 면에서는 CSS in JS를 적용한 emotion을 사용할 것 같다고 한다.

웹 최적화(성능)면에서 사용한 라이브러리(번들)의 사이즈가 점점 중요해지는 시점이기에 개발자 입장에서는 emotion을 선택하는게 맞을 것 같지만,

아직 공식문서에서 안내된 예제만으로는 스타일링하는데 어떤 라이브러리를 사용하는게 좋은지 잘 모르겠다.

강의를 다 듣고 나서 여러가지 실험을 해봐야될 것 같다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 23일차 - 리액트 라이브러리 emotion

****7**** — Tue, 23 Nov 2021 13:27:37 +0900

emotion

emotion은 styled-components보다 조금 늦게 배포된 라이브러리다 보니 처음 구현할때 참조한 라이브러리에 styled-components도 포함되어있다.

현재 emotion과 styled-components 두 라이브러리는 거의 유사한 형태를 띄고 있다.

emotion과 styled-components 비교한 글에 따르면 지원하는 기능은 거의 유사하고

git repogitory star 수는 styled-components가 더 많지만 번들 size나 속도는 emotion이 더 퍼포먼스가 좋다.

npm trends로 비교해보아도 emotion이 우세한 것으로 확인된다.

emotion 설치하기

npm i @emotion/styled @emotion/react

전체적인 사용 방법도 styled-components와 비슷하다.

emotion의 css를 styled-components가 벤치마킹, styled-components의 styled를 emotion에서 벤치마킹했다.

emotion도 styled-components와 마찬가지로 uniq한 class명을 자동으로 명명해주기 때문에 코드의 재사용에 편리하다.

emotion도 css In JS지만 css 특징상 global하게 적용해야되는 부분이 있기 때문에 Global 하게 적용할수 있는 패키지를 제공한다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 22일차 - 리액트 라이브러리 styled-component (2)

****7**** — Mon, 22 Nov 2021 22:25:44 +0900

어제 들은 내용에 이어서 스타일드 컴포넌트의 Motivation을 예제로 다시 살펴보았다.

1. 스타일드 컴포넌트(styled-components) 설치하기

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

2. 스타일드 컴포넌트 사용법

1) styled.{element}``

styled를 import하고 사용할 요소, 그리고 JS 리터럴 문법을 사용하여 css를 정의한다.

이렇게 정의한 element를 리액트 컴포넌트와 동일한 방식으로 사용하면 된다.

2) 기본 사용법에서 리터럴 안에 props의 값에 따라 다른 css를 적용할 수 있게 자바스크립트 문법을 사용할 수 있다.

3) Extending Styles(스타일을 상속할 수 있다.) styled(Button) ~~

4) styled-component 라이브러리로 정의한 리액트 컴포넌트에 as를 이용하여 div를 button으로 button을 a로 요소의 역할을 지정하여 구현할 수 있다.

5) css prop을 따로 지정할 수도 있고, css에서 가상선택자를 정의할수 있듯이 styled-component에서도 똑같이 구현할수 있다.

6) Attributes 삽입하기

7) animation을 구현할때는 라이브러리에서 제공하는 keyframe을 사용하여 적용한다.

document가 잘 정리되어있어서 적용하기 어렵지 않을 것 같다.

특징은 css in JS로 js 문법으로 css를 적용하기 때문에

prop이나 삼항연산자 등 js문법을 이용하여 다이나믹한 css를 적용가능하고 코드의 재사용도 용이하다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 21일차 - 리액트 라이브러리 styled-component (1)

****7**** — Sun, 21 Nov 2021 19:59:28 +0900

CSS in JS

리액트에서 css를 사용하면서 발견된 문제들을 해결하기 위한 개념을 말한다.

(JS 안에서 CSS를 작성하는 것)

페이스북에서 일하는 프론트엔드 팀에서 만든 발표자료 를 보면

리액트를 사용하면서 발견되는 css의 문제점

- Global namespace

자바스크립트는 글로벌 변수를 지양해야하는데

css의 경우 import된 곳에서는 전부 적용되는 부분이 있어 작은 의미의 글로벌로 사용된다

- Dependencies

css 간의 의존 관계를 서비스가 커질수록 관리하기가 어렵다.

- Dead Code Elimination

컴포넌트나 코드의 경우 사용안할시 삭제 등으로 관리하게되는데 css는 사용하는 건지 확인하기가 어렵다

- Minification

클래스 이름을 유의미하게 최소화하는 작업을 할수가 없다

- Sharing Constatns

JS의 코드와 값을 공유하기가 쉽지 않다

- Non deterministic Resolution

css 파일이 여러개일 때 어떤 파일을 먼저 로드했느냐에 따라 스타일이 덮어씌워지는 경우가 있다

- Isolation

스타일과 컴포넌트 파일을 따로 관리할수 없음, 재사용시 스타일 적용 문제로 인해서 css 파일까지 재사용해야함

styled-component의 특징

리액트에서 css를 사용하면서 느끼는 문제점을 해결하기 위해

css in js 개념을 적용한 대표적인 라이브러리 중 하나가 styled-component이다.

스타일드 컴포넌트(styled-components)

styled components는 우리에게 친숙한 자바스크립트로 css를 사용하게 해준다.

styled-component 설치

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

styled-component 공식문서

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 20일차 - 라이브러리 고르는 법

****7**** — Sat, 20 Nov 2021 15:36:44 +0900

라이브러리 고르는 법

프론트엔드 개발을 하려면 라이브러리가 굉장히 많아서 회사에서 주로 쓰거나 학원에서 배우면서 알게된 라이브러리만 쓰게되는데,

그렇게 누가 알려준 라이브러리를 그냥 사용할 때엔 몰랐던 라이브러리 후보군을 고르고 선택하는 방법에 대한 강의였다.

오늘은 약속이 있어서 핸드폰으로 강의를 수강해야되었던 터라 따라쳐보면서 익히는 강의는 피하고

이론적인 강의로 골라서 들어봤다.(사실 순서에도 맞았다. 더 듣지 못했을 뿐)

지난 시간에 날짜(date) 관련 라이브러리의 사용법과 해당 라이브러리를 비교했었는데

이번에는 그에 대한 복습을 진행하고 라이브러리를 선택하는데 도움이 되는 사이트들을 알아보았다.

먼저 npm으로 설치가능한 패키지(라이브러리)를 검색하거나

package.json 파일을 올리면 해당 패키지의 상세가 나온다

moment.js 를 검색했더니 번들 사이즈가 289.7KB 이고, 비슷한 패키지로 LUXON, dayjs, date-fns 가 나왔다.

이는 지난 번에 moment팀에서 추천한 라이브러리와 일치했다(많이 사용하는 라이브러리가 나오는거 같다)

해당 라이브러리의 사이즈와 검색한 라이브러리와 사이즈를 비교해주기도 한다.

어플리케이션에 사용된 라이브러리의 사이즈는 어플리케이션의 성능과도 직결되어있는 추세이기 때문에 매우 유용하게 사용할 것 같다.

npm trend는 npm에서 제공하는 서비스이다.

그래서 비슷한 라이브러리끼리 npm으로 다운로드(인스톨)한 수를 비교해볼수 있다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 19일차 - 리액트 Date 라이브러리 비교(Day.js / date-fns / moment.js)

****7**** — Fri, 19 Nov 2021 13:33:20 +0900

어제 들었던 강의 부분에 이어서 moment.js에서 더이상 업데이트를 안하기로 선언하고 이를 대체할 라이브러리를 배워보았다.

(moment.js 에서 추천한 LUXON, Day.js, date-fns, js-Joda 중에서 가장 많이 사용하는 Day.js 와 date-fns를 실습했다.)

Day.js

Day.js는 moment.js와 다르게 2KB의 작은 size를 갖는다. (모멘트는 200KB가 넘음)

여러 기능을 플러그인으로 분류해놔서인지 기본 용량이 작다.

(import되는 라이브러리의 size는 vscode extension Import Cost 로 확인 가능하다.)

moment.js와 사용법이 거의 똑같기 때문에 대체하기가 쉽고, Immutable 하지만 Tree shaking은 지원하지 않는다.

date-fns

date-fns

누군가가 moment.js 와 후발주자 date-fns, day.js, Luxon의 주요기능을 비교해 둔 내용을 보면,

date-fns가 가장 커버리지가 높은 것으로 나타난다

moment.js 보다 지원하는 Locale 수는 절반으로 적지만 이는 추후 추가될 수도 있는 부분이고,

function-per-file 스타일로 작성되어 모듈번들러인 webpack, Browserify, Rollup에 적용하기 편하고

Tree-shaking을 지원한다.

>> 사용예제는 여기를 클릭하세요 <<

https://bit.ly/3FVdhDa

마이페이지 | 패스트캠퍼스

성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 18일차 - 리액트 라이브러리 intro, Moment.js

****7**** — Thu, 18 Nov 2021 12:30:36 +0900

오늘은 리액트를 사용하면서 JSX, 컴포넌트의 상태관리, 렌더링 최적화, 성능 확인 외에 직접 구현해야될 기능들을

리액트 생태계에서 잘만들어둔 라이브러리를 찾아 적용하는 과정에 대해 배웠다.

라이브러리 적용 과정

사용 목적 > 검색 > 사용법 파악 > 적용

- 리액트를 많이 사용해보진 않았지만 동일한 기능을 제공하는 라이브러리가 굉장히 많은 것을 뼈저리게 느꼈던 적이 있다.

만들어져 있는 UI를 구매해서 사용한 적이 있는데 form 컴포넌트 폴더이름이 redux-form 과 다른 것으로 두가지가 있었다.

처음엔 상태관리 라이브러리 redux를 사용하는 컴포넌트인 줄 알았는데 그게 아니라 라이브러리를 의미하는 것이었다.

해당 라이브러리를 구글링했을때 정보가 거의 없고 공식문서의 예제를 보고 할때도 리액트 개념자체가 부족한 상황이었어서인지 쉽지 않았다.

그때 초보자가 동일한 기능에 대한 라이브러리를 선택할때는 많은 사람들이 사용하고 있는 라이브러리를 우선적으로 선택해야겠다고 생각했다.

- github / npm trends / 프론트엔트 커뮤니티 / 기술 블로그 등을 통해

기능, 성능, 라이브러리 사이즈, 인기, 최신 트렌드가 반영되었는지 등을 비교하고 선택

Moment.js

Date 라이브러리로 유명한 Moment.js 로 간단한 실습을 몇가지 진행하였다.

사용법은 간단했으나, 모멘트팀에서 새로운 자바스크립트의 흐름에 맞지 않아 더이상 업데이트를 안하기로 선언하며,

몇가지 다른 라이브러리들을 추천했다. (Luxon, Day.js, date-fns, js-Joda)

그래서 깊게 다루지 않았다.

Moment.js가 더이상 업데이트 하지 않는 이유

1. tree shaking 알고리즘이 제대로 작동하지 않음

2. mutable한 구조

3. 라이브러리의 size (기능이 많아서 엄청난 size)

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 17일차 - 리액트 PropTypes 로 타입 검사하기

****7**** — Wed, 17 Nov 2021 12:53:30 +0900

PropTypes - 타입 검사

버그 발생 확률을 낮추기 위해 애플리케이션의 타입 검사를 javascript extensions(Flow, TypeScript 등)을 사용할 수 있지만, React에서는 타입 검사 기능을 내장하고 있다.

PropType는 클래스, 함수형, 고차 컴포넌트 모두에서 사용가능하다.

PropTypes의 Validator

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // prop가 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 랜더링 될 수 있는 것들은 다음과 같습니다.
  // 숫자(numbers), 문자(strings), 엘리먼트(elements), 또는 이러한 타입들(types)을 포함하고 있는 배열(array) (혹은 배열의 fragment)
  optionalNode: PropTypes.node,

  // React 엘리먼트.
  optionalElement: PropTypes.element,

  // React 엘리먼트 타입 (ie. MyComponent)
  optionalElementType: PropTypes.elementType,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 특정 타입의 프로퍼티 값들을 갖는 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 특정 형태를 갖는 객체
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 추가 프로퍼티에 대한 경고가 있는 객체
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다.
  requiredFunc: PropTypes.func.isRequired,

  // 모든 데이터 타입이 가능한 필수값
  requiredAny: PropTypes.any.isRequired,

  // 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
  // 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
  // `oneOfType`안에서는 작동하지 않으므로 `console.warn` 혹은 throw 하지 마세요.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // `arrayOf` 와 `objectOf 에 사용자 정의 유효성 검사기를 적용할 수 있습니다.
  // 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
  // 유효성 검사기는 배열(array) 혹은 객체의 각 키(key)에 대하여 호출될 것입니다.
  // 유효성 검사기의 첫 두 개의 변수는 배열 혹은 객체 자신과 현재 아이템의 키입니다.

  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

Proptypes 특징

1. PropTypes.element를 이용하여 컴포넌트에 전달되는 children의 갯수를 제한 할 수 있다. (원래는 제한이 없음)

const children = this.props.children;

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

2. 컴포넌트에 defaultProps properties를 할당하여 props의 초깃값을 정의할 수 있다.

(전달된 props의 값이 없을때 적용된다.)

defaultProps에도 propTypes의 타입검사가 적용되기 때문에 propTypes를 정의하기 전에 선언해야한다.

// props의 초깃값을 정의합니다.
Greeting.defaultProps = {
  name: 'Stranger'
};

3. 함수형 컴포넌트에 propTypes를 적용하기 위해서는 바로 export default function Component 블라블라 하면 안되고,

별도의 함수로 컴포넌트를 선언한 뒤에 PropTypes를 추가해야한다.

오늘 part1을 완강했다.

이전 프로젝트에서 급해서 닥쳐서 사용했던 개념들이 공식문서에 자세하게 설명되어있었다.

(보통의 공식문서는 불친절한데 리액트팀은 매우 친절한 것 같다.)

eslint와 같이 사용하면 좀더 체계적으로 코드를 작성할 수 있을거 같다.

이전엔 매우 고생했는데 다시 한다면 고생을 반정도만 할거 같다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 16일차 - 리액트 Context

****7**** — Tue, 16 Nov 2021 13:33:25 +0900

Context

- context를 이용하면 props drilling을 거치지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

Context 사용법

1. const ThemeContext = React.createContext('light');

- 기본값을 가진 context를 생성한다.

(defaultValue로 light를 설정했으나 React 트리에서 가장 가까운 Provider에서 값을 지정하는 경우 해당값으로 변경된다)

2. <ThemeContext.Provider> </ThemeContext.Provider>

- 값을 전달할 하위 컴포넌트를 Provider로 감싸준다.

- Provider를 통해 전달된 값이 하위 컴포넌트에 적용되므로 컴포넌트 트리에 각각 props로 전달할 필요가 없어진다.

3. ThemedButton.contextType = ThemeContext;

- 적용할 컴포넌트에서 contextType 을 지정하여 사용한다.

** context를 사용하면 컴포넌트를 재사용하기가 어려워진다.

** Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 재렌더링된다.

>> 이를 방지하기 위해 부모의 state로 끌어올린다. <Context.Provider value={ this.state. ~~~ } >

Context.Consumer

Context.Consumer 컴포넌트의 자식은 함수여야하며, 이 함수는 context의 현재값을 받고 React 노드를 반환한다.

Context.displayName

Context 객체는 displayName 문자열 속성을 설정할 수 있다.

React 개발자 도구는 이 문자열을 사용해서 context를 보여준다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 15일차 - 리액트 Memoization

****7**** — Mon, 15 Nov 2021 21:53:12 +0900

Memoization

Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때,

이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게하는 기술이다

(출처 : 위키피디아)

React 에서는 고차컴포넌트(HOC)와 Hooks를 통해 Memoization 기능을 제공하고 있다.

React.memo

React.memo는 고차 컴포넌트로,

컴포넌트가 동일한 props로 동일한 결과의 컴포넌트를 렌더링할 경우 React.memo를 호출하여 결과를 메모이징하여 성능향상에 도움을 준다.

(컴포넌트를 바로 렌더링 하지 않고 메모이징한 이전 컴포넌트와 props를 비교하여 변화가 있을시 재렌더링 한다.)

useCallback

useCallback은 콜백 함수를 메모이징하여 콜백의 의존성이 변경되었을 때에만 변경되도록 한다.

useMemo와 달리 Memoization된 콜백을 반환한다.

** 의존성 값의 배열이 콜백에 인자로 전달되지 않기 때문에 콜백 안에서 참조되는 모든 값은 의존성 값의 배열에 표기해야한다.

useMemo

Memoization된 값을 반환한다. (변수)

useMemo로 전달된 함수는 렌더링 중에 실행되기 때문에 렌더링 중에 실행되지 않아야하는 내용은 포함하면 안된다.

useMemo도 useCallback과 마찬가지로 의존성 값의 배열이 인자로 전달되지 않기 때문에,

배열이 없는 경우 매 렌더링마다 값을 계산하게 된다.

(useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값을 다시 계산할 것이다.)

** Memoization과 같은 성능 최적화 방법을 활용해야하는 부분을 식별하기 위해

React에서는 애플리케이션이 렌더링하는 빈도와 렌더링 비용을 측정하는 Profiler API를 제공한다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 14일차 - 리액트 고차 컴포넌트(HOC)

****7**** — Sun, 14 Nov 2021 20:43:33 +0900

고차컴포넌트(HOC)

- 고차 컴포넌트는 컴포넌트를 파라미터로 받아와 새로운 컴포넌트를 반환하는 함수이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

일반 컴포넌트의 경우 props를 UI로 변환하여 return하지만,

고차 컴포넌트는 props로 컴포넌트를 전달받아 새로운 컴포넌트로 return 한다.

고차 컴포넌트의 형태는 Redux, Mobx, Relay, Material UI 등 여러 라이브러리에서도 확인할 수 있다.

공통 관심사(Cross-Cutting Concerns)에 고차 컴포넌트 사용하기

리액트에서 컴포넌트는 코드 재사용의 기본 단위이다.

따라서 컴포넌트가 완전히 동일하지 않다면 재사용이 불가능하다.

예를 들어 동일한 로직이 반복적으로 발생한다면,

이 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 하는 추상화가 필요하게 된다.

이러한 경우 고차컴포넌트를 이용하면 좋다.

- 고차 컴포넌트는 입력된 컴포넌트를 수정하지 않으며, 상속을 사용하여 동작을 복사하지 않는다.

단지 원본 컴포넌트를 랩핑하여 조합(compose)한다. (사이드이펙트가 전혀 없는 순수함수)

- 순수함수(일반함수)이기 때문에 파라미터를 원하는대로 추가할수 있고,

조금 더 반환되는 컴포넌트가 독립적일 수 있도록 prop 이름을 설정할 수도 있다.

원본 컴포넌트를 변경하지 않고 조합(Composition)하라

- 파라미터로 전달받은 원본컴포넌트를 prototype.componentDidUpdate로 직접 변경하여 반환하면 안된다.

반환된 컴포넌트에 다른 HOC를 적용하면 첫번째 HOC의 기능은 무시되고,

HOC는 생명주기가 없는 함수 컴포넌트에서도 작동하지 않는다

- 단, 새로운 컴포넌트를 반환하며 해당 컴포넌트에 componentDidUpdate 함수를 사용하면 원본 컴포넌트는 변경하지 않고

클래스, 함수 컴포넌트 모두에서 사용할수 있다.

컨벤션: 래핑된 컴포넌트를 통해 관련없는 Props 전달하기

- 고차 컴포넌트는 특정 관심사와 관련이 없는 props를 활용해야한다.

- 고차 컴포넌트에서 반환된 컴포넌트는 래핑된 컴포넌트와 비슷한 인터페이스가 있어야한다.

컨벤션: 조합 가능성(Composability) 끌어올리기

컨벤션: 간단한 디버깅을 위한 디스플레이 네임 작성 방법

컨벤션: 간단한 디버깅을 위한 디스플레이 네임 작성 방법

** render 메서드 안에서는 고차 컴포넌트 사용하지 않아야 한다.

마운트 해제 후 다시 마운트 되고 컴포넌트의 state와 하위 항목들이 손실된다.

** 정적 메소드는 따로 복사하거나, 분리하여 export 한다.

** ref는 전달되지 않는다.

컴포넌트가 HOC의 결과인 엘리먼트에 ref를 추가하는 경우,

ref는 래핑된 컴포넌트가 아닌 가장 바깥쪽 컨테이너 컴포넌트의 인스턴스를 나타낸다.

>> React.forwardRef API를 사용하여 해결 가능하다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 13일차 - 리액트 합성 (Composition)

****7**** — Sat, 13 Nov 2021 20:21:07 +0900

합성 (Composition)

- 코드를 재사용할때 리액트에서는 상속대신 합성을 사용하는 것이 더 좋다.

(합성과 상속은 객체지향에서 기능의 재사용을 하기 위해 사용하는 대표적인 기법이다. 리액트는 합성모델을 사용)

- 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.

See the Pen Untitled by Dan Abramov (@gaearon) on CodePen.

컴포넌트에서 다른 컴포넌트를 담기

1) 컴포넌트에서 자식 엘리먼트를 예상할 수 없을때, children prop을 사용하여 자식 엘리먼트를 그대로 전달한다.

html 태그를 열고 닫는 것 처럼 컴포넌트의 close 부분을 분리하여 children props을 전달한다.

(JSX에 children이 내장되어있다.)

props.children은 배열의 형태로 전달되어 props.children[0] 의 형태와도 같이 사용할 수 있다.

See the Pen Untitled by Dan Abramov (@gaearon) on CodePen.

2) prop으로 children 대신 컴포넌트를 전달한다

리액트 엘리먼트(컴포넌트)는 객체이기 때문에 prop으로 전달 가능하다.

(리액트에서 prop으로 전달할 수 있는 것에는 제한이 없다.)

function Page(props) {
  const user = props.user;
  const userLink = ( // props를 넣은 컴포넌트로 합성해서 통째로 넘김
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// 이제 이렇게 쓸 수 있습니다.
<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout userLink={...} />
// ... 그 아래에 ...
<NavigationBar userLink={...} />
// ... 그 아래에 ...
{props.userLink}

특수화

더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링하고 props를 통해 내용을 구성한다.

더 구체적인 component인 Page에서 PageLayout > userLink > Link > Avatar로 props를 전달하여 활용할수 있게 한다.

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 12일차 - 리액트 Hooks Deep하게 알아보기

****7**** — Fri, 12 Nov 2021 13:39:29 +0900

맛보기 강의에서 잠시 hooks를 간단히 알아봤었는데(hook의 일부, useState, useEffect, 컴포넌트 생명주기와의 연관성),

이번 강의에서는 좀더 자세하게 리액트 공식문서에 따로 카테고리가 분리되어있는 hooks를 다뤘다.

Hook

만들어진 배경

- 컴포넌트 간에 상태공유를 위해 기초 뼈대를 개선 (기존에는 render props 나 고차컴포넌트(HOC)를 이용하여 해결)

- 생애주기에 따른 이벤트 로직 분배의 애매함으로 코드가 복잡해지는 것을 간결화

- 클래스 생성과 사용에 대한 이해에 어려움 (그러나 Class Component를 제거하진 않을 것)

hook?

- 함수 컴포넌트에서 React state와 생명주기의 특성을 연동(연관되 부분끼리 로직을 함께 구성) 할 수 있도록 하는 함수

(클래스에서는 동작하지 않는다.)

1) State Hook

- useState는 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 리턴하는 함수

- 제공되는 setState함수는 class의 this.setState와 유사하지만 기존의 state와 새로운 state 합치지 않는다.

(그렇기 때문에 state는 이전 값을 가지고 있다)

2) Effect Hook

- useEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있도록하는 함수

- componentDidMount 나 componentDidUpdate, componentWillUnmount 에서의 로직을 한곳에 구현할수 있다.

Hook 사용 규칙

- 컴포넌트 내 최상위에서만 호출해야한다. (반복문, 조건문, 중첩된 함수 내에서 호출하면 안된다.)

- React 함수 컴포넌트 내에서만 호출 가능하다(클래스 컴포넌트, 일반 javascript 함수에서는 불가)

Custom Hook

- custom hook의 이름은 use로 시작하고 함수 내에서 다른 hook을 호출하면 커스텀 훅이라고 부를수 있다.

hook 좀 더 알아보기

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 11일차 - 리액트 List 와 Form 다루기

****7**** — Thu, 11 Nov 2021 13:15:21 +0900

List

자바스크립트와 동일하게 리액트에서도 배열이나 리스트를 이용하여 반복적으로 내용이 다른 컴포넌트를 생성할 때 Array.protoType.map() 을 사용한다.

Array.protoType.map() 알고가기 ▼

[사용 형식]

var new_array=arr.map(function callback(currentValue[, index[, array]]{

// new_array 의 새 요소 반환

}[,thisArg])

배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다.

.map()을 사용하지 않는 경우

1. you're not using the array it returns; and/or (리턴되는 배열을 사용하지 않을 경우)

2. you're not returning a value from the callback. (콜백함수가 리턴값이 없을때)

See the Pen Correct Key Example by Dan Abramov (@gaearon) on CodePen.

리스트와 Key

Key는 형제요소들끼리 고유성을 갖기 때문에 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데 도움을 주기때문에

엘리먼트 리스트를 반환하는 컴포넌트를 실행할 때 각 엘리먼트에 Key 속성을 부여하지 않으면 경고가 발생된다.

Key는 컴포넌트에 부여하는 것이 아니라 컴포넌트 내부 리스트(배열)에 속성으로 부여해야하고, (키값은 문자열로 주는것이 좋다고 한다.)

각기 다른 컴포넌트 내에 동일한 키값을 주었을 경우에도 문제없이 식별할 수 있다.

(이로 인해 리액트는 리턴되는 요소값을 체크 할때 컴포넌트 별로 체크한다는 것을 간접적으로 알수 있었다.)

또한 키는 식별에 도움을 주기 위해 사용하지만 컴포넌트로 전달하지 않아서 props로 호출할 수 없다.

Form

폼은 다른 리액트 DOM 엘리먼트와 다르게 동작한다 (기본 동작값이 있다. submit 이라던가 ...)

제출되는 formData를 관리하기 위해 리액트에서는 두가지 방법을 제시했다.

See the Pen Controlled Text Example by Dan Abramov (@gaearon) on CodePen.

1) Controller Component

[state, setState] 로 컴포넌트 내부에 상태를 form 내부의 요소의 value 속성에 주입하여,

컴포넌트에서 값을 컨트롤 할수 있게 한다. (변경은 onChange 이벤트를 이용하여 setState 로 상태값을 변경)

>> input type="file" 의 경우 읽기 전용이기 때문에 컨트롤이 불가하다.

>> value 속성을 prop으로 지정하면 사용자가 별도로 이벤트를 지정하지 않는 한 value가 변경되지 않는데,

value 값을 undefined나 null로 설정하면 입력이 가능하다.

2) Uncontroller Component

비제어 컴포넌트는 DOM 자체에서 폼 데이터를 다룬다.

이는 컨트롤 컴포넌트에서 state와 이벤트 핸들러를 통해 데이터를 핸들링 했던 것을,

ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.

>> 비제어 컴포넌트는 value를 prop으로 사용하지 않기 때문에 기본값을 주려면 defaultValue를 지정해서 사용한다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

공감

패스트캠퍼스 챌린지 10일차 - 리액트 이벤트 처리 이해하기

****7**** — Wed, 10 Nov 2021 22:50:52 +0900

이벤트

리액트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만 다르다.

1. React의 이벤트는 소문자가 아닌 camelCase 명명법을 적용한다.

2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

html : <button onclick="activeOn()"> ActiveState </button>

React : <button onClick={activeOn}> ActiveState </button>

3. React에서는 이벤트 핸들러의 return값으로 false를 전달해도 이벤트의 기본 동작을 방지할수 없어,

반드시 preventDefault를 명시적으로 호출해야한다.

함수에 전달된 파라미터 e는 합성이벤트이며,

브라우저마다 조금씩 다른 이벤트 효과를 w3c명세에 따라 정의하여 동일한 이벤트에서 동일한 사용자 경험을 할 수 있도록 해준다.

일반적인 이벤트 핸들러 패턴 : 함수로 만들어 사용 ▼

See the Pen Toggle by Dan Abramov (@gaearon) on CodePen.

클래스 컴포넌트 내에서 함수를 정의해도 constructor 내부에서 바인딩 해주지 않으면 인식하지하지 못한다.

이를 방지하기 위해 함수 정의시 화살표 함수로 사용하거나, 이벤트에 주입시 화살표 함수로 주입하여 해결한다.

** 화살표 함수를 사용하여 바인딩 해줄 경우 컴포넌트가 리렌더링시 다른 콜백함수가 생성되어,

콜백이 하위 컴포넌트에 props로 전달된다면 매렌더링마다 하위컴포넌트도 리렌더링 된다.

  1.
  handleClick = () => {
    console.log('this is:', this);
  }
  
  2.
  handleClick() {
    console.log('this is:', this);
  }
  
  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
   }

합성이벤트(SyntheticEvent)

React의 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤트 래퍼 SyntheticEvent 객체를 전달받는다.

모든 브라우저에서 동일하게 동작하지만 브라우저의 고유 이벤트와 동작이 일치하지 않기 때문에,

브라우저의 고유 이벤트가 필요하다면 nativeEvent 속성을 참고해야한다.

합성 이벤트 객체가 가지는 속성

React가 지원하는 이벤트들은 이벤트 버블링 단계에서 호출된다.

캡처 단계에서 이벤트 핸들러가 작동하길 원한다면 이벤트 이름 뒤에 Capture를 붙여서 사용하면 된다.

** 버블링과 캡처링 알아보기

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 9일차 - 리액트 컴포넌트 생명주기

****7**** — Tue, 9 Nov 2021 21:36:07 +0900

리액트의 컴포넌트 생명주기는 굉장히 유명한 도표로 한눈에 알수있다.

이 도표는 클래스 컴포넌트에 맞게 표기되어있고 강의 또한 리액트 공식문서에 나와있는대로 클래스 컴포넌트를 기준으로 설명한다.

요즘 강의를 들으면서 vscode 세팅이 귀찮을거 같아서(CRA를 이용한 세팅) repl.it을 이용하고 있는데,

클래스 컴포넌트의 this에 대한 특이점을 설명해 주었는데, 그것을 좀더 쉽게 arrow-function을 이용하면 binding을 따로 하지 않아도 해당 클래스 내의 함수인 것을 인지한다는 내용의 코드를 적용했더니

@babel/plugin-proposal-class-properties 를 install 해야된다는 에러가 떠서 install 했는데 제대로 작동하지 않아 강의로 의미만 설명듣고 넘겨버렸다.

repl.it는 webpack 대신 vite를 이용해서 번들링 하고 있는데 vite 관련 내용은 구글에 별로 나오지 않더라

추후 Go로 만들어진 번들러 vite와 Go언어에 대해서도 공부해봐야겠다. 언제 할 수 있을지 장담할 수는 없지만....

(repl.it 은 원래 번들러로 webpack을 사용했는데 vite로 바꾸었다고 한다. 속도도 빠르고 간편하다고....)

컴포넌트 생명주기

클래스 컴포넌트는 도표대로 constructor >> render >> componentDidMount 하여 렌터링되고,

업데이트는 componentDidUpdate

컴포넌트가 해제될 때는 componentWillUnmount 가 적용된다.

지난 강의에서 클래스 컴포넌트의 생명주기 메소드는 functional component에서 어떻게 대체되고 있는지 설명해주었는데 이번강 의에서도 조금 언급되었다.

constructor에서 state 초기화되는 부분은 useState 훅으로,

메소드(함수) 바인딩은 arrow - function으로(클래스 컴포넌트 내에서 생성자에서 바인딩을 직접하지 않고 간편하게 처리할 수 있는 방법),

함수형 컴포넌트 내에서는 함수를 선언에도 잘 인식한다.

componentDidMount는 useEffect 훅으로

componentWillUnmount는 useEffect의 return(clean Up)으로 구현이 가능하다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 8일차 - 리액트 Props, State

****7**** — Mon, 8 Nov 2021 22:54:38 +0900

Props

이번 강의에서는 Props의 정의라기보다는 사용방법, 컴포넌트를 추출해서 활용하는 이유(재사용성) 등을 강조했다.

- Props는 속성, Property의 약자이다. 이는 jsx를 사용하여 커스텀 컴포넌트가 다른 컴포넌터에서 사용되는 구조를 보면 왜 Property라고 명명했는지 쉽게 알수 있다.

<Component name="Props" hobby="props2" />

위와 같은 표현법을 사용하고 있는데 그냥 한눈에 봐도 html 태그와 유사하다.

컴포넌트는 React 엘리먼트를 return 함으로 props는 자식요소들에 영향을 미친다.

props 이름은 컴포넌트 관점에서 명명하는 것을 권장한다.

이는 props를 name, age, hobby로 명명하는 것이 아닌 user로 유의미하게 짓는 것을 말한다.

컴포넌트를 추출할 때 어떤한 의미를 가지고 있는 것이 개별적으로 재사용할 수 있기 때문이다.

(UI 일부가 여러번 사용되거나, 일부가 자체적으로 복잡한 경우 별도의 컴포넌트로 분리하는 것이 좋다.)

props는 읽기전용으로 react 컴포넌트는 반드시 자신의 props를 다룰때 순수함수처럼 동작해야한다.

(순수함수 : 항상 동일한 입력값에 대해 동일한 결과를 반환하며, 입력된 값 자체를 변경하려 하지 않는다. )

State

목차는 state지만 ClassComponent와 FunctionalComponent로 같은 기능 구현하는 내용이었다.

클래스 컴포넌트 vs 함수 컴포넌트

1. 상태관리

클래스 : constructor(props) 생성자로 state 초기값을 설정해주고, (항상 props로 기본 생성자(super)를 호출해야한다.)

별도 함수를 통해 this.setState() 를 호출하여 react가 state 변경된 것을 인지시킨다.

함수 : useState 훅을 통해 state 초기값을 설정하고 setState로 state값을 변경한다.

2. 컴포넌트 마운트, 언마운트시 핸들링

클래스 : componentDidMount() - 컴포넌트가 마운트(작동)되어있는 동안 실행될 코드 (컴포넌트가 dom에 렌더링된 후 실행)

componentWillUnmount() - 컴포넌트가 마운트 해제될때 실행될 코드

함수 : useEffect 훅으로 마운트되었을때 실행될 코드를 감싸준다.

useEffect CleanUp(마운트 해제시 실행되는 코드)시 실행될 코드를 return 문 안에 작성한다.

state 올바르게 사용하기

1. 직접적으로 state 수정하지 않기

2. state 업데이트는 비동기적일 수도 있다.

비동기적으로 업데이트되어 setState 바로 다음에 해당값을 사용하기 어려울수 있으니,

기본적으로 기억하고 있는 이전 state 값을 사용해라.

- 이 내용은 이전 프로젝트 때 경험해보았던 내용이다.

setState 후에 반영이되지 않아 알아보니 모든 setState를 모아 한번에 처리한다는 내용을 보았다.

즉 바로 반영되지 않으므로 이전 값을 이용하여야만 한다.

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 7일차 - 리액트 JSX 알아보기

****7**** — Sun, 7 Nov 2021 21:08:32 +0900

JSX 없이 사용하는 React

React는 자바스크립트 라이브러리로 JSX 를 사용하지 않아도 모든 것을 자바스크립트로 구현할수 있다.

그러나 리액트를 사용하면서 자바스크립트보다 JSX를 선호하는 이유는,

기존에 자바스크립트로 구현할수 있음에도 JQuery를 많이 사용했던 이유 중 하나,

자바스크립트로 작성된 코드가 JSX로 작성한 코드보다 길고 복잡하기 때문이다.

/* JSX */
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

/* JAVASCRIPT */
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

더 많은 예시보기

JSX 알아보기

- JSX는 자바스크립트를 확장한 문법이다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

- JSX의 중괄호 안에 유효한 모든 Javascript 표현식을 넣을 수 있다.

JSX도 표현식이기 때문에 컴파일이 끝나면 JSX 표현식이 Javascript 함수를 호출하고 javascript 객체로 인식되기 때문이다.

(즉, 변수, 파라미터, 반환값 등으로 사용가능하다)

- JSX는 HTML의 형식을 띄고 있어 Attribute를 가지고 있다.

Attribute에 값을 넣을때 따옴표(문자열 리터럴)를 이용해서 리터럴을 직접 입력하거나

중괄호를 사용해서 javascript 표현식을 넣어 간접적으로 값을 넣을 수 있다.

둘은 다른 형식이기 때문에 하나의 Attribute에 동시 사용은 불가능하다.

- JSX는 html보다 javascript에 가깝기 때문에 attribute를 명명할때 camelCase 명명 규칙을 사용한다.

- JSX는 XSS 공격을 방지한다(보안)

ReactDOM에서 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하여 모든 항목은 렌더링 전에 문자열로 변환된다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 6일차 - 리액트 상태 끌어올리기, 데이터 fetch하기

****7**** — Sat, 6 Nov 2021 22:40:11 +0900

See the Pen state lifting by BEGINNERWW (@beginnerww) on CodePen.

State 끌어올리기

형제컴포넌트가 존재하고 어떠한 액션을 취할때 형제컴포넌트의 state(값, 데이터 등)이 필요할 때,

해당 상태값을 각각의 컴포넌트 내에서 관리하는 것이 아닌 부모컴포넌트로 lifting up 하여 관리하는 것을 말한다.

단순한 구조(연관된 컴포넌트가 몇 되지 않을때)일 경우 lifting up(상태를 부모가 관리), Props drilling(props를 자식 컴포넌트로 하달)을 함에 있어 큰 문제가 되지 않으나,

과도할 경우 어디서 전달되어온 값인지 추적하기가 어려워져 유지보수에 문제가 생긴다.

이를 보완하기 위해 Context Api나 상태관리 라이브러리(redux, mobx 등)을 사용할 수 있다.

See the Pen data fetch by BEGINNERWW (@beginnerww) on CodePen.

데이터 Fetch 해보기

api를 통해 데이터를 가져올 경우 기본적으로 제공되는 web API 중 fetch api를 사용해보았다.

(기본적으로 제공되는 fetch 외에 ajax나 axios 등으로 네트워크 통신이 가능하다.)

상황별 핸들링

1. 로딩 - 마운트되고 데이터는 아직 받지 못한 상태

2. 데이터 - 정상적으로 통신 완료되어 데이터를 리턴받은 상태

3. 에러 - 네트워크 통신 중 서버 혹은 클라이언트에서 문제 발생으로 인해 데이터를 제대로 얻지 못한 상태

- 리액트를 공부하면서 fetch 나 axios는 promise 구조로 이루어져있다(?!)

promise는 자바스크립트 비동기 처리에 사용되는 객체로 주로 데이터를 받아와 화면에 표시할 때 사용한다.

강의 중 편집되어 설명없이 툭 튀어나온 코드

** 강의 중 fetch로 데이터를 가져와 state에 담기 전에는 정상적으로 작동했었는데

state에 담은 뒤 왼쪽 이미지와 같이 화면이 렌더링되지 않았다.

처음엔 코드펜에서 react와 react-dom import 하는 과정에서 버전이 달랐나싶어 재확인하고,

코드샌드박스, repl.it 까지 확인을 했는데 똑같이 에러도 확인되지 않은채 렌더링이 안되길래

강의에서 놓친 부분이 있나싶어 돌려봤는데 아무설명없이 갑자기 코드가 추가되었더라

(타이핑하는 부분도 편집되어있었다 갑자기 툭튀어나온 코드)

if 문을 추가하니 정상적으로 작동이 되는데 왜 그런지 이유를 찾아볼수 없어 질의를 남기려 했으나

초창기에는 그래도 메일로 질의를 받았던거 같은데 지금은 무슨 이유에서인지 질의응답을 제공하지 않는다고한다.

인프런과 패스트캠퍼스 둘다 이용해본 입장으로 인프런에서 제공하는 질의응답 서비스는 벤치마킹할 필요가 있다고 생각한다.

해당 클립을 공부하면서 먼저 질문되었던 내용과 답변을 보며 공부되는 부분도 있었고,

나도 동일한 의문을 가진 적이 꽤 있었기에 너무 만족했던 서비스였기 때문이다.

결론은 질의응답 서비스 제공해주세요 패캠

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

같이 읽으면 좋은 글

공식문서 state 끌어올리기

자바스크립트 Promise 쉽게 이해하기

패스트캠퍼스 챌린지 5일차 - 리액트 Key와 리렌더링

****7**** — Fri, 5 Nov 2021 22:57:30 +0900

key와 리렌더링

효율적으로 변화를 감지하고 리렌더링 하기 위해 리액트에서는 key라는 엘리먼트 리스트를 만들때 포함해야되는 특수한 속성을 지원한다.

key는 기존 트리와 이후 트리의 자식들이 일치하는지 확인해주는 역할을 하기 때문에,

전역에서 유일할 필요없이 형제요소에서만 유일성을 유지하면 된다.

See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen.

key는 고유하게 식별할 수 있어야 하기 때문에 대부분의 경우 데이터의 ID 값을 사용한다.

유일하게 사용할 수 있는 값이 없을 경우 인덱스를 key로 사용할 수 있으나,

인덱스를 key로 사용하게 되면 재배열이 일어날 경우 컴포넌트에 예기치않은 문제가 발생할 수 있기때문에 주의해야한다.

(여기서 인덱스는 array[index] 처럼 배열이나 리스트의 순서를 의미한다.)

** 리액트는 key를 명시적으로 지정하지 않을 경우 기본적으로 index를 key로 사용한다.

** key 속성을 명시하더라도 컴포넌트에 props로 전달되지 않기때문에 해당 값이 필요할 경우 따로 props를 넘겨주어야한다.

강의 중 JS 문법

setInterval / clearInterval

setInterval() : 주기적으로 인자를 실행하는 함수

//Hello!라는 문자열을 콘솔에 3초에 1번씩 실행한다.

function test() {

console.log("Hello!");

}

setInterval(test, 3000);

clearInterval() : 현재 진행되고 있는 함수를 중지

//인자로 함수 이름 넣어준다.

clearInterval(interval);

Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

해당되는 요소가 없을 경우 빈배열을 반환한다.

Array.prototype.includes()

배열이 특정 요소를 포함하고 있는지 판별한다. (반환값 boolean)

Array.prototype.find()

주어진 판별 함수를 만족하는 첫번쨰 요소의 값을 반환한다.

그런 요소가 없으면, undefined를 반환한다.

Array.prototype.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

같이 읽으면 좋은 글

공식문서 재조정(Reconciliation)

공식문서 리스트와 key

패스트캠퍼스 챌린지 4일차 - 리액트 element 다루기

****7**** — Thu, 4 Nov 2021 16:47:48 +0900

Element에 style 입히기

- 이미 html 태그로 정의되어있는 element는 class 를 인식하지만,

커스텀 element는 class를 인식하지 못하기 때문에 className으로 사용한다.

- style 적용은 className을 사용하여 css를 작성하는 것과 인라인으로 주입하는 방법이 있다.

- 인라인으로 주입할 때는 객체형식으로 작성해야하며, 속성명은 카멜케이스로 작성해야한다.

- 커스텀 컴포넌트 형식으로 작성하여 적용할때는 태그 내에 모든 것들이 props로 전달되기 때문에,

전체를 사용할때는 파라미터 객체로 받고, 부분 사용시에는 비구조할당으로 받는다. { className } 등

Ref로 DOM 다루기

강의에서 useRef에 대한 설명이 너무 간단해서 공식문서를 참고했다.

DOM을 직접적으로 다뤄야할 때 Ref를 사용하고, 그 외 간접적 접근이 필요할땐 props를 이용하여 해결해야한다.

createRef와 useRef의 차이점

createRef로 생성된 ref 객체는 DOM element와 클래스 컴포넌트의 인스턴스를 current 프로퍼티 값으로 받기 때문에,

인스턴스가 생성되지 않는 함수형 컴포넌트에서는 createRef를 사용할 수 없다.

따라서 함수형 컴포넌트에서는 리액트 훅에서 ref와 동일한 기능을 제공하는 useRef를 사용한다.

Form 다루기

event.preventDefault();

form태그 속성 중 action을 기재하면 submit 시에 해당 url로 form-data가 전송되는데,

action이 주어지지 않더라도 button의 submit은 기본동작이 되기 때문에 깜빡임 현상이 일어난다.

이를 방지하기 위해 onSubmit으로 submit 핸들러 함수를 지정해서 기본이벤트를 제거해주는 event.preventDefault(); 를 사용해준다.

이외 리액트에서는 close태그가 없을 경우 error 가 발생되고, label 태그의 for도 htmlFor로 변경해주어야 정상 작동된다.

유효성 검사 validation check

validation은 submit에서도 onChange에서도 가능하지만 조금더 나은 사용자 경험을 위해 onChange에서 하는 것이 좋다.

onChange시 validation check를 진행하려면 input의 value를 직접 관리(controlled)해야 한다.

직접 관리시에는 onChange 속성을 부가해야하며, value 속성을 사용

관리하지 않을시에는 defaultValue 속성 또는 value관련 속성을 부가하지 않는다. (자동으로 change event가 적용됨)

See the Pen error Boundary by BEGINNERWW (@beginnerww) on CodePen.

Error 다루기

렌더링 중에 하위 컴포넌트의 에러발생으로 페인팅 자체가 안되는 현상을 막기위해 ErrorBoundary가 적용되었다.

(자바스크립트의 catch 구문과 유사한 기능)

React 생명주기 메소드 static getDerivedStateFromError() 와 componentDidCatch() 둘 중 하나 이상을 정의하면 해당 클래스 컴포넌트는 ErrorBoundary 컴포넌트가 된다.

적용되지 않는 에러

- 이벤트 핸들러 (더 알아보기)
- 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
- 서버 사이드 렌더링
- 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

같이 읽으면 좋은 글

공식문서 ref와 DOM

공식문서 Hooks api - useRef

공식문서 ErrorBoundary

패스트캠퍼스 챌린지 3일차 - 리액트 Hooks

****7**** — Wed, 3 Nov 2021 15:57:32 +0900

리액트는 컴포넌트 단위로 사용되는데 여기서 컴포넌트란 element의 집합을 의미한다.

ex) input 여러개~, form 등등을 요소로 칭한다.

지난 강의에서 바닐라js로 구현한 검색입력창을 리액트 훅(useState)을 이용하여 구현해보았다.

See the Pen 검색입력창 vjs by BEGINNERWW (@beginnerww) on CodePen.

컴포넌트 상태관리 : useState (함수형 컴포넌트에서 변수 관리)

const [keyword, setKeyword] = useState("")

useState의 return값이 배열형태이기 때문에 변수 선언시 배열의 비구조화 할당(destructuring) 기법을 이용해 두 개의 변수를 선언한다.

(물론 const keywordState = React.useState(""); 로 선언 후 배열 index로 각각 변수 선언하여 이용할수도 있다.)

setState시 이전값(prev)이 자동으로 주입되어 있다.

따라서 [state, setState] 라면,

setState(!state)도 가능하지만 setShow((prev) => (!prev)); 도 가능하다.

컴포넌트 사이드이펙트 다루기 : useEffect

- 변수 또는 객체의 값의 변화를 인지하고 업데이트 해주는 함수

- 사이드이펙트이기 때문에, 컴포넌트가 다 그려지고나서 작동한다.

- 실행되는 조건

1) 페이지 처음 렌더링시 무조건 실행

2) useEffect 안에 배열로 지정한 useState의 값이 변경되면 실행

- 사용방법

1) useEffect(() => {});

가장 기본적인 형태이나 dependency가 없어 작은 요소라도 변화하면 계속 실행되어,

불필요한 실행이 많아져 거의 사용하지 않는다.

2) useEffect(() => {}, []);

렌더링 후 단 한번만 실행하고 싶을때 사용하는 방법

대괄호[] 안에 변수나 값을 지정하지 않고 비어있다면, 렌더링 후 단 한번만 실행된다.

3) const [name, setName] = useState();

useEffect(() => {}, [name]);

렌더링 후 한번, 배열 안 변수의 값이 변할 때마다 실행된다.

function useLocalStorage(itemName, value = ""){
  const [state, setState] = React.useState(() => {
    return window.localStorage.getItem(itemName) || value;
  });
  
  React.useEffect(() => {
    window.localStorage.setItem(itemName, state);
  }, [state]);
  
  return [state, setState];
}

커스텀 훅 만들기 : 훅의 반복

- 어떠한 액션에 대한 반복을 함수화해서 중복된 코드를 줄여나갔었는데,

훅도 마찬가지로 커스텀 훅(함수화)을 만들어서 불필요한 코드를 줄일 수 있다.

- 강의에 나온 커스텀 훅은 state를 localStorage에 저장하고 state 값이 변할때마다 localStorage에 저장된 값도 변경하는 내용이다.

- 커스텀 훅이라고 크게 무언가 다른 건 없었고 사용되는 위치, 역할에 따라 구조에 신경써야될 것 같다.

Hook flow 이해하기

- useEffect 는 render가 완료된 후 이루어진다.

- 해당 컴포넌트의 변화(update)시 useEffect clean up이 먼저 실행되고 useEffect가 실행된다.

  React.useEffect(() => {
    console.log("useEffect, empty deps");
    
     return () => {
      console.log("App useEffect [CleanUp] empty deps");
    }
  }, []);

- 컴포넌트가 Parent, Child 로 이루어져 있다면,

1. App 실행 > Parent 렌더 start > useState > Parent 렌더 end > Parent useEffect

2. 이벤트 발생으로 Child 컴포넌트 렌더시

Parent 컴포넌트 렌더 start, end > Child 렌더 start, useState, end > Parent useEffect Clean Up > Child useEffect > Parent useEffect

3. Child 컴포넌트의 요소 변경으로 인한 useEffect 실행

Child 렌더 start, end > Child useEffect Clean Up > Childs useEffect

4. 이벤트 발생으로 Child 컴포넌트 제거시

Parent 컴포넌트 렌더 start, end > Child useEffect Clean Up > Parent seEffect Clean Up > Parent useEffect

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

패스트캠퍼스 챌린지 2일차 - 리액트의 리렌더링

****7**** — Tue, 2 Nov 2021 15:25:30 +0900

오늘은 리액트의 리렌더링에 대한 내용과 이벤트 핸들링에 대해 공부하였다.

리액트의 장점 으로 많이 화자되는 것 중 리렌더링에 대한 부분이 있다.

리액트는 가상돔을 통한 컴포넌트 비교로 변경된 내용을 파악하고,

document 전체를 리렌더링하는 것이 아니라 변경된 내용이 사용되는 컴포넌트만 리렌더링한다.

이는 웹개발에 있어서 성능 최적화와 직결되는 장점이다.

브라우저엔진(웹킷) 동작과정

성능 최적화하면 리플로우(reflow), 리페인트(repaint)의 개념을 알아야된다.

브라우저가 동작할때 리플로우는 배치, 리페인트는 그리기에 해당하는데,

리플로우는 플로우작업(DOM트리 + css/javascript 를 합쳐주면서 해당 돔요소의 크기와 위치에 배치하는 것)을 다시 하는 것을 의미한다

렌더트리를 기반으로 화면을 그리는 작업을 다시 할때(수정할때) 리페인트가 호출된다.

아래 코드는 강의에서 나온 코드가 아니라 직접 리플로우와 리페인트에 대해 검색하여 읽은 포스팅에 포함된 코드이다.

이처럼 통합해서 한번에 수정하느냐, 각각 대입하느냐에 따라 리플로우 호출 횟수가 달라진다.

성능 최적화를 위해 코드를 작성할때 리플로우와 리페인트를 줄이는 것에 대해 고려해야겠다.

(리액트에서는 가상돔을 이용한 별도의 비교 알고리즘이 적용된다.)

// bad
const body = document.body;
body.style.width = '50px';
body.style.height = '100px';
 
// good
const body = document.body;
body.style.cssText = 'width: 50px; heigh: 100px;';

네이밍룰(표기법)

- 지난 강의에서 봤듯이 리액트의 커스텀 컴포넌트는 태그로 사용할때 첫글자가 대문자로 사용된다. (파스칼케이스)

- 이벤트, 변수 등등 네이밍룰 표기법으로 카멜 케이스를 적용한다.

기본 문장 on click

카멜 케이스 (camel-case) onClick
파스칼 케이스 (pascal-case) OnClick
케밥 케이스 (kebab-case) on-click
스네이크 케이스 (snake-case) on_click

전역변수를 사용해서 input 의 value 값이 변할때의 이벤트 (onChange)와 search 버튼을 클릭했을때의 이벤트를 구현했다.

See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

같이 읽으면 좋은 글

브라우저는 어떻게 동작하는가? - 네이버D2

HTTP 개요 - MDN

리액트 엘리먼트 렌더링

리액트 재조정(Reconciliation)

패스트캠퍼스 챌린지 1일차

****7**** — Mon, 1 Nov 2021 22:53:11 +0900

최근 회사에서 리액트, node.js(koa.js) spec으로 프로젝트를 진행했었는데(외주??였나 그랬음)

리액트 기본 강의(벨로퍼트님, John Ahn님 등)만 듣고 실제 리액트에서 자주 사용하는 상태관리 라이브러리, ui라이브러리 등

실전에 필요한 내용은 거의 전무하다시피 했다보니 한달내내 생고생하고 프로젝트는 빠그러지게 되었던 경험이 있었다.

리액트 처럼 생태계가 활성화 되어있고 광범위할 때에는 활용능력에 따라 완성도의 차이가 결정되는데

경험이 전무하다시피하니 프로젝트 진행속도도 더뎠고 구현한 기능 자체의 state 관리가 어려웠었다.

(상태관리 라이브러리가 redux만 있는 줄 알았었고 mobx는 처음 들어봤는데 심지어 중간에 스택이 바뀌는 참사도 있었다.)

그렇다보니 회사에서 리액트 실무 코드를 보기엔 어려울것 같았고 (진행한 리액트 프로젝트가 거의 없었다)

최근 좋은 샘플 코드가 생겼지만 이해하기도 쉽지않아 온라인 강의를 선택하게 되었다.

기존에 들어본 강의력은 조*영님이 탑이었는데 하나하나 다 결제하기엔(회사에 청구할거라) 좀 눈치 보여서

패스트 캠퍼스 환급 챌린지를 선택했다.

강의에 담겨있는 라이브러리가 압도적으로 많았기에 선택한 것도 있다.

part1. React 기초의 현재 ch 01. React 맛보기 ~ 05.Element 찍어내기 까지 수강완료 했는데

리액트 기초 강의(문법)을 한번쯤 봤었고 완전히 이해한다면 건너뛰어도 될정도이나

저같은 경우는 다른 강의에서 충분히 이해하고 있었지만 바닐라js에서 react를 사용하면서의 변천사라고 할까같은 내용의 코드를 가장 간편하게 표현하는 방법을 순차적으로 보여주는 면이 새로웠다

<div>로 감싸주었던 html element를 React.Flagment로 React.Flagment가 <>로 표현되는 등

이부분은 알고 있었던 내용이지만 이 외에도 다시보면 새로운 내용들이 종종 들어가 있더라

그래서 조금은 지루할것 같지만 part1부터 차근차근 완강할 예정이다.

강의에서 리액트 외에도 기본적인 js 문법에 대해 간단히 설명도 해주기에 es6문법을 잘 모르더라도 수강하는데 문제는 없을것 같다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

[Javascript] 날짜와 관련된 <input> 요소의 type(date, month, week) 활용하기 (유효성, 포맷전환, 데이터 핸들링)

****7**** — Mon, 9 Aug 2021 15:09:12 +0900

See the Pen onChangeInputType by BEGINNERWW (@beginnerww) on CodePen.

목적

- 기간설정으로 파라미터값을 전달하여 범위에 해당하는 데이터값을 가져온다.

과정

1. <select> 태그에 일간, 주간, 월간, 연간을 선택할 수 있게 option을 주고 값이 변할때마다 이벤트를 실행한다.

2. select 태그의 값이 변할때마다 onChange이벤트로 기간 범위 템플릿을 변경해준다.

(function onChangeCal(event))

3. 범위값이 변경될때 마다 유효성 검사를 실시한다.

(시작일 : startValidity(event) / 종료일 : endValidity(event))

<select name="condition" id="calendar" onchange="onChangeCal(event)">
	<option value="year">연도별</option>
	<option value="month" selected>월별</option>
	<option value="week">주별</option>
	<option value="day">일별</option>
</select>
<span id ="cal">
	<input type="month" class="input_type" id="startDate" style="width: 200px;" onChange="startValidity(event)"> 
	<span class="hypen"> ~ </span> 
    <input id="endDate" type="month" class="input_type" style="width: 200px;"  onChange="endValidity(event)">
</span>

<select> 태그의 기본 값을 설정하려면 <option> 태그의 속성으로 selected를 주면 default 값으로 설정된다.

Jquery로 selectbox 제어하기

테스트하기에 월별로 설정하는게 (데이터가 제일 적게나와서) 좋아서 default 값을 월별로 지정해주었다.

값 변경에 따른 이벤트 onchange="onChangeCal(event)"

selectBox의 값이 변경되면 input 태그 type도 변경되도록 함수를 작성하였다.

input 태그에는 날짜관련 type이 date, week, month 세개나 있었고,

기본 ui도 깔끔하게 되어있어서 css 때문이라면 굳이 jquery datepicker나 bootstrap datepicker를 사용하지 않아도된다.

(유효성이라던지 기타 날짜 설정 등등의 자바스크립트를 적용은 따로 해야되지만)

시작일 유효성 function startValidity(e)

옵션 선택에 따른 분기 처리를 하였다. (day와 month는 과정이 동일하나 약간의 다름으로 인해 분기처리.)

1. input type = date, week, month 는 선택한 값을 문자열로 반환해주기 때문에 오늘 이후의 날짜를 선택할 수 없도록

오늘 날짜와의 비교를 위해 선택값을 new Date(e.target.value)를 통해 date 객체로 만들어주었다.

2. var startValidity = Math.floor(now.valueOf()/(24*60*60*1000)-startD.valueOf()/(24*60*60*1000));

- 현재 날짜와 선택한 시작일 값의 차를 가지고 오늘 이후로 선택되지 않도록 하였다 (차가 0이면 오늘)

// 오늘과 날짜 비교
startD.getFullYear() == now.getFullYear() && startD.getMonth() == now.getMonth()
startD.getTime() <= now.getTime()

3. 시작일을 오늘로 선택시 종료일 또한 오늘 이후의 날짜를 선택하지 못하도록 자동으로 value값을 넣어주었다.

(.toISOString()으로 반환값에 맞는 문자열 형식으로 변경 후 slice 하여 자릿수를 맞추어 적용)

//Date 객체를 받아 week number를 반환 
function getWeekFromISODate(dt) { 
	dt.setHours(0,0,0,0); 
	dt.setDate(dt.getDate() + 3 - (dt.getDay() + 6) % 7); 
	var week1 = new Date(dt.getFullYear(), 0, 4); 

	var weekNumber = 1 + Math.round(((dt.getTime() - week1.getTime())/ 86400000 - 3 + (week1.getDay() + 6) % 7) / 7); 
	
	return dt.getFullYear() +'-W'+ weekNumber; 
} 

// YYYY-W00 형태의 ISO 8601 week number를 받아 해당 주의 월요일 Date 객체를 반환 
function getStartDateFromISOWeek(ISOweek) { 
	var y = parseInt(ISOweek.substring(0, 4)); 
	var w = parseInt(ISOweek.substring(6, 8)); 
	
	var simpleDate = new Date(y, 0, 1 + (w - 1) * 7); 
	var dayOfWeek = simpleDate.getDay(); 
	var ISOweekStart = simpleDate; 
	
	if (dayOfWeek <= 4) {
		ISOweekStart.setDate(simpleDate.getDate() - simpleDate.getDay() + 1);
	} else { 
		ISOweekStart.setDate(simpleDate.getDate() + 8 - simpleDate.getDay()); 
	} 
	
	return ISOweekStart; 
}

4. input type = "week" 는 value값이 'yyyy-W00' 형식이라 date객체로 생성하면 invalid date가 된다.

따로 ISO문자열 형식으로 변환, date형식으로 변환하는 함수를 작성하여 적용하였다.

종료일 유효성 function endValidity(e)

1. 종료일 선택은 시작일 선택 이후 선택 가능하고, 시작일 이전, 금일 이후로 선택 불가능하도록 하였다.

2. limit - selectBox option 값이 day인 경우 30일, week인 경우 3개월, month인 경우 12개월로 설정했다.

** 전체코드는 코드펜을 참고해주세요

if(selectOpt == "month"){
  startDate = startDate + '-01';

  var arr = [1,3,5,7,8,10,12];
  var endM = endDate.split('-');
  if(endM[1] == 2){
    var dayCnt = new Date(endM[0],2,0).getDate();
    if(dyaCnt == 29){
   		endDate = endDate + '-29';
    }else{
    	endDate = endDate + '-28';
    }
  }

  var cnt;
  endDate = arr.reduce((acc, cur) => {
    var acc = [];
    if(cur != endM[1]){
    	cnt = acc.push(cur);
  	}
  	return endDate + '-31';
  })

  if(cnt.length == 7 && endM[1] !=2){
  	endDate = endDate + '-30';
  }
}

** 날짜를 DB로 전달시에 (date_format을 설정안하고 yyyy-mm-dd 형식으로 전달할때)
월에 따른 마지막 날짜를 추가하여 yyyy-mm-dd 형식으로 반환하는 코드이다.

** 쿼리 조회시 date_format을 사용하여 yyyy-mm, yyyy-W00 등으로 파라미터를 전달할수 있어 지워진 코드....

시작일/종료일 유효성 검사 switch문을 사용하여 가독성 높이기

/*
* @description 시작일 유효성
* @param
* @return
*/
function startValidity(e){
var selectOpt = $("#calendar option:selected").val();
var startD = new Date(e.target.value);
if(selectOpt == "week"){
startD = getStartDateFromISOWeek(e.target.value);
}
    var startValidity = Math.floor(now.valueOf()/(24*60*60*1000)-startD.valueOf()/(24*60*60*1000));

if(startValidity < 0 ){
$('#startDate').val('');
return   $mslk('msg').err('오늘 날짜 이후로는 조회가 불가능합니다.');
}

if(startD.getTime() <= now.getTime()){
switch(selectOpt){
case 'day' :
if(startD.getFullYear() == now.getFullYear() && startD.getMonth() == now.getMonth() && startD.getDay() == now.getDay()){
startD = startD.toISOString().slice(0, 10);
$('#endDate').val(startD);
return   $mslk('msg').msg('종료일은 최대 금일까지 선택 가능합니다.');
}
break;
case 'week' :
document.getElementById("startDate").stepUp(1);
var next = document.getElementById("startDate").value;
var nextISO = getStartDateFromISOWeek(next);

if(now.getTime() < nextISO.getTime()){
document.getElementById("startDate").stepDown(1);
startD = getWeekFromISODate(startD);
$('#endDate').val(startD);
return   $mslk('msg').msg('종료일은 최대 금주까지 선택 가능합니다.');
}
break;
case 'month' :
if(startD.getFullYear() == now.getFullYear() && startD.getMonth() == now.getMonth()){
startD = startD.toISOString().slice(0, 7);
$('#endDate').val(startD);
return   $mslk('msg').msg('종료일은 최대 금월까지 선택 가능합니다.');
}
break;
default :
return;
}
}

$('#endDate').val('');
}

/*
* @description 종료일 유효성
* @param
* @return
*/
function endValidity(e){
var selectOpt = $("#calendar option:selected").val();
var endD = new Date(e.target.value);
    var endValidity = Math.floor(now.valueOf()/(24*60*60*1000)-endD.valueOf()/(24*60*60*1000));
var $startDate = $('#startDate').val();
var startD, limitD, msg;

if(selectOpt == "week"){
endD = getStartDateFromISOWeek(e.target.value);
endValidity = Math.floor(now.valueOf()/(24*60*60*1000)-endD.valueOf()/(24*60*60*1000));
$startDate = getStartDateFromISOWeek($startDate);

if($startDate.getTime() > endD.getTime()){
$('#endDate').val('');
return   $mslk('msg').err('종료일은 시작일 이전으로 선택 불가능합니다.');
}

}else{
$startDate = $startDate.split('-');
if(selectOpt == "day"){
startD = new Date($startDate[0], $startDate[1]-1, $startDate[2]);
}
if(selectOpt == "month"){
startD = new Date($startDate[0], ($startDate[1]-1));
}
if(startD.getTime() > endD.getTime()){
$('#endDate').val('');
return   $mslk('msg').err('종료일은 시작일 이전으로 선택 불가능합니다.');
}
}

if($startDate == "" || $startDate == null){
$('#endDate').val('');
return   $mslk('msg').err('종료일은 시작일 선택 후 선택 가능합니다.');
}

if(endValidity < 0){
$('#endDate').val('');
return   $mslk('msg').err('금일 이후로 선택 불가능합니다.');
}

switch(selectOpt){
case 'day' :
limitD = new Date(startD.getFullYear(),startD.getMonth()+1,startD.getDate());
msg = '종료일은 시작일로부터 30일까지 선택가능합니다.'
$('#endDate').attr('max', limitD);
break;
case 'week' :
startD = new Date($startDate[0], $startDate[1]-1, $startDate[2]);
limitD = new Date(startD.getFullYear(),startD.getMonth()+3,startD.getDate());
limitD = getWeekFromISODate(limitD);
msg = '종료일은 시작일로부터 3개월까지 선택가능합니다.'

$('#endDate').attr('max', limitD);
break;
case 'month' :
limitD = new Date(startD.getFullYear(),startD.getMonth()+12,startD.getDate());
msg = '종료일은 시작일로부터 12개월까지 선택가능합니다.'

$('#endDate').attr('max', limitD);
break;
default :
break;
}

    endValidity = Math.floor(endD.valueOf()/(24*60*60*1000)-limitD.valueOf()/(24*60*60*1000));

    if(endValidity > 0){
$('#endDate').val('');
return   $mslk('msg').err(msg);
}
}

출처

날짜 선택 제한 하기.

type=week ISO 8601 week number 변환

자바스크립트로 날짜 계산하는 다양한 방법

Jquery로 selectbox 제어하기

날짜관련 input type

날짜관련 input type(한글버전)

[Javascript] 리덕스(Redux) 알아보기

****7**** — Sun, 8 Aug 2021 08:39:31 +0900

리덕스(Redux)란?

- 자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구

이미지 출처 https://redux.vlpt.us/2-1-redux-devtools.html

리덕스 devTools 사용하기

- 리덕스를 이용하여 중앙집중식 state 관리를 할때 리덕스 devtools(크롬 확장 프로그램)을 설치하면

해당 웹애플리케이션을 사용할때의 state 변화를 구동 시작부부터 확인할수 있다.(서버 내리기전 언제든지)

- 데이터를 json형태로 받거나 아니면 반대로 데이터를 임의적으로 넣어 보는 것도 가능하다.

✔ 기본개념 - 리덕스에서 사용되는 키워드 숙지하기

var store = Redux.createStore(
    reducer
);

var state = store.getState();

1. 스토어(Store)

직접 액세스하거나 변경할 수 없는 단일 중앙 집중식 상태(single, centralized state)

즉, 전역객체(global JS object)라고 말할 수 있다.

.getState : state값을 호출할때 사용

function reducer(state, action){
    if(state === undefined){
        return {color:'yellow'}
    }
    var newState;
    if(action.type === 'CHANGE_COLOR'){
        newState = Object.assign({}, state, {color:action.color});
    }
    console.log(action.type, action, state, newState);
    return newState;
}

2. 리듀서(Reducer)

전역 상태를 변경하고 업데이트하는 로직이 포함된 순수함수 리듀서(Reducer)

- Reducer는 반드시 이전의 데이터(상태)와 Action을 매개변수(입력값)로 받는다.
- Reducer는 결과값으로 이전의 데이터를 변경시키지 않고 새로운 데이터(객체)를 만들어 반환한다.

순수함수란?
- 함수가 실행되는 곳이 어디서든, 언제든 외부의 상태를 변경하지 않으면서 동일한 입력값에는 동일한 결과값을 반환해야 한다.

 store.dispatch({type:'CHANGE_COLOR', color:'blue'});

3. 액션(Action)

리듀서 함수가 실행되도록 트리거하기 위해 디스패치(dispatch)될 수 있는 액션(Action)

4. 디스패치(Dispatch)

리듀서를 호출해서 state를 변경한다. (리듀서 호출시 현재 state와 action을 전달한다.)

store.subscribe(blue);

5. 구독(Subscriptions)

전역 상태에서 데이터를 가져오기 위한 구독(Subscriptions)

✔ 정리 - 리덕스의 흐름

subscribe(상태 변화 감지요청) >> action(상태 변화) >> dispatch(상태업데이트, store에 action 전달)

>> Store(state 갱신) >> listener(상태 변화 알림) >> 컴포넌트 리렌더링

1. 추가, 삭제와 같은 각각의 액션타입 정의

2. 액션 함수는 각각의 액션 type과 파라미터를 입력받아, 액션을 객체지향 형태로 반환

3. 상태변화가 필요해질 때, 디스패치가 액션을 발생시켜 스토어에게 알림

4. 스토어로 전달된 액션은 스토어의 리듀서 함수 호출

5. 호출된 리듀서 함수는 (이전상태, 액션타입)을 파라미터로 전달받아,
6. 정의된 로직대로 현재 상태값을 변화시켜 변화된 상태를 반환

7. 반환된 상태는 스토어에 저장

✔ 리덕스를 사용하는 이유

데이터가 스토어에 집중화(Centralized) 되어 있어서 예측 가능하며(Predictable),

데이터 흐름이 단방향이라서 디버깅하기 쉽다(Debuggable).

< Redux 의 3 원칙 >

1. Single source of truth
애플리케이션 내에 Store는 반드시 1개 뿐. Store는 반드시 1개만 존재한다.

2. State is read-only
state를 직접 변경해서는 안.된.다.
state를 변화시키는 유일한 방법은 Action을 Reducer에 dispatch(송신, 전달)하는 방법 뿐이다.
즉, state의 변경은Reducer만 할 수 있다. Reducer 이외의 공간에서는 state는 읽기 전용인 것이다.

3. Changes are made with pure functions
Reducer는 순수 함수여야만 한다.
Reducer 함수는 parameter로 기존의 state와 Action을 받는데,

Reducer 함수는 기존의 state를 직접 변경하지 않고, 새.로.운 state object(객체)를 작성해서 return해야한다.

객체의 복사 :

Object.assign(빈객체, 복사할 객체, 추가할 객체), 빈객체에 복사+추가되어 데이터를 가진 객체(주소는 빈객체)가 반환된다.

배열의 복사 :

1. concat() 함수

const arr = [1, 2, 3]; const newArr = arr.concat('a', ['b', 'c'], 'abc');

2. ... spread operator (전개 연산자)

const newArr = [ ...arr1, ...arr2, ...arr3 ];
3. push() 함수와 spread operator
const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

arr1.push(...arr2);

result : arr1[1,2,3,4,5,6]

출처

리덕스 기본개념

강의정보

플랫폼 : 인프런

강의 : 생활코딩 - Redux

강사 : Egoing Lee

url : https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

[Javascript] table에 동적으로 행(row), 열(column)추가, 삭제하기, td 너비 일정하게 유지하기

****7**** — Thu, 5 Aug 2021 16:26:37 +0900

See the Pen Dynamic generation Table Row by BEGINNERWW (@beginnerww) on CodePen.

<table>태그에 동적으로 row(행) 추가하기

- 본 코드는 10줄씩 출력되고 페이징 기능을 고려하여 작성하였다.

추가 클릭 이벤트 onClick="userAdd()"

1. var trCnt = document.getElementsByTagName('tr').length;

- tr 태그의 갯수를 구한다.

2. 기존에 입력되어있는 데이터가 있을 경우 해당 데이터의 index를 담고 있는 변수 baseCamp를 trCnt에 대입한다.

3. row가 10줄이상이 된 시점(즉, 11행)이 되었을때 첫번째 row 를 숨긴다.

4. $('#tbHead').after(inner);

- thead 아래 tr을 추가한다.

1	var targetBtn = event.target;
2	var parentTr = targetBtn.parentNode.parentNode;
3	var tdNode = parentTr.childNodes;
4	var tdArr = new Array();

5	for(var i = 0; i < tdNode.length; i++){
6		tdArr.push(tdNode[i].textContent);		
	}

수정 클릭 이벤트 function onClickUpdate()

1줄 event.target >> click event를 실행된 객체, 즉 수정btn 자체를 의미한다.

2줄 수정btn의 부모노드 td의 부모노드 tr

3줄 클릭한 버튼이 있는 tr의 자식노드(td들)

4~6줄 tdNode에서 td의 값, 우리눈에 보이는 텍스트 값을 가져오기 위해 array 객체를 생성하고 반복문을 통해 배열 객체에 담아준다.

취소 클릭 이벤트 function onClickCancle(trCnt)

1. var row = document.querySelectorAll('.updateRow');

- 수정 클릭 후 취소 이벤트인지 추가 클릭 후 취소 이벤트인지 확인할 수 있도록 수정 클릭시 class=updateRow를 추가해주었었다.

- 해당 클래스를 모두 찾아 row에 대입한다.

2. 입력칸이 활성화되어있는 row를 삭제한다.

3. row가 11줄일 때 숨겨두었던 첫번째 row를 보여준다.

4. 수정 중인 tr의 숫자 즉, 변수 row가 값을 가지고 있을때

.updateRow 인 노드를 보여주고, 해당 tr에 추가되었던 updateRow 클래스를 삭제한다.

1,2,3 모두 동적으로 생성한 table

ajax로 받아온 데이터를 바탕으로 동적으로 table 생성하기

- 조회조건이 회사, 기간이었기 때문에 해당 table은 thead부분과 모듈명이 조건에 따라 다르게 적용된다.

- 따라서 row와 column 모두 정해진 갯수가 없어 테이블 데이터를 모두 동적으로 넣어주었다.

1. 기준이 되는 기간과 모듈을 테이블에 넣어준다.

2. 데이터 넣어주기

See the Pen 테이블1 by anna (@hianna) on CodePen.

   function addColumn() {
1     const table = document.getElementById('fruits');
  
2     for(let i = 0; i < table.rows.length; i++)  {
3        const newCell =table.rows[i].insertCell(-1);
4        newCell.innerText = 'New';
     }
   }

이 코드를 보고 참고해서 구현했다.

1줄 .getElementById로 table element를 찾아 변수 table에 대입한다.

2줄 table.rows.length 테이블 row 수 만큼 반복한다.

3~4줄 table.rows[i]에 가장 뒤에 cell(td)를 추가하고 태그 안에 텍스트 'New' 를 넣어준다.

1. 테이블에 행 추가/삭제 - insertRow(idx), deleteRow(idx)
2. 테이블에 셀 추가/삭제 - insertCell(idx), deleteCell(idx)

default 값은 모두 -1이고 insertRow(), insertCell() 은 새로 추가된 요소를 가리키는 reference를 리턴한다.
-1은 가장 마지막에 추가/삭제를 실행하고, 가장 첫번째에 이벤트가 발생하려면 인덱스를 0으로 주면된다.

ajax success 전체 코드 보기

mkTable(result, selectOpt, date);

날짜가 많아서 테이블 width가 길어져 scroll이 자동으로 나오게 css 수정했으나 td 크기에 맞게 쪼그라들어 보이는 문제가 발생했다.

예전에 동적으로 만든 태그에 상위 요소의 width, height를 정의하지 않아서 고정이 안되었던적이 있어서

인라인 방식으로 tr, td, table ... 기타 등등 확인하고 추가했는데 사이즈가 반영되지 반영되지 않았다.

<colgroup>
	<col width = "16.6%">
	<col width = "16.6%">
	<col width = "16.6%">
	<col width = "16.6%">
	<col width = "16.6%">
	<col width = "16.6%">
</colgroup>

이 문제점을 해결하기 위해 colgroup은 사용할수 없다, 컬럼의 갯수가 정해져있지 않고 기간 설정에 따라 달라지기 때문이다.

colgroup 은 table의 컬럼의 일정한 width를 주어 일정한 간격을 유지하게 해준다.

그러나, 글자가 넘치는 것을 방지할수 없다.

table 태그의 css에 style="table-layout: fixed; word-break:break-all;" 추가를 해주면 cell size가 고정되면서 자동으로 줄바꿈도 된다.

table-layout : fixed; cell size를 고정해준다.

word-break : break-all; 글자수가 cell size보다 넘칠경우 자동으로 줄바꿈해준다.

출처

https://hianna.tistory.com/473

https://www.w3schools.com/jsref/met_tablerow_insertcell.asp

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

MYSQL 날짜 형변환 과 데이터가 없어도 날짜 출력하는 방법

****7**** — Wed, 4 Aug 2021 15:46:56 +0900

개발환경

- Java8, Mybatis, SpringBoot, gradle, mariaDB, JSP

목적과 문제발생

- 기간별 데이터를 출력해야하는데 데이터가 없는 기간은 조회되지 않았다.

해결방법

1. 출력할 날짜 템플릿을 만드는 쿼리를 작성한다.

2. 모듈도 중복되서 출력되면 안되므로 기간 템플릿 쿼리와 조인하여 최종 템플릿 쿼리를 픽스한다.

3. 템플릿 쿼리에 넣을 데이터를 가지고 있는 테이블을 조인한다.

테이블구조

하기는 문제해결 과정으로 쿼리 변천사이다.

SELECT 
IFNULL(MONTH(B.접수일), 0) AS 접수일
, A.세부코드명 AS 모듈명
, A.세부코드 AS 세부코드
, COUNT(B.진행상태) AS 접수건수
FROM 
(SELECT * FROM 공통코드 WHERE 회사SEQ = #{회사SEQ}) A
LEFT OUTER JOIN 
SR_BOARD B 
ON 
A.세부코드 = B.모듈
<if test="진행상태 != null and 진행상태 != ''">
AND B.진행상태= #{진행상태}
</if>
<if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
<![CDATA[	
AND DATE_FORMAT(B.접수일, '%Y-%m') >= #{startDate} 
AND DATE_FORMAT(B.접수일, '%Y-%m') <= #{endDate} 
]]>
</if>
GROUP BY 접수일, 모듈명
ORDER BY A.세부코드

1차 작성 쿼리 // 문제점 - 데이터가 없는 날짜는 회신되지 않음

- IFNULL(Column명, "Null일 경우 대체 값") // ORACLE의 경우 NVL, MSSQL의 경우 ISNULL을 사용하여 NULL 체크후 대체값 적용

- 선택한 회사의 날짜별, 모듈별 데이터를 가져와 추가 데이터 가공없이 사용하기위해 NULL체크를 진행하였다.

- <if test="진행상태 != null and 진행상태 != ''"> ~ </if>

- 이 쿼리는 접수, 완료건을 파라미터의 존재여부로 각각 조회하여, 접수 / 완료 건수를 추출한다.

2021.08.01 - [Programming/DataBase] - MYSQL 쿼리문 통계(일간/주간/월간/기간별), DATE_FORMAT() 알아보기

MYSQL 쿼리문 통계(일간/주간/월간/기간별), DATE_FORMAT() 알아보기

MySQL 쿼리문(일간/주간/월간/기간별) // 일간통계 SELECT DATE(`날짜컬럼`) AS `date`, sum(`value`) FROM test_st GROUP BY `date`; // 주간통계 SELECT DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(..

recoderr.tistory.com

1번 코드
select 
	a.Date AS 접수일
	, B.모듈명
	, B.세부코드
	, CASE WHEN B.접수건수 IS NULL THEN 0 ELSE 1 END AS 접수건수
from (
    select curdate() - INTERVAL (a.a + (10 * b.a) + (100 * c.a) + (1000 * d.a) ) DAY as Date
    from (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as a
    cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as b
    cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as c
    cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as d
) a
left outer JOIN 
(SELECT 
	IFNULL(DATE(B.접수일), 0) AS 접수일
	, A.세부코드명 AS 모듈명
   	, A.세부코드 AS 세부코드
	, COUNT(B.진행상태) AS 접수건수
FROM 
 	(SELECT * FROM 공통코드 WHERE 회사SEQ =2) A
	 	LEFT OUTER JOIN 
	 	SR_BOARD B 
	 	ON 
			A.세부코드 = B.모듈명
		GROUP BY 접수일, 모듈명 ORDER BY A.세부코드) B
on a.Date = DATE_FORMAT(B.접수일, '%Y-%m-%d')
where a.Date between '2021-05-01' and '2021-07-28'
GROUP BY a.Date
ORDER BY a.Date ;
--------------------------------------------------
2번 코드

select 
	DATE_FORMAT(a.Date,'%Y-%m') AS 접수일
	, B.모듈명
    , B.세부코드
	, CASE WHEN B.접수건수 IS NULL THEN 0 ELSE 1 END AS 접수건수
from (
select
    date_format(
        adddate('2021-05-01', INTERVAL @num:=@num+1 month),
        '%Y-%m-%d'
    ) date
FROM
	SR_BOARD
	,(select @num:=-1) num
limit
	12
	)a
left outer JOIN 
(SELECT 
	IFNULL(DATE_FORMAT(B.접수일, '%Y-%m'), 0) AS 접수일
	, A.세부코드명 AS 모듈명
  	, A.세부코드 AS 세부코드
	, COUNT(B.진행상태) AS 접수건수
FROM 
 	(SELECT * FROM 공통코드 WHERE 회사SEQ = 2) A
 	LEFT OUTER JOIN 
 	SR_BOARD B 
	ON 
	A.세부코드 = B.모듈
	GROUP BY B.접수일, 모듈
	ORDER BY A.세부코드) B
on DATE_FORMAT(a.Date,'%Y-%m') = DATE_FORMAT(B.RCEPT_DT, '%Y-%m')
where DATE_FORMAT(a.Date, '%Y-%m') between '2021-05' and '2021-07'
GROUP BY a.DATE, B.접수일, B.모듈
ORDER BY a.date;

2차 작성 쿼리 //

문제점 - 데이터가 없는 날짜도 나오긴 하지만, 날짜 중복(동일 날짜에 모듈 여러개일 가능성)이 반영되지 않음

날짜 템플릿을 만들기위해 구글링을 통해 두가지 방법을 찾았다.

<1번 코드>는 union all을 이용해 계속해서 날짜를 이어간 것이고, (현재날짜까지 날짜를 생성할수 있고 미래날짜 생성불가)

<2번 코드>는 변수 num을 선언하고 adddate(DATE_ADD의 별칭)를 통해 limit 으로 제한한 만큼 날짜를 생성하는 쿼리이다.

(미래 날짜도 생성 가능)

위와같이 조인 할 경우,

1번 코드는 데이터가 있는 날짜에 출력은 되나 해당 날짜에 여러개의 모듈이 있을때 한건만 반영되어 추출되었고,

2번 코드는 데이터 값이 있음에도 불구하고 모듈과 세부코드 컬럼값에 null을 반환했다

 SELECT
	A.DATE AS 접수일
	, A.세부코드명 AS 모듈
	, A.세부코드 AS 세부코드
	, IFNULL(B.CNT, 0) AS 접수건수
FROM (
	SELECT D.DATE
		,C.세부코드명
		,C.세부코드 
	FROM (
		SELECT DATE_FORMAT(DD.Date, '%Y-%m') AS DATE
		FROM (
			SELECT curdate() - INTERVAL (a.a + (10 * b.a) + (100 * c.a) + (1000 * d.a) ) DAY AS Date
		    from (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as a
		    	cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as b
		    	cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as c
		    	cross join (select 0 as a union all select 1 union all select 2 union all select 3 union all select 4 union all select 5 union all select 6 union all select 7 union all select 8 union all select 9) as d
		) DD
		WHERE DATE_FORMAT(DD.DATE, '%Y-%m') BETWEEN #{startDate} AND #{endDate}	
		GROUP BY DATE_FORMAT(DD.Date, '%Y-%m')
	) D
	JOIN 공통코드 C
	ON 회사SEQ = #{회사SEQ}
	AND 세부코드 IS NOT NULL
) A
LEFT OUTER JOIN (
	SELECT
		DATE_FORMAT(접수일, '%Y-%m') AS 접수일
		, 모듈
		, COUNT(*) AS CNT
	FROM SR_BOARD
	WHERE DATE_FORMAT(접수일, '%Y-%m') BETWEEN #{startDate} AND #{endDate}
	 	<if test="진행상태 != null and 진행상태 != ''">
			AND 진행상태 = #{진행상태}
		</if>
	GROUP BY DATE_FORMAT(접수일, '%Y-%m'), 모듈
) B
ON A.DATE = B.접수일
AND A.세부코드 = 모듈

3차 작성 쿼리 // 원하는 데이터값 추출 완료(감격)

애초에 템플릿을 만들때 모듈과 날짜를 조인하면 동일 날짜에 모듈이 여러개여도 데이터가 모두 추출된다.

기본 템플릿을 잘 만들어서 대입해야되는 것이었다.

코드는 모두 월별로 출력되도록 작성했지만

DATE_FORMAT의 format을 '%Y-%m-%D'로 변경하면 일간, '%Y'는 연간, '%Y-%u'는 주간으로 출력할 수 있다.

1번, 2번 코드 출처

2번 코드 https://www.python2.net/questions-1574989.htm

MYSQL 쿼리문 통계(일간/주간/월간/기간별), DATE_FORMAT() 알아보기

****7**** — Sun, 1 Aug 2021 18:08:48 +0900

MySQL 쿼리문(일간/주간/월간/기간별)

// 일간통계
SELECT DATE(`날짜컬럼`) AS `date`,
       sum(`value`)
FROM test_st
GROUP BY `date`;

// 주간통계
SELECT DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(`날짜컬럼`)-1) DAY), '%Y/%m/%d') as start,
       DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(`날짜컬럼`)-7) DAY), '%Y/%m/%d') as end,
       DATE_FORMAT(`날짜컬럼`, '%Y%U') AS `date`,
       sum(`value`)
FROM test_st
GROUP BY date;

// 월간통계
SELECT MONTH(`날짜컬럼`) AS `date`,
       sum(`value`)
FROM test_st
GROUP BY `date`;

// 기간별 통계
SELECT DATE(`날짜컬럼`) AS `date`,
       sum(`value`)
FROM test_st
WHERE DATE(`날짜컬럼`) >= STR_TO_DATE('2017-04-01', '%Y-%m-%d')
   AND DATE(`날짜컬럼`) <= STR_TO_DATE('2017-04-10', '%Y-%m-%d')
GROUP BY `date`;

STR_TO_DATE(str, format)

- DATE_FORMAT() 의 반대

- format 문자열이 날짜와 시간을 모두 포함하고 있다면 DATETIME 값을 반환한다.

그렇지 않고 날짜나 시간 둘 중 한 부분만을 포함한다면 DATE 또는 TIME 값을 반환한다.

DATE_FORMAT(date, format)

- format 문자열에 따라 date 값을 형식화한다.

DATE_ADD(date, INTERVAL expr type) , DATE_SUB(date, INTERVAL expr type)
- date 는 시작 날짜를 지정하는 DATETIME 또는 DATE 값이다.

- expr 는 시작 날짜로부터 더하거나 뺀 간격 값을 지정하는 표현이다. expr 는 문자열이다. 마이너스('-')로 시작될 수도 있다.

- type 는 어떻게 해석할지를 지정하는 키워드이다.

- INTERVAL 키워드와 type 지정자는 대소문자를 구분하지 않는다.

** 기형적인 날짜를 입력하면 결과는 NULL이 된다.

날짜 format 문자열 (좌) / INTERVAL TYPE

GROUP BY

특정 컬럼을 그룹화 하는 GROUP BY

특정 컬럼을 그룹화한 결과에 조건을 거는 HAVING

* WHERE는 그룹화 하기 전, HAVING은 그룹화 후에 적용되는 조건

// 컬럼 그룹화
SELECT 컬럼 FROM 테이블 GROUP BY 그룹화할 컬럼;

// 조건 처리 후에 컬럼 그룹화 후에 조건 처리
SELECT 컬럼 FROM 테이블 WHERE 조건식 GROUP BY 그룹화할 컬럼 HAVING 조건식;

// ORDER BY가 존재하는 경우
SELECT 컬럼 FROM 테이블 [WHERE 조건식]
GROUP BY 그룹화할 컬럼 [HAVING 조건식] ORDER BY 컬럼1 [, 컬럼2, 컬럼3 ...];

출처

MySQL - 일간/주간/월간/기간별 통계

https://bluexmas.tistory.com/626

MySQL DATE_FORMAT()

https://mindols.tistory.com/89

MySQL DATE 관련 함수

https://linuxism.ustd.ip.or.kr/510

자바스터디 자바의 정석 CH16 네트워킹

****7**** — Sun, 1 Aug 2021 16:48:37 +0900

1. 네트워킹(Networking)

네트워킹(networking)이란 두 대 이상의 컴퓨터를 케이블로 연결하여 네트워크(network)를 구성하는 것을 말한다

1.1 클라이언트/서버(client/server)

'클라이언트/서버는 컴퓨터간의 관계를 역할로 구분하는 개념이다

서버(server)는 서비스를 제공하는 컴퓨터(service provider)이고 클라이언트(client)는 서비스를 사용하는 컴퓨터(service user)가 된다.

네트워크를 구성할 때 전용서버를 두는 것을 서버기반모델 이라고 하고

각 클라이언트가 서버역할을 동시에 수행하는 것을 P2P모델 이라고 한다

- 서버는 제공하는 서비스의 종류에 따라 파일서버 메일서버, 어플리케이션 서버 등이 있다

1.2 IP주소(IP Address)

IP주소는 컴퓨터를 네트워크 상에서 구별하는데 사용되는 고유한 값이며 4byte(32 bit)의 정수로 구성되어 있다

IP주소는 네트워크주소와 호스트 주소로 누눌 수 있으며

네트워크 주소가 같다는 것은 두 호스트가 같은 네트워크에 포함되어 있다는 것을 의미한다

IP Address에 Subnet Mask를 '&'연산을 해주면 네트워크 주소를 알 수 있다

| 192 | 168 | 10 | 100 | | 255 | 255 | 255 | 0 | |--|--|--|--| |11000000|10101000|00001010|01100100| |11111111|11111111|11111111|00000000| |11000000|10101000|00001010|01100100|

1.3 InetAddress

자바에서는 IP주소를 다루기 위한 클래스로 InetAddress를 제공한다

import java.net.*;
import java.util.*;

public class Hello {

    public static void main(String[] args) {
        InetAddress ip = null;
        InetAddress[] ipArr = null;

        try{
            ip = InetAddress.getByName("www.daum.net");
            System.out.println("getHostName() :" + ip.getHostName());
            System.out.println("getHostAddress() :" + ip.getHostAddress());
            System.out.println("toString() :" + ip.toString());

            byte[] ipAddr = ip.getAddress();
            System.out.println("getAddress() :" + Arrays.toString(ipAddr));

            String result = "";
            for (int i=0; i < ipAddr.length; i++) {
                result += (ipAddr[i] < 0) ? ipAddr[i] + 256 : ipAddr[i];
                result += ".";
            }
            System.out.println("getAddress() + 256 :" + result);
            System.out.println();
        }
        catch(UnknownHostException e){
            e.printStackTrace();    
        }

        try{
            ip = InetAddress.getLocalHost();
            System.out.println("getHostName() :" + ip.getHostName());
            System.out.println("getHostAddress() :" + ip.getHostAddress());
            System.out.println();
        }
        catch(UnknownHostException e){
            e.printStackTrace();    
        }

        try{
            ipArr = InetAddress.getAllByName("www.daum.net");

            for (int i=0; i < ipArr.length; i++) {
                System.out.println("ipArr["+i+"]" + ipArr[i]);
            }
        }
        catch(UnknownHostException e){
            e.printStackTrace();    
        }

    }
}

getHostName() :www.daum.net
getHostAddress() :117.52.2.25
toString() :www.daum.net/117.52.2.25
getAddress() :[117, 52, 2, 25]
getAddress() + 256 :117.52.2.25.

getHostName() :KyleYui-MacBook-Pro.local
getHostAddress() :192.168.99.1

ipArr[0]www.daum.net/117.52.2.25
ipArr[1]www.daum.net/61.111.62.165

1.4 URL(Uniform Resource Location)

URL은 인터넷에 존재하는 여러 서버들이 제공하는 자원에 접근할 수 있는 주소를 표현하기 위한것

'프로토콜//호스트명:포트번호/경로명/파일명?쿼리스트링#참조' 형태로 이루어져 있다

http://www.codechobo.com:80/sample/hello.html?referer=codechobo#index1
프로토콜 자원에 접근하기 위해 서버와 통신하는데 사용되는 통신규약(http)
호스트명 자원을 제공하는 서버의 이름(www.javachobo.com)
포트번호 통신에 사용되는 서버의 포트번호(80)
경로명 접근하려는 자원이 저장된 서버상의 위치(/sample)
파일명 접근하려는 자원의 이름(hello.html)
쿼리query) URL에서 '?'이후의 부분(referer=javachobo)
참조(anchor) URL에서 '#'이후의 부분(index1)

import java.net.URL;

public class Main {

    public static void main(String[] args) {
        try {
            URL url = new URL("http://media.daum.net/mainnews/?type=sports#index1");

            System.out.println("url.getAuthority() :" + url.getAuthority());
            System.out.println("url.getContent() :" + url.getContent().toString());
            System.out.println("url.getDefaultPort() :" + url.getDefaultPort());
            System.out.println("url.getPort() :" + url.getPort());
            System.out.println("url.getFile() :" + url.getFile());
            System.out.println("url.getHost() :" + url.getHost());
            System.out.println("url.getPath() :" + url.getPath());
            System.out.println("url.getProtocol() :" + url.getProtocol());
            System.out.println("url.getQuery() :" + url.getQuery());
            System.out.println("url.getRef() :" + url.getRef());
            System.out.println("url.getUserInfo() :" + url.getUserInfo());
            System.out.println("url.toExternalForm() :" + url.toExternalForm());
            System.out.println("url.toURI() :" + url.toURI());


        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

-----------------------------------------------------------------------------------------
url.getAuthority() :media.daum.net
url.getContent() :[email protected]e80c
url.getDefaultPort() :80
url.getPort() :-1
url.getFile() :/mainnews/?type=sports
url.getHost() :media.daum.net
url.getPath() :/mainnews/
url.getProtocol() :http
url.getQuery() :type=sports
url.getRef() :index1
url.getUserInfo() :null
url.toExternalForm() :http://media.daum.net/mainnews/?type=sports#index1
url.toURI() :http://media.daum.net/mainnews/?type=sports#index1

1.5 URLConnection

URLConnection은 어플리케이션과 URL간의 통신연결을 나타내는 클래스의 최상위 클래스로 추상클래스이다.

URLConnection을 상속받아 구현한 클래스로는 HttpURLConnection과 JarURLConnection이 있으며,

URL의 프로토콜이 http프로토콜이라면 openConnection()은 Http URLConnection을 반환한다.

https://docs.oracle.com/javase/8/docs/api/java/net/URLConnection.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv='refresh' content='0;url=http://www.codechobo.com/main'>
  <title>코드초보</title>
</head>
<body>
</body>
</html>

데이터가 문자데이터이기 때문에 BefferedReader를 사용함

url.openStream()은 url.openConnection().getInputStream() 과 같다

import java.io.*;
import java.net.MalformedURLException;
import java.net.URL;

public class Main {

    public static void main(String[] args) {
        URL url = null;
        InputStream in = null;
        FileOutputStream out = null;
        String address = "http://www.codechobo.com";
        int ch = 0;
        try {
            url = new URL(address);
            in = url.openStream();
            out = new FileOutputStream("javajungsuk.zip");

            while( (ch=in.read()) != -1){
                out.write(ch);
            }
            in.close();
            out.close();

        } catch (MalformedURLException ex) {
            ex.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

Helloworld.class Helloworld.java Java Test.iml javajungsuk.zip out src

텍스트가 아닌 이진 데이터를 읽어서 파일에 저장

2. 소켓 프로그래밍

소켓(socket)

- 네트워크의 양방향 통신에서 양쪽 끝단으로, TCP/IP 단에서 구분할 수 있는 하나의 포트 번호를 가진다.

- Java의 소켓 프로그래밍

- java.net 패키지가 소켓 프로그래밍 클래스들을 제공한다.

2.1 TCP와 UDP

TCP/UDP

- TCP와 UDP 모두 TCP/IP 프로토콜에 포함되어있는 프로토콜로, OSI 7계층의 전송 계층(transport layer)에 해당한다.

TCP와 UDP의 특징

2.2 TCP소켓 프로그래밍

서버/클라이언트의 통신 과정

[서버] ServerSocket으로 특정 포트로 소켓을 연다.

[클라이언트] 서버의 IP 주소와 포트로 Socket을 만들어 서버에 연결 요청을 한다.

[서버] 클라이언트의 연결 요청을 받으면 Socket을 만들어 클라이언트의 소켓과 연결한다.

[서버/클라이언트] 연결된 각자의 소켓을 이용해 통신을 한다.

소켓

- 여러 소켓이 포트 하나를 공유할 수 있지만, 서버소켓은 포트 하나를 독점한다.

- 소켓은 입력스트림과 출력스트림을 가지고 상대방 소켓과 서로 교차연결해 데이터를 주고받는다.

2.3 UDP소켓 프로그래밍

특징

- 연결지향이 아니므로 ServerSocket이 따로 필요하지 않다.

- 소켓은 DatagramSocket를 사용해 만들어 DatagramPacket에 데이터를 담아 통신한다.

- DatagramPacket에는 헤더와 데이터가 있으며 헤더에 수신할 상대방의 정보(주소와 포트)를 저장한다.

[React ] Redux와 useReducer의 차이, Context API 사용하기

****7**** — Sun, 1 Aug 2021 09:57:02 +0900

redux 사용전 컴포넌트의 상태 변화의 전달 과정

redux를 사용 후 컴포넌트 외부에서 상태관리 과정

Redux를 사용하는 이유

리액트 프로젝트의 경우 대부분의 작업시 부모 컴포넌트를 통해 하위 컴포넌트의 데이터를 업데이트 한다.

(데이터의 연관이 있는 컴포넌트끼리 ref를 사용하여 전달할 수 있으나 코드가 꼬이는 문제로 인해 지양한다)

컴포넌트의 갯수가 적을때는 문제가 되지 않지만, 점점 늘어날수록 유지보수의 어려움이 발생한다.

예를 들어 변수명의 변경을 하면 연관된 컴포넌트 파일 모두에 수정을 거쳐야된다.

그러나 리덕스를 사용하게 되면 데이터 상태를 컴포넌트 외부에서 관리하기 때문에 과정을 단순화 시킬 수 있게 된다.

- Reducer : 업데이트 로직을 정의하는 함수

< Redux 흐름 >

subscribe(상태 변화 감지요청) >> action(상태 변화) >> dispatch(상태업데이트, store에 action 전달)

>> Store(state 갱신) >> listener(상태 변화 알림) >> 컴포넌트 리렌더링

- 여러 컴포넌트를 거칠 필요없이 부모 컴포넌트에서 다이렉트로 받는거처럼 리덕스 스토어에서 원하는 상태값을 전달한다.

(단방향 데이터 흐름으로 데이터 구조의 단순화)

< Redux 의 3 원칙 >

1. Single source of truth
애플리케이션 내에 Store는 반드시 1개 뿐. Store는 반드시 1개만 존재한다.

3. Changes are made with pure functions
Reducer는 순수 함수여야만 한다.
Reducer 함수는 parameter로 기존의 state와 Action을 받는데,

Reducer 함수는 기존의 state를 직접 변경하지 않고, 새.로.운 state object(객체)를 작성해서 return해야한다.

useReducer

useReducer와 context api 로 redux의 기능을 대부분 구현할 수 있다

(그러나 프로젝트의 규모가 크다면 useReducer와 context api 조합의 한계로 비동기적인 작업시 불편하다)

import React, { useState, useReducer } from 'react';

const initialState = { //state 정의
	winner: '',
    turn : 'O',
    tableData : [['','',''], ['','',''], ['','','']],
};

const reducer = (state, action) => { //state 변화 정의
	
};
const [state, dispatch] = useReducer(reducer, initialState);

- 여러개의 state를 하나의 state로 만들어 state의 갯수를 줄여준다

< Redux와 useReducer 차이 >

1. 리덕스는 dispatch를 통해 state가 동기적으로 변경, useReducer는 비동기적으로 변경

table 최적화 하기

useEffect를 사용하여 렌더링 될 때 console.log로 두번째인자(바뀌는 값)을 넣어서 어떠한 값의 변화로 인한 리렌더링인지 확인할 수 있다.

최종 하위 컴포넌트(td) 값의 변화로 리렌더링 될때 부모 컴포넌트까지 렌더링되지 않도록 memo를 사용하여 props의 값을 기억해준다.

** React.memo : 기억해둔 props의 값이 같다면 기억해둔 값을 재사용, 다르다면 리렌더링

** useCallback : 함수 자체를 메모이징해서 재사용한다. 불필요한 렌더링을 줄일수 있다.

//부모 컴포넌트
import React, { useReducer, createContext } from 'react';

const Context = createContext({initial});
const value = useMemo(() => ({tableData : state.tableData, dispatch}), [state.tableData]);

<Context.Provider value={ value }>
	<Form />
    <Table />
</Context.Provider>


//하위 컴포넌트
import React, { useContext } from 'react';
import { Context } form '부모컴포넌트';

const Table = () => {
	const { tableData } = useContext(Context);
    ...
};

export default Table;

Context Api

context api를 제외하고 useReducer만 사용할 경우, dispatch 와 reducer를 통해 변경할 데이터(action)을 props로 최종 변경할 컴포넌트까지 전달해주어야한다.

- 자식 컴포넌트 뿐 아니라 해당 데이터를 사용할 컴포넌트 모두에게 다이렉트로 전달할 수 있다.

1. createContext(기본값) 으로 Context 객체를 생성

2. Context.Provider : 하위 컴포넌트에 접근 가능하도록 명시

- Context.Provider 의 value 속성으로 데이터 전달

- value 속성에 객체로 명시해주면 렌더링시 계속 새로운 객체를 만들기 때문에 최적화에 문제가 발생,

>> useMemo를 사용(캐싱)하여 메모이징하여 해결한다. dispatch는 항상 같으므로 변경될 값에 기재하지 않아도된다.

3. useContext : Context(부모 컴포넌트에서 전달될 props)를 자식컴포넌트에서 불러오도록 해준다.

< Context API 최적화 >

memo, useMemo를 적절히 사용하여 캐싱을 통해 최적화

출처

https://react.vlpt.us/basic/20-useReducer.html

강의정보

플랫폼 : 인프런

강의 : 웹 게임을 만들며 배우는 React

강사 : 제로초(조현영)

개발환경 : vscode, react

url : https://www.inflearn.com/course/web-game-react

자바스터디 자바의 정석 CH15 입출력(I/O)

****7**** — Sun, 25 Jul 2021 08:04:32 +0900

1. 자바에서의 입출력

1.1 입출력이란?

컴퓨터 내부 또는 외부의 장치와 프로그램간의 데이터를 주고받는 것

1.2 스트림(stream)

자바에서 입출력을 수행하기 위해 두 대상을 연결하고 데이터를 운반하는데 사용되는 연결통로

먼저 보낸 데이터를 먼저 받게 되어 있으며 중간에 건너뜀 없이 연속적으로 데이터를 주고 받는다

1.3 바이트기반 스트림 - InputStream, OutputStream

스트림은 바이트단위로 데이터를 전송하며 입출력 대상에 따라 다음과 같은 입출력스트림이 있다.

[표15-2] InputStream과 OutputStream에 정의된 읽기와 쓰기를 수행하는 메서드

1.4 보조스트림

실제 데이터를 주고받는 스트림이 아니기 때문에 데이터를 입출력할 수 있는 기능은 없지만,

스트림의 기능을 향상시키거나 새로운 기능을 추가할 수 있다

// 먼저 기반스트림을 생성한다.
FileInputStream fis = new FileInpustStream("test.txt");

// 기반스트림을 이용해서 보조스트림을 생성한다.
BufferedInputStream bis = new BufferedInputStream(fis);
bis.read(); // 보조스트림인 BufferedInputStream으로부터 데이터를 읽는다.

입력기능은 BufferedInputStream과 연결된 FileInputStream이 수행하고, 보조 스트립인 BufferedInputStream은 버퍼만을 제공한다.

버퍼를 사용한 입출력과 사용하지 않은 입출력간의 성능차이 때문에 대부분의 경우에 버퍼를 이용한 보조스트림을 사용한다.

보조스트림의 종류

1.5 문자기반 스트림 - Reader, Writer

Java에서는 한 문자를 의미하는 char형이 1byte가 아니라 2byte이기 때문에

바이트기반의 스트림으로 2byte인 문자를 처리하는 데는 어려움이 있다.

이 점을 보완하기 위해서 문자기반의 스트림이 제공된다.

2. 바이트기반 스트림

2.1 InputStream과 OutputStream

스트림의 종류에 따라서 mark()와 reset()을 사용하여 이미 읽은 데이터를 되돌려서 다시 읽을 수 있다.

이 기능을 지원하는 스트림인지 확인하는 markSupported()를 통해서 알 수 있다.

flush()는 버퍼가 있는 출력스트림의 경우에만 의미가 있으며, OutputSteream에 정의된 flush()는 아무런 일도 하지 않는다.

프로그램이 종료될 때, 사용하고 닫지 않은 스트림을 JVM이 자동적으로 닫아 주기는 하지만,

스트림을 사용해서 모든 작업을 마치고 난 후에는 close()를 호출해서 반드시 닫아주어야 한다.

그러나 ByteArrayInputStream과 같이 메모리를 사용하는 스트림과

System.in, System.out과 같은 표준 입출력 스트림은 닫아 주지 않아도 된다.

2.2 ByteArrayInputStream과 ByteArrayOutputStream

메모리, 즉 바이트배열에 데이터를 입출력 하는데 사용되는 스트림이다.

2.3 FileInputStream과 FileOutputStream

파일에 입출력을 하기 위한 스트림

3. 바이트기반의 보조스트림

3.1 FilterInputStream과 FilterOutputStream

생성자 FilterInputStream(InputStream in)는 접근 제어자가 protected이기 때문에

FilterInputStream의 인스턴스를 생성해서 사용할 수 없고 상속을 통해서 오버라이딩되어야 한다.

FilterInputStrem/FilterOutputStream을 상속받아서 기반스트림에 보조기능을 추가한 보조스트림 클래스는 다음과 같다.

FilterInputStream의 자손 - BufferedInputStream, DataInputStream, PushbackInputStream 등
FilterOutputStream의 자손 - BufferedInputStream, DataOutputStream, PrintStream 등

3.2 BufferedInputStream과 BufferedOutputStream

스트림의 입출력 효율을 높이기 위해 버퍼를 사용하는 보조스트림으로 한 바이트씩 입출력하는 것보다는 버퍼(바이트 배열)를 이용해서 한 번에 여러 바이트를 입출력하는 것이 빠르기 때문에 대부분의 입출력 작업에 사용된다.

BufferedInputStream은 입력소스로 부터 버퍼 크기만큼의 데이터를 읽어다 자신의 내부 버퍼에 저장하고 프로그램에서는 버퍼에 저장된 데이터를 읽으며, 다 읽고 그 다음 데이터를 읽기 위해 read메서드가 호출되면, BufferedInputStream은 입력소스로부터 다시 버퍼크기 만큼의 데이터를 읽어다 버퍼에 저장하는 작업을 반복한다.

BufferedOutputStream 역시 버퍼를 이용해서 출력소스와 작업을 하게 되는데 프로그램에서 write메서드를 이용한 출력이 BufferedOutputStream의 버퍼에 저장된다.

버퍼가 가득 차면, 그 때 버퍼의 모든 내용을 출력소스에 출력한다.

버퍼가 가득 찼을 때만 출력소스에 출력을 하기 때문에, 마지막 출력부분이 출력소스에 쓰이지 못하고 BufferedOutputStream의 버퍼에 남아있는 채로 프로그램이 종료될 수 있다는 점을 주의해야 한다.

그래서 프로그램에서 모든 출력작업을 마친 후 BufferedOutputStream에 close()나 flush()를 호출해서 마지막에 버퍼에 있는 모든 내용이 출력소스에 출력되도록 해야 한다.

3.3 DataInputStream과 DataOutputStream

데이터를 읽고 쓰는데 있어서 byte단위가 아닌, 8가지 기본 자료형의 단위로 읽고 쓰기 가능

3.4 SequenceInputStream

여러 개의 입력스트림을 연속적으로 연결해서 하나의 스트림으로부터 데이터를 읽는 것과 같이 처리할 수 있도록 도와준다.

3.5 PrintStream

데이터를 기반스트림에 다양한 형태로 출력할 수 있는 print, println, printf와 같은 메서드를 오버로딩하여 제공

4. 문자기반 스트림

4.1 Reader와 Writer

Char 배열을 사용한 문자기반의 스트림 제공. Text의 읽기/쓰기에 특화되어있다.

4.2 FileReader와 FileWriter

File로부터 Text 데이터를 읽고 쓰는데 사용된다.

4.3 PipedReader와 PipedWriter

주로 쓰레드 간에 데이터를 주고 받을 때 사용된다.

4.4 StringReader와 StringWriter

StringReader/Writer는 입출력 대상이 메모리인 스트림이다. 내부의 StringBuffer에 저장된다.

StringReader는 문자열 데이터를 Reader 형태로 변환해준다.

문자열 데이터를 오직 Reader를 기반으로 접근하게 변환이 필요할 경우 유용한다.

5. 문자기반의 보조스트림

5.1 BufferedReader와 BufferedWriter

BufferedReader/BufferedWriter 버퍼를 이용해서 입출력의 효율을 높일 수 있게 해주는 역할을 한다.

Buffer Size : bufferedReader의 버퍼사이즈를 정할 수 있다.

5.2 InputStreamReader와 OutputStreamWriter

Byte 기반 스트림을 문자기반 스트림으로 연결시켜주는 역할을 한다.

주로 파일이나 네트워트 연결로부터 Byte로 제공되는 Text를 문자기반(char)로 읽고 쓰기를 할 경우에 많이 쓰인다.

Read() : char 값의 정수를 리턴한다.

6. 표준입출력과 File

6.1 표준입출력 - System.in, System.out, System.err

위의 세 스트림은 JVM이 시작할때 초기화가 되므로 직접 초기화를 할 필요가 없다.

System.in System.in 은 콘솔의 키보드 인풋에 연결된 inputStream이다.

System.out System.out은 PrintStream이다. 콘솔로 데이터를 내보는 역할을 한다.

System.err System.err PrintStream이다. System.out과 비슷하지만 일반적으로 에러메세지를 내보낼때 사용된다.

System.out과 System.err 사용비교

try {
  InputStream input = new FileInputStream("test.txt");
  System.out.println("File opened...");

} catch (IOException e){
  System.err.println("File opening failed:");
  e.printStackTrace();
}

6.2 표준입출력의 대상변경 - setOut(), setErr(), setIn()

InputStream으로 System.in, OutputStream으로 System.out, System.err의 읽기/쓰기를 새로우 스트림으로 변경할 수 있다.

System Stream 설정

OutputStream output = new FileOutputStream("system.out.txt");
PrintStream printOut = new PrintStream(output);

System.setOut(printOut);

6.3 RandomAccessFile

입력과 출력을 하나의 클래스로 파일에 대한 입력/출력을 모두 할 수 있게 설계된 클래스.

가장 큰 장점은 파일의 어느 위치에나 읽기/쓰기가 가능하다는 점이다.

//RandomAccessFile 생성, 
//생성자의 두번째 값 'rw'는 RandomAccessFile의 mode 값이다. rw는 Read/Write를 뜻한다.

RandomAccessFile file = new RandomAccessFile("file.txt", "rw");

//RandomAccessFile 이동

RandomAccessFile file = new RandomAccessFile("file.txt", "rw");

//단위 : Byte
file.seek(200);

long pointer = file.getFilePointer();

file.close();

//RandomAccessFile 읽기/쓰기

//읽기 사용법
RandomAccessFile file = new RandomAccessFile("file.txt", "rw");

int aByte = file.read();

file.close();

//쓰기 사용법
RandomAccessFile file = new RandomAccessFile("file.txt", "rw");

file.write("Hello World".getBytes());

file.close();

6.4 File

File클래스는 파일과 파일의 메타데이터의 접근하는 기능만 제공한다.

만약 파일의 내용을 읽기/쓰기 기능을 원한다면 file Stream을 이용해야한다.

만약 NIO를 사용한다면 파일에 대한 접근은 java.nio.FileChannel를 사용해야한다.

//File 초기화
File file = new File("input-file.txt");

//존재여부 확인 (객체 생성시점에 실제 파일이 존재하지 않아도 예외가 발생되지 않는다)
boolean fileExists = file.exists();

//디렉토리 생성
//mkdir() / mkdirs()

File file = new File("c:\\users\\javastudy\\newdir");
boolean dirCreated = file.mkdir();

//파일 길이
long length = file.length();

//Rename
boolean success = file.renameTo(new File("c:\\data\\new-file.txt"));

//파일삭제
boolean success = file.delete();

//디렉토리확인
boolean isDirectory = file.isDirectory();

//파일리스트
File file = new File("c:\\data");
String[] fileNames = file.list();
File[]   files = file.listFiles();

7. 직렬화(Serialization)

7.1 직렬화란?

직렬화란 객체를 데이터 스트림으로 만드는 것을 뜻한다.

객체에 저장된 데이터를 스트림에 쓰기위해 연속적인(serial) 데이터로 변환하는 것을 말한다.

7.2 ObjectInputStream과 ObjectOutputStream

ObjectInputStream/ObjectOutputStream은 raw 한 byte를 읽는 대신,

InputStream/OutputStream을 통해 자바 오브젝트를 읽을 수 있도록 해준다.

7.3 직렬화가 가능한 클래스 만들기 - Serializable, transient

직렬화가 가능한 클래스를 만드는 방법은 Serializable 인터페이스를 원하는 클래스에 구현(선언)하면 된다.

password와 같은 직렬화하지 않을 멤버변수 앞에 transient 를 붙이면 된다.

7.4 직렬화가능한 클래스의 버전관리

serialVersionUID

- 직렬화된 객체를 역직렬화할 떄는 직렬화 했을 떄와 같은 클래스를 사용해야한다.

- 하지만 클래스의 내용이 변경된 경우 역직렬화에 실패한다.

static 변수나 transient가 붙은 인스턴스변수는 직렬화에 영향을 미치지 않는다.

[React] 리액트 라이프사이클, Hooks 알아보기

****7**** — Sun, 25 Jul 2021 05:39:59 +0900

웹게임 가위바위보

본 강의에서는 react의 component를 상속받은 class component를 사용한다.

React에서 extends Component 후 성능적 이슈가 있을지 react devtools로 확인 후 pure Component를 사용할지 결정

쓸데없이 리렌더링이 일어날 때는 pure Component로 전환한다.

가위바위보 이미지(한개)를 css로 세가지로 보여줄 수 있다

background-postion을 통해 하나의 이미지의 부분부분을 재조명해준다

React life cycle

클래스 컴포넌트의 경우 -> constructor -> render -> ref (있을 경우) -> componentDidMount

-> (setState/props 의 값이 변경될 때 -> shouldComponentUpdate(true) -> render -> componentDidUpdate)

-> 부모 컴포넌트가 현재 컴포넌트 제거시 -> componentWillUnmount -> 컴포넌트 소멸

componentDidMount(){ } // 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 한다.

componentDidUpdate(){ } // 리렌더링 후

componentWillUnmount(){ } // 컴포넌트가 제거되기 직전, 비동기 요청의 정리를 많이 한다.

** hooks 에는 라이프사이클 메소드가 없지만 useEffect가 라이프사이클 메소드의 역할을 해준다.

단 useEffect의 경우 두번째 인자값을 넣을 경우 해당 state의 변화감지시 컴포넌트 전체가 리렌더링 되기 때문에 주의해야한다.

useEffect(() => { // componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
  interval.current = setInterval(changeHand, 100);
  
  return () =>{ // 두번째 인자가 빈값일 때 componentWillUnmount 역할
  	clearInterval(interval.current)
  }

}, [imgCoord]); // 두번째 인자가 있을때 componentDidMount 와 componentDidUpdate 둘 다 수행

** class 컴포넌트와 hooks 의 라이플사이클 비교

- useEffect는 [ ] 인자값으로 update될 state를 지정한다면,

클래스의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리한다.

(state 별로 처리 내용이 다르면 useEffect가 여러개가 될 수 있다.)

리액트 Hooks

useRef

- getElementById, querySelector 와 같이 특정 DOM을 선택해야되는 상황에서 사용

- 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 역할

(변수값이 변해도 리렌더링되지 않음, 설정후 바로 조회가능)

[ 관리할수 있는 변수 ]

1. setTimeout, setInterval 을 통해서 만들어진 id

2. 외부 라이브러리를 사용하여 생성된 인스턴스

3. scroll 위치

[사용방법]

1. useRef() 를 사용하여 Ref 객체를 생성한다.

1-1. useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.

2. 생성한 객체를 선택하고 싶은 DOM 에 ref 값으로 설정한다.

3. Ref 객체의 .current 값은 설정한 DOM 을 가르킨다.

4. Ref 객체의 값(.current)을 수정할 때에는 .current 값을 수정하고, 조회시에도 .current를 조회한다.

const nameInput = useRef();

const onClick = () => {
    nameInput.current.focus();
}

const nextId = useRef(4);
const onCreate = () => {
    // ...
    nextId.current += 1;
};
  
return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

useLayoutEffect 와 useEffect 비교

useEffect

- 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행

- 비동기적으로 실행됨

- DOM과 인터렉션이 없는 경우에 사용(대부분 경우)

useLayoutEffect

- 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트

- 동기적으로 실행됨

- 렌더링 직후 DOM요소의 값을 읽을 때 유용함(scroll position등)

- DOM을 mutate할 경우에 사용

useEffect를 사용할 경우 effect가 실행됨과 동시에 DOM에 mutation이 일어날 경우 flickering이 발생할 수 있다.

이러한 경우 useLayoutEffect를 사용해서 flickering(깜빡임)을 막을 수 있다.

결국 두 hook의 가장 큰 차이점은 실행 시점이고,

렌더링할 state가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect을 사용하는 편이 좋다.

로또추첨기 중 반복수행될 부분을 component화 하였다.

고차 컴퍼넌트(Higher Order Component, HOC)

- HOC는 컴포넌트를 다른 컴포넌트로 감싸는 형태를 취하고 있고 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return한다.

- React.memo를 사용하면 PureComponent 역할을 한다.

React.memo

[작동기전]

- 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다.

- 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

- 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정한다.

- 비슷한 역할을 하는 useCallback, useMemo, React.memo 는 렌더링 최적화로 컴포넌트의 성능을 실제로 개선할 때 사용한다.

- React.memo 에서 두번째 파라미터에 propsAreEqual 이라는 함수를 사용하여 특정 값들만 비교를 하는 것도 가능하다.

useMemo()

- 값을 메모이징해서 재사용한다.

- useMemo의 두번째 인자가 변경되면 초기화된다.

function NameTag(props) {
	return useMemo( () => <div>{props.name}</div> , [props.name] )
}

useCallback()

- 함수 자체를 메모이징해서 재사용한다.

- useCallback의 두번째 인자가 변경되면 초기화된다.

- useCallback은 상하위 컴포넌트 관계에서 상위 컴포넌트가 넘겨주는 props를 핸들링하는 역할을 하는데,

하위 컴포넌트가 그 부분을 신경쓰지 않고 상위 컴포넌트의 렌더링 여부에 따라 자동으로 렌더링이 되면 무용지물이되기 때문에

React.memo 또는 useMemo와 함께 사용되어야한다.

const memoizedCallback = useCallback(
	() => {doSomething(a,b);}, //inline callback
	[a, b], //dependency
);

Hooks 사용 tip

1. hooks를 한번 선언하면 순서를 지켜주어야 한다.

따라서 조건문 안에는 절대 넣으면 안되고, 함수나 반복문, 다른 hooks 안에서 사용하면 안된다.

2. useEffect 패턴

useEffect(() => {
	//ajax
}, []); //componentDidMount에서만 실행


const mounted = useRef(false);
useEffect(()=>{
	if(!mounted.current){
    	mounted.current = true;
    } else {
    	//ajax
    }
}, [바뀌는 값]); //componentUpdate에서만 실행

출처

라이프사이클 메소드 https://react.vlpt.us/basic/25-lifecycle.html

useRef https://react.vlpt.us/basic/12-variable-with-useRef.html

useLayoutEffect https://merrily-code.tistory.com/46

React.memo() https://ui.toast.com/weekly-pick/ko_20190731

강의정보

플랫폼 : 인프런

강의 : 웹 게임을 만들며 배우는 React

강사 : 제로초(조현영)

개발환경 : vscode, react

url : https://www.inflearn.com/course/web-game-react

[React ] Webpack으로 React.js 빌드하기

****7**** — Sun, 25 Jul 2021 02:47:24 +0900

webpack을 사용하는 이유

웹팩은 모듈 번들러이다.

코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업하는 경우가 많은데,

브라우저에서 파일 단위 모듈 시스템을 이용하는 것은 많은 네트워크 비용 낭비를 유발한다.

이러한 문제를 해결하기 위해서 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 웹팩이다.

웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 취급한다.

(webpack을 이용하기 위해서는 node(자바스크립트 실행기)를 알아야한다.)

(실제 서비스할때는 webpack을 사용하지 않고, 개발시에만 사용한다.)

모듈 시스템과 웹팩 설정 (react 기본 설정)

1. package.json (실행 명령어 >> npm init)

package.json

package name: (ifn_webgame) ifn_webgame (원하는 이름)

author, license 를 제외한 나머지는 건너뛰어도 된다.

2. npm install 명령어로 필요한 라이브러리를 설치한다.

react, react-dom, webpack, webpack-cli 설치

(webpack은 개발환경에서만 사용되므로 npm install -D 로 표기하여 dependency를 나누어 준다.)

npm i -D @babel/core @babel/preset-env babel-loader (babel도 개발환경에서만 사용됨)

babel/core : 바벨의 기본적인 라이브러리

babel/preset-env :브라우저에 맞는 최신문법을 적용

babel-loader : babel과 webpack을 연결시켜줌

3. index.html

//index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가위바위보</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
    
</body>
</html>

4. client.jsx

//client.jsx

const React = require('react');
const ReactDom = require('react-dom');

ReactDom.render('컴포넌트명', document.querySelector('#root'));

ReactDom.render('컴포넌트명', document.querySelector('#root'));

<div id = "root"></div> 안에 app.js를 통에 렌더링된 컴포넌트의 return값(jsx, html태그들)을 넣어준다.

5. webpack.config.js

//webpack.config.js

const path = require('path'); 

module.exports = {
	//webpack 속성들을 기재
    name: 'setting',
    mode: 'development', //실서비스 :production
    devtool: 'eval', //빠르게
    resolve: {
        extensions:['.js', '.jsx'] //entry에 포함되는 파일의 확장자를 확인해주기 때문에 app.js라면 app 만 넣어줘도 된다.
    },
    entry : {
        app: ['./client.jsx', './RSP.jsx'], // 만약 client.jsx 에서 RSP.jsx를 rendering 하고 있으면 client.jsx 만 기재해도 된다. 
    }, //입력
    
    module: {
        rules : [{
            test : /\.jsx?/,  // .js 와 .jsx 에 적용하겠다는 정규식
            loader : 'bable-loader',
            options : {
                presets : [ 
                	['@babel/preset-env', {
                    	targets : {
                        	browsers : ['last 2 chrome versions'],
                        },
                    }],
                    '@babel/preset-react',
                ],
                plugins : [ '@babel/plugin-proposal-class-properties'],
            },
        }],
    },
    
    output :{
        path : path.join(__dirname, 'dist'),  // __dirname 현재폴더에 dist를 합쳐서 반환한다.
        filename: 'app.js',
        publicPath:'/dist/', //가상경로
    }, //출력
    devServer :{
        publicPath:'/dist/',
        hot : true,
    },
};

html에서 <script src="./dist/app.js"></script> 하나만 넣을수 있도록 webpack.config.js 에서 설정해준다.

resolve 속성에 extensions에 적은 확장자를 적어두면,

entry 속성에 포함될 파일의 확장자를 확인해주기 때문에 app.js라면 app 만 넣어줘도 된다.

resolve 속성이 없을 경우 : app: ['./client.jsx', './RSP.jsx']

resolve extensions:['.js', '.jsx'] 로 정의할 경우 app:['client', 'RSP']

// 만약 client.jsx 에서 RSP.jsx를 rendering 하고 있으면 client.jsx 만 기재해도 된다.

module 속성은 babel을 적용시키기 위한 옵션을 나열한다.

create-react-app 을 이용하면 이와 같은 설정을 사용하지 않아도 된다.

.js 와 .jsx 는 큰 차이가 없지만 파일안에 jsx 문법(만들어둔 컴포넌트 불러오기 ex <GuGuDan / >)을 사용할 경우

jsx 확장자를 사용하는 것이 좋다.

(jsx문법을 담고있다, 리액트전용 파일임을 파일명만 보고 인지할수 있어 편리하다.)

webpack.config.js 를 이용하여 하나의 js 파일을 생성하려면,

npx webpack 을 실행하거나 package.json 파일에 webpack 실행 명령어를 생성해야한다.

("scripts": { "webpack" : webpack } )

webpack.config.js 빌드시 에러 내용 1

[webpack-li] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module should be an object:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, generator?, noParse?, parser?, rules?, strictExportextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`).

module: [{ rules 라고 적어서 발생한 에러이다. module: { rules 로 수정하면 정상적으로 빌드된다.

webpack.config.js 빌드시 에러 내용 2

[webpack-cli] Failed to load 'C:\Users\mslk\Documents\ifn_webgame\webpack.config.js' config
[webpack-cli] TypeError: webpack.LoaderOptionsPlugin is not a constructor
    at Object.<anonymous> (C:\Users\mslk\Documents\ifn_webgame\webpack.config.js:33:9)
    at Module._compile (C:\Users\mslk\Documents\ifn_webgame\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (C:\Users\mslk\Documents\ifn_webgame\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WebpackCLI.tryRequireThenImport (C:\Users\mslk\Documents\ifn_webgame\node_modules\webpack-cli\lib\webpack-cli.js:32:22)
    at loadConfig (C:\Users\mslk\Documents\ifn_webgame\node_modules\webpack-cli\lib\webpack-cli.js:1536:38)
    at WebpackCLI.resolveConfig (C:\Users\mslk\Documents\ifn_webgame\node_modules\webpack-cli\lib\webpack-cli.js:1639:44)

LoaderOptionsPlugin이 웹팩 2에서 2로 웹팩 1에서 마이그레이션을 위해 사용된다.

webpack 공식문서 plugins 에서 v5 plugin 리스트에서는 확인되지 않아서 삭제된 줄 알았는데

new webpack.LoaderOptionsPlugin ({ debug : true })

대신

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

new LoaderOptionsPlugin ({ debug : true })

로 변경하면 정상적으로 빌드된다.

webpack-dev-server 와 핫 리로딩

npm install -D

react-refresh

@pmmmwh/react-refresh-webpack-plugin

webpack-dev-server

- webpack-dev-server 는 핫 리로딩 기능을 가지고 있어서 변경점을 감지할 수 있다.

따라서 소스코드의 변경이 생기면 감지 후 webpack.config.js 빌드 결과물 즉, app.js 를 수정해준다.

(핫리로딩을 하기 위해 설치한 플러그인 react-refresh, @pmmmwh/react-refresh-webpack-plugin )

(핫리로딩은 리로딩(새로고침)과 다르게 기존의 데이터를 유지하면서 리로딩해준다.)

출처

웹팩 공식문서 https://webpack.js.org/concepts/

강의정보

플랫폼 : 인프런

강의 : 웹 게임을 만들며 배우는 React

강사 : 제로초(조현영)

개발환경 : vscode, react

url : https://www.inflearn.com/course/web-game-react

자바스터디 자바의 정석 CH14 람다와 스트림

****7**** — Sun, 18 Jul 2021 11:50:08 +0900

1. 람다식

1.1 람다식이란?

람다식은 메서드를 하나의 식(expression)으로 표현한 것.

- 객체 지향 언어보다는 함수 지향 언어에 가깝다.
- 함수를 간략하면서도 명확한 식으로 표현할 수 있도록 해준다.
- 메서드를 람다식으로 표현하면 메서드의 이름 및 반환 값이 없어지므로 익명 함수 라고도 한다.
- 람다식의 형태는 매개 변수를 가진 코드 블록이지만 런타임 시에는 익명 구현 객체를 생성한다.

1.2 람다식 작성하기

(타입 매개변수) -> { 실행문; ... }

ex)
- ExFunctionInterfaceTest.java

interface ExFunctionInterface
{
    public void method();
}


public class ExFunctionInterfaceTest
{
    public static void main(String[] args)
    {
        ExFunctionInterface test = new ExFunctionInterface() {

            public void method() {
                System.out.println("test");
            }
        };

        test.method();
    }
}

public class ExFunctionInterfaceTest
{
    public static void main(String[] args)
    {
        ExFunctionInterface test = () -> System.out.println("test");

        test.method();
    }
}

반환 값이 있는 메서드의 경우 return 대신 expression 으로 대신할 수 있다. (expression인 경우 ; 를 붙이지 않는다.)

람다식에 선언된 매개변수 타입은 추론이 가능한 경우 생략 가능(대부분 생략가능)

매개 변수가 하나인 경우 ()를 생략할 수 있다.

{} 안 문장이 하나인 경우 생략할 수 있다.

1.3 함수형 인터페이스(Functional Interface)

함수형 인터페이스는 람다식을 다루기 위한 인터페이스로 하나의 추상 메서드만 정의되어 있어야 한다.

단, static 메서드와 default 메서드의 개수에는 제약이 없다.

- 함수형 인터페이스 타입의 매개변수 및 반환 타입이 함수형 인터페이스 타입이라면

람다식을 참조하는 참조변수를 매개변수로 지정하고 람다식을 가리키는 참조변수를 반환하거나 또는 람다식 자체를 반환할 수 있다.

- 람다식은 Object 타입으로 형변환 할 수 없으며, 오직 함수형 인터페이스로만 형변환이 가능하다.

- 람다식 내에서 참조하는 지역변수는 final이 붙어 있지 않아도 상수로 간주되며,

외부 지역변수와 같은 이름의 매개변수를 허용하지 않는다.

- 함수형 인터페이스는 @FuntionalInterface 라는 어노테이션을 붙일 수 있다.

(컴파일러에서 추상메서드를 갖춘 인터페이스인지 검사,

javadoc 페이지에서 해당 인터페이스가 함수형 인터페이스임을 알 수 있도록 한다)

1.4 java.util.function패키지

- 메서드 이름 통일

- 재사용성

- 유지보수

1.5 Function의 합성과 Predicate의 결합

- Function의 합성 andThen :

a.andThen(b) : a함수 적용 후 b함수 적용

compose : a.compose(b) : b함수 적용 후 a함수 적용

identity : 항등 함수 (잘 사용되지 않는 편이나 map()으로 변환 작업할 때 변환없이 그대로 처리하고자할 때 사용)

- Predicate의 결합

and() : and 조건

or() : or 조건

negate() : not

isEqual() : 두 대상 비교

1.6 메서드 참조

메서드를 참조해서 매개변수의 정보 및 리턴 타입을 알아내어 람다식에서 불필요한 매개 변수를 제거하는 것이 목적.

람다식의 매개 변수는 메서드의 매개값을 전달하는 역할만 하기 때문에 메서드 참조를 이용하면 깔끔하게 처리할 수 있다.

(a, b) -> Math.max(a, b);

Math::max

하나의 메서드만 호출하는 람다식은 '클래스이름::메서드이름 또는 '참조변수::메서드이름'으로 바꿀 수 있다.

생성자의 메서드 참조

Supplier<MyClass> s = () -> new MyClass();
Supplier<MyClass> s = MyClass::new;

Function<Integer, MyClass> f = (i) -> new MyClass(i);
Function<Integer, MyClass> f2 = MyClass::new;

Function<Integer, int[]> f = x -> new int[x];
Function<Integer, int[]> f2 = int[]::new;

2. 스트림(stream)

2.1 스트림이란?

다양한 데이터 소스를 표준화된 방법으로 다루기 위한 라이브러리이다.

스트림은 데이터 소스를 추상화하고, 데이터를 다루는데 자주 사용되는 메서드들을 정의해놓았다.

스트림을 이용하면, 배열이나 컬렉션 뿐만 아니라 파일에 저장된 데이터도 모두 같은 방식으로 다룰 수 있다.

/*
문자열 배열 'strArr'과 같은 내용의 문자열을 저장하는 리스트 'strList'가 있을 때, 
각각의 데이터를 정렬하고 출력하는 방법
*/

String[] strArr = {"aaa", "ddd", "ccc"};
List<String> strList = Arrys.asList(strArr);

/* 방법1. 예전의 방법 */

Arrays.sort(strArr);
Collections.sort(strList);

for(String str : strArr) 
  System.out.println(str);

for(String str : strList)
  System.out.println(str);
  
/* 방법2. 스트림을 활용한 방법 */

Stream<String> strStreamArr = Arrays.stream(strArr);
Stream<String> strStreamList = strList.stream();

strStremaArr.sorted().forEach(System.out::println);
strStreamList.sorted().forEach(System.out::println);

스트림의 연산

1. 중간연산 : 연산결과가 스트림. 연속해서 수행 가능.

2. 최종연산 : 연산결과가 스트림이 아님. 스트림의 요소를 소모하기 때문에 단 한번만 가능

중간연산

모든 중간연산의 결과는 스트림이지만, 연산 전의 스트림과 같은 것은 아니다.

String[] strArr = {"dd", "aaa", "cc", "cc", "e"}

Stream<String> Stream = Stream.of(strArr);
Stream<String> distenctedStream = stream.distinct();

최종연산

reduce() : 스트림의 요소를 하나씩 줄여가면서(reducing) 계산한다.

collect() : 스트림의 요소를 수집한다. 주로 요소를 그룹화하거나 결과를 컬렉션에 담아 반환하는데 사용된다.

List<String> sortedList = strStreamList.sorted().collect(Collectors.toList());

스트림의 특징

1. 스트림은 데이터 소스를 변경하지 않는다.

스트림은 데이터 소스로부터 데이터를 읽기만 할 뿐, 데이터소스를 변경하지 않는다.

정렬된 결과가 필요할 경우, collect를 활용해서 컬렉션이나 배열에 담아 return할 수 있다.

2. 스트림은 일회용이다.

스트림은 한번 사용하면 닫혀서 다시 사용할 수 없다. 필요하다면 스트림을 다시 생성해야 한다.

3. 스트림은 작업을 내부 반복으로 처리한다.

내부 반복이란, 반복문을 메서드의 내부에 숨길 수 있다는 것을 의미한다.

forEach() 는 스트림에 정의된 메서드 중의 하나로 매개변수에 대입된 람다식을 데이터소스의 모든 요소에 적용한다.

즉, forEach()는 메서드 안에 for문을 넣어버린 것이다.

4. 지연된 연산

스트림 연산에서는 최종 연산이 수행되기 전까지는 중간 연산이 수행되지 않는다.

스트림에 대해 sort()나 distinct()같은 중간 연산을 호출해도 즉각적으로 수행되지 않는다는 것이다.

중간연산을 호출하는 것은 단지 어떤 작업이 수행되어야하는지를 지정해주는 것일 뿐이다.

최종연산이 수행되어서야 스트림의 요소들이 중간연산을 거치고 최종연산에 소모된다.

5. 기본형 스트림

오토박싱, 언박싱으로 인한 비효율을 줄이기 위해 데이터 소스의 요소를 기본형으로 다루는

IntStream, LongStream, DoubleStream 이 제공된다.

일반적으로 Stream< Integer > 대신 IntStream을 사용하는 것이 더 효율적이고,

IntStream에는 int타입으로 작업하는데 유용한 메서드들이 포함되어있다.

6. 병렬스트림

앞서 13장에서 fork&join framework으로 병렬처리하는 것에 대해 배웠는데,

스트림은 내부적으로 이 framework를 이용해서 연산을 자동적으로 병렬로 수행한다.

parallel() 메서드를 호출하면 병렬로 연산이 수행되고, sequential() 메서드를 호출하면 병렬로 처리되지 않게 된다.

모든 스트림은 기본적으로 병렬 스트림이 아니기 때문에 sequential() 메서드는 parallel()를 취소할 때만 사용한다.

2.2 스트림 만들기

/* 컬렉션 */

Stream <T> Collection.stream()

List<Integer> list = Arrays.asList(1,2,3,4,5);
Stream<Integer> intStream = list.stream();

/* 배열 */

String[] strArr = {"aaa", "ddd", "ccc"};

Stream<String> strStream = Stream.of(strArr); 
Stream<String> strStream = Arrays.stream(strArr);

/* 특정범위의 정수 */

IntStream intStream = IntStream.range(1, 5); // 1,2,3,4 
IntStream intStream = IntStream.rangeClosed(1, 5); // 1,2,3,4,5

/* 난수 */

IntStream ints()
LongStream longs()
DoubleStream doubles()

IntStream intStream = new Random().ints(); // 무한 스트림
intStream.limit(5).forEach(System.out::println); // 5개의 요소만 출력

IntStream intStream = new Random().ints(5); // 크기가 5인 난수 스트림을 반환

람다식

Stream 클래스의 iterate(), generate()는 람다식을 매개변수로 받아서,

이 람다식에 의해 계산되는 결과값들을 요소로 하는 무한 스트림을 생성한다.

iterate() : 이전 결과에 대해 종속적

generate() : 이전 결과에 대해 독립적

iterate()와 generate()에 의해 생성된 스트림은 아래와 같이 기본형 스트림 타입의 참조변수로 다룰 수 없다.

IntStream evenStream = Stream.iterate(0, n->n+2); //error
DoubleStream randomStream = Stream.generate(Math::random); //error

/* Stream, IntStream 변환하면 사용가능 */
IntStream evenStream = Stream.iterate(0, n->n+2).mapToInt(Integer::valueOf);
Stream<Integer> stream = evenStream.boxed();

/* 파일 */

Stream<Path> Files.list(Path dir) // Path는 파일 또는 디렉토리

/* 빈 스트림 */

//요소가 하나도 없는 비어있는 스트림을 생성할 수도 있다.
//스트림에 연산을 수행한 결과가 하나도 없을 때 null보다는 빈 스트림을 return하는 것이 낫다.

Stream emptyStream = Stream.empty();


/* 두 스트림 연결 */

String[] str1 = {"123", "456" };
String[] str2 = {"aaa", "bbb", "cc"};

Stream<String> strs1 = Stream.of(str1);
Stream<String> strs2 = Stream.of(str2);
Stream<String> strs3 = Stream.concat(strs1, strs2);

2.3 스트림의 중간연산

중간연산

sorted() 는 지정된 Comparator로 스트림을 정렬하는데, int 값을 반환하는 람다식을 사용하는 것도 가능하다.

변환 : map()

스트림의 요소에 저장된 값 중에서 원하는 필드만 뽑다내거나 특정 형태로 변환해야될 때 사용한다.

mapToInt(), mapToLong(), mapToDouble()

스트림의 요소를 숫자로 반환하는 경우, IntStream같은 기본형 스트림으로 변환하는 것이 더 유용할 수 있다.

기본형 스트림은 숫자를 다루는 데 편리한 메서드들을 제공하기 때문이다.

IntStream studentScoreStream = studentStream.mapToInt(Student::getTotalScore);
int allTotalScore = studentScoreStream.sum(); // IntStream의 sum()

추가적으로 이 메서드들은 최종연산이기 때문에 호출 후 스트림이 닫힌다. 따라서 sum(), average() 를 연속해서 호출할 수 없다.

이러한 경우에 스트림을 또 생성해야하므로 불편하다. 그래서 summarystatics()라는 메서드가 따로 제공된다.

IntSummaryStatistics stat = scoreStream.summaryStatistics();

long totalCount = stat.getCount();
long totalScore = stat.getSum();
double avgScore = stat.getAverage();

mapToObj(), boxed()

반대로 IntStream을 Stream < T >로 변환할 때는 mapToObj()를, Stream로 변환할 때는 boxed()를 사용한다.

flatMap()

스트림의 요소가 배열이거나 map의 연산결과가 배열인경우, Stream < T [] >를 Stream < T >로 다루는 것이 더 편리할 때 flatMap()을 사용한다.

faltMap()은 map()과 달리 스트림의 스트림이 아닌 스트림으로 만들어준다.

2.4 Optional< T >와 OptionalInt

Optional은 지네릭클래스로, T타입의 객체를 감싸는 래퍼클래스이다.

Optional 타입의 객체에는 모든 타입의 참조변수를 담을 수 있다.

최종 연산의 결과를 그냥 반환하는게 아니라 Optional객체에 담아서 반환을 하면,

반환된 결과가 null인지 매번 if문으로 체크하는 대신 Optional에 정의된 메서드를 통해 간단히 처리할 수 있다.

Optional 객체생성

참조변수의 값이 null일 가능성이 있으면 of()대신 ofNullable()을 사용해야 한다.

of()는 매개변수의 값이 null이면 NullPointerException을 발생시키기 때문이다.

// Optional < T > 참조변수의 초기화

Optional <String> optVal = null;                     //null로 초기화
Optional <String> optVal = Optional.<String>empty(); //빈 객체로 초기화

// Optional 객체의 값 가져오기

Optional<String> optVal = Optional.of("abc");

String str1 = optVal.get(); 
// optVal에 저장된 값을 반환. null이면 예외발생 

String str2 = optVal.orElse(""); 
// optVal에 저장된 값이 null일 때는, ""를 반환 

String str3 = optVal.orElseGet(String::new); 
// 람다식 사용가능 () -> new String()

String str4 = optVal.orElseThrow(NullPointerException::new); 
// 널이면 예외발생

// isPresent()

if(Optional.ofNullable(str).isPresent()) { 
  System.out.println(str); //Optional 객체의 값이 null이면 false, 아니면 true를 반환한다.
}

// ifPresent()
Optional.ofNullable(str).ifPresent(System.out::println);

// OptionalInt, OptionalLong, OptionalDouble

public final class OptionalInt {
  ...
  private final boolean isPresent; // 값이 저장되어 있으면 true
  private final int value; // int타입의 변수
}

2.5 스트림의 최종연산

최종연산

reduce()

스트림의 요소를 하나씩 줄여가면서(reducing) 계산하고 최종결과를 반환한다.

처음 두 요소를 가지고 연산한 결과를 가지고 그 다음 요소와 연산한다.

이 과정에서 스트림의 요소를 하나씩 소모하게 되며, 스트림의 모든 요소를 소모하게 되면 그 결과를 반환한다.

** 최종연산 count(), sum() 등은 내부적으로 모두 reduce를 이용해서 작성된 것이다.

2.6 collect()

collect()

스트림의 요소를 수집한다.

주로 요소를 그룹화하거나 결과를 컬렉션에 담아 반환하는데 사용된다.

Collector

collect에 필요한 메서드를 정의해놓은 인터페이스이다

public interface Collector <T, A, R> {     
//T(요소)를 A에 누적한 다음 결과를 R로 변환해서 return

  Supplier < A >   supplier();   
  //StringBuilder::new   
  //결과를 저장할 공간(A)을 제공

  BiConsumer < A, T > accumulator();   
  //(sb, s) -> sb.append(s) 
  //스트림의 요소를 수집(collect)할 방법을 제공

  BinaryOperator < A > combiner();   
  //(sb1, sb2) -> sb1.append(sb2) 
  //두 저장공간(A)을 결합할 방법을 제공(병렬 스트림)

  Function < A, R > finisher();   
  //sb -> sb.toString()  
  //최종변환
  //변환할 필요가 없는 경우, x->x

  Set<Characteristics> characteristics;  
  //컬렉터의 특성이 담긴 set return
}

Collectors

다양한 기능의 메소드를 제공한다.

- 변환 : mapping(), toList(), toSet(), toMap(), toCollection(), ...

- 통계 : counting(), summingInt(), averagingInt(), maxBy(), minBy(), summarizingInt(), ...

- 문자열 결합 : joining()

- 리듀싱 : reducing()

- 그룹화와 분할 : partitioningBy() (스트림요소 2분할), groupingBy()(스트림요소 그룹화), collectingAndThen()

2.7 Collector구현하기

Collector인터페이스를 구현하는 클래스를 작성한다.

public interface Collector < T, A, B > {
  //T(요소)를 A에 누적한 다음, 결과를 R로 변환해서 return

  Supplier < A >   supplier();   
  //StringBuilder::new   
  //결과를 저장할 공간(A)을 제공

  BiConsumer < A, T > accumulator();   
  //(sb, s) -> sb.append(s) 
  //스트림의 요소를 수집(collect)할 방법을 제공

  BinaryOperator < A > combiner();   
  //(sb1, sb2) -> sb1.append(sb2) 
  //두 저장공간(A)을 결합할 방법을 제공(병렬 스트림)

  Function < A, R > finisher();   
  //sb -> sb.toString()  
  //최종변환
  //변환할 필요가 없는 경우, x->x

  Set<Characteristics> characteristics;  
  //컬렉터의 특성이 담긴 Set return
  }

characteristics()

컬렉터가 수행할 작업의 속성정보를 제공한다.

지정할 특성이 없으면 빈 set을 return한다.

Example. ConcatCollector

문자열 스트림의 모든 요소를 연결하는 컬렉터이다.

2.8 스트림의 변환

[React / Node.js] 유튜브 사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기

****7**** — Sun, 18 Jul 2021 07:38:59 +0900

error 내용

Router.use() requires a middleware function but got a Object ....

동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제,

이 부분은 server(node) 쪽 router에다 video upload 를 저장하는 내용을 적었던 부분인데

module.exports = router;

동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제,

(강사님이 미리 작성했던 모듈에서 복붙해오셨던거라 router를 export 해주는 부분이 안보였었다... )

Express.js

server단의 controller 역할(url에 따른 모듈 매칭(route 이용))을 한다

app.use 또는 app.method (get, post, delete 등과 같은 HTTP 메소드)로 사용할수 있으며

사용의 폭은 .use가 더 다양하다.

const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");

// 마운트 경로(url)이 없는 경우 request가 발생시마다 실행된다.
app.use(cookieParser());    

// /api/video 경로에 대한 모든 유형의 HTTP 요청에 대해 실행된다.
// 특정 HTTP 요청에 대한 수행을 원할 경우 app.get 등과 같이 HTTP메소드를 사용하면된다.
app.use('/api/video', require('./routes/video'));
aap.post('/data',function(req,res,next){
    console.log('POST 메서드 / data 주소의 요청일 때만 실행된다.');
    next();
});

//router 하나에 미들웨어를 여러 개 장착할 수도 있다. 
router.get('/', middleware1, middleware2, middleware3);

강의에서 우리가 만들었던 server/routes/video.js 등과 같은 모듈은 모두 express.js 의 라우터 레벨 미들웨어이다.

const express = require('express');

const router = express.Router();

...

module.exports = router;

이렇게 세트를 이루어 사용해야만 오류나지않고 작동한다.

리액트는 민감해서 빌드시 어떠한 모듈에 오류가 발생하면 디비커넥션도 일어나지 않는것 같다.
(아예 컴파일시 에러를 발견하면 마운팅하지 않는것 같다. 추후 리액트 컴포넌트 주기에 대해 공부해보면 알수 있을듯)

router.get('/', function(req,res,next){
    next('route');
},function(req,res,next){
    console.log('설치 되지 않았습니다.');
},function(req,res,next){
    next();
});
 
router.get('/',function(req,res){
    console.log('실행됩니다');
    res.render('index',{title:'Express'});
})

next() 그리고 next('router')

next() 는 스택내 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시한다.

next('router') 는 라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 사용한다.

같은 주소의 라우터를 두 개 만들었다.

첫 번째 라우터의 첫 번째 미들웨어에서 next('router')를 호출하자

두 번째, 세 번째 미들웨어는 실행되지 않는다.

대신 주소와 일치하는 다음 라우터로 넘어간다.

만약 next('router')가 없었다면, 첫번째 라우터의 미들웨어가 모두 실행되고,

두번째 라우터도 실행된다.

만약 첫번째 라우터에서 res.send 또는 json 등등의 response methods를 이용하여 요청-응답 주기를 종료했다면

두번째 라우터는 실행되지 않는다.

React에서 arr.prototype.map 활용법

- 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수

- 데이터처럼 동일한 요소를 가진 객체를 배열 형태로 반환되었을 때 while, for, forEach 보다 간편하게 반복 처리할수 있다.

** 리액트(React)에서는 컴포넌트를 렌더링 할때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 key를 사용한다.

만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 속도가 느리다.

이러한 key 값은 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용하면 된다.

*** 따라서 key값을 명시해주지 않으면 (ex <div key={index}>) 에러를 만날수 있다.

**** Map Object도 있는데 arr.map을 사용하는 것에 대한 부분도 index 때문인것 같다고 생각했는데,

key로 index를 사용한다면 배열의 처음이나 중간에 새로 데이터가 삽입(삭제) 시 그 부분을 캐치하지 못하기 때문에

DB와 연계된 State(변할수 있는 값)은 pk값을 key로 설정하는 것이 좋겠다.
(index를 key값으로 사용하는 것을 지양한다)

React.Fragment

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이고,

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.

React.Fragment 는 jsx를 사용할때 한 컴포넌트에서 여러 요소들을 반환할때 div로 감싸지 않고 그대로 반환하기 때문에

Fragment를 사용하면 불필요한 div를 줄일수 있다.

Fragment는 대신 <>로 줄여서 사용할 수 있으나,

Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야한다.

(key는 Fragment가 유일하게 가질수 있는 속성이다.)

출처

리액트와 arr.map() 관련 내용 블로그

리액트 Fragment 공식문서

강의정보

플랫폼 : 인프런

강의 : 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

강사 : John Ahn

개발환경 : vscode, 서버 node.js, 클라이언트 react.js, 데이터베이스 mongoDB

boiler-plate git add : https://github.com/jaewonhimnae/boilerplate-mern-stack.git

url : https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0/dashboard

자바스터디 자바의 정석 CH13 쓰레드

****7**** — Sun, 11 Jul 2021 11:05:07 +0900

13장. 쓰레드

-프로세스 & 쓰레드

프로세스 : 실행 중인 프로그램

프로세스 구성 : 필요한 데이터 & 메모리 등의 자원, 쓰레드

쓰레드 : 실제로 작업을 수행하는 것

** 쓰레드가 둘 이상이면 멀티쓰레드 프로세스라고 한다.

ex) 프로세스 = 공장 , 쓰레드 = 일꾼 이라고 생각하면 이해하기 쉽다.

-멀티쓰레딩

장점	단점
- CPU사용률을 향상시킨다. - 자원을 보다 효율적으로 사용 가능하다. - 응답성이 향상된다. - 작업 분리 -> 코드가 간결해진다.	- 자원을 공유하는 특성 존재 - 동기화(synchronization), 교착상태(deadlock) 같은 문제들을 고려하면서 프로그래밍 진행

-쓰레드의 구현 & 실행

- Thread클래스를 상속받는다.

- Runnable인터페이스를 구현한다.

** 2가지 방법 모두 상관없지만 Thread클래스를 상속받으면 다른 클래스 상속이 안되기 때문에

보통은 Runnable인터페이스 구현을 한다.

(Runnable인터페이스는 run()만 정의되어 있는 간단한 인터페이스이다.)

-start()

- 쓰레드를 생성한 후 start()를 호출해야 쓰레드가 실행된다.

- 쓰레드 작업이 한번 더 진행되어야 한다면 새로운 쓰레드를 한번 더 생성한 다음 start() 호출해야 한다.

-start() & run()

- main메서드에서 쓰레드의 start() 호출

- start()는 새로운 쓰레드 생성, 쓰레드가 작업하는데 사용될 호출스택 생성

- 생성된 호출스택에 run() 호출 -> 쓰레드가 독립된 공간에서 작업 수행

- 호출스택이 2개 -> 스케줄러가 정한 순서에 의해 진행된다.

-싱글쓰레드 & 멀티쓰레드

- 하나의 쓰레드로 2개의 작업을 수행한 시간 : T1

- 2개의 쓰레드로 2개의 작업을 수행한 시간 : T2

(T1과 T2는 거의 비슷하다.)

** 멀티쓰레드가 context switching 때문에 좀 더 걸리기 때문에 단순 계산작업은 싱글쓰레드가 더 효율적이다.

-쓰레드의 I/O블락킹

- 서로 다른 자원을 사용하는 작업의 경우 : 멀티쓰레드 프로세스가 더 효율적

ex) 사용자로부터 입력받는 작업과 화면에 출력하는 작업이 있을 때

멀티쓰레드는 하나의 쓰레드가 사용자의 입력을 기다리는 동안 다른 쓰레드가 작업을 처리 가능

- 효율적인 CPU 사용 가능

-쓰레드의 우선순위

- 쓰레드에 우선순위를 정해 실행시간이 달라질 수 있다.

- 범위 : 1~10

숫자가 높을수록 우선순위가 높다(10 : 최대우선순위, 1 : 최소우선순위, 5 : 보통우선순위)

- 자바가 OS독립적인 특성을 가지고 있지만 쓰레드는 OS 종속적인 특성을 가지고 있어

OS마다 다른 방식으로 스케쥴링하기 때문에 컴퓨터마다(OS마다) 다른 결과가 도출될수 있다.

-쓰레드 그룹(Thread Group)

- 서로 관련된 쓰레드를 그룹으로 다루기 위한 것

- 보안상의 이유로 도입된 개념

- 그룹을 지정하지 않으면 자동으로 main쓰레드 그룹에 속하게 된다.

-데몬 쓰레드(daemon thread)

- 일반 쓰레드의 작업을 보조하는 보조적인 역할을 수행하는 쓰레드

ex) 가비지 컬렉터, 자동저장, 화면자동갱신 등

- 데몬 쓰레드가 생성한 쓰레드는 자동으로 데몬 쓰레드가 된다.

- setDaemon메서드는 반드시 start()를 호출하기 전에 실행되어야 한다.

그렇지 않으면 IllegalThreadStateException이 발생

-쓰레드의 상태

상태	설명
NEW	쓰레드가 생성되고 아직 start()는 호출되지 않음
RUNNABLE	실행 중 또는 실행 가능 상태
BLOCKED	동기화블럭에 의해 일시정지된 상태
WAITING , TIMED_WAITING	- 쓰레드의 작업은 종료X, 실행가능하지 않은 일시정지상태 - TIMED_WAITING은 일시정지시간이 지정된 경우
TERMINATED	쓰레드의 작업 종료

-쓰레드의 실행제어

- 쓰레드의 실행을 제어하는 메서드 제공하여 효율적인 프로그래밍 가능하도록 도와준다.

sleep() : 지정시간동안 멈춤

interrupt() : 쓰레드의 작업을 멈추라고 요청 , 강제성은 없다.

suspend(), resume(), stop() : 쓰레드의 실행제어를 하는 가장 손쉬운 방법

하지만 교착상태를 일으키기 쉬움 -> 현재는 Deprecated됨

join() : 다른 쓰레드의 작업을 기다림

yield() : 다른 쓰레드에게 양보 -> yield() 와 interrupt()를 잘 사용하면 효율적인 실행 가능

-쓰레드의 동기화

한 쓰레드가 특정 작업을 끝마치기 전까지 다른 쓰레드에게 방해받지 않도록 해야되기 때문에

쓰레드의 동기화는 멀티쓰레드 프로세스에서 필수적으로 고려해야한다.

critical section(임계 영역), lock 개념이 도입

synchronization(동기화) : 한 쓰레드가 진행 중인 작업을 다른 쓰레드가 간섭하지 못하도록 막는 것

[ 쓰레드 동기화 방법]

synchronized 키워드를 이용한다.

메서드를 임계영역으로 지정 OR 특정 영역을 임계영역으로 지정 -> 2가지 방식 존재

임계영역에 들어가면 lock(락)을 얻어 작업을 수행 , 벗어나면 lock(락)을 반환.

-wait() & notify()

** sychronized로 동기화 하면 공유 데이터를 보호할 수 있으나,

특정 쓰레드가 락을 오랜 시간 유지하면 안되기 때문에 wait, notify 메소드가 등장했다.

wait() : 쓰레드가 락을 반납하고 기다리게 한다.

notify() : 작업을 중단했던 쓰레드가 다시 락을 얻어 작업을 진행할 수 있게 한다.

자바스터디 자바의 정석 CH12 지네릭스, 열거형, 어노테이션

****7**** — Sun, 4 Jul 2021 20:41:43 +0900

1. 제네릭(Generic)

1.1 제네릭?

제네릭의 정의

- 제네릭(Generic)은 컴파일 시 타입을 체크 해 주는 기능이다.

- 또는 타입을 파라미터화 해서 컴파일 시 구체적인 타입이 결정 되도록 하는 것이다.

제네릭의 장점

- 객체의 타입 안정성을 높인다.

※ "타입 안정성을 높인다"는 것은 의도하지 않은 타입의 객체가 저장되는 것을 막고, 저장된 객체를 꺼내올 때

원래의 타입과 다른 타입으로 잘못 형변환 되어 발생할 수 있는 오류를 줄여준다는 뜻이다.

- 형 변환의 번거로움을 줄여준다.

1.2 제네릭 클래스의 선언

- 제네릭 클래스를 작성할 때, Object 타입 대신 타입 매개변수(E)를 선언해서 사용한다.

① 예를 들어, ArrayList 클래스는 다음과 같이 정의 되어 있었다.

public class ArrayList extends AbstractList{

    private transient Object[] elementData;
    public boolean add(Object o) { /* 내용 생략 */ }
    public Object add(int index) { /* 내용 생략 */ }
    
    ...
    
}

② 클래스 이름 옆에 '<E>'를 붙인 다음, 'Object'가 모두 'E'로 변경되었다. (JDK 1.5 부터)

public class ArrayList<E> extends AbstractList<E>{

    private transient E[] elementData;
    public boolean add(E o) { /* 내용 생략 */ }
    public E add(int index) { /* 내용 생략 */ }
    
    ...
    
}

- 제네릭 클래스의 객체를 생성할 때는 타입 매개변수(E) 대신에 실제 타입(String)을 지정해야 한다.

- 타입 매개변수 대신 실제 타입이 지정되면, 형 변환 생략 가능

// 타입 매개변수 E 대신에 실제 타입 Tv를 대입
ArrayList<Tv> tvList = new ArrayList<Tv>();

tvList.add(new Tv());
Tv t = tvList.get(0); // 형 변환 생략 가능

1.3 제네릭의 용어

Box<T> : 제네릭 클래스. ‘T의 Box’ 또는 ‘T Box’라고 읽는다.

T : 타입 변수 또는 타입 매개변수. (T는 타입 문자)
Box : 원시 타입(raw type)

아래와 같이 타입 매개변수에 타입을 지정하는 것을 "제네릭 타입 호출"이라 한다.

지정된 타입 'String'을 매개변수화된 타입이라 한다. (해당 용어가 좀 길어서, "대입된 타입"이라는 용어를 사용할 것이다.)

1.4 제네릭 타입과 다형성

- 참조 변수와 생성자의 대입된 타입은 일치 해야 한다.

ArrayList<Tv> tvList = new ArrayList<Tv>(); // OK. 일치

ArrayList<Product> productList = new ArrayList<Tv>(); // 에러. 불일치

- 제네릭 클래스 간의 다형성은 성립한다. (여전히 대입된 타입은 일치 해야 한다.)

List<Tv> list1 = new ArrayList<Tv>();
List<Tv> list2 = new LinkedList<Tv>();

- 매개변수의 다형성도 성립한다.

ArrayList<Product> list = new ArrayList<Product>();
list.add(new Product());
list.add(new Tv());     // OK
list.add(new Audio());  // OK

boolean add(E e){ ... } // E에는 Product가 대입 됨 그래서 Product와 그 자손 객체가 가능

- JDK 1.7 부터 타입 추론이 가능한 경우, 생성자의 타입을 생략 할 수 있다.

(참조변수의 타입으로 ArrayList가 Product 타입의 객체만 저장한다는 것을 알 수 있기 때문에 생략 가능하다.)

ArrayList<Product> list = new ArrayList<>();

1.5 제네릭 타입의 형 변환

- 제네릭 타입과 원시 타입 간의 형 변환은 가능 하지만 바람직 하지 않다. (경고가 발생)

Box box = null;              // 원시 타입
Box<Object> objBox = null;  // 제네릭 타입

box = (Box)objBox; // OK. 제네릭 타입 -> 원시 타입 (경고 발생)
objBox = (Box<Object>)box; // OK. 원시 타입 -> 제네릭 타입 (경고 발생)

- 대입된 타입이 다른 제네릭 타입 간의 형 변환은 불가능하다.

Box<Object> objBox = null;
Box<String> strBox = null;

objBox = (Box<Object>)strBox; // 에러. Box<String> -> Box<Object>
strBox = (Box<String>)objBox; // 에러. Box<Object> -> Box<String>

- 와일드 카드가 사용된 제네릭 타입으로는 형 변환이 가능하다.

① FruitBox → FruitBox

Box<Object> objBox = (Box<Object>) new Box<<String>();                  // 에러. 형변환 불가능
Box<? extends Object> wBox = (Box<? extends Object>) new Box<String>(); // OK
Box<? extends Object> wBox2 = new Box<String>();                        // 위 문장과 동일

// 매개변수로 FruitBox<Fruit>, FruitBox<Apple>, FruitBox<Grape> 등이 가능
static Juice makeJuice(FruitBox<? extends Fruit> box) { ... }

FruitBox<? extends Fruit> box = new FruitBox<Fruit>(); // OK

// FruitBox<Apple> → FruitBox<? extends Fruit>
FruitBox<? extends Fruit> box = new FruitBox<Apple>(); // OK

② FruitBox → FruitBox

와일드 카드가 사용된 제네릭 타입에서 제네릭 타입으로의 형변환은 "확인되지 않은 형변환"이라는 경고가 발생한다.

FruitBox는 대입될 수 있는 타입은 여러 개인데, 명확한 타입인 FruitBox으로 형 변환하려고

하기 때문에 경고가 발생하는 것이다.

// FruitBox<? extends Fruit> → FruitBox<Apple> 
FruitBox<? extends Fruit> box = null;
FruitBox<Apple> appleBox = (FruitBox<Apple>) box; // OK. 미확인 타입으로 형 변환 경고

1.6 제네릭 타입의 제거

- 컴파일러는 제네릭 타입을 제거하고, 필요한 곳에 형 변환을 넣는다.

① 제네릭 타입의 경계(bound)를 제거한다.

② 제네릭 타입을 제거한 후에 타입이 일치하지 않으면, 형 변환을 추가한다.

③ 와일드 카드가 포함되어 있는 경우에는 적절한 타입으로의 형 변환이 추가된다.

1.7 제한된 제네릭 클래스

- 제네릭 타입에 ‘extends’를 사용하면, 특정 타입의 자손들만 대입할 수 있게 제한 할 수 있다.

class FruitBox<T extends Fruit> { // Fruit과 그 자손만 타입으로 지정 가능
    ArrayList<T> list = new ArrayList<T>();
    
    void add(T item) {list.add(item);}
    ...
}

- 게다가 add()의 매개변수 타입 T도 Fruit와 그 자손 타입이 될 수 있다.

그러므로 아래와 같이 여러 과일을 담을 수 있는 과일 상자가 된다.

FruitBox<Fruit> fruitBox = new FruitBox<Fruit>();
fruitBox.add(new Apple()); // OK. Apple이 Fruit의 자손
fruitBox.add(new Grape()); // OK. Grape가 Fruit의 자손

- 인터페이스를 구현해야 한다는 제약이 필요하면 ‘implements’가 아닌, ‘extends’를 사용한다.

interface Eatable {}

// Eatable 인터페이스를 구현한 클래스만 타입 매개변수 T에 대입 될 수 있다.
class FruitBox<T extends Eatable> { . . . } 

// Fruit의 자손이면서 Eatable 인터페이스를 구현한 클래스만 타입 매개변수 T에 대입 될 수 있다.
class FruitBox<T extends Fruit & Eatable> { . . . }

1.8 제네릭의 제약

- static 멤버에는 타입 매개변수(T)를 사용 할 수 없다.

→ 타입 매개변수에 대입하는 것은 인스턴스 마다 다르게 지정 할 수 있다.

그래서 static 멤버는 같은 클래스의 모든 인스턴스들이 공통으로 사용하는 멤버이기 때문이다.

class Box<T> {
    T[] itemArr; // OK. T 타입의 배열을 위한 참조변수
        . . .
        
    T[] toArray(); {
    	T[] tmpArr = new T[itemArr.length]; // 에러. 제네릭 타입의 배열 생성 불가
        . . .
        return tmpArr;
    }
    
        . . .    	
}

T[] tmpArr = (T[]) new Object[itemArr.length]; // Object 배열을 만들고 T 타입 배열로 형 변환 하면 된다.

- 타입 매개변수(T)로 배열을 생성 할 수 없다. (타입 매개변수로 배열을 선언하는 것은 가능)

즉, new 연산자 뒤에 타입 매개변수(T)를 사용 할 수 없다.

- 제네릭 타입의 배열을 생성 해야 한다면 Object 배열을 만들고 T 타입의 배열로 형 변환하면 된다.

1.9 와일드 카드 '?'

- 와일드 카드를 사용하면 하나의 참조 변수로 대입된 타입이 다른 객체를 참조 할 수 있다.

- 와일드카드는 기호 '?'로 표현하며 와일드 카드는 어떠한 타입도 될 수 있다.

<? extends T> : 와일드 카드의 상한 제한. T와 그 자손들만 가능

<? super T> : 와일드 카드의 하한 제한. T와 그 조상들만 가능

<?> : 제한없음. 모든 타입 가능. <? extends Object>와 동일

- 와일드 카드에는 "&"를 사용 할 수 없다.

즉, <? extends T & E>와 같이 사용 할 수 없다.

- 메서드의 매개변수에 와일드 카드를 사용 할 수 있다.

static Juice makeJuice(FruitBox<? extends Fruit> box) {
	String tmp = "";
	for(Fruit f: box.getList()) tmp += f + " ";
	return new Juice(tmp);
}

1.10 제네릭 메서드

- 제네릭 메서드는 반환 타입 앞에 제네릭 타입이 선언된 메서드이다.

이전 Chapter에서 살펴본 Collections.sort()가 바로 제네릭 메서드이다.

static <T> void sort(List<T> list, Comparator<? super T> c)

- 제네릭 클래스의 타입 매개변수 <T>와 제네릭 메서드의 타입 매개변수 <T>는 별개

static 멤버에는 타입 매개변수를 사용할 수 없지만, 메서드에 제네릭 타입을 선언하고 사용하는 것은 가능하다.

- 제네릭 메서드는 호출할 때 마다, 타입 매개변수에 타입을 대입해야 한다.

(대부분의 경우, 추론이 가능하므로 생략할 수 있음)

FruitBox<Fruit> fruitBox = new FruitBox<Fruit>();
FruitBox<Apple> appleBox = new FruitBox<Apple>();

System.out.println(Juicer.<Fruit>makeJuice(fruitBox)); // 메서드를 호출 할 때 타입을 대입 해야 하나
System.out.println(Juicer.makeJuice(fruitBox));        // 대입된 타입을 생략 할 수 있다.

※ 제네릭 메서드와 와일드 카드의 차이

- 와일드 카드는 하나의 참조변수로 서로 다른 타입이 대입된 여러 제네릭 객체를 다루기 위한 것이다.

- 제네릭 메서드는 메서드를 호출 할 때 마다 다른 제네릭 타입을 대입 할 수 있도록 한 것이다.

2. 열거형(enums)

2.1 열거형이란?

열거형의 정의

- 열거형(enum)은 관련된 상수들을 같이 묶어 놓은 것이다.

- Java는 타입에 안전한 열거형을 제공한다.

* "타입에 안전한 열거형"이라는 것은 실제 값이 같아도 타입이 다르면 컴파일 에러가 발생하는 것을 의미한다.

즉, 자바의 열거형은 값과 타입을 모두 체크한다.

2.2 열거형의 정의와 사용

1) 열거형을 정의하는 방법

enum 열거형이름 { 상수명 1, 상수명2, . . . }

enum Direction { EAST, WEST, SOUTH, NORTH }

→ Direction이라는 열거형을 선언한다. 상수의 값은 자동으로 0 부터 시작하는 정수 값이 부여된다.

2) 열거형 타입의 변수를 선언하고 사용하는 방법

enum Direction { EAST, WEST, SOUTH, NORTH }

class Unit{
    int x, y;	// 유닛의 초기화
    Direction dir;	// 열거형을 인스턴스 변수로 선언
    
    void init() {
    	dir = Direction.EAST; // 유닛의 방향을 EAST로 초기화
                              // 열거형 변수의 값은 열거형 상수 값(EAST, WEST ..) 중 하나 이어야 한다.
    }
}

3) 열거형 상수의 비교에 ==와 compareTo()를 사용 할 수 있다.

- 열거형을 비교할 때는 compareTo()를 사용 해야 한다.

- compareTo()는 열거형 상수가 정의된 순서의 차이를 반환한다.

if( dir == Direction.EAST ){
	x++;
} else if (dir > Direction.WEST){ // 에러. 열거형 상수에 비교 연산자 사용 불가 
	...
} else if (dir.compareTo(Direction.WEST) > 0){ // compareTo()는 가능
}

2.3 모든 열거형의 조상 - java.lang.Enum

모든 열거형은 추상 클래스 Enum의 자손이며 아래의 메서드를 상속 받는다.

아래와 같이 컴파일러가 자동적으로 추가해주는 메서드가 있다.

static E values() : 해당 열거형의 모든 상수를 배열에 담아 반환한다.

static E valueOf(String name) : 전달된 문자열과 일치하는 해당 열거형의 상수를 반환한다.

2.4 열거형에 멤버 추가하기

- 불연속적인 열거형 상수의 경우, 원하는 값을 괄호() 안에 적는다.

enum Direction { EAST(1), SOUTH(5), WEST(-1), NORTH(10) }

- 괄호()를 사용하려면, 인스턴스 변수와 생성자를 새로 추가해 줘야 한다.

- 열거형의 생성자는 묵시적으로 private 이므로, 외부에서 열거형의 객체를 생성 할 수 없다.

- 열거형에 멤버를 추가하는 예시

enum Direction {
    EAST(1, ">"), SOUTH(2, "V"), WEST(3, "<"), NORTH(4, "^"); // 끝에 ';'를 추가해야 한다.
    
    private final int value;
    private final String symbol;
    
    Direction(int value, String symbol) { // 접근 제어자 private이 생략됨 
    	this.value = value;
        this.symbol = symbol;
    }
    
    public int getValue() { return value; }
    public String getSymbol() { return symbol; }
}

2.5 열거형의 이해

열거형 Direction이 아래와 같이 선언되어 있을 때, 사실은 열거형 상수 하나 하나가 객체이다.

3. 애노테이션(annotation)

3.1 애노테이션이란?

애노테이션?

- 애노테이션은 소스코드에 붙여서 특별한 의미를 부여하는 기능이다.

- 주석(comment)처럼 프로그래밍 언어에 영향을 미치지 않으면서도 다른 프로그램에게 유용한 정보를 제공할 수 있다.

애노테이션의 사용 예시

- @Test는 이 메서드를 테스트 해야 한다는 것을 테스트 프로그램에게 알리는 역할을 할 뿐, 메서드가 포함된 프로그램 자체에는

아무런 영향을 미치지 않는다.

@Test // 이 메서드가 테스트 대상임을 테스트 프로그램에게 알린다.
public void method() {
	. . .
}

3.2 표준 애노테이션

표준 애노테이션?

- 표준 애노테이션은 Java에서 제공하는 애노테이션이다.

위의 표에서 초록 바탕의 애노테이션은 "메타 애노테이션"이다.

* 메타 애노테이션 : 애노테이션을 정의 하는데 사용되는 애노테이션이다.

3.3 메타 애노테이션

메타 애노테이션?

- 메타 애노테이션은 애노테이션을 정의할 때 사용하는 애노테이션이다.

- 애노테이션을 정의할 때, 애노테이션의 적용 대상(target)이나 유지 기간(retention) 등을 지정하는데 사용된다.

@Target

- @Target은 애노테이션이 적용 가능한 대상을 지정하는데 사용된다.

- 여러 개의 값을 지정할 때는 배열에서 처럼 괄호 {}를 사용해야 한다.

@Target({TYPE, FIELD, METHOD, PARAMETER, CONSTRUCTOR, LOCAL_VARIABLE})
@Retention(RetentionPolicy.SOURCE)
public @interface SuppressWarnings {
    String[] value();
}

@Target으로 지정 할 수 있는 애노테이션 적용 대상의 종류

* ANNOTATION_TYPE은 애노테이션을 선언할 때 붙일 수 있다는 뜻이며

CONSTRUCTOR는 생성자를 선언할 때 붙일 수 있다는 뜻이며

. . .

TYPE_USE는 타입이 사용되는 모든 곳에 붙일 수 있다는 뜻이다.

@Retention

- @Retention은 애노테이션이 유지(retention)되는 기간을 지정하는데 사용된다.

- 컴파일러에 의해 사용되는 애노테이션의 유지 정책은 SOURCE이다.

(컴파일러를 직접 작성할 것이 아니면, 이 유지 정책은 필요 없다.)

- 실행 시에 사용 가능한 애너테이션의 정책은 RUNTIME이다.

(유지 정책을 RUNTIME으로 하면, 실행 시에 리플렉션을 통해 클래스 파일에 저장된 애노테이션의 정보를 읽어서 처리할 수 있다.)

@Documented

- @Documented는 애노테이션에 대한 정보가 javadoc으로 작성한 문서에 포함되도록 한다.

@Inherited

- @Inherited는 애노테이션이 자손 클래스에 상속 되도록 한다.

- @Inherited가 붙은 애노테이션을 조상 클래스에 붙이면, 자손 클래스도 이 애노테이션이 붙은 것과 같이 인식된다.

@Repeatable

- @Repeatable는 반복해서 붙일 수 있는 애노테이션을 정의할 때 사용한다.

- @Repeatable이 붙은 애너테이션은 반복해서 붙일 수 있다.

@Native

- @Native는 native 메서드에 의해 참조되는 상수에 붙이는 애노테이션이다.

- 네이티브 메서드는 JVM이 설치된 OS의 메서드를 말한다.

네이티브 메서드는 보통 C 언어로 작성되어 있는데, 자바에서는 메서드의 선언부만 정의하고 구현은 하지 않는다.

- 자바에 정의된 네이티브 메서드와 OS의 메서드를 연결해주는 작업은 JNI(Java Native Interface)가 담당한다.

3.4 애노테이션 타입 정의하기

새로운 애노테이션을 정의하는 방법

@interface 애노테이션이름{
    타입 요소이름(); // 애노테이션의 요소를 선언한다.
    . . .
}

애노테이션의 요소

- 애노테이션의 요소(element)는 애노테이션 내에 선언된 메서드를 말한다.

- 애노테이션의 요소는 반환 값이 있고, 매개 변수는 없는 추상 메서드의 형태를 가진다.

그리고 애노테이션을 적용할 때 이 요소들의 값을 모두 지정 해야 한다.

(요소의 이름도 같이 적어주므로 순서는 상관 없다.)

애노테이션 요소의 기본 값

- 애노테이션을 적용 시 값을 지정하지 않으면, 사용 될 수 있는 요소의 기본 값을 지정 할 수 있다. (기본 값으로 null은 사용 불가)

- 애노테이션의 요소가 하나이고 이름이 value인 경우, 애노테이션을 적용할 때 요소의 이름을 생략 하고 값만 적어도 된다.

- 요소의 타입이 배열인 경우, 중괄호 {}를 사용해서 여러 개의 값을 지정할 수 있다.

- 기본 값을 지정할 때도 괄호{}를 사용할 수 있다.

java.lang.annotation.Annotation

- Annotation은 모든 애노테이션의 조상이지만 상속은 불가능하다.

- 사실, Annotation은 인터페이스로 정의되어 있다.

마커 애노테이션 (Marker Anntation)

- 마커 애노테이션은 요소가 하나도 정의되지 않은 애노테이션이다.

애노테이션 요소의 규칙

- 애노테이션의 요소를 선언할 때 지켜야 하는 규칙은 다음과 같다.

① 요소의 타입은 기본형, String, enum, 애노테이션, Class만 허용된다.

② 괄호() 안에 매개변수를 선언할 수 없다.

③ 예외를 선언할 수 없다.

④ 요소를 타입 매개변수로 정의할 수 없다.

[React / Node.js] react-router 리액트 라우터 알아보기

****7**** — Sun, 4 Jul 2021 05:00:49 +0900

react-router

라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것

리액트에서 라우팅 기능을 제공하고 있지 않기때문에 직접 구현하여 사용해야한다.

그렇기 때문에 react-router 는 리액트를 사용함으로써 필수적이라 할 수 있다.

- 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.

- 서버 사이드 렌더링을 도와준다.

import { BrowserRouter } from "react-router-dom";

react-router-dom의 라우터는 <BrowserRouter>와 <HashRouter> 두가지가 있다.

<BrowserRouter>는 HTML5의 history API를 활용하여 UI를 업데이트하고,

<HashRouter>는 URL의 hash를 활용한 라우터로 정적인(static)페이지에 적합하다.

import { Route, Switch } from "react-router-dom";

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

exact path 는 주어진 경로와 정확히 맞아야만 설정한 컴포넌트를 보여준다.

exact 를 하지 않으면, / 경로로 접속시 /login, /register, /movie/:movieId 에도 / 가 있기 때문에, 매칭이 되어서 보여지게된다.

Switch 컴포넌트를 사용하면, 이 컴포넌트에 감싸진 라우트 중 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다.

단, switch 컴포넌트는 위에서부터 순서대로 비교하기 때문에 나열하는 순서가 매우 중요하다.

(/about 과 /about/:name 두 라우트를 순서대로 switch로 감싸주었을때 name 파라미터를 전달해도 /about이 먼저 매칭되어버린다.)

** Route 컴포넌트의 exact path, Switch 컴포넌트를 이용하여 라우트 정확도를 높일 수 있다.

console .log(this.props)

 <Route exact path="/movie/:movieId" component={Auth(MovieDetail, null)} />

라우트 파라미터 읽기

- 라우트로 설정한 컴포넌트는 자동으로 3가지 props를 전달받게 된다.

history : push, replace 를 이용하여 다른 경로로 이동하거나 앞/뒤 페이지로 전환 할 수 있습니다.

location : 현재 경로에 대한 정보를 지니고 있고 URL 쿼리 (/about?foo=bar 형식) 정보도 가지고있다.

match : 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/about/:name 형식) 정보를 가지고있다.

- 라우트에 파라미터값을 전달하려면 params 또는 query 를 이용한다.

params 예시 : /movie/:movieId

특정 아이디 혹은 이름을 사용하여 조회할 때

사용 전에 라우트에 꼭 지정해야한다.

query 예시 : /movie?details=true

어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때

컴포넌트 내에서 동적으로 사용할 수 있다

- query 는 해석을 위해 라이브러리를 따로 추가해야한다(query-string 등)

해석시 받아오는 값들은 모두 문자열이라는 점을 주의해야한다.

const query = queryString.parse(location.search);

import { Link, NavLink } from "react-router-dom";

리액트 내에서 <a href>속성을 이용하여 페이지 이동 등을 하는 것은 완전 새로고침(첫 렌더링)되기때문에,

Link 컴포넌트를 사용하여 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 한다.

NavLink : 활성화된 url에 특정 스타일(activeStyle) 혹은 클래스(activeClassName)를 지정 할 수 있다.

출처

https://velopert.com/3417

https://gongbu-ing.tistory.com/45?category=780189

[인프런] 레츠기릿 자바스크립트 / 끝말잇기, 셀프체크 쿵쿵따 만들기

****7**** — Wed, 30 Jun 2021 14:09:16 +0900

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기</title>
</head>
<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button>입력</button>
    <script>
        const number = parseInt(prompt("몇 명이 참가하나요?"), 10); // 10 생략해도 10진법으로 인식함   
        const $button = document.querySelector('button');
        const $input = document.querySelector('input');
        const $word = document.querySelector('#word');
        const $order = document.querySelector('#order');


        let word; //제시어
        let newWord; //새로 입력한 단어

        const onClickButton = function(){
            console.log("버튼 클릭")
            if(!word || word[word.length -1] === newWord[0]){ //제시어가 빈값인지 확인
               
                word = newWord;
                $word.textContent = word;
                const order = parseInt($order.textContent); //현재 순서

                if(order + 1 > number){
                    $order.textContent = 1;
                } else{
                    $order.textContent = order + 1;
                }
                
            }else{
                alert('올바르지 않은 단어입니다!');
            }
            $input.value = '';
            $input.focus();
        };

        const onInput = (event) => {
          newWord = event.target.value;
        };
        /*
        alert(number);
        const yesOrNo = confirm("맞나요?") ;
       
        document.querySelector("input").addEventListener('input', (event) => { // 키보드 입력 모두 이벤트로 인식(backspace도 인식, 키 하나하나를 이벤트 하나로 인식)
            console.log("입력", event.target.value);
        });
        */

        $button.addEventListener('click', onClickButton);
        $input.addEventListener('input', onInput);

    </script>
    
</body>
</html>

대화창(prompt, alert, confirm)

- 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능

1) alert("hello")

사용자가 [확인]을 누르기 전까지 계속 떠있는 메세지창

** 메시지가 있는 작은 창은 모달 창(modal window) 이라고 한다.

'모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다.

2) result = prompt(title, [default]);

텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창

title : 사용자에게 보여줄 문자열 (ex prompt("참여할 인원은 몇 명인가요?"))

default(선택값) : 입력 필드의 초기값

사용자가 입력 필드에 기재한 문자열을 반환한다, 만약 사용자가 입력을 취소한 경우는 null이 반환된다.

3) result = confirm(question);

매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창

사용자가 확인버튼를 누르면 true, 그 외의 경우는 false를 반환한다.

>> const number = parseInt(prompt("참여할 인원은 몇 명인가요?"));

// prompt는 취소를 누르면 null >> Number / parseInt로 형변환시 NaN이 반환된다.

HTML 태그 선택하기(querySelector)

querySelector

elem.querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

** document 노드에서만 호출 가능하다

이벤트 리스너 달기(콜백함수)

addEventListener

document 특정요소의 event를 등록할때 사용한다.

[ 자주 사용하는 이벤트의 종류 ]

click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.

mouseover – 마우스를 HTML요소 위에 올리면 발생한다.

mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.

mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.

mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.

mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.

focus – HTML요소에 포커스가 갔을때 발생한다.

blur – HTML요소가 포커스에서 벗어났을때 발생한다.

keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.

keydown – 키를 누를 때 발생한다.

keyup – 키를 눌렀다가 떼는 순간에 발생한다.

load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.

resize – 브라우저 창의 크기를 조절할때 발생한다.

scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다.

페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.

unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.

change – 폼 필드의 상태가 변경되었을 때 발생한다.

라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

셀프체크 쿵쿵따

<!DOCTYPE html>

<head>

</head>

<body>

<div>

</div>

const number = parseInt(prompt("참여할 인원은 몇 명인가요?"));

// prompt는 취소를 누르면 null >> Number / parseInt로 형변환시 NaN

console.log(number)

if(number){

const $button = document.querySelector('button');

const $input = document.querySelector('input');

const $order = document.querySelector('#order');

const $word = document.querySelector('#word');

let word; //제시어

let newWord;

const inputText = (event) => {

newWord = event.target.value;

console.log(newWord)

}

const btnClick = () => {

console.log("클릭")

if(!word || (word[word.length -1] === newWord[0] && newWord.length === 3)){

word = newWord;

$word.textContent = word;

if(parseInt($order.textContent) < number){

$order.textContent = parseInt($order.textContent) + 1;

}else{

$order.textContent = 1;

}

}else {

alert("Booooommmmm!");

}

$input.value = '';

$input.focus();

}

$button.addEventListener('click', btnClick);

$input.addEventListener('input', inputText);

}

</script>

</body>

</html>

처음에 스크립트 부분을 head 태그 안에 넣었다가 내용이 적용되지 않는 것을 확인하고

load시 먼저 실행하도록 했다가 뭔가 잘못되었는지 안되길래 다시 body 안에 넣었다.

순서도를 그리지 않고 바로 코드를 작성했더니 중간중간 의도하지 않은 결과가 도출되어 끝말잇기 코드를 다시보고

수정을 조금했다.

원래 addEventListener 대신 해당 요소에 onClick, oninput 을 넣고, 함수변수로 지정했었는데

왜인지 실행이 되지않았다.

코드 작성할때 테스팅해서 원인과 결과를 재도출했어야하는데 그냥 넘어가버려서 지금은 문제되었던 코드상태를 몰라서 못한다..

최대의 패착

원인을 찾지 못했지만 추후 더 공부하다보면 알수 있지 않을까한다.

제로초 강사님의 신간 레츠기릿 자바스크립트를 기반으로한 무료강의로

초반 1강은 es6 기본 문법을 설명해준다

(앞부분은 자바스크립트를 조금이라도 깔짝여봤다면 추후 복습용으로 봐도 무관할 정도의 내용)

세심한 부분까지 설명해주기 때문에 타 강의에서 궁금했거나 들었는데 지났쳤을법한 내용도 나오기도 한다

본 강의는 자바스크립트 입문자를 대상으로 하기 때문에 정말 쉽게 설명되어있고,

프로그래밍 입문자를 대상으로 하기 때문에 코드를 짤 때의 사고방식에 대해 훈련하는 법을 알려준다

순서도를 그리는 내용은 입사하고 나서 고민해왔던 코드를 작성하고 테스트(구동하여 오류가 없는지 확인)하는 과정에서 계속된 코드 수정의 원인을 해결하려고 생각했던 방안(요구사항 분석 후 코딩)과 일맥상통하는 것 같았다.

vscode의 단축키와 각종 꿀팁이 난무하는 강의, 아직 강의 초반이지만 수강 만족도는 별다섯개

강의정보

플랫폼 : 인프런

강의 : 레츠기릿 자바스크립트

강사 : 제로초

개발환경 : vscode, es6

url : https://www.inflearn.com/course/%EB%A0%88%EC%B8%A0%EA%B8%B0%EB%A6%BF-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/dashboard

포스팅 내용 출처

https://ko.javascript.info/

https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/

자바스터디 자바의 정석 CH11 컬렉션프레임웍

****7**** — Sun, 27 Jun 2021 17:36:35 +0900

1. 컬렉션프레임워크

1.1 컬렉션 프레임워크의 핵심 인터페이스

- Collection 인터페이스

컬렉션 클래스에 저장된 데이터를 읽고 추가하고 삭제하는 등 가장 기본적인 메소드들을 정의

- List 인터페이스

중복을 허용하면서 저장순서가 유지되는 컬렉션을 구현하는데 사용

- Set 인터페이스

중복을 허용하지않고 저장순서가 유지되는 컬렉션을 구현하는데 사용(HashSet, TreeSet 등)

- Map 인터페이스

키와 값을 하나의 쌍으로 묶어서 저장하는 컬렉션을 구현

키는 중복될수 없지만 값을 중복을 허용한다.

- Map.Entry 인터페이스

Map에 저장되는 key-value 쌍을 다루기 위해 내부적으로 Entry인터페이스를 정의했다.

1.2 ArrayList

- Object 배열을 이용해서 데이터의 저장순서가 유지되고 중복을 허용한다.

- 삭제 진행시 데이터의 저장순서가 유지되기 때문에 마지막 데이터를 삭제하는 경우가 아니라면,

arraycopy가 발생된다. 데이터를 옮기는 작업을 거치기 때문에 데이터가 많을수록 수행시간이 오래걸린다.

1.3 LinkedList

[배열의 장단점]

1) 장점

- 구조가 간단하며 사용하기 쉽고 데이터를 읽어오는데 걸리는 시간이 가장 빠르다.

2) 단점

- 크기를 변경할 수 없다

- 비순차적인 데이터의 추가 또는 삭제에 시간이 많이 걸린다.

- 배열의 단점을 보완하기 위해 만들어짐

- 불연속적으로 존재하는 데이터를 서로 연결한 형태로 구성

- 삭제하고자 하는 요소의 이전요소가 삭제하고자하는 요소의 다음요소를 참조하도록 변경하면 된다

- 추가하고자 하는 위치의 이전 요소의 참조를 새로운 요소에 대한 참조로 변경,

새로운 요소가 그 다음 요소를 참조하도록 변경하면 된다.

- 링크드 리스트는 이동방향이 단방향이라 이전요소에 대한 접근이 어려워 이를 보완하여 더블 링크드리스트가 만들어졌다

ArrayList vs LinkedList 성능 비교

① 순차적으로 데이터를 추가/삭제 - ArrayList가 빠름

② 비순차적으로 데이터를 추가/삭제 - LinkedList가 빠름

③ 접근 시간(access time) - ArrayList가 빠름

1.4 Stack과 Queue

- Stack : 마지막에 저장한 데이터를 가장 먼저 꺼내게 되는 LIFO 구조

- Queue : 처음에 저장한 데이터를 가장 먼저 꺼내게 되는 FIFO 구조

** 스택과 큐의 활욜

스택 : 수식계산, 수식괄호검사, 워드프로세서의 undo/redo, 웹브라우저의 뒤로/앞으로

큐 : 최근사용문서, 잉ㄴ쇄작업 대기목록, 버퍼(buffer)

** Queue의 변형

1) 덱(Deque)

- 양쪽 끝에서 저장(offer)과 삭제(poll)가 가능하다.

- Deque은 인터페이스이며 구현체로는 ArrayDeque, LinkedList이다. (Deque은 Queue의 자손이다)

2) 우선 순위 큐(Priority Queue)

- 저장 순서에 관계 없이 우선 순위가 높은 것부터 꺼낸다. (제일 작은 값 부터 꺼냄)

- null은 저장 할 수 없다. (우선 순위를 판단할 수 없기 때문)

- 우선 순위 큐는 저장 공간으로 배열을 사용하며, 각 요소를 힙(Heap)이라는 자료구조의 형태로 저장한다.

- 예를 들어, 입력[3, 1, 5, 2, 4] → 출력[1, 2, 3, 4, 5]

1.5 Iterator, ListIterator, Enumeration

- 컬렉션에 저장된 데이터를 접근하는데 사용되는 인터페이스

Iterator

- 컬렉션에 저장된 요소들을 읽어오는 방법을 표준화한 것

- 컬렉션에 iterator()를 호출해서 Iterator를 구현한 객체를 얻어서 사용.

- Iterator는 1 회용이므로 다 사용 했다면 다시 얻어 와야 한다.

- Iterator의 remove는 단독으로 사용 불가, next와 함께 사용해야한다(읽어온것 삭제)

ListIterator

- Iterator의 접근성을 향상시킨 것이 ListIterator이다. (단방향 →양방향)

- listIterator()를 통해서 얻을 수 있다.(List를 구현한 컬렉션 클래스에 존재)

Map과 Iterator

- Map은 Collection의 자손이 아니므로 Iterator()가 없다.

- 그래서 Map은 keySet(), entrySet(), values()를 호출한 다음, Iterator()를 호출해야 한다.

1.6 Arrays

배열의 복사 - copyOf() 배열전체, copyOfRange() 배열의 일부를 복사해서 새로운 배열을 반환

배열 채우기

- fill() : 배열의 모든 요소를 지정된 값으로 채운다

- setAll() : 배열을 채우는데 사용할 함수형 인터페이스를 매개변수로 받는다

배열의 정렬과 검색

- sort()는 배열을 정렬할 때 사용하고 binarySearch()는 배열에 저장된 요소를 검색할 때 사용한다.

- binarySearch()는 배열에서 지정된 값이 저장된 위치(index)를 찾아서 반환하는데,

반드시 배열이 정렬된 상태이어야 올바른 결과를 얻는다.

검색한 값과 일치하는 요소들이 여러 개 있다면, 이 중에서 어떤 것의 위치가 반환될지는 알 수 없다.

문자열의 비교와 출력 - equals(), toString()

배열을 List로 변환 - asList(Object... a) : 배열을 List에 담아서 반환(반환한 List의 크기변경 불가)

parallelXXX(), spliterator(), stream()

1.7 Comparator와 Comparable

- 객체를 정렬 하는데 필요한 메서드를 정의한 인터페이스이다. (정렬 기준 제공)

Comparable - 기본 정렬 기준을 구현하는데 사용.

Comparator - 기본 정렬 기준 외에 다른 기준으로 정렬하고자 할 때 사용.

- compare()와 compareTo()는 두 객체의 비교 결과를 반환 하도록 구현 해야 한다.

비교하는 두 객체가 같으면 0, 왼쪽이 크면 양수, 왼쪽이 작으면 음수를 반환

(리턴 값이 음수일 때 자리 교환이 발생함)

- Arrays.sort()는 배열을 정렬할 때 Comparator를 지정하지 않으면 객체 배열에 저장된 객체가 구현한 Comparable에 의해 정렬된다.

- String의 Comparable 구현은 문자열이 사전 순으로 정렬 되도록 작성되어 있다.

String의 오름차순 정렬(사전 순서)은 공백, 숫자, 대문자, 소문자의 순으로 정렬되는 것을 의미

- String은 대소문자를 구분하지 않고 비교하는 Comparator를 상수 형태로 제공한다.

이 Comparator를 이용하면 문자열을 대소문자 구분 없이 정렬 할 수 있다.

- 정렬(sort)는 두 대상을 비교하여 자리 바꿈을 반복 하는 것이다.

(정렬 방법은 변경 되지 않으며 정렬 기준만 달라지기 때문에 정렬 기준만 전달하면 된다.)

1.8 HashSet / 1.9 TreeSet

1) HashSet

- HashSet은 저장 순서를 유지 하지 않으며 중복을 허용하지 않는다.

- 내부적으로 HashMap을 이용해서 만들어졌으며 Set 인터페이스를 구현한 대표적인 컬렉션 클래스이다.

- 저장 순서를 유지하려면 LinkedHashSet 클래스를 사용하면 된다.

- Set은 정렬 할 수 없기 때문에 Set의 모든 요소를 List에 담아서, Collections.sort()로 정렬한다.

2) TreeSet

- TreeSet은 이진 탐색 트리라는 자료 구조의 형태로 데이터를 저장하는 컬렉션 클래스이다.

- 내부적으로 TreeMap을 이용해서 만들어졌으며 범위 검색과 정렬에 유리하다.

- HashSet 보다 데이터 추가, 삭제에 시간이 더 걸림

[이진 탐색 트리(binary search tree)]

- 모든 노드가 최대 두 개의 자식 노드를 갖는다.

- 부모 보다 작은 값은 왼쪽, 큰 값은 오른쪽에 저장한다.

- 중복된 값을 저장하지 못한다.

- 범위 검색과 정렬에 유리하다.

- 데이터가 많아질 수록 데이터 추가, 삭제에 시간이 더 걸린다. (부모 보다 큰지 작은지를 비교하는 횟수가 증가하기 때문)

1.10 HashMap과 Hashtable

- HashMap은 Map 인터페이스를 구현하였으며 데이터를 키와 값의 쌍(entry)으로 저장한다.

- HashMap(동기화 X)은 HashTable(동기화 O)의 새로운 버전이다.

- 해싱(hashing)을 사용하기 때문에 많은 양의 데이터를 검색하는데 있어서 뛰어난 성능을 보인다.

- HashMap은 Entry라는 내부 클래스를 정의하고 다시 Entry 타입의 배열을 선언하고 있다.

- 저장 순서를 유지하려면, LinkedHashMap클래스를 사용하면 된다.

해싱(Hashing)?

- 해싱(Hashing)은 해시 함수(hash function)를 이용해서 해시 테이블(hash table)에 데이터를 저장하거나 검색하는 기법

- 해시 함수(hash function)는 키를 전달하면 데이터가 저장된 위치(index)를 알려준다.

* 해시 코드(hash code) = 배열의 인덱스(index)

① 키로 해시 함수를 호출해서 해시코드를 얻는다.

② 배열에서 해시코드(해시 함수의 반환 값)와 일치하는 연결리스트(Linked List)를 찾는다.

③ 연결리스트(Linked List)에서 키와 일치하는 데이터를 찾는다.

- 해싱에서 데이터를 저장하는 공간을 해시 테이블(Hash Table)이라 한다. (배열과 연결 리스트(Linked List)가 조합된 형태)

** 해시 함수는 같은 키에 대해 항상 같은 해시 코드를 반환 해야 한다. 서로 다른 키 일지라도 같은 값의 해시 코드를 반환할 수도 있다.

1.11 TreeMap

- TreeMap은 이진 탐색 트리의 구조로 키와 값의 쌍으로 이루어진 데이터를 저장한다.

- HashMap보다 데이터 추가, 삭제에 시간이 더 걸린다.

- 다수의 데이터에서 개별적인 검색은 TreeMap보다 HashMap이 빠르다.

- Map이 필요할 때는 주로 HashMap을 사용하고, 범위 검색이나 정렬이 필요한 경우에 TreeMap을 사용한다.

1.12 Properties

- Properties는 HashMap의 구버전인 Hashtable을 상속 받아 구현한 것으로 key와 value를 String으로 저장한다.

즉, Properties는 (String, String)의 형태로 저장한다.

- 주로 애플리케이션의 환경 설정에 관련된 속성을 저장 하는데 사용되며 파일로부터 편리하게 값을 읽고 쓸 수 있는 메서드를 제공한다.

1.13 Collections

- Collections 클래스는 컬렉션를 위한 static 메서드를 제공한다.

1) 컬렉션 채우기, 복사, 정렬, 검색 – fill(), copy(), sort(), binarySearch() 등의 메서드는 Arrays에서 이미 배웠으므로 설명을 생략한다.

2) 컬렉션의 동기화 – synchronizedXXX()

- synchronizedXXX()는 동기화 처리를 한다.

3) 변경 불가(readOnly) 컬렉션 만들기 – unmodifiableXXX()

- unmodifiableXXX()는 저장된 데이터를 변경 할 수 없는 컬렉션을 만든다.

4) 싱글톤 컬렉션 만들기 – singletonXXX()

- singletonXXX()는 단 하나의 객체만을 저장하는 컬렉션을 만든다.

5) 한 종류의 객체만 저장하는 컬렉션 만들기 – checkedXXX()

- checkedXXX()는 한 종류의 객체만 저장하는 컬렉션을 만든다.

- 컬렉션에 저장할 요소의 타입을 제한하는 것은 제네릭으로 간단히 처리할 수 있지만 이러한 메서드들을 제공하는 이유는 호환성 때문이다.