RedbeanMilk Blog
- All
- development
- react
- javascript
쿠키와 세션 (with 캐시)
쿠키 (Cookie) 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지되는 특징이 있습니다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 클라이언트에 300개까지 쿠키 저장이 가능하며 하나의 도메인 당 20…
HTTP 알아보기
HTTP (HyperText Transfer Protocol) 란? HTTP는 WWW(World Wide Web) 상에서 정보를 주고받을 수 있는 프로토콜입니다. 웹에서는 클라이언트와 서버 간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용하고 있습니다. 클라이언트와 서버들은 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트…
리액트에서 Font Awesome 사용하기
기존의 사용 방식과 다른점 기존에 사용했던 직접 소스를 다운받거나 CDN을 통해 소스를 불러오는 방식은 수천 개에 달하는 아이콘을 모두 로드해야 하는 비효율이 발생합니다. 하지만 JavaScript 기반인 React에서 사용할 때는 특정 카테고리에서 원하는 아이콘만 가져와서 사용할 수 있습니다. 이에 따라 빌드 최적화 작업에 용이하다는 장점이 있습니다. …
REST API와 RESTful API 훓어보기
1. REST란? Representational State Transfe라는 용어의 약자입니다. HTTP URI(Uniform Resource Identifier)로 잘 표현된 자원(Resource)에 대한 행위를 의미합니다. 조금 더 설명을 덧붙이자면 여기서 말하는 자원(Resource)는 문서, 그림, 각종 데이터가 될 수 있으며 각 자원마다 고유한 …
var, let, const 특징
1. 변수 선언 방식 은 es5 이하에서 사용되던 자바스크립트 변수 선언 방식 같은 변수 선언을 하는데 문제점이 없습니다. 유연하게 변수 선언을 할 수 있다고 볼 수도 있지만 나중에 코드 양이 늘어날 경우 어디서 해당 변수가 선언되었는지 추적하기도 힘들고 값이 변하는 치명적인 문제가 있습니다. 과 는 es6 에서 새롭게 등장한 새로운 변수 선언 방식입니다…
블로킹, 논블로킹, 동기, 비동기
동기 (Synchronous) 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 동시에 결과를 받아야 하며 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 요청과 동시에 결과를 표시해야하기에 코드를 직관적으로 작성할 수 있으나 요청을 받게 되면 결과를 받을 때 까지 다른 작업을 할 수 없는 단점이 있습니다. 비동기 (…
SPA와 MPA
SPA란 Single Page Application의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. SPA는 기본적으로 웹에 필요한 리소스를(HTML, CSS, Javascript, Images 등)을 한 번 다운로드 후 이후엔 필요한 데이터를 받아올 때만 서버와 통신힙니다. SPA의 장점 앱 실행 시 모든 소스를 받고 난 이후엔 …
웹팩 기본 개념 정리
웹팩이란? 프론트엔드 프레임워크에서 가장 많이 사용하는 모듈 번들러(Module Bundler) 입니다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. ※ 빌드, 번들링, 변환 이 세 단어는 모두 같은 의미입니…
react-router-dom 사용방법
react-router-dom은 리액트에서 SPA 구현할 때 편리하게 라우팅 기능을 사용할 수 있게 만들어진 라이브러리입니다. 설치 방법 기본적인 사용 방법 create-react-app으로 프로젝트를 새로 생성 후 app.js의 내용 안에 뺄 것 다 빼고 화살표 함수 방식으로 바꿨습니다. 또한 react-router-dom을 불러오는데 그 중 Brow…
create-react-app으로 프로젝트 실행할 때 설정된 포트번호 변경하기
작업 중인 프로젝트의 package.json 파일을 열어서 환경변수를 추가하면 원하는 포트번호로 바꿀 수 있습니다. 윈도우 환경에서 설정 아래 start 부분에 set PORT=‘원하는 포트번호’ 를 입력합니다. 리눅스 환경에서 표현 윈도우에서 사용했던 set 명령어를 export 로 변경하여 사용한다.