Yung_Developer

webpack의 dev server를 이용해 localhost로 개발을 진행하다보면 https로 인해 스트레스를 받는 상황이 생깁니다. (웹 서버가 http를 이용한 접근을 제한하거나 쿠키의 Secure 옵션이 설정되어 있는 경우 등) 이는 localhost가 http로 동작하기 때문입니다. 이러한 문제가 발생했을 때 서버의 설정을 바꾸기 보다는 localhost의 설정을 바꿔 문제를 간단하게 해결할 수 있습니다! 바로 mkcert를 이용하면 localhost를 https로 동작시킬 수 있습니다 👍 GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any nam..

레벨 4의 첫 미션인 성능 최적화 미션은 AWS S3와 Cloudfront로 배포해야 합니다. 따라서 CI/CD를 적용하지 않으면 코드의 변경사항이 생길 때마다 매번 수동으로 빌드해야 합니다. 그리고 드래그 앤 드랍으로 S3 버킷에 파일을 업데이트 해줘야 합니다. 하지만 Github Actions를 이용해 CI/CD를 적용한다면 이러한 불편함을 단번에 해소할 수 있습니다. 다음과 같은 순서로 Gihub Actions를 적용해보겠습니다. 1. S3와 Cloundfront 생성 및 연동 2. S3 ACL(액세스 제어 목록) 편집 3. 개인 AWS 계정 새 액세스키 발급 4. Github Settings에서 Secrets 추가 5. Github Actions workflow 생성 6. 자동 배포 결과 확인 1..

1. 댓글 모듈 iframe 개발기 { event.stopPropagation(); setShowOptionBox(state => !state); }; const onHideOptionBox = () => { if (ref.current) setShowOptionBox(false); }; useEffect(() => { window.addEventListener("click", onHideOptionBox); return () => { window.removeEventListener("click", onHideOptionBox); }; }, []); 다른 영역이 클릭됐는지는 특정 영역만 렌더링 하는 컴포넌트에서 알 방법이 없다. 따라서 window에 클릭 이벤트를 달아주어야 한다. 이 때, 특정 상태값을..

contentEditable은 HTML 요소를 수정 가능하게 만들어주는 속성이다. 예를 들어, div에 contenteditable 속성을 true로 설정해주면 div 요소도 input처럼 입력을 할 수 있게 된다. contentEditable을 사용하는 이유는 웹 에디터를 쉽게 만들기 위함이다. contentEditable을 사용하면 브라우저가 자체적으로 클립보드, 드래그&드롭, 실행 취소, 서식과 같은 기능을 전부 제공해준다. 또한, 특정 내용을 편집 모드로 수정하기 쉽다는 장점이 있다. 편집 모드 변경 시 input이나 textarea로 수정할 필요없이 간단하게 contentEditable=true 속성만 추가해줘도 편집 모드로 변경할 수 있다. 때문에 div를 input으로 바꿨을 때 발생할 수 ..

{ if (!type) return; if (type === POST_MESSAGE_TYPE.SCROLL_HEIGHT) { resizeElementHeight({ element: $replyModuleIframe, height: data }); return; } }); // reply-module (content window = iframe에 그려지는 페이지) // 부모 window에 컨텐츠의 높이를 보내는 함수 const postScrollHeightToParentWindow = () => { window.parent.postMessage( { type: POST_MESSAGE_TYPE.SCROLL_HEIGHT, data: document.querySelector("#root")?.scrollHeigh..

리액트에 익숙한 사람이라면 반복되는 컴포넌트 혹은 엘리먼트에는 고유한 키 값이 필요함을 알고 있다. 동시에 키값으로 인덱스 값을 주는 것이 안티패턴이라는 사실도 알고 있다. 그렇다면 왜 키값으로 인덱스를 주는 것이 안티패턴일까? 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.reactjs.org 리액트에서 Key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할 때 트리를 매번 새로 그리는 것이 아니라 기존과 비교하여 효율적으로 트리를 변경할 수 있도록 돕는 역할이다. 이제 키 값이 왜 사용되는지는 알겠다. 그러면 왜 키 값으로 index가 아닌 고유한 값을 사용해야하는 것일까? 리액트 공식문서에 있는 co..

1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않..

1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않..