분류 전체보기

개요.프런트엔드에서 사용자인증을 하는 과정에서(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)..

개요.Django + Axios를 이용, 로컬에서 간단한 연동 후 API테스트를 진행하려던 와중 발생함. 문제🔒 [26/Jun/2024 10:54:41] "OPTIONS /test/ HTTP/1.1" 200 163(Django 서버의 응답)분명히 Axios에 url 엔드포인트를 작성 후 요청을 보냈는데. 장고서버에는 200성공이라고 뜨고있으나..request데이터가 로그에 뜨지 않아... 무엇이 문제인지 생각을 하고 있었다.🔒 ScanConfirm.tsx:41 서버로 데이터를 보내는데 실패했습니다: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpReques..

개요.https://github.com/2024-EveryCare 2024-EveryCare2024-EveryCare has 2 repositories available. Follow their code on GitHub.github.com 1.OCR인식 데이터를 받아 화면에 랜더링 하는 과정.2.OCR데이터가 인식이 잘 안 되는 경우 null값으로 들어옴 -> 사용자가 수기로 입력. 위 두가지 경우의 수가 존재하는데. 각 과정에서 문자열 Date객체로 변환하는 과정 중에 생긴 오류 첫 번째 문제점OCR인식 성공 시 서버에서 주는 날짜 값은 문자열형식(24-12-01) 하지만 프런트에서 받아야 하는 데이터 형식은 Date 객체OCR인식 실패시 사용자가 수기로 입력하는 값은 Date객체 형식, 즉 두 개..