JustDoEat

개요.헤커톤 프로젝트로 진짜 남들이 보면 비웃을 수도 있는 Spring Boot로 기본적인 CRUD 구현을 했다,헤커톤이 끝난 후 다른 사람들이 spring boot로 만든 프로젝트를 보면서 이건 왜 이렇게 했지 등을 연구하면서 공부를 하고 있었다! 공부를 하면서 이해하기 어려웠던 부분이나, 나의 회로구조로 이해한 경험을 적어보고 싶었다. 비록 미흡할수는 있지만 추후 추가적인 공부가 필요하거나, 비슷한 내용에 관해서 새로운 지식을 얻는다면 이어서 써보고 싶다. 컨트롤러에서 프론트엔드로 API응답을 넘겨줄 때ResponseEntity 객체를 사용해서 넘겨주는 방법에 대해 적어보겠다. RestApiResponse는 사용자가 정의하는 클래스 이므로, 2편에서 이어서 설명하겠다!!ResponseEntity Re..

회고(에러를 바라보는 관점)https://kingmusung.tistory.com/59 [오류해결] 머리박고 배운 cookie개요.프런트엔드에서 사용자인증을 하는 과정에서(JWT사용을 하지 않고, cookie를 이용한 인증 방법 구현임.) 서버에서 넘겨준 JSESSIONID 쿠키는 HTTPONLY로 설정이 되어있으므로 JS, TS 즉 프런트엔드kingmusung.tistory.com 위 글에서는 다 안 담았지만, 더보기에러 로그를 살펴보았는데, 뜬금없이 CORS에러가 뜨는 것이다. 백엔드 서버에서도 CORS설정을 잘했고, api요청 시에도 "withcredential:true" 설정으로 분명 전까지 잘 되었는데 무엇이 문제일까 하고. 찾아본 결과"쿠키의 값은 일반적으로 ASCII 문자로만 저장되기 때문에..

개요.프런트엔드에서 사용자인증을 하는 과정에서(JWT사용을 하지 않고, cookie를 이용한 인증 방법 구현임.) 서버에서 넘겨준 JSESSIONID 쿠키는 HTTPONLY로 설정이 되어있으므로 JS, TS 즉 프런트엔드에서 쿠키의 값, 존재여부를 읽어 올 수 없기 때문에 JSESSIONID 쿠키의 생명주기와 일치하는 쿠키를 만들어서 대안으로 사용하는 과정에서,  쿠키의 정체를 잘 알 필요성이 있었고, "쿠키라는 단순한 개념" 으로는 성에 안 차서 이참에 알아보기로 했다! 중간중간 어떤 부분에서 어려움을 겪었고 해결했는지도 적어보았다..! 개인적으로 오류를 해결하면서 느낀 공통적인 부분에 대한 회고를 해보려고 한다.쿠키의 기본적인 구조.name=value; expires=Date; path=Path; d..

개발환경.frontend: TypeScripts, React, ViteBackend: Java, Spring Boot, FlaskDocker 해결과정 생략 및 결과만 보실 분들은 맨 아래만 참고 바랍니다.개요.API 테스트에서 로그인 후 인증정보를 받아오면, 서버에서 인증정보를 확인 후 인가된 사용자면 API호출이 가능하게 하는 방식이다. Swagger를 이용하여 로그인API를 실행을 하면 인증정보가 생기게 되고, 그 후 다른 API호출을 하게 되면 문제없이 작동이 잘 되었다. 하지만 Docker 로 올린 frontend 컨테이너에서 backend(springBoot) 컨테이너로 API호출을 보낼 시 인증 관련 에러가 발생함.페이지는 리다이렉트 되는데 서버로 부터 원하는 데이터가 넘어오지 않았다.cons..

개요.백엔드 api개발 전 api테스트도 해볼 겸, Python + Django 조합을 이용하여 api 테스트를 하고 있었다. https://kingmusung.tistory.com/50 Django 서버 연동하기." data-og-description="개요.(React + TypeScript 사용)Tr, Td 태그를 이용하여 퍼블리싱을 완료하고. 서버에서 데이터를 받아와서 화면에 출력하는 기능을 구현하는 도중. 백엔드가 API개발이 완료가 안되었다고 해서 임의로 " data-og-host="kingmusung.tistory.com" data-og-source-url="https://kingmusung.tistory.com/50" data-og-url="https://kingmusung.tistory...

개요.https://github.com/2024-EveryCare/frontend GitHub - 2024-EveryCare/frontend: 에브리케어 웹 서비스 프론트엔드 개발을 위한 레퍼지토리에브리케어 웹 서비스 프론트엔드 개발을 위한 레퍼지토리. Contribute to 2024-EveryCare/frontend development by creating an account on GitHub.github.com 약 이름으로 약을 검색하였을 때. 위 사진처럼 약 정보가 쭉 나오게 된다. 1. 사용자가 선택을 하면 해당요소에 있는 약들의 Value값을 저장을 해야 하고.2. 사용자가 선택을 할 시 시각적으로 선택이 되었는지 안되었는지 보여줘야 한다. // 작은 알약 그림 옆에 텍스트를 표시..

개요.https://github.com/2024-EveryCare/frontend  GitHub - 2024-EveryCare/frontend: 에브리케어 웹 서비스 프론트엔드 개발을 위한 레퍼지토리에브리케어 웹 서비스 프론트엔드 개발을 위한 레퍼지토리. Contribute to 2024-EveryCare/frontend development by creating an account on GitHub.github.com Language: TypeScripts,Library: ReactIDE: VsCode 사용자가 처방전 이미지 파일을 업로드 -> 서버에서 OCR을 이용 후 처방전 데이터를 다시 넘겨줌 위 과정에서 파일을 업로드 후 서버에서 데이터를 받아 온 후 리다이렉트를 통해 다른 페이지에서 그 값을 ..

💡 Synchronous VS AsynchronousSynchronous: 동기적으로 순차적으로 실행되는 프로그램Asynchronous: 비동기적으로 실행되는 프로그램btn.addEventListener('click', () => {});이미 이벤트 리스너를 등록하고 사용하는 과정에서, 비동기적인 실행이 되고 있던 것이다. 📌 Promise 🍕 성훈이가 피자집에 가서 피자를 주문을 했고, 요리사가 진동벨로 알려준다고 진동벨을 주었다.요리사는 성훈이의 주문 포함 여러 개의 주문이 밀려있을 것이다.진동벨이 파란색이면 음식이 정상적으로 나온 것이고,진동벨이 빨간색이면 음식 조리에 문제가 생긴 것이다. 성훈이(Consumer),요리사(producer),주문(producing code)진동벨(promise)..