analogcoding

Null & undefined 두 타입은 모두 자바스크립트에서 '값이 없음' 을 의미하지만 차이가 있습니다. 요약해서 설명하자면 null 과 undefined 는 차이는 등록, 저장 여부입니다. null 은 값이지만 의미없는 특별한 값이 등록되어 있는 것이고, undefined 는 등록이 되어있지 않기 때문에 초기화도 정의되지 않은 것입니다. undefined 는 미리 선언된 전역 변수(global property)이며, null 은 선언,등록을 하는 키워드입니다. undefined 는 변수를 선언만 하더라도 할당되지만 null 은 변수를 선언한 후에 null 로 값을 할당합니다. undefined 는 기본적으로 값이 할당되지 않은 변수로 정의되지 않은 것, 존재하지 않는 것들의 값입니다. undefin..

Component ****** React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다. Class VS Functional Functional React 에서 컴포넌트를 정의하는 가장 간단한 방법은 javascript 의 함수 형식으로 정의하는 것입니다. state 나 lifecycle 이 없는 일반 JavaScript 함수이므로 읽기 및 테스트 하기가 수월합니다. 기본적으로는 state , lifecycle 등 의 기능을 사용할 수 없습니다. ( 위 기능들을 Functional 에서 사용할 수 있도록 Hook 등장! ) functional Component Example function Welcome(props) { return Hello, {props.name}; } ( props ..

What is React ? 비교적 짧은 러닝커브 React 는 Framework 가 아닌 Library 로 기본적인 javascript 와 html 에 대해 이해하고 있다면 홈페이지에 잘 나와있는 튜토리얼을 통해 개발을 시작할 수 있습니다. 재사용성 , 유지보수에 용이한 구성요소 보유 React 는 component 구조로 이루어져 재사용성 과 유지보수 에 있어서 뛰어납니다. Virtual DOM 을 통한 rendering React 는 virtual DOM 을 통해 변화를 가상 DOM 에 먼저 적용하고 render 시켜 연산을 줄여줍니다. This is React ! React = Library Framework Application 설계 , 개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터..

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 ? 많은 ..