공부 기록일지📚

마지막 강의는 여태 배웠던 큰 흐름에 대해서 복습하고 추가적으로 깊게 다룰 개념들에 대해서 강의했다.📚복습로그인이란? - 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차이다. 로그인 과정은 사용자가 누구인가? 라는 '인증'부터 시작한다. (신원 식별 과정) 우리는 토큰 방식 로그인과 세션 방식 로그인에 대해서 배웠다.토큰 방식: 엑세스 토큰이 유효한지 아닌지 확인 후 없으면 새 토큰 발급(리프레시 토큰 활용), 아니라면 토큰 유효성 검증세션 방식: 토큰과 동일하나 프론트에서 추가적으로 조작할 일이 없음(간단)세션이란?- 사용자가 로그인하고 로그아웃할 때까지의 시간이다. (세션이 만료되었습니다. 를 생각해보세요) 위에서 신원을 식별했으면 권한을 제어해야 한다. 필..

📚Day3 우선 세션의 정의에 대해서 알아보는 시간을 가졌다. 실체가 있는 것과 실체가 없는 추상적인 개념(e.g. 질감)에 빗대어 이해하기 쉽게 설명해주신다. 세션은 정확히 어떤 개념이다 라고 정의내리긴 어렵고 문맥상 "사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간" 으로 통한다. 정확히 우리가 말하는 "로그인 할 때, 세션을 활용해요." 에서 세션이란 정확히는 세션 방식 로그인을 말한다. 세션 방식 로그인이란 사용자 로그인이 유효한 시간 동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식을 말한다. 보통 내가 알고 있던 세션 방식 로그인이란 서버에 세션아이디를 저장해두는 방식으로 진행되는데, 그래서 어떻게 하는 건지는 정확히 알 수 없었다. JWT처럼 엑세스 토큰이나 리프레쉬 토..

해당 포스팅은 맨 요즘 IT의 [역사로 알아보는 CSS가 어려워진 이유]를 기반으로 요약 정리되어 있습니다. 선택자(Selector)와 선언(Declarations) 둘을 합쳐서 CSS Ruleset 이라고 부른다. strong { color: red; text-decoration: underline } CSS Rule이 가지고 있는 고유의 명시도(specificity)에 따라서 우선순위가 다르게 적용을 할 수 있도록 설계되어 있다. 아래는 명시도에 관한 내용이다. https://css-tricks.com/a-specificity-battle/ A Specificity Battle! (and other trickery) | CSS-Tricks The following is a guest adventure..

📚Day1 로그인의 개념에 대해서 짚어보는 시간을 가졌다. 서비스 관점에서 로그인의 정의를 생각해보면 된다. 인가, 인증, 권한 부여 1. 로그인 구현 중 "백엔드"가 하는 것 사용자 식별 접근 및 동작 제어 2. 로그인 구현 시 "프론트"가 고려해야 할 것 권한이 없는 자원에 접근하지 않는 구조 만들기(e.g. 고객에게 음식점 사장님의 페이지와 데이터가 보여지면 안된다.) 만약 버튼을 안보이게 했더라도 권한이 없는 사용자가 url을 통해 접근하려고 한다면, 권한이 없는 자원의 존재를 모르도록 한다(404page를 보여주는 등) 2-1. FE 최소한의 구현 요구사항 로그인 페이지 로그인 인증관련 데이터 관리 로그인 상태에 따른 화면/ 기능 제어 로그아웃 강의 중간에 실습을 하는 시간을 20분정도 갖게 되..

Typescript에서 useRef를 사용할 때에는 용도에 따라서 타입지정이 달라지게 되는데 크게 두 가지로 나눌 수 있다. 1. 값 저장 용도 (current 객체 자체를 수정하기 위함) : useRef를 로컬 변수 용도로 사용하는 경우이다. 제네릭: 값의 타입을 넣어준다. 초기값: 타입에 맞는 초기값을 할당해준다. const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 제네릭: 참조하는 HTML 엘리먼트를 넣어준다. 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으..

TS + CRA 로 작업하면서 styled-component 를 쓰게됐다. CSS-in-JS 이기 때문에 props를 활용하기 좋다(조건부 스타일링). 하지만 하나의 컴포넌트에 props를 내려주는 식으로 진행하기 때문에 TS에서는 해당 props에 대한 정의가 필요하다. *CSS-in-JS는 스타일 정의를 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 초기 세팅 yarn add styled-components @types/styled-components styled-normalize 📌 styled-normalize: 브라우저마다 다르게 보이는 css를 초기화 코드 분리 styled-components 를 사용할 때 테마/전역스타일 코드 분리 styled-components의 타..

Vite는 '바이트'가 아닌 '비트'라고 발음한다고 합니다. 프랑스어로 '빠르다'라는 뜻이며 정말 빠른 개발을 할 수 있는 도구를 돕기 위해 만들어졌습니다. 자바스크립트는 module(모듈)이 없습니다. 처음 탄생했을 때 대형 어플리케이션을 만들 용도로 만들어진게 아니기 때문인데요. 모듈이 없기때문에 파일을 여러 개로 만들어서 개발할 수도 없었습니다. 하나의 파일에서 거대한 코드를 작성한다면 엉망진창이 될 겁니다. 이후, node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수와 module.export를 쓰는 CommonJS 방식의 모듈이 만들어졌습니다. 당시 js문법에는 import와 같은 표준 모듈 문법이 없었다고 합니다. // CommonJS 방식 const path = r..

왜 사용하게 됐나? 이전에 커스텀 훅이나 유틸리티 기능을 따로 만들어 import하여 react 프로젝트에서 사용하였는데 react-hook-form을 사용하면 여러 form 상태에 관한 처리가 유용할 거 같아 찾아보게 됐습니다. form 양식에 커스텀 훅을 만드는 것보다 react hook form 이라는 라이브러리를 사용하면 form관련 작업을 수월하게 할 수 있습니다. 사용해보기 자바스크립트 패키지 매니저를 통해 리액트 훅 폼을 기존의 React 프로젝트에 설치해줍니다. yarn add react-hook-form npm install react-hook-form 저는 yarn을 사용하기 때문에 yarn을 통해서 설치해주었습니다. 실습 예제로 로그인 폼을 구현해봅시다. HookForm.jsx exp..