본문 바로가기

전체 글

 (401)
HTTP의 인증방식에 대하여(Basic Authentication, Bearer Token Authentication, OAuth) 출처: https://www.youtube.com/watch?v=USu2W2N1Q4Q&list=PLbq5jHjpmq7q-Td2jOXtpf7SD5c53RqXh&index=9 좋은 글: https://engineerinsight.tistory.com/69 정말 좋은 글: https://engineerinsight.tistory.com/163어떠한 내가 모르는 내용이 나왔을때 그것을 처음부터 검색해 보려하면 한숨부터 나오고 힘들다는 감정이 생기는 것 자체가 잘못된 방향으로 가고 있는 것이다. 그럴 때는 잠시 리프레쉬하는 시간을 가지고 다시 시작해야 한다. 잠시 쉬라는 것이다. 사실 유튜브영상의 이 내용을 쉬지 않고 익숙히 하기는 힘들었고 몇번의 리프레쉬 끝에 어떻게 하면 이렇게 접해보지 않은 정보를 찾..
VSCode 단축키 beauty (extension) 설치시, 코드정렬(나는 설치되어 있음) (ctrl+a 로 전체 선택한후에)ctrl + shift + b
상태관리 라이브러리인 Zustand 에 대하여 주스탠드(zustand)는 독일어로 ‘상태’라는 뜻을 가졌고, 간결한 플럭스(Flux) 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리다. 조타이(Jotai)를 만든 카토 다이시가 주스탠드도 만들어 관리하고 있다. 주스탠드는 특정 라이브러리에 종속되어 만들어진 도구는 아니므로 바닐라 자바스크립트에서도 사용이 가능하다.주스탠드는 발행/구독 모델(pub/sub)을 기반으로 이루어져 있다. 스토어의 상태 변경이 일어날 때 실행할 리스너 함수를 모아 두었다가(sub), 상태가 변경되었을 때 등록된 리스너에게 상태가 변경되었다고 알려준다(pub).그리고 스토어를 생성하는 함수 호출 시 클로저를 사용한다. 이로 인한 특징으로 상태를 변경, 조회, 구독하는 인터페이스를 통해서만 상태를 다루고, 실제 상..
상태관리 라이브러리에 대해서 SWR, ZUSTAND등 상태관리라이브 러리에 대해 배우고 있다. 하지만 정작 상태관리라이브러리 자체가 왜 필요한지 모르는 현상이 발생했다. 이에 상태관리 라이브러리에 대해 알아보고자 한다. 상태관리가 필요한 이유?상태관리가 필요한 이유를 이해하기 위해선 우선 상태가 무엇인지 알아야한다상태란?상태(state)는 React에서 컴포넌트 내에 관리되는 변수, 즉 변하는 데이터들이다.React API setState()로 선언되는 그것 맞다.props drilling컴포넌트들은 서로 상태를 공유해야한다. 컴포넌트들은 props 형태로 상태를 공유한다.자식 컴포넌트간에는 상태 공유가 불가능하고, 부모 컴포넌트를 통해서만 상태를 공유할 수 있다. 이때 문제는, 컴포넌트 계층이 많아지면 props 하나를 전달하는데..
useParam에 대하여 usePrams이란? react-router-dom 에 있는 훅으로 URL의 동적 파라미터를 반환한다. 예를들면 아래와 같다.  여러개의 상품이 나열되어 있는 페이지에서 특정상품을 클릭하면 그 상품과 관련된 상세 페이지로 이동하게 구현한다고 해보자.  그렇게 이동된 페이지에서 useParam()을 사용하면 현재 주소의 동적 url만을 가져오는 것이다. 즉 아래 그림에서 params변수는 현재 주소의 동적url인 p1을 값으로 갖게 되는 것이다.
라우터 설계를 위한 기초 설정 //아래 description들은 라우터설계를 위한 사전작업.  //description: 메인 화면 :'/' - Main  // 메인화면의 경우 경로는 '/'로 설정된다. 컴포넌트의 이름은 Main이 된다.//  //description:  인증과 관련된 회원가입과 로그인 페이지 : '/auth' - Authentication  //  //description: 검색화면 : '/search/:searchWord' - Search //  // description: 유저 페이지: '/user/:userEmail' - User //  // description: 게시물 상세보기 : '/board/:boardNumber' - BoardDetail//(여기서 BoardDetail은 컴포넌트 이름임)  // d..
폰트적용 방법 눈누라는 사이트에서 폰트를 적용할 때는 그냥'웹폰트로 사용' 란에 있는@font-face { font-family: 'GimhaeGayaR'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/GimhaeGayaR.woff') format('woff'); font-weight: normal; font-style: normal;}코드를 그냥 index.css에 복붙하면 되었다. 그런데 구글 폰트는 이런 형식으로 주워지지 않고이와 같이 HTML형식으로 주워져서 어떻게 할지 당황스러웠다. 하지만 혼동할 필요없다. 당신의 html의 부분에 코드를 삽입하라고 나와있지 않은가?  그래서 그냥 내 프로젝트의 i..
서버사이드 DTO만들기, 프론트측 DTO(API)만들기 도움: https://thalals.tistory.com/268 대원칙중 지켜야 할 것은 서버측에서만 DTO를 만드는 것이 아닌 프론트 측에도 똑같이 DTO에 해당하는 API를 만들어 주어야 하는 것에 있다.  요약: ResponseEntity란 Httpentity를 상속받는 클래스로써 결과 데이터와  HTTP상태코드를 직접 제어할 수 있는 클래스이다. ResponseEntity에는 사용자의 HttpRequest에 대한 응답 데이터가 포함된다. 또한 HTTP아키텍쳐 형태에 맞게 Response를 보내주는 것에도 의미가 있다. 에러 코드와 같은 HTTP상태 코드를 전송하고 싶은 데이터, 헤더값과 함께 전송할 수 있기 때문에 좀 더 세밀한 제어가 필요한 경우 사용됨. 즉 정리하자면 RestAPI를 사용하면서..

티스토리툴바