프론트엔드 개발중 cors 를 맞게되었다. 상황은 이러하다. 나의 경우 유저 검증이 필요한 API들은 로그인시 부여받은 cookie 값으로 jwt 토큰을 다루는데, 서버에 요청은 가지만 GET을 제외한 모든요청에 브라우저는 CORS Preflight 오류를 내뱉고 있었고 서버는 쿠키값이 없다는 말만 반복 해결방법 먼저 말하자면 if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { chain.doFilter(request, response); return; }토큰 인증로직에 OPTIONS 메서드는 제외시키는 것. 이제 같은 뻘짓으로 시간낭비를 하지않기 위해 이유를 파악해보자 먼저 OPTIONS요청은 뭘까 일단 쉽게 설명하자면실..

1. 알아서 구글 애널리틱스 가입 및 사이트, 도메인 등록2. 알아서 구글 태그매니저 계정 생성3. 알아서 구글 태그 관리자 설치 찾아서 제공받은 script 태그 head, body 삽입4. 트리거생성트리거 탭 선택트리거 새로만들기 선택남겨야하는 데이터 이벤트 선택5. 변수생성변수 탭 선택기본제공변수의 기본제공변수구성 선택이력으로 남길 데이터 선택 ex) click element , click id, click url ... 등6. 태그생성태그 탭 선택새로만들기트리거 탭에 생성헀던 트리거 선택태그구성 Google 애널리틱스 -> google 애널리틱스 GA:4 이벤트 선택 ( 2025/01/09 기준 )측정 ID ( google 애널리틱스에서 확인 가능, 그냥 구글 애널리틱스 메인에 검색하면 뜸 ) 입..

회사 사이트 블로그  컨텐츠안에 텍스트 에디터로 React-Quill 을 사용중입니다. 발생한 오류들의 해결방법만 먼저 말하고 자세한 오류 내용과 이유는 뒤에 나옵니다. 만약 React-Quill을 사용중이고 텍스트 에디터의 toolbar 를 position : sticky 또는 position : fixed 를 주었을 때 생기는 오류는Quill 의 scrollingContainer 속성에 "html" 값을,ql-clipboard 에 아래와 같은 스타일 값을 입혀주면 해결 가능합니다.  작성중인 텍스트 에디터의 내용이 길어질 경우우리가 텍스트 에디터의 최대 높이값을 따로 지정해 주지 않는다면 브라우저의 높이값이 늘어나 브라우저에 스크롤이 발생하게 됩니다. 그럼 최대 높이값을 지정해주면 되지 않느냐 하지만..

새롭게 프로젝트 시작하기 전에 가볍게 Nextjs 14.0.4 환경에서 빌드한 파일을 용량 최적화와 함께 Docker로 한번 배포해보자 사실 vercel 에서 제공하는 Dockerfile 과 docker-compose 를 거의 복사 붙여넣기에 가까운 글이니 https://github.com/vercel/next.js/tree/canary/examples/with-docker-compose 직접가서 뜯어보시며 보는것도 나쁘지 않다고 생각함 시작은 craete-next-app 아무것도 안건들꺼다 프로젝트 최상단 경로에 Dockerfile 생성 FROM node:18-alpine AS base # Install dependencies only when needed FROM base AS deps # Check..

프론트엔드 개발자도 이것저것 다 할 줄 알아야 하는 세상의 흐름에 맞게 그 좋다는 Docker 한번 써보려고 한다. Docker 에 대해서 간략하게 설명하자면 우리가 프로젝트를 진행하다 보면 코드를 Github 에 푸쉬 해 두고 다른 컴퓨터 환경에서 코드를 내려받아서 개발을 하거나 다른 팀원들과 공유해야 할 때가 있다. 그럴때 내가 개발하던 컴퓨터의 환경이 다르기 때문에 ( 예를들어 컴퓨터에 설치된 java 나 node 등.. 버전이 다름 ) 분명 내 컴퓨터에선 잘 굴러가던 코드가 에러 투성이인 경우가 생긴다. 만약 혼자 개발하더라도 배포를 하려면 직접 서버까지 돌릴게 아니라면 뭐 그런사람이면 이 글을 보지도 않겠지만 거의 호스팅 업체 컴퓨터를 빌려서 돌릴텐데 이때 뭐 빌리는 컴퓨터의 운영체제가 다를수도..

회사에서 프로젝트 준비를 하면서 Js 의 프레임워크 라이브러리 등등 너무 많은것들을 머리에 쑤셔넣다보니 자바스크립트 동작에 대해 다시한번 정리가 필요하단 생각이 들었다. 바쁘다면 가장 아래로 스크롤 해서 결론부터 보자. TDZ 일시적인 사각지대 란 뜻으로 스코프 시작 지점부터 초기화 시작 지점까지 구간을 말한다. 뭔말인지 잘 모르겠다. const 와 let이 등장하면서 부터 사실 var 나 functuon() 는 잘 사용하지 않았다. var 나 function(){} 의 경우 재선언이 가능하다는 단점도 있고 ( 코드 길어져서 변수이름 똑같게 쓰면... ) // 다른코드 // 다른코드 // 다른코드 // 다른코드 // 다른코드 // 다른코드 var 변수 = "변수"; console.log(변수); 이런식으..