Act99 기술블로그

클래스형 컴포넌트 vs 함수형 컴포넌트 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다. 컴포넌트란 템플릿 기능 뿐만 아니라 데이터가 주여졌을 때 이에 맞추어 UI를 만들어주는 기능을 하며, 라이플 사이클 API 를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변화할 때 작업들을 사용할 수 있다. 물론 클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며, 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자..

ORM 이란? ORM이란 객체 관계 매핑 (Object Relational Mapping)의 준말이며, 우리가 OOP(Objec Oriented Programming) 에서 쓰이는 객체라는 개념을 구현한 클래스와 RDB(Relational DataBase) 에서 쓰이는 데이터인 테이블을 자동으로 매핑하는 것을 의미한다. 하지만 클래스와 테이블은 서로가 기존부터 호환가능성을 두고 만들어진 것이 아니기 때문에 불일치가 발생하는데, ORM 을 통해 객체 간의 관계를 바탕으로 SQL문을 자동으로 생성하여 불일치를 해결한다. ORM을 사용하기 전에는 개발자가 개발을 위해 DB 에 접근하려면 SQL Query 문을 직접 만들었다. 하지만 SQL 문법을 알고 있어야 하며, 쿼리문 작성시간이 오래걸려 개발이 지체되는 ..

1. 전역 상태 관리는 언제할 것인가? React에서는 useState 훅을 이용해 지역 상태 관리를 할 수 있다. 컴포넌트 안에서, 혹은 props로 전달할 때 만 자식 컴포넌트에서 사용할 수 있다. 또한 모든 상태 관리를 props drilling 으로 하나씩 내려주어 전역의 모든 상태관리를 진행할 수 있지만 props drilling 지옥에 빠질 수 있다. 이 때 전역 상태 관리 도구 Context API 와 Redux 등과 같은 도구들을 사용할 수 있다. 2. Context API 특징 Context API 는 React 자체에 내장 기능이기 때문에 React 에서만 사용할 수 있다. 이는 Entry 파일에서 구성한 Provider 을 내려주는 형식이며, 사용하고자 하는 컴포넌트에서 작성한 Dis..

React 에서 Firebase Auth 를 사용하기 위해 다음과 같은 코드를 짰다가 에러가 발생했다. - firebase.js import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, ..

본 내용은 기록용입니다....! Http는 1번 요청을 하고 응답을 받으면 연결이 해제됩니다! 즉, 우리가 access_token을 클라이언트 어딘가에 저장을 해두어야한단 이야기예요! 그럼 이 토큰을 어디에 저장하면 좋을 지, 클라이언트에서 쓸 수 있는 저장소를 알아봅시다. 😉 1. 쿠키 클라이언트 로컬에 저장되는 key:value 형태의 저장소입니다! 약 4KB 정도 저장할 수 있어요. 쿠키 만들기 이 때 꼭, 어떤 사이트로 들어가신 후에 여셔야 쿠키를 사용할 수 있습니다. 브라우저에서 개발자 도구를 열고 해봅시다! // key는 MY_COOKIE, value는 here, document.cookie = "MY_COOKIE=here;"; 쿠키 가져오기 console.log(document.cookie)..

[옛날 이야기 - 세션 기반 인증] 예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었다. 서버의 세션에 사용자 정보를 넣고 이 사람이 로그인을 했나 안했나 전부 기록하고 기억했다. (사용자 세션에) 이 세션은 서버의 메모리나 데이터베이스 등에 저장해두는데, 로그인한 사용자가 많아지면 서버 과부하가 온다. 그렇다고 서버를 여러개 놓자니 관리가 까다로워진다. 따라서 최근에는 토큰 기반 인증 방법을 많이 사용한다. 토큰 기반 인증 방법 1. OAuth2.0 외부서비스의 인증 및 권한부여를 관리하는 프레임워크이다. => Open Authentication, Open Authorization 이라고 한다. (인증과 허가를 포함) OAuth 동작방식 간단하게는 3가지 방식으로 동작한다. 1. 클라이언트와 서..

자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작합니다.) Callback 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나며, 콜백 헬, 멸망의 피라미드라고 불리는 엄청난 중첩 문제가 생기기 쉽다. 이런 콜백 헬이 발생하는 이유는 1. 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 진행..

DOM DOM 이란 Document Object Model 의 약자로, 문서 객체 모델이며, 문서 객체란 html 이나 body 와 같은 html 문서의 태그들을 Javascript 가 이용할 수 있는 객체로 만든 것을 말한다. 즉, DO => Document Object 에 M Model 이 합쳐진 DOM은 문서 객체를 인식하는 방식이라고 생각하면 되며, 웹 부라우저가 HTML페이지를 인식하는 방식을 의미한다. 다른 말로, document 객체와 관련된 객체의 집합이라는 것이다. DOM은 tree 자료구조로 형성되어 있는데, root 노드로부터 leaf node 로 뿌리내리는 형태로 이루어져 있다. Javascript로 문서 객체를 생성한다는 의미는 가장 주로 사용되던 HTML 페이지에 적혀 있는 태그..