본문 바로가기

분류 전체보기

 (397)
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를 사용하면서..
인증 관련) Spring Security에서의 인증관련 Configuration 설정, AuthenticationEntryPoint에 대하여 도움: https://kimchanjung.github.io/programming/2020/07/02/spring-security-02 ==> Spring Security에 대한 유용한 짧은 글(Security와 관련된 각종 중요 메서드와 커스텀 필터를 등록하는 방법 설명). 요약: Spring Security의 각종설정은 HttpSecurity를 이용하여 한다.  설정의 세부 내용이 방대하기 때문에 공식 문서를 참고해야함.  내가 만들어 놓은 API명세서를 보면서 별도로 인증이 필요하지 않은 URL요청을 모두 antMatchers()의 매개변수에 넣어준다. 우선 Auth와 관련된 API요청에서는 인증이 따로 필요하지 않다. Auth를 해야하는 페이지이기 때문에 그런것 같음ㅋㅋ 다음으로 Board영역 으..
Front-end 폴더구조 apis: 백엔드와 연관되는 api관리 asseets: 이미지나 비디오 파일 관리components: 공통 컴포넌트관리costants: 상수들hooks: 훅함수layouts: Header, Footermocks: 쓸일은 없지만 일단 만듬stores: 전역상태 관리(전역상태변수를 관리하는 영역으로 여기서는 SWR대신 ZUSTAND를 사용한다)types: 각종 type관리utils: 각종 utilsviews: 페이지와 관련된 파일 관리
DML(2) 어떤 것을 참고 하여 DML쿼리를 작성해야 하나? VIEW작성? "게시물 작성" 에서는 API명세서보다는 게시물 작성시 board테이블안에 하나의 board인스턴스가 생성되는 것이기 때문에 데이터베이스의 DDL을 보고 DML를 구성해 주었다. 하지만 게시물 상세 같은 경우는 DDL의 특정 테이블을 보는 것이 아닌 클라이언트가 서버로부터 Response받는 내용물들에 모든 정보가 있는 것이니 API명세서를 보는 것이다. RESPONSE의 내용은 아래와 같다. 따라서 이러한 내용들을 얻을 수 있게 DML을 구성해 주어야 하고 board와 user테이블을 조인하면 아래의 데이터들을 얻을 수 있다.다만 '게시물 이미지 리스트' 같은 경우는 user와 board테이블을 조인해도 얻을 수 없으니 image테이블에서 별도로 가져 온 것이 '상세 게시물 불러오기'의 DML쿼리 였다..
DML 작성 FRONT에서 데이터를 입력하여 이것을 서버에 반영하고 싶거나 데이터를 불러올때 DML이 필요한데 이때 DML을 작성하는데 있어 단순히 만들어놓은 API명세서만을 보고 DML을 작성하는 것이 아니라 작성해놓은 DDL의 생성된 테이블을 참고하여 하나의 테이블에 넣을 하나의 튜플(인스턴스)을 만들기 위해 어떤정보를 DML에 넣을 것인지를 판단해준다. 클라이언트에서 REQUEST를 보내면서 BODY에 실어보내는 정보 뿐만이 아니라 서버 자체에서 얻을 수 있는 정보는 REQUEST의 BODY에 포함되어 오지 않기 때문에(이말 맞는 말임????) DDL에 정의된 테이블의 필드를 살피는 것이다. 예를들어 API명세서에 '게시물 작성' 이라는 기능이 있는데 게시물을 작성하기 위해 어떤 정보가 필요한지는 서버 자체에서..

티스토리툴바