웹개발

오늘은 get요청으로 백에서 넘겨준 액셀파일을 프론트에서 다운받는 코드 작성과 이 과정에서 이해한 걸 기록해보고자 한다. 우선 내가 구현한 건 다운로드 버튼을 눌렀을 때, 백에 get요청을 보내고 응답으로 액셀파일을 받아 다운해주는 것이다. 먼저, API.jsx에 다음과 같이 작성해주었다 export async function getAuditLogFile() { try { const response = await api.get("/audit/excel/downloadAll", { responseType: "blob", }); if (response.status === 200) { return response.data; } console.error("error statuscode", response.sta..

삼항연산자를 중첩해서 사용하니 발생하는 ESLint 오류 Quick Fix 링크를 들어가보니 ternary 즉 삼항연산자를 중첩해서 사용하면 가독성이 떨어지기 때문에 권장하지 않는 것. 권장하지 않는 방식 var thing = foo ? bar : baz === qux ? quxx : foobar; foo ? baz === qux ? quxx() : foobar() : bar(); 권장하는 방식은 밑의 코드처럼 삼항연산자를 한번만 사용하거나! else-if문으로 나눠주는 방식, 사이트엔 없지만 switch도 있다. var thing = foo ? bar : foobar; var thing; if (foo) { thing = bar; } else if (baz === qux) { thing = quxx; ..

드롭다운 구현 중 외부 영역 클릭감지를 어떻게 해야하나 구글링을 하며 알게된 내용을 코드와 함께 상세히 적어보겠습니다. 구현을 위해 필요한 지식은 useRef와 이벤트 핸들링, 그리고 버블링입니다. 이 내용들을 다 알고 있다면 바로 드롭박스 구현쪽으로 넘어가시면 됩니다~ [사전지식] 1. useRef란? 리액트에서 특정 DOM을 선택하는 용도로 사용하거나, 렌더링과 상관없이 특정 값을 유지하고 싶을 때 사용하는 Hook이다. 다음 간단한 예제 코드이다. import React, { useRef, useEffect } from 'react'; function App() { const myInput = useRef(); //useRef 선언 useEffect(() => { myInput.current.foc..

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. 어떤 컴포넌트가 특정 정보를 기억하게 하고 싶지만, 새로운 렌더를 일으키고 싶지 않을 때 사용한다 (공식문서) html에서 DOM 요소에 이름을 달 때는 id를 사용한다. 리액트 내부에서 DOM에 이름을 다는 방법은 바로 ref Q. 리액트 컴포넌트 안에서 id를 사용하면 안되나요? 사용해도 되지만 HTML에서 DOM id는 유일해야 하는데 중복의 위험이 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. Re..

라이프사이클(생명주기) 모든 리액트 컴포넌트에서는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 라이프사이클 큰 흐름⬆️ 클래스형 컴포넌트 생명주기 Mounting ➡️Updating ➡️ Unmounting 라이프사이클은 위와 같이 총 세가지 마운팅(생성), 업데이트, 언마운팅(제거)로 나뉜다. [출처] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 흐..

부트캠프 과정에서 AWS VPC에 대한 이론 수업 후 관련해서 VPC를 만드는 과제의 실습 내용을 기록해본다. 이론에 대한 내용은 차차 정리해서 포스팅할 계획이다. 혹시 틀린 부분이 있다면 자유롭게 댓글로 피드백 남겨주시면 감사하겠습니다! [과제 구현 순서] 1. VPC 생성 2. 서브넷 4개 생성: Public 2개 , Private 2개 - 2개씩 만드는 이유는 Multi AZ 설정을 위함이다 => 가용성 확보 - 한쪽의 AZ에서 장애가 생기면 다른 한쪽의 AZ로 커버하기 위함. 3. 서브넷 라우팅테이블 연동 4. IGW 연결 전, 테스트 인스턴스 생성 후 퍼블릭 인터넷 연결 여부 실패 확인 5. Public 서브넷에 인터넷 경로 구성 : IGW 6. EC2 연결 테스트 7. private 서브넷에 ..