Yung_Developer

레벨 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에 클릭 이벤트를 달아주어야 한다. 이 때, 특정 상태값을..

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. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. 처음 리덕스를 배우는 입장에서 ..

미션 PR - https://github.com/woowacourse/react-payments/pull/27 1. React.memo React.memo는 고차 컴포넌트(Higher Order Component) 이다. 말그대로 memo의 인자로 컴포넌트를 넘겨 사용할 수 있다. memo를 사용하면 메모이징을 이용하여 기존과 props가 다른 경우에만 리렌더링이 일어나도록 할 수 있다. 보통 성능최적화를 위해 많이 사용된다. 페이먼츠 미션 중 카드정보를 입력 받는 페이지는 카드 번호, 만료일 등 다양한 인풋을 처리하기 위해 그만큼의 상태를 가져야했다. 때문에 하나의 인풋만 변경되어도 페이지의 모든 요소들이 리렌더링 됐다. 당시에는 이를 불필요한 리렌더링이라고 판단하여 memo로 컴포넌트를 래핑하여 리렌..

1. 리액트의 동작원리 리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를..

1. 바닐라 자바스크립트 SPA 이벤트 관리 방법 1-1. index.html에 모든 레이아웃을 집어넣고 display: none 속성을 준 뒤, 필요한 경우에 보여준다. 장점: 이벤트를 한번만 걸면 된다. 단점: 최초 로딩 시간이 길어진다. 사용자가 display: none 속성을 해제하여 내용을 확인할 수 있으므로 보안상 위험하다. App의 크기가 커질수록 index.html 관리가 힘들다. 1-2. App이 최초 실행될 때, 필요한 DOM을 모두 생성해놓은 뒤, 필요할 때마다 replaceChild로 DOM을 교체한다. 장점: 이벤트를 한번만 걸면 되고 component 별로 template 관리가 가능하다. 단점: 최초 로딩 시간이 길어진다. 1-3. 메인 컨테이너 이벤트 위임 장점: innerH..

1. Custom Confirm 기본 내장 메서드인 window.confirm의 디자인이 투박하여 페어 썬과 커스텀 컨펌창을 만들었다. 최초에 만들었던 커스텀 컨펌은 콜백함수를 사용하여 코드가 비동기적으로 돌아가도록 처리하였다. 하지만 콜백함수를 넘기다 보니 커스텀 컨펌을 호출하는 함수의 코드가 지저분해졌다. 이를 해결하기 위해 크리스의 리뷰를 반영하여 커스텀 컨펌을 프로미스로 바꾸었다. 프로미스를 바꾸면 콜백함수를 넘기지 않아도 커스텀 컨펌 로직을 비동기적으로 실행할 수 있다는 장점이 있다. 단 커스텀 컨펌을 호출하는 함수에서는 async/await 키워드를 사용해야 한다. 커스텀 컨펌을 호출하는 함수 내부에서는 코드가 동기적으로 실행되야하기 때문이다. 콜백을 넘기는 방식에서 프로미스로 커스텀 컨펌을 ..