레벨 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..
- Total
- Today
- Yesterday
- 1463
- 리액트 키
- Browser Router
- 리덕스 썽크
- 리액트 리스트 키
- 파이썬
- contentEditable focus
- 브라우저 라우터
- 리액트 동작원리
- 리액트 jsx
- 해쉬 라우터
- React key
- 프론트엔드
- 리액트 리덕스
- Redux Thunk
- props를 변경하지 못하는 이유
- Hash Router
- 우아한테크코스
- 프론트
- 백준
- props를 변경하지 않는 이유
- 우테코
- 리액트 props
- Python
- localhost https
- 댓글 모듈
- 다라쓰
- 리액트 리스트 key
- mkcert
- 인사이트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |