Act99 기술블로그

다음 함수부터 먼저 보시죠. 만약 이 함수를 봤을 때, 뭔가 이상한 점을 감지하셨다면 TDZ에 대해 어느정도 이해하신 겁니다. 이렇게 코드를 작성하면 다음과 같은 에러를 발생시키죠. 이 에러는 변수는 선언되었는데, 변수의 값이 할당되지 않는 것을 의미합니다. 변수 선언의 3단계는 다음과 같습니다. 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 (스코프 참조 대상) 초기화 단계: 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리 생성 (undefined 로 초기화 시킨다.) 할당 단계: 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다. 즉, 전에 본 코드는 초기화 단계까지는 갔지만 할당 단계까지 가지 못한 것입니다. 이는 let, const 의 변수 선언이 호이..

실시간 SNS 만들기 제목: Act99그램 기술스택: - React & Firebase - 사용패키지: redux & redux thunk & redux-logger & redux-actions immer, history, connected-react-router moment, lodash, react-router-dom css : styled-components & MUI 구현: 회원 - 로그인기능 (세션 & 쿠키) - 회원가입기능 (이메일, 비밀번호, 패턴구현) - 로그아웃기능 (세션 & 쿠키삭제) SNS/블로그 (CRUD) - 게시글 읽기 - 게시글 추가 - 게시글 수정 - 게시글 삭제 - 디테일 화면 구현 - 좋아요 기능(실시간 변화 o) - 댓글기능 - 알람기능 (realtime database..

클래스형 컴포넌트 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. 클라이언트와 서..