브라우저에서 다른 출처의 리소스를 요청할 때 적용되는 보안 정책.기본적으로 Same-Origin Policy 때문에 스크립트가 다른 도메인으로 요청을 보내는걸 브라우저에서는 제한하는데, 서버가 응답 헤더에 Access-Control-Allow-Origin 같은 값을 내려주면 특정 출처의 요청을 허용할 수 있게 됩니다.브라우저에서 요청을 차단하는 것은 아닙니다. 실제로 요청은 나가지만 브라우저에서 상황에 따라 응답을 차단하게 됩니다. 응답에서 Access-Control-Allow-Origin 헤더를 확인해서 허용과 차단 여부를 판단하게 됩니다. PreflightHTTP 요청은 단순 요청 (Simple request) / 복잡한 요청 (non-simple request)로 나뉩니다. 브라우저 보안 정책 (S..

TLDR사용자가 자유롭게 정렬할 수 있는 리스트 형태의 UI를 구현하게 되었습니다. 우측에서 아이콘을 통해 사용자는 리스트의 순서를 정렬할 수 있으며, 저장버튼을 통해 서버에 반영하는 UI였습니다. 사용되는 APIDragDropContextdrag and drop을 사용하기 위해, 를 drag and drop 이벤트의 전체 라이프사이클을 관리할 수 있는 상위 컴포넌트를 감싸야합니다. 내부에 Droppable과 Draggable을 통해 동작하며, 반드시 onDragEnd 핸들러를 props로 전달해야 합니다.onDragEnd: (result) => void, 드래그 종료 시 실행되는 콜백 함수 (필수)result에는 drag와 관련된 정보가 포함되어 있음 (draggabledId, source, des..

SSR환경에서 top-level await가 있을 때는 어떻게 동작하는지에 대해 학습한 내용 정리입니다. top-level await란?일반적인 await는 함수 바깥(최상단 스코프)에서는 사용 불가하고 async 함수 내부에서만 실행됩니다. top-level await는 비동기적으로 동작하는 ESM 환경에서 모듈 최상단에서 await를 쓰는 문법을 뜻합니다. 문제SSR환경에서 서버는 모든 JS모듈을 즉시 평가할 수 있어야 합니다. 여기서 top-level await가 모듈 내에 있다면? 해당 await가 완료되고 Promise가 반환될 때까지 서버는 대기상태가 됩니다. 이는 직관적으로 바라볼 때 사용자에게 대기 시간만큼의 로딩 시간으로 다가오고 사용자 경험이 떨어지게 됩니다.import { Page }..

TLDRvitest + jsdom + ... 기반의 tdd 코드를 실행하던 도중 발생한 에러 matchMedia not present... 에러와 그에 대한 해결한 방법에 대한 내용입니다. 문제 원인matchMedia API는 css에서 사용하는 것으로 익숙한 웹의 미디어 쿼리를 다루는 API입니다. 해당 API에 관련된 에러가 갑자기 발생하는 이유는 react-slick에서 matchMedia API를 사용하는데, jsdom 테스트 환경에서 해당 API를 제공하지 않았기 때문입니다.따라서 테스트 환경인 vitest.setup.ts에 matchMedia polyfill을 추가하여 해결할 수 있었습니다. 해결 코드// vitest.setup.ts...Object.defineProperty(window, ..

개요useEffect clean-up을 작성할 때 발생하는 eslint의 consistent-reutrn 에러에 대한 내용입니다. consistent-return해당 에러는 함수의 반환 방식을 일관되어야 하는 규칙입니다. 특정 조건 ( if )에 따라 함수가 값을 return 하다가 undefined를 return 하는 듯한 일관성이 깨지면 해당 에러가 발생합니다.이 규칙을 통해 사용하는 측에서 undefined를 올지 값이 올지에 대한 타입 추론이 불안정 하고 항상 undefined를 체크해야 하는 문제를 방지할 수 있습니다. 문제가 발생했던 코드useEffect(() => { if (조건) return; ... return () => {...};}, []); useEffect clean-upus..

TLDRReact에서 Functional Component가 아닌 함수에서 하나의 property로 ReactElement를 받아서 렌더링 하려고 하다가 발생한 에러입니다. 해당 type을 React.ReactElement로 선언하고, 사용하는 곳에서 JSX 형태의 UI를 넣자, ' JSX 요소 형식에 구문 또는 호출 시그니처가 없습니다.' 에러가 발생했습니다. 코드export interface Types { UI: React.ReactElement;}...tmpFunction(); 다음과 같이 type을 선언하고 함수에 Component를 발생하니 위 스크린샷 에러가 발생했습니다. 문제해당 에러가 발생하는 이유는 React.ReactElement와 는 엄밀히 보면 다르기 때문입니다. Componen..

TLDR또 한 번 AWS를 활용하여 웹서버 배포하는 방법입니다. 이전에는 CloudFront를 활용하여 https 웹 서버를 배포하였지만, 여기에 중요한 이슈가 발생했습니다.Cloudflare의 속도 저하위 사진처럼 api response를 받는데 평균적으로 350ms정도 소요되었고, 이게 웹뷰 앱으로 구성된 저희 앱으로 가게 되면 비교적 네트워크 속도가 느린 모바일에서 로딩이 좀 더 길어지게 되었습니다. 유저가 이탈할 거라고 우려될 수준으로 치명적인 속도였고, 개선을 위해 코드/DB 등의 개선을 진행했으나, 저 속도저하의 본질은 Cloudflare라는 것을 뒤늦게 알게 되었습니다.Cloudflare는 CDN 서비스를 제공합니다. 전세계 각국에서 접근했을 때, 가장 가까운 edge server에서 캐시 ..

React에서 HTML 문자열을 렌더링해야 하는 경우가 있습니다. 이런 상황에서 dangerouslySetInnerHTML을 사용하게 되는데, 이는 보안과 성능 측면에서 여러 문제를 일으킬 수 있습니다. HTML 아무 제약 없이 그대로 출력된다는 건 XSS 공격의 위험이 있고, 사용자 입력값이 직접 DOM에 주입될 수 있어 위험합니다.또한 React의 Virtual DOM 을 우회하게 되어, 최적화되지 않고 불필요한 리렌더링을 통해 성능 저하의 원인이 될 수 있습니다 대안 : html-react-parse + DOMPurify npm install html-react-parser dompurify @types/dompurify dangerouslySetInnerHTML을 대신하기 위해 위 두 가지 라이브..

자바스크립트는 동적 언어로서 다른 언어와 달리 독특하게 동작하는 경우가 종종 있습니다. 실행 컨텍스트는 자바스크립트가 이런저런 특이하게 동작하는 개념인 "실행 컨텍스트" 에 대해 깁게 학습한 내용에 대해 공유하고자 합니다. Execution Context ( 실행 컨텍스트 )실행 컨텍스트는, 코드를 실행하는데 제공할 환경 정보들을 모아놓은 객체입니다. 이 객체에는 식별자들에 대한 정보, 외부 환경 정보, this와 같은 정보들이 저장됩니다. VariableEnvironment : 해당 컨텍스트가 최초 실행 될 때의 식별자들의 정보(environmentRecord), 외부 환경 정보 (outerEnvironmentReference)LexicalEnvironment : 최초에 VariableEnvrionme..

📚 TLDR서비스를 개발하다 보면, 새로운 기능을 만드는 만큼이나, 기존의 코드를 다시 보고 다른 사람이 짠 코드를 살펴보는 시간이 많아졌습니다. 가벼운 해커톤이나, 동아리 프로젝트처럼 기간을 정해두고 하는 프로젝트성 개발과 달리 완성을 시키고 계속 유지보수 해나가야 하는 개발을 하다 보니 '아.. 리팩토링 해야 하는데..'라는 생각이 절로 들게 됩니다. 이제 와서 생각해 보면, '컨벤션을 좀 더 꼼꼼히 할걸', '코드리뷰 할 때, 이런이런 부분에 대해서는 의견을 나눠볼걸'과 같은 생각이 들긴 하지만, 그것도 1년 정도 한 프로젝트만 개발하고 코드를 보고 또 보면서 서비스를 발전시키다 보니 느껴지는 부분이지 그때의 제가 생각조차 못할 부분이지 않나 싶기도 합니다. 여러 후회와 그 후회를 바탕으로 발전시..

문제프로그래머스 코딩테스트 연습 : 공원 산책 자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 40분 코드function move(park, position, route) { let isMoved = true; const initializePosition = [position[0], position[1]]; const [direction, count] = route.split(" "); for(var i = 0; i = park.length || park[current_y + 1].split("")[current_x] === 'X' ) { isMoved = fals..

후기프론트엔드 주니어 개발자로서 클라우드 서비스에 대한 기초를 쌓을 수 있었습니다. 복잡해 보이는 AWS 개념을 쉽고 친절하게 설명하며, 실습 중심의 구성으로 따라 하며 배울 수 있어 유익했습니다. 특히 EC2, S3 같은 주요 서비스 활용법을 이해하고 간단한 애플리케이션을 배포하는 데 실질적인 도움을 받을 수 있었습니다. EC2와 S3 같은 필수 서비스의 설정과 활용 방법을 단계별로 안내해 실제로 따라 하며 익힐 수 있는 점이 큰 장점이었습니다. 특히 실습 위주의 구성은 이론과 실무를 자연스럽게 연결시켜주어 AWS의 구조와 작동 원리를 이해하는 데 큰 도움이 되었으며, 책의 전반적인 흐름이 명확하고, 실습을 통해 결과물을 눈으로 확인할 수 있어 이해하기 쉬었습니다. 클라우드와 AWS가 낯선 프론트엔드 ..