개발 환경에서 로그인 상태가 유지되지 않는 현상이 발생하고 있다. 백엔드에서 세션 정보를 Cookie로 관리하고 있는데, 첫 로그인 이후 Set-Cookie 헤더가 제대로 동작하지 않아 발생하는 문제였다. Set-Cookie 헤더에 도메인 정보가 붙어서 오고 있기 때문에, 현재 로컬에서는 mac의 hosts 파일을 수정해서 쿠키를 안착시키고 있었다. Set-Cookie: mdJsessionId=세션아이디; Domain=.example.co.kr; Expires=Tue, 05-Oct-2021 13:41:28 GMT; Path=/; HttpOnly 그런데 왜! 갑자기 쿠키가 안 붙는것인지... 크롬 업데이트 이후로 추정되어 쿠키 관련 정책 변경사항들을 찾아보았다. FE개발자의 성장 스토리 06 : 2021년..

크로스 브라우징 경험이라는건 정말 말 그대로 '경험'에서 얻게되는 부분인 것 같다. 프로젝트에서 ios 반응속도가 느리다는 이슈가 있었는데, 처음엔 최적화쪽 문제가 있다고 생각해서 이곳저곳 건드려봤다. 그러다가 next.js ios delay , ios safari click event delay 라는 키워드로 구글링해보니 원인과 해결책이 나왔다. Eliminate 300ms delay on click events in mobile Safari I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for..

특정 페이지 진입시 무한루프 도는 현상 발생 SWR 에러 아님 Request 결과도 정상 local dev 환경에서는 무한루프 발생하지 않음. build 후 production 에서만 발생 원인 : 채널톡 객체 참조 불가 (채널톡 객체 검증 예외처리 미흡) 기존 채널톡 스크립트 로드를 전역 script에서 특정 페이지 내부로 옮기면서 문제 발생. -> 예외처리 미흡. 공통 Page 컴포넌트에는 예외처리 되어있었으나, 해당 페이지는 Page컴포넌트를 사용하지 않고 독자적으로 로직 구현되어 있었음. 그로 인해 런타임 환경에서 에러 발생 (스크린샷은 local dev 환경) GitHub Next.js Issue : _error 페이지가 렌더되지 않고 무한루프에 빠진 케이스 Endless loop when _e..

Next.js Conf A special edition of Next.js Conf, presented by Vercel (creators of Next.js) and Google Chrome. Let's make the web. Faster. nextjs.org 한국 시각으로 오늘인 16일 오전 1시에 Next.js의 앞으로의 방향에 대해 엿볼 수 있는 Next Conf가 있었습니다. 졸린 나머지 끝까지 들을 수 있을까 싶었지만, 30분 안에 종료되어 다행히 다 보고 잘 수 있었습니다. (after party는 못 봄) 이번 포스팅에서는 어제 본 Next.js Conf의 중요 내용을 정리해 보려고 합니다. 인트로 Next.live Image Component Script Component 총평 인트로 ..

진행하고 있는 프로젝트의 오픈 준비로 한동안 포스팅을 하지 못하고 있었다. 1차 오픈을 하고 어느정도의 여유를 찾은 만큼, 틈틈이 포스팅을 다시 해보려고 한다. 오늘은 프로젝트 마무리 단계에서 SEO를 위한 각종 분석툴과 GA, 메타테그를 붙이면서 프로젝트 전체에 적용되어야 할 HOC를 만드는 과정에서 배운 내용을 적어보려고 한다. 먼저 HOC란 High Order Component. 즉 고차 컴포넌트이다. 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org 설명에 잘 나와있듯이, 컴포넌트를 인자로 받아 새 컴포넌트를 반환하는 함수이다. 일반적으로 컴포넌트는 props를 받아 UI를 렌더링하지만, HOC는 컴포넌..

Array.prototype.reduce() - JavaScript | MDN Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd developer.mozilla.org javascript Array 내장 메소드인 reduce를 사용할 때 발생하는 에러. 더보기 참고: initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너뜁니다.initialValue를 제공하면 인덱스 0..