mbti 프로젝트 스타또~
- 트 러 블 슈 팅 -
<개인프로젝트 mbti 시작>
vite 세팅부터 고난이였다. 내컴퓨터가 자동으로 onedrive동기화가 걸려있어
tailwind 패키지 설치가 안됐다. 그래서 onedrive 설정으로 가서 동기화 해제를 해주고 바탕화면은 해제할수가없어 문서를 해제 해주고 onedrive가 아닌 내문서에서 폴더를 추가해 만들어서 작업을 진행하면 문제없이 진행이됐다.
<공통 헤더(네비)바 만들어주기>
헤더(네비)컴포넌트 하나만들어서 레이아웃 만들어주고
BrowserRouter랑 Routes 사이에 컴포넌트넣어주면
모든 Route에 적용이 된다!!
< 원하는 경로 컴포넌트만 렌더링 하기>
location 훅을 이용한 pathname 을 가져다가, include메서드를 이용해 있으면 true 없으면 false 를 하여 return문에 && 을 이용해 왼쪽이 트루면 오른쪽값을 반환하게 만들어 적용을 해준다.
const location = useLocation();
const checkingIncludePathName = ["/", "/login", "signup"].includes(
location.pathname
);
return
{checkingIncludePathName && }</headerbar >
< &&에 대하여>
{showHeader && } // &&은 왼쪽이 트루면 오른쪽값을 반환해라.</headerbar >
showHeader가 true이면 컴포넌트를 렌더링합니다.</headerbar >
가이드, 요구사항 -> 보면서 개인프로젝트 진행하기!
react-router-dom -> 심화1-12 강의14분
redux = zustand 둘다 알아야함 최신은 zustand (redux로부터파생된새로은것임)
인증 ( Authentication )-> 로그인 과정이다.
인가 ( Authoriztion ) -> 인증한(로그인한) 사람에 한에서 특정서비스를 누릴수있는!
`````````````````````````````````````
HTTP 프로토콜 의 특징 2가지
1. 무상태 ( stateless )
HTTP 프로토콜은 무상태 프로토콜이다.
각 요청이 독립적이다.
클라이언트가 서버한테보내는 모든요청이 각각 독립적이다.
독립적이다라는말은 이전에 요청을보냈었던내용에 종속되지않는다.
서버가 이전요청에 대한 내용의 기억할필요가없고 기억하지않는다 라는게 중요한특징이다.
그래서 요청을 보낼때마다 나는 어떤클라이언트고 어떤걸원한다라는것을 매번 보내야한다(헤더,바이,URL등)! 그래서 무상태이다. 라고할수있다.
2. 비연결성
서버와 클라이언트는 연결되어 있지 않습니다. 서버입장에서는 매번 새로운 요청이다. ( 무상태와 비슷하다)
예를들어 카톡할때처럼 1대1 대화에서 대화를 주고받고 끝나는 연속적으로 연결된 것이아니라, 한번 보내면 한번 답이 오고 끝! 새롭게 다시 보내고 응답보내면 끝! 이 반복되는것이다.
``````````````````````````````````
쿠키, 세션, 토큰 중 쿠키 에대하여
쿠키 에대하여
브라우저에 저장되는 작은 데이터 조각이며, key-value형태로 저장된다.
-> 쿠키를 사용하여 마치 서버가 클라이언트의 인증상태를 기억하는것처럼 구현할수있다.
-> 서버와 통신할때 자동으로 쿠키를주고받게된다, 쿠키를 별도로 삭제처리하거나 유효기간이만료되지않는한에서.
1. 브라우저에 저장된다
2. 쿠키는 서버가 클라이언트한테 응답을줄때 set-cookie속성으로 저장한다.
3. set된 쿠키는 자동으로 서버요청할때 보내져서 마치 서버가 클라이언트의 상태를 기억하고있는것처럼 동작한다.
4.서버가 set한다고했지만 브라우저 역시도 클라이언트에서 직접 추가수정삭제를할수있다.
세션은 개념만 알면됌!
세션- 사용자와 서버간의 연결이 활성화된 상태를 의미하는개념이다. ( 또는 인증이 유지되고 있는 상태)
로그인성공-> 서버에서 세션 생성 및 저장(키-벨류형식) -> key(sessionId)를 브라우저에 응답(by 쿠키)
~~~~~~~~~~~~
tailwind.css
className
유틸리티클래스 <div className="p-4"></div> // 페딩 4 준효과이다.
패키지설치-
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p // 파일2개생김 (8분50초심화강의)
~~~~~~~~~~~~
`````````````````````````````````````````````````
- 문제은행하며 메서드기본구조 -
Math.round((totalAge / users.length) * 100) / 100 → 소수점 둘째 자리까지 반올림
이 부분이 핵심이야!
Math.round()는 소수점 이하를 반올림하는 함수야.
reduce 메서드 기본 구조
javascript
복사
편집
array.reduce((accumulator, currentValue) => {
// 로직 작성
return updatedAccumulator;
}, initialValue);
accumulator: 이전 콜백 호출에서 반환된 값 (누적값)
currentValue: 현재 처리 중인 배열 요소
initialValue: accumulator의 초기값reduce 메서드 기본 구조
javascript
복사
편집
array.reduce((accumulator, currentValue) => {
// 로직 작성
return updatedAccumulator;
}, initialValue);
accumulator: 이전 콜백 호출에서 반환된 값 (누적값)
currentValue: 현재 처리 중인 배열 요소
initialValue: accumulator의 초기값
``````````````````````````````````````````````````````````