Front-End

[React] useEffect와 sideEffect

useEffect란? React에서 제공하는 useEffect()는 sideEffect를 처리하기 위해 사용한다고 한다. 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구라고 생각하면 된다. 즉, 렌더링 이외에 일으켜야하는 sideEffect를 일으킬 탈출구라고 보면 된다. sideEffect를 렌더링 이후에 발생하며 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킨다. SideEffect란? sideEffect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 sideEffect라 한다. 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에..

[Web] Authentication vs Authorization

인증 (Authentication) / 인가 (Authorization)은 항상 함께 등장하는 개념인 동시에 사용하기에 헷갈리는 용어이다. 그래서 서로 다른 개념이지만 이 둘의 차이를 두지 않고 종종 혼용되어 쓰이고 있다. 인증 (Authentication) 인증이란 어떤 개체 즉, 유저 혹은 디바이스에 대한 신원을 확인하는 절차 및 과정이다. 개체는 보통 어떤 인증 요소를 증거로 제시하여 자신을 인증한다. 예를 들어 은행에 가서 돈을 인출하려면 은행직원은 돈을 인출하는 사람이 누구인지 확인하기 위해 신분증을 제시해 달라고 요청할 수 있다. 더 간단히 말하면 어떤것을 검증할 수 있는 방법이다. 인가 (Authorization) 인가는 인증과 달리 어떤 개체 즉, 유저 혹은 디바이스에 대한 접근 권한이 있..

[React, JS] 비동기 동기 처리

동기 (Syncronous)와 비동기 (Asynchronous)는 프로그래밍 언어에서 중요한 개념이다 동기 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말한다. 즉, 요청과 결과가 동시에 일어나기 때문에 코드가 직관적이고 이해하기 쉽다. 코드가 짜여진 순서대로 실행된다. 비동기 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다. 즉, 결과가 나올 때 까지 기다리지 않고 다른 일을 처리할 수 있기 때문에 코드나 순서는 이해하기 어려워도 자원 사용을 좀 더 효율적으로 할 수 있다. 코드가 짜여진 순서대로 실행되지 않는다. 자바스크립트에서 동기와 비동기 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다. 그러므로 자바스..

[React] 상태관리 (Local State, Global State, Cross Component State)

https://dev.to/oahehc/redux-data-flow-and-react-component-life-cycle-11n Redux Data Flow and React Component Life Cycle Almost everyone who wants to learn Redux had seen this image before. It's pretty straight forward fo... dev.to 현대 웹 개발의 흐름은 단순한 웹 페이지를 넘어 웹 애플리케이션을 구축하는 방향으로 나아가고 있다. 이제 브라우저는 단순히 정적인 페이지를 렌더링하는 도구가 아니라. 하나의 애플리케이션의 운영을 돕는 작은 규모의 OS라고 볼 수 있다. 웹 프론트엔드는 앱 여러 부분에서 각 요소의 상태를 관리해야 한..

웹팩과 바벨 (Webpack vs Babel) 넌 또 누구냐!!

웹팩이란 (WebPack)? 웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러로 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다. 의존성을 분석해 모듈을 번들시켜주는 역할을 하며 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 짠! 하고 만들어준다. 웹팩의 등장 배경 웹팩이 등장한 이유는 크게 3가지이다 파일 단위의 자바스크립트 모듈 관리의 필요성 웹 개발 작업 자동화 도구 (Web Task Manager) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 웹팩설치 npm i react react-dom npm i -D we..

모듈과 번들러 (Module Bundler) 넌 누구니?!

리액트로 개발하는 프론트엔드 개발자들은 리액트에만 집중하고 웹팩, 바벨, 번들링 도구들이 어떻게 돌아가고 동작하는지는 모르고 지나간다. 나를 포함 프론트엔드 개발 환경을 이해하기 위해서는 꼭 알아야 된다고 들어서 이번에 정리해 보려고 한다. Webpack과 babel에 들어서기 앞서 모듈 + 번들러에 대해서 알아보자! 모듈이란? 모듈(Module)이란 프로그래밍 관점에서 특정 기능을 갖는 파일 하나하나, 특정 기능을 갖고 있는 작은 코드 단위를 의미한다. 우리가 개발을 하다보면 가독성과 유지보수 향상을 위해 파일을 여러 개로 분리를 하는데, 이때 분리된 파일 각각을 모듈이라고 부른다. 모듈이 필요한 이유 브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역을 공유한다. ..

[React] Router

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 즉, 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않기 때문에 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다 이런 이유 때문에 리액트는 Framework가 아닌 Library로 분류된다 리액트 라우터 (React Router) 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해 주는 라이브러리 라고 볼 수 있다 설치 npm i..

[React] React-Query

React-query 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용 사용하는 이유 react-query를 사용함으로 서버, 클라이언트 데이터를 분리 장점 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 데잍가 오래 되었다고 판단되면 다시 get 동일 데이터 여러번 요청하면 한 번만 요청 무한 스크롤 비동기 과정을 선언적으로 관리할 수 있다 React Query의 라이프 사이클 fetching - 데이터 요청 상태 (요청을 수행하는 중인 쿼리) fresh - 데이터가 프레시한..

AWS 터미널 명령어

배포 과정 관련 코드들 Amazon에서 받은 키페어 chmod 뒤에 숫자 세개가 나오는데 차례대로 나 / 그룹 / 전체에 대한 권한을 의미한다 권한은 3가지로 read(4) , write(2), execute(1)가 있는데 이 숫자들 합의 조합으로 권한을 나타낸다 chmod 400의 의미는 4/0/0 으로 나에게만 읽기 권한이 있도록 하는 것이다 권한 설정이 완료되었으면 우분투 서버 열기 ubuntu@ 뒤에 ip 주소는 인스턴스를 생성하고 설정한 퍼블릭 혹은 탄력적 IP 주소이다 이렇게 나오면 우분투 서버에 성공적으로 들어간거다 여기서 원하는 프로젝트를 클론하면 된다 하지만 그 전에 우분투 서버에 Node를 설치해야 한다 curl -sL | sudo bash - sudo apt-get update sud..

AWS란?

Traditional IT 방식의 문제점 Datacenter 렌트 비용을 지불해야한다. (보통 monthly / yearly contract) Power supply, cooling, maintenance 비용을 지불해야한다 새로운 하드웨어(서버)를 추가하거나 교체할 때 시간이 많이 소모된다 확장하는데 제한사항이 많다 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야 한다 천재지변에 대응하기 어렵다(지진, 화재, power shutdown, 등) Cloud Computing Cloud computing 이란, IT 리소스르르 인터넷을 통해 on-demand로 제공해주는 서비스를 말한다 Cloud 서비스를 이용하면 사용한만큼만 지불하면 되는 pay-as-you-go pricing이 적용된다..