전체 글 검색 결과

해당 글 163건
(프론트엔드의 첫걸음) npm (node Package Manager) 란?

흔히 개발하면서 자주 접하는 npm 에 뜻해 대해 잘 알지 못하는 것 같아 공부 겸 정리해두려고 한다. NPM (Node Package Manager) 자바스크립트(JavaScript) 프로그래밍 언어를 위한 패키지 관리자이다. Node.js 에서 사용하는 모듈을 패키지로 묶어 npm 을 통하여 관리하고 배포하고 있는 것이다. 이 뜻을 다시 풀어 설명하자면, 다른 사람들이 만들어둔 모듈을 npm을 통하여 설치하고 사용이 가능하다는 것인데 앞에서 설명한 다른 사람들은 내가 될 수도 있다. 😊 1. npm 설치 node.js 다운로드 : https://nodejs.org/en/ 보통 안정적인 LTS 를 다운로드하는 편이다. window 에서는 위 사이트를 통해 다운로드하지만, mac 에서는 cmd 에 nod..
Front-End/Etc 2021. 10. 1. 11:23
(프론트엔드의 첫걸음) 바벨(Babel) 이란?

바벨 (Babel) 최신 자바스크립트 문법을 공부하면서 많이 들었던 단어가 바로 바벨(Babel) 이다. 그렇다면 바벨은 무엇일까? 바벨(Babel)이란, 입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러이다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다. JavaScriptES6 에서 JavaScriptES5 로 변환해준다는 얘기다. 현재는 바벨을 사용하여 JSX 문법, 타입스크립트(TypeScript) 와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있다. 바벨(Babel) 실행하기 // npm init > npm init -y // 필요한 패키지 설치 > npm install @babel/core @babel..
Front-End/Etc 2021. 10. 1. 10:01
(프론트 엔드의 첫걸음) 브라우저 저장소에 대해 알아보자

브라우저의 저장소에는 종류에 대해 알아보자. 로컬 스토리지 (Local Storage), 세션 스토리지(Session Storage) 로컬 스토리지 (Local Storage) 는 HTML5 에 추가된 저장소이다. 간단한 키와 값을 저장할 수 있는 곳이며, KEY - VALUE 형태이다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 남아있다. 세션 스토리지의 데이터는 사용자가 윈도우나 브라우저는 닫으면 제거된다. 자동로그인 등 지속적으로 필요한 데이터는 로컬 스토리지에 저장하고, 일회성 로그인 정보 등 잠깐 필요한 데이터는 세션 스토리지에 저장하면 됩니다. 로컬 스토리지 localstorage.getItem(); 세션 스토리지 s..
Front-End/Etc 2021. 9. 30. 16:36
npm install 할 때 No repository field error 발생

npm install 할 때 No repository field Error 이럴 경우에는 // package.json "repository": { "type": "git", "url": "git://github.com/username/repository.git" } 를 추가하거나 // package.json { "name": "my-app", "version": "1.0.0", "private": true } 를 추가하면 정상적으로 동작한다. 위 경우 말고도 repository 를 remote 한 후, npm install 할 때마다 발생했던 에러가 있다. warning: CRLF will be replaced by LF in some/file.file. The file will have its orig..
Front-End/React 2021. 3. 5. 15:09
[React] 리덕스 사용 전 Flux 아키텍처 알아보기

Flux Flux 의 배경 FLux 는 MVC 문제 해결하는 목적으로 고안된 어플리케이션 아키텍처이다. MVC 의 문제점은 대규모 어플리케이션인 경우 MVC 가 너무 빠르고 복잡해진다는 점이다. 그렇기 때문에 코드 예측이나 테스트의 어려움, 유지보수 비용 증가 등 다양한 문제가 발생한 것이다. Flux 란 무엇일까 Flux 어플리케이션은 디스패처(Dispatcher), 스토어(Store), 뷰(View) 3가지로 구성된다. Action Action 은 중앙 저장소에 저장된 state 에 무슨 동작을 할 것인지 적어놓는 객체이다. 상태에 어떠한 변화가 필요하면 action 이란 것이 발생한다. 액션 객체에는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 되는데 그 외의 값..
Front-End/React 2021. 2. 23. 15:12