hojncode 웹개발 공부하기.

- 보내다 라는 의미를 포함하고 있는 Dispatcher Servlet 은 HTTP 프로토콜로 들어오는 모든 요청을 가장 먼저 받아 적합한 컨트롤러에 보내주는 Front Controller 이다. - Dispatcher Servlet은 해당 어플리케이션으로 들어오는 모든 요청을 핸들링 해주기 때문에, 우리는 컨트롤러를 구현해두기만 하면 Dispatcher Servlet가 알아서 적합한 컨트롤러로 위임을 해주는 구조가 된다. 1. 클라이언트가 URL 로 접근하여 정보요청. 2. DispacherServelt이 해당 요청을 매핑한 컨트롤러가 있는지 검색. 3. HandlerMapping 에서 해당 Controller로 처리 요청 4. Controller 가 View (*클라이언트의 요청을 처리하고 결과를 출..

더보기 에러 원인: JSON 데이터에는 특정 property가 존재하나, Class에는 해당 field가 존재하지 않아서 데이터를 맵핑시키지 못하여 발생하는 현상. (json 문자열에 있는 키값이 DTO등 객체에는 없어서 생기는 문제) 해결 방법 // Class에 @JsonIgnoreProperties를 선언하여 무시하도록 처리합니다. // 관련 있는 모든 클래스와 내부클래스에 넣을것 @JsonIgnoreProperties(ignoreUnknown = true) public class "클래스명" { ... }

VO , DTO VO : 데이터 그 자체로 의미 있는 것들 DTO : 전송되는 데이터의 컨테이너 VO (Value Object) DTO (Data Transfer Object) VO는 변하지 않는 데이터 객체를 의미. DTO 는 데이터를 담는 그릇. 사용 되는 값이 객체로 표현 되어지는 경우에 사용. 값의 변경 없음 데이터의 전송을 위한 객체, 과거에는 값을 전달하는 데만 사용되었지만 현재는 비지니스 로직 등을 가지고 있는 경우가 많음. VO는 클라이언트와 밀접한 관계 DTO는 Database 와 관계 VO를 조회때 사용하는 이유는 VO 에 들어있는 값이 Database 에 저장되어 있는 값을 조작하는데 사용되고 있지는 않기 때문. (조회하는데 필요한 조건으로 사용되는 값일뿐 그 값이 DB 테이블에 반영..

캐럿마켓 클론 코딩 중 , 이메일로 전송된 회원 인증 토큰을 입력하였을때, 500에러 발생. 로컬 서버에서의 오류 구문 확인 : Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at new NodeError (node:internal/errors:387:5) 오류 구문의 내용 : 해당 코드가 동일한 요청에 대해 둘 이상의 응답을 보내려고 할 때마다 발생함. 이 문제에서 고려해 볼 것 CORS: 해당 오류를 일으키는 원인에 대해 찾아보았으나, 참조하는 외부 사이트가 지금의 경우에는 없고, prisma 와 planetscale의 연결상 오류를 찾을 수 없었음. content-type: 코드 상에는 ‘appl..

3개월정도 react, typescript , next.js, 온라인 대학 강의를 수강하고 있고 앞으로도 계속 진행 중이다. 강의를 많이 듣고 코드를 따라치고 과제를 내가 만든 코드를 적용해가며 컴포넌트끼리 유기적으로 작동하는 원리를 이전보다 더 체화 시킬 수 있었다고 생각한다. 최근 2주정도 강의를 보며 만든 프로젝트를 이것저것 뜯어 고치다보니 , 500에러를 마주하게 되었다. 이 에러를 고치지 못하여 몇일을 날 밤 새우고, 아무리 구글링과 gpt 를 활용해도 고칠 수 없었다. 무한 반복되는 에러를 잡고자 시도 하고 공부하였지만 아쉽게도 아직 고치지 못하였다. 그러다보니 도저히 글을 남기거나 메모하기 벅찬 상태가 되어 그간 내 공부 기록을 블로그에 남기지 못하였다. 지치기도 하였다. 처음 공부를 시작할..

React로 컴포넌트를 만들 경우, function 과 화살표 함수를 사용해서 만들때 두가지의 차이점은 무엇일까? function : 화살표 함수 arrow function : 위 처럼 두가지 방법 모두 사용이 가능하고 성능의 차이는 없다. 단 여기서 알 수 있는건 자바스크립의 호이스팅 개념을 공부 해 볼 수 있다. 1. 화살표 함수 2. function 1번의 화살표 함수의 경우 , const 로 선언되기에 const 아래줄에 func() 을 입력해야 동작한다. 2번 function 의 경우, JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문에, 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다. (const , let 으로 선언한 변수도 호이스팅 대..

https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator 일반 형제 결합자 - CSS: Cascading Style Sheets | MDN 일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있 developer.mozilla.org 일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다. p ~ span { color: red; } 이건 빨강이 ..

나의 priviate 레파지토리에 개인 프로젝트를 커밋을 하다가 실수로 API 키를 그래도 깃허브에 pr 한 실수가 있었다. 그래서 작업 내용은 그대로 두면서, 잘못 노출된 api 키를 삭제하는 방법을 다음과 같이 정리 해 본다. (해당 커밋의 코드 내용만 수정할 수 있다. 그러면 이후 커밋에서도 변경한 내용들이 적용된다.) 1. git rebase --interative 이렇게 하면 깃의 head가 수정하고자 하는 커밋을 가리킨다. 2. 터미널의 첫번째 줄에서, pick , 여기서 pick 을 edit 으로 변경한다. 3. 이제 변경 하고자 하는 해당 파일의 코드를 수정한다. 4. git add . , 또는 git add 을 터미널에 입력한다. 5. git commit --amend 를 입력한다. 6...

Object Activites Time Schedule 목표 달성 확인 개발에 도움이 되는 영어공부 꾸준히 하기 개발 영어 서적 , 영어 글 읽고 해석하기 1주 마다 , 책 한 챕터 분량. 해석, 공부 내용 정리후 블로그에 업로드 하기 유튜버 영상 클론 코딩 하기 유튜브 해외 채널 참고. 매주 일요일 저녁 진행. 코딩 내용 깃헙에 업로드 하기

오늘 TIL 3줄 요약 Rest API 도커 모바일 어플리케이션 종류 책에서 기억하고 싶은 내용을 써보세요. REST (representational state transfer) 방식으로 설계한 API를 뜻하는 명칭. 1 . rest 없이 영화 api 를 설계 할 경우. - 영화 정보 생성 : /createMovie - 모든 영화 정보 조회: /seeMovies - 특정 영화 정보 조회 : /getMovie/avatar - 특정 영화 정보 삭제 : /deleteMovie/avatar - 특정 영화 정보 수정: /editMovie/avatar 위 와 같은 url 은 패턴이 없다는 문제가 있다. see와 get 처럼 헷갈리기 쉬운 단어를 사용했기에 (작업시 실수로 get을 see로 입력할 수도 있다 ) 백엔..