전체 글

2023년의 가장 중요했던 시기를 뽑았을 때는 SOPT 웹파트장의 역할을 수행한 시기인 것 같아서..! 올해가 가기 전에, 회고록을 남겨보았다!! ✨ 웹파트장의 시작 01/28 (토) 그 날의 떨림과 긴장감은 아직도 잊지 못하고 있다. SOPT 32기 웹파트장 후보로 나가기 위해 사전 공개 자료를 노션에 업로드하고, 당일에는 15분 내외의 발표를 준비하였다. 나는 어떤 사람이고, 왜 SOPT 웹파트장을 하고 싶으며, 어떻게 SOPT의 WEB파트를 만들어 낼 것인지, 세심하게 고민하고 문장을 적어보며, 올바르게 나아가는 웹파트장이 무엇인지 정립하는 시간이었다고 생각한다. 실제로 그 결론은 다음과 같다. 긍정적인 에너지를 통해 웹개발을 두려워하지 않는 자신감을 만들어주는 웹파트장 이를 도출해내면서 과연 나는..

🌈 들어가기 next.js를 기반으로 동작하고 있는 중고나라 웹사이트에서 seo를 개선하기 위한 첫 작업으로 rel 속성에 대한 작업을 진행하게 되었다. 🤔 문제 상황 현재 중고나라 웹사이트에서 상품검색을 진행하면 상품리스팅에 광고가 포함되는 경우가 있다. 하지만, 아래의 화면처럼 광고에 대한 rel 속성이 정의되어있지 않아 검색엔진이 인지하지 못하는 문제가 발생하였다. ✨ 링크 태그와 검색엔진 SEO 검색엔진이 문서 내에 a 태그 ( 👉 next.js 에서의 Link) 를 만나게 되면, 그 속성에 연결된 url의 html을 읽으려는 시도가 시작될 것이다. 그렇기 때문에 a 태그의 rel 속성을 정의하여 검색엔진이 이를 읽을 수 있게 할 것인지, 현재 페이지와 관련이 없음을 알려줄 것인지를 지정할 수 있..

✨ 들어가기 웹 프론트엔드 개발자라면 한 번씩 겪어보았을 에러가 바로 CORS 에러이다. 그만큼 정확하게 원리를 이해하고 있어야 문제 상황을 빠르게 해결할 수 있기에 해당 개념을 살펴보고자 한다. ✅ SOP 은 무엇인가? Same Origin Poclicy 로 같은 출처에서만 리소스 공유를 허용하는 정책이다. 🤔 같은 출처는 무엇인데? URL의 Protocol, Host, Port 가 모두 동일한 출처이다. 출처라는 것은 Protocol + Host + Port 까지 모두 합친 URL로 이해할 수 있다. 예를 들면, https://with-picme.com:8080/home?nickname=happhee#sop Protocol 👉 https Host 👉 with-picme.com Port 👉 8080 P..