analogcoding

Redux 란? 웹이 넓어질수록 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다. 항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고, 이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다. 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 이에 대한 해결책으로 나온 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있..

오늘의 이슈 - 날짜를 화면에 보기 편하게 출력해보기. MomentJS 란? 자바스크립트에서 날짜 형식의 데이터를 파싱, 유효성 체크, 조작, 화면에 출력을 쉽게 할 수 있도록 도와주는 라이브러리입니다. npm install 로 설치 후 사용하는 방법 -> 설치 , 필요한 함수는 DOCS 에 너무나 잘 나와있다. https://momentjs.com Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time..

kinds of copy ? 자바스크립트에서 복사는 깊은 복사(deep copy) 와 얕은 복사(shallow copy) 가 존재합니다. String , Boolean , Number 등 원시 타입(primitive type) 을 가지는 데이터는 복사가 일어날 때 새로운 메모리 공간을 확보해 생성하게 되어 메모리에 독립적인 값을 저장합니다. object (객체, 배열, 함수) 와 같은 참조 타입(reference type) 을 가지는 데이터는 변수에 저장하게 되면 메모리 절약을 위해 포인터만 새로 할당합니다. 즉 실제 값을 저장하는 것이 아니고 객체를 메모리 어딘가에 객체의 위치 값을 저장합니다. Copy example Deep Copy let A = 1; let B = A; // 깊은 복사가 일어나며 ..

What is Prettier ? Visual Studio Code Extention 으로 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구입니다. 여러 규칙들을 쉽게 커스터마이징 할 수도 있습니다. Why use Prettier ? 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있습니다. How to Start ? Visual Studio Code Extention 에서 Prettier 를 검색하고 설치합니다. 이 후 VS Code를 재 시작 한 후 setting 에서 규칙을 설정하면 코드를 깔끔하게 정리할 수 있습니다. { "singleQuote": true, // 따옴표 고정 "semi": true, // 코드 끝에 ; 설정 "useTab..

What is ESlint ? ES ( EcmaScript ) + Lint ( 에러 코드 표식 ) 코드에 특정 스타일과 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴입니다. airbnb 등 미리 스타일과 규칙이 정해진 rule 을 적용시킬 수도 있습니다. 개발자가 자신만의 스타일과 규칙을 유동적으로 정해서 적용할 수 있습니다. Tip* ( airbnb 와 airbnb-base 의 차이는, airbnb-base 에는 리액트 관련 규칙이 들어있지 않습니다. ) Why use ESlint ? 다양한 플러그인을 사용해서 새로운 규칙을 추가하고 커스텀할 수 있습니다. 즉 뛰어난 확장성을 바탕으로 다른 사람들과 같은 환경에서 개발을 진행할 수 있습니다. How to Start ? 많은 ..

What is Jest ? Jest 는 코드가 제대로 동작하는 지 확인하는 test case 를 만드는 '테스팅 프레임워크' 입니다. Why use Jest ? lint 가 코드 스타일에 rule 을 정하는 것이라면 코드가 올바른 기능을 하는 지 체크할 수 있습니다. 이를 통해서 보다 안정적이고 제대로 동작하는 코드를 작성할 수 있습니다. How to Start ? package.json 파일을 만들고 Jest 라이브러리를 개발 의존성으로 설치합니다. yarn 과 npm 모두 간단하게 설치 가능합니다. yarn add --dev jest npm install --save-dev jest Tip* ( -dev 는 package.json 안에 dependencies 가 닌 devDependencies 에 저..

발생오류 window10 npm command not found 맥 사용자인 나에게 환경 질문은 너무나 고통스러웠다. 먼저 stack overflow 를 뒤지다보니 몇가지 해결책을 찾아보았다. 1. nvm , npm -v 버전을 확인해서 제대로 설치된지 확인한다. (version update) 2. cache 삭제 후 rebuild 를 한 후 다시 install 을 진행한다. 3. package.json 을 찾을 수 없음. 있다면 삭제 후 npm init , npm install 실행 해결실패. window10 환경에서 비슷한 이슈를 겪은 사람들의 해결책을 실행보았지만 대부분 실패했다.ㅠㅠ --> 우분투 설치로 대체 응급처치...

What is This ? 자바스크립트에서 this 는 execution context 의 구성요소 중 하나로 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자이며 현재 실행 문맥을 나타냅니다. ( 실행문맥 이란 호출자가 누구인지를 의미합니다. ) execution context 이란 ? Execution Context 실행 컨텍스트는 추상적인 개념 . 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경입니다. (실행 컨텍스트)는 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있습니다. 어떤 함수가 호출되면 execution context가 만들어집니다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효..