Peep

ES6 간단하게 알고가기

선언 

ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다.

• let

  •  

    변수

• const

  • 상수 (배열과 오브젝트의 값 변경은 가능하다.)

• immutable array

  • 기존 배열을 복제하여 사용한다. 

  • 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.)

const a = [1,2,3];
const b = [...a];

메서드

• 화살표함수(Arrow function)

• 클래스 개념 도입

• setPrototypeOf

  • 프로토타입 객체 추가

• 모듈(module)

• 프록시(proxy)

• startsWith(), endWith()

  • 앞 뒤로 문자열 일치 여부 판단

• includes()

  • 문자열 포함 여부 판단

• for-of

  • for-in 에서 상위 프로토타입의 값이 포함되는 문제 발생, value 순회로 for-in 문제 방지

• 전개연산자(Spread Operator)

• 나머지 매개변수(rest parameter)

• 기본 매개변수(default parameter)

• Array.from

  • 유사배열을 배열로 만들어준다.

  • querySelectAll로 얻은 노드리스트를 배열로 변경할수도 있다.

• 필수(기본) 파라미터

• 구조 분해

• set(), weakset()

• 백틱(`), 템플릿처리 ${}

객체와 변경불가성(Immutability)

원시 타입은 변경 불가능한 값이며 그 외 값은 객체 타입. 객체 타입은 변경 가능한 값이다.

(새로운 값을 다시 만들지 않고 직접 변경 가능)

참조하는 동작으로 의도하지 않은 결과가 나올 수 있다.

따라서 불변 데이터 패턴이 필요하다.

불변 데이터 패턴

참조가 아닌 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경한다.

(원본 데이터의 불변)

1.객체의 방어적 복사(defensive copy) - Object.assign

Object.assign은 shallow copy이며 deep copy가 아니다.

2.불변 객체화를 통한 객체 변경 방지- Object.freeze

Object.freeze는 shallow freeze이며 객체 내부의 freeze를 원한다면 deep freeze를 해야한다.

immutable.js

Object.assign, Object.freeze는 번거로우면 성능상 이슈가 있어서 큰 객체에는 사용을 지양한다. (??)

다른 대안 : Facebook이 제공하는 라이브러리 immutable.js를 대안으로 사용할 수 있다.(영구 불변 데이터 구조를 제공)

ES6 정리 

https://velog.io/@godori/ES6-%EC%A0%95%EB%A6%AC-vpjmrh6hhe

ES6 특징 핵심요약

https://avengersrhydon1121.tistory.com/104

객체와 변경불가성(Immutability)

https://poiemaweb.com/js-immutability

ref https://dassur.ma/things/deep-copy/

ES6-꿀팁

원문 :  https://www.sitepoint.com/shorthand-javascript-techniques/

ref https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html

React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'

채용 사이트관련해서 이야기를 하며서 재미있게 풀어가는 글인것 같다.

뱅샐은 프로젝트 진행 전 팀원이 다함께 기획부터 자유롭게 의견을 내고 참여를 한다고하는데, 프로젝트에 애정도 생길 것 같아서 좋을 것 같다. (아닌가?)

글에서 나온 이야기는 새로운 Stack을 도입해서 채용사이트를 제작하는 제작기(?)이다.

채용 사이트는 사용자 유입이 많아야하기때문에(검색으로) SEO 최적화가 필요한것 부터 이야기가 시작된다. 

내가 처음 React라는 것을 접했을 당시에는 CSR(Client Side Rendering)에서 SEO가 굉장히 난감했었는데, 현재는 충분히 가능해졌다.

하지만 유리한 측면이 있는 SSR(Server Side Rendering)을 두고 굳이 CSR로 진행할 필요가 없기에 SSR로 개발을 진행했다고했다.

여기서 GatsbyJS라는 키워드가 나오는데,

GatsbyJS는 React를 기반으로 한 무료 오픈 소스 프레임워크며 GatsbyJS는 블로그 제작에 많이 사용되었던 Jekyll와 같은 정적 사이트 생성기라고한다.

읽어야 할 아티클이 또 생겼다.

https://medium.com/@pks2974/gatsby-%EB%A1%9C-blog-%EB%A7%8C%EB%93%A4%EA%B8%B0-ac3eed48e068

하나의 아티클을 읽으면 몇개의 새로운 키워드가 나오고.. 읽어야할 아티클들이 증가한다.ㅎㅎㅎㅎ

SPA와 다르게 Build 할때 마크업이 생성된다고 한다.

새로운 Stack을 도입할때는 문서화 작업을 하여 공유하고 피드백을 받는다.

또한 코드가 복잡해지면 다른 사람의 유지보수 시간이 증가함으로 최대한 단순하고 직관적으로 가져가려했다고한다.

이것은 내가 vue로 간단한 사내 사이트를 제작한 적이 있을때도 똑같이 경험했다.

내가 알고 있는 지식(관심사)을 모두 쏟아 만들기보다는 단순, 직관이 중요한것을 이때 깨닫았었다.

파일구조

• components - 재사용 가능한 컴포넌트
• containers - 컴포넌트로 화면 구성(section), 비즈니스로직, 추가 콘텐츠들
• pages - containers롸 1:1 매칭되는 구조, 파일이름으로 서비스에 경로가 생성된다. SEO를 위한 작업(title, description등)

Gatsby Plugins

• gatsby-plugin-sitemap  사이트맵 
• SEO
  • gatsby-plugin-react-helmet: meta tag를 쉽게 바꿀 수 있음
  • gatsby-plugin-robots-txt: robot.txt 자동 생성
  • gatsby-plugin-sitemap: 빌드 시 sitemap 자동 생성
  • gatsby-plugin-canonical-urls: canonical 이슈 해결

그 외

• gatsby-plugin-s3: 원하는 AWS S3 버킷에 빌드시 자동 Deploy
• gatsby-image: GraphQL 쿼리를 사용하여 advanced image loading 구현
• gatsby-plugin-feed: 자동으로 RSS feed 생성
• gatsby-plugin-scroll-reveal: Scroll Animation 이벤트 구현
• gatsby-plugin-netlify-cms: Netlify 기반의 CMS 자동 생성

원본글에 나온 플러그인들이다. 나중에 언젠간 GatsbyJS를 사용한다면 참고해보도록 해야겠다.

이슈로는 

빌드 도중에는 window객체가 브라우저환경이 아닌 Node 환경이어서 존재하지 않는다고 한다.

useEffect hook이나 componentDidMount와 같은 곳이 아니면 우회해야한다고...

당장에 사용할 이유는 없겠지만, 키워드도 얻고 스토리에 이입되서 순식간에 읽게된 글 인것 같다.

React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'

https://blog.banksalad.com/tech/build-a-website-with-gatsby/

2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)

• 여전히 가장 인기있는 언어 1위를 차지 - JetBrains, StackOverflow
• 등장이후 2020년까지 3번의 큰 변화를 겪었다고 말한다.
  • http://10.1.123.63:7080/users/sign_in
• 다양한 의견을 잘 정리해주셔서 새로운 시각을 많이 접할 수 있었다. 
  • TC39 기술위원회, Javascript Engine, Javascript의 종말, 모듈, ECMAScript 등..
• ECMAScript2020-2021의 주요 스펙을 간단히 소개해주는데, 흥미로운것들이 많다.
  • 다음 아티클들은 ECMAScript2020 명세를 확인하는 것으로 해야겠다.
  • pawelgrzybek.com/whats-new-in-ecmascript-2020/
  • 2ality.com/2019/12/ecmascript-2020.html
  • h3manth.com/ES2020/

공부한다고 강의보고 예제만 따라했던 Typescript는 이제 필수가되었다.

토이프로젝트에 적용해야하는 것들이 많은데 그중 하나가 되겠지.

배워야하는건 끝이없구나 🔥🔥🔥🔥🔥

2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 

https://d2.naver.com/helloworld/4268738

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

비동기적으로 바뀌는 컴포넌트 UI 테스트

비동기적으로 바뀌는 컴포넌트 UI 테스트

Async Utilities 함수를 사용
wait 

• 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기
• timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능)
• 리액트 16.8 버전 버그있음

waitForElement

• 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..)
• 프로미스가 끝날때 선택한 엘리먼트 resolve

waitForDomChange

• 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지 대기
• 프로미스가 resolve 되면 mutationList를 통해 DOM의 변화 정보를 알 수 있음

waitForElementToBeRemoved

• 특정 엘리먼트가 화면에서 사라질때까지 대기 

REST API 호출 테스트방법

• axios 설치, JSONPlaceholder를 통해 가짜 API 사용할 주소로 API 호출
• 이때 실제 요청하지 않고 node_modules를 mocking하는 방법 혹은 axios-mock-adapter라이브러리 사용

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

https://velog.io/@velopert/tdd-with-react-testing-library

비동기적으로 바뀌는 컴포넌트 UI 테스트

https://velog.io/@velopert/react-testing-library-%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9E%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8