HTTP10 [Cookie] 브라우저가 쿠키 저장에 실패한다면 안녕하세요 :) 하루종일 쿠키문제로 시달리다가 겨우겨우 문제를 해결했네요 ㅠㅠ 혹시나 관련해서 문제를 겪고 있는 분들에게 도움이 되길 바라며 포스팅을 올립니다. 분명 서버로부터 Set-Cookie에 쿠키가 담겨 응답이 왔는데 브라우저 개발자 도구에서 쿠키가 보이지 않는다면, 아래처럼 오른쪽에(크롬기준) 경고 표시가 없는지 살펴보시길 바랍니다. 경고 표시 위에 커서를 올리면 자세한 설명이 나오는데요, 저의 경우 아래와 같은 경고문이 나왔습니다. This Set-Cookie header didn't specify a "SameSite" attribute and was blocked because it conform a cross-site repsonse which was not the response to .. 2023. 12. 13. 데스크탑 local 환경 모바일로 접근하기 토이 프로젝트를 하면서 카드가 플립 되는 애니메이션을 적용을 했다. 그런데 이게 웬걸 데스크탑 브라우저에서는 이상 없이 잘 작동이 되는데, 모바일 환경(사파리)에서는 애니메이션에 문제가 발생했다. 아무래도 CSS 키워드가 사파리에서는 다른 부분이 있는 듯한데... 이를 찾아내려면 코드를 수정할 때마다 디플로이를 해서 작동 여부를 확인해야 하는 번거로움이 발생했다. 그래서 그냥 로컬 호스트에 모바일로 접근할 수 없을까? 라고 생각하던 와중 잘 설명된 블로그를 발견하여 번역해 옮겨본다. Dev Tip: How to view localhost web apps on your phone 필자는 웹 어플을 만들 때 항상 모바일 최적화를 한다. 배포 이전에 모바일로 프로젝트를 확인하는 것은 필수적인 절차다. 종종 크.. 2022. 4. 14. [HTTP] HTTPS는 무엇이고 어떻게 작동하는 걸까? 오늘은 HTTPS 통신에 대해 자세히 살펴보자. 우선 간단히 HTTP를 설명하자면, HTTP HTTP는 Hyper Text Transfer Protocol의 줄임말로, 애플리케이션 계층의 서버-클라이언트 통신 규약이다. HTTP는 HTML 문서와 같은 리소스를 가져올 수 있도록 하는 통신 약속인데 웹에서 이루어지는 모든 데이터 교환의 기초이며 클라이언트-서버 프로토콜이기도 하다. 하지만 HTTP에게는 한 가지 문제가 있었으니... 바로 취약한 보안이었다. HTTP는 Man in the middle 공격에 취약한 특징을 가지고 있다. 왜냐하면 중간에서 데이터를 탈취하면 그 내용을 바로 확인 할 수 있기 때문이다. HTTPS 위와 같은 HTTP의 보안적 위험을 해결하기 위해 고안된 것이 바로 HTTPS이다... 2022. 3. 23. [AWS] https 배포하기 이전 프로젝트를 진행하면서 로컬 환경에서는 https를 이용해 웹 애플리케이션을 제작했었는데, 막상 AWS를 통해 https로 배포를 하려고 하니 여러가지 문제가 발생하면서 단체 멘붕에 빠진 적이 있었다. 결국 코드를 뜯어고쳐 http로 배포를 한 슬픈 기억이... 또르르 그래서 이번 프로젝트는 아예 프로젝트 초반부터 미리 배포를 진행하며 어플리케이션 제작과 배포를 같이 병행해 나가는 방식으로 프로젝트를 진행하게 되었다. HTTPS 이해 배포에 있어서는 통신프로토콜에 대한 이해가 절대적으로 필요하다. 만약 https에 대한 전체적인 이해가 없다면 아무리 다른 사람의 블로그를 읽으며 따라 하더라도 결국 멘붕에 빠지는 순간이 올 것이다. 필자가 그랬다. 그래서 일단은 https에 대한 간단한 이해를 하고 넘.. 2022. 2. 12. [React] https 통신문제 리엑트로 클라이언트 부분을 룰루랄라 다 만들고 서버와 데이터를 주고받으려는데 이게 뭐지? CORS 에러가 발생했다. 분명 서버에 CORS 설정도 다 끝냈는데 왜 그럴까? 문제는 https통신에 있었다. 서버 측에서 데이터를 주고받기 위해 https 통신을 사용하도록 되어 있는데 react에서는 default 값으로 http 통신을 사용하는 듯하다. 이에 대한 해결방법은 react를 시작할 때 https 통신을 사용할 것임을 알려 주는 것이다. package.json에서 npm start 설정을 아래처럼 수정하니 정상적으로 서버와의 통신이 이루어졌다. HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start 관련해서 공식문서에도 잘 설명되어 있으니.. 2022. 1. 23. HTTP MIME 이번에는 HTTP통신에서 마치 윈도우의 확장자와 같은 역할을 하는 MIME를 알아보자. 마임으로 읽는지 미메로 읽는건지... 혹시 아시는 분들은 댓글 부탁드립니다 ㅠ MDN을 통해 개념을 알아보려고 했지만, 너무나 이해하기 어렵게 설명을 해놔서 stackoverflow의 답변을 참고하였다. What is a MIME type? A MIME type is a label used to identify a type of data. It is used so software can know how to handle the data. It serves the same purpose on the Internet that file extensions do on Microsoft Windows. So if a serve.. 2021. 11. 18. HTTP 상태 코드 이번 포스팅에서는 HTTP 상태 코드를 정리해보려 한다. 이전 직장에 있을 때 오류가 나기만 하면 개발분이 "What is the error code?"라고 물어보던 것이 생각난다. 에러코드는 오류가 났을 때 맨 처음 확인해야 하는 주석과도 같은 느낌이었다. 다만 에러코드의 종류는 너~~~무 많다. MDN 문서만 보더라도 내용이 너무 많으니, 그때그때 에러코드가 발생하면 검색해서 찾아보는 방법을 선택해야 겠다. 에러코드: https://developer.mozilla.org/ko/docs/Web/HTTP/Status HTTP 상태 코드 - HTTP | MDN HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성.. 2021. 11. 18. HTTP PUT과 PATCH 메소드의 차이 메소드들을 살펴보면, PUT과 PATCH 메소드는 얼핏 비슷해 보이는 메소드처럼 느껴진다. PUT 메소드 PUT 메소드는 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체합니다. PATCH 메소드 PATCH 메소드는 리소스의 부분적인 수정을 할 때에 사용됩니다. 둘다 수정을 한다는 개념을 공유하고 있으나, 구동방식에 따라 명등성과 안정성에 차이가 난다. 아래의 설명을 살펴보자. In a PUT request, the enclosed entity is considered to be a modified version of the resource stored on the origin server, and the client is requesting that the sto.. 2021. 11. 18. HTTP 메소드의 멱등성 이전 포스팅에서 안전한 HTTP 메소드에 관해 포스팅하며, "멱등성"에 대해 언급했다. 도대체 멱등성이란 무었일까? 사실 별로 알고 싶진 않다... 멱등성의 사전적 의미 연산을 여러 번 적용하더라도 결괏값이 달라지지 않는 성질 영어로는 Idempotent라고 한다. 필자는 사실 대학을 미국에서 나왔는데, 어떻게 읽는지도 몰라 네이버 사전 음성 버튼을 여러번 눌렀다. 아이뎀포턴트라고 한단다... 단어는 어려운데 막상 뜻을 알고나면 이해는 쉽다. 이전 포스팅에서 멱등성을 가지는 메서드로는 아래와 같다고 했다. PUT DELETE 안전한 메소드들 즉, 해당 메소드들은 아무리 반복해서 요청을 서버에 보내더라도 결과는 맨 처음 요청과 달라지지 않는다는 것이다. 멱등성이 필요한 이유 그렇다면 멱등성이 왜 필요한 것.. 2021. 11. 18. HTTP 요청 메서드 어느날 유튭에서 누가 그랬던것 같다. 진짜 뛰어난 웹 개발자는 코딩이 뛰어나기보다 네트워크에 대한 이해도가 높은사람이라고. 오늘은 HTTP에 대한 공부를 해보았는데, 역시 만만치가 않다. 영어 원서가 주를 이루다 보니 시간이 꽤 걸린듯 하다. 학생 때 영어공부 많이 해두길 다행이다... HTTP 요청 메서드 HTTP 공식 자료에 따른 정의는 아래와 같다. The request method token is the primary source of request semantics; it indicates the purpose for which the client has made this request and what is expected by the client as a successful result. 요청.. 2021. 11. 18. 이전 1 다음
