전체 글 (53) 썸네일형 리스트형 리액트 재사용 가능한 이미지 업로드 컴포넌트 만들기 이미지 업로드 컴포넌트 만들기이미지를 S3에 업로드하고 해당 URL값을 백엔드로 전달할 수 있도록 하는 재사용 가능한 이미지 업로드 컴포넌트를 만들고자 한다. 1. 이미지 업로드 컴포넌트 사용컴포넌트 사용시에는 다음과 같이 사용하면 된다.1. useState로 이미지를 받을 상태를 선언한다.2. UploadImage 컴포넌트에 props로 img, setImg를 전달한다.//사용 코드const [markerIcon, setMarkerIcon] = useState(''); 이러면 아래와 같은 컴포넌트가 생성될 것이고 이미지 업로드를 진행하면 위 코드에서는 markerIcon에 업로드한 이미지의 URL이 저장될 것이다. 2. 재사용 가능한 이미지 업로드 컴포넌트props로 img, setImg를 받고 이.. React Router 설정 (createBrowserRouter) Router란 무엇일까?URL 경로에 따라 알맞은 페이지(컴포넌트)를 렌더링하는 역할 그렇다면 태그나 window.location과 같은 것들도 라우터 기능을 할 수 있지만 React Router를 쓰는 이유는 뭘까? React Router를 쓰는 이유?1. 불필요한 새로고침 없이 새로고침이 필요한 컴포넌트만 렌더링하여 다른 페이지 로드 가능(CSR)2. 동적으로 컴포넌트 렌더링 가능 ("/post/:id" 형식) createBrowserRouter를 통한 리액트 라우터 설정리액트 라우터 설정을 위해서는 크게 세가지 과정을 거치면 된다.1. Outlet 설정2. createBrowserRouter를 통한 라우팅 설정3. RouterProvider 설정 1. Outlet 설정(App.tsx)//App.. Github Action을 이용해 리액트 프로젝트 CICD하기 Cloudfront, S3를 이용해 배포한 프론트엔드 프로젝트를 자동 배포화하는 방법에 대해서 알아보자 1. AWS IAM 설정IAM을 생성하고 액세스 키를 발급받아 해당 키로 이 계정의 AWS에 접근할 수 있는 이용자임을 증명한다. 1) AWS IAM에 접속하여 사용자 생성을 누른다.2) 사용자 이름을 입력 후 다음을 누른다3) 직접 정책 연결을 선택하고 S3FullAccess, CloudfrontFullAccess 권한을 추가해준다.4) IAM 생성 후 다음과 같이 액세스 키를 생성할 수 있게 된다.5) CLI 선택 후 생성하면 액세스 키와 비밀 액세스 키가 생성된다. 이와 같이 키가 생성되고 이 키를 깃허브액션 설정할 때 사용할 것이다. 2. Github Action 설정Github Action을.. AWS 이용하여 리액트 배포하기(S3, Cloudfront) 프론트엔드를 배포한다는 개념이란?리액트 프로젝트를 개발하고 빌드한 파일을 외부로부터 접근 가능하도록 만드는 작업. 해당 과정을 잘 이해하기 위해서는 S3, Cloudfront, Route53, 도메인, HTTPS에 대한 지식을 공부하는 것이 좋다. S3 : 저장소로 웹페이지를 띄우는데 필요한 빌드파일을 넣어둘 것이다.Amazon CloudFront : 웹 CDN 서비스로 안전하고 빠르게 사용자에게 우리의 웹사이트를 제공할 것이다.Route53 : DNS 서비스로 도메인 이름을 관리할 것이다.도메인 : 웹 사이트에 접근하기 위한 고유 이름으로 IP주소를 대신한다.HTTPS : 보안된 프로토콜로 데이터를 암호화해서 주고받는 형식의 프로토콜이다. 1. S3 생성우리가 빌드한 파일을 넣어둘 공간이다. .. AWS에서 HTTPS 설정 위한 인증서 발급받기(도메인) HTTPS 설정을 위해서는 도메인을 발급받고 이를 Route53에 등록하는 과정이 필요하다. 도메인은 가비아라는 사이트에서 발급받았다. 1. 도메인 발급 후 Route53 등록하기AWS Route53에 들어가 호스팅 영역 생성을 클릭 후 발급받은 도메인을 입력 후 호스팅 영역을 생성한다. 그럼 아래와 같이 값/ 트래픽 라우팅 대상이 나오게 된다.여기서 나타난 값/트래픽 라우팅 대상 4개를 다음과 같이 가비아의 네임서버에 등록해 주어야 한다. 이렇게 네임서버를 Route53으로 변경함으로써 도메인의 DNS 레코드, 트래픽 등을 Route53이 관리할 수 있도록 해주는 것이다.*이때 맨 뒤에 있는 .을 포함하지 않도록 조심하자. 2. AWS Certificate Manager로 인증서 발급받기(Clou.. DOM, Virtual DOM과 Real DOM 💻DOM(Document Object Model)DOM이란 HTML, XML문서의 요소들에 접근하여 프로그래밍적으로 조작할 수 있게 도와주는 인터페이스이다.ex) 이라는 요소에 event를 추가하기 위해서 DOM이라는 인터페이스가 필요하다. DOM을 이용하면 HTML로 구성된 웹페이지를 JS를 통해 동적으로 움직이게 만들 수 있다.즉, DOM은 웹 페이지의 요소들을 찾고, 읽고, 변경하는 등의 작업을 위해 사용되는 인터페이스인 것이다. 💻DOM 트리이 DOM은 웹문서를 트리 구조로 표현하고 각 HTML 요소를 노드라고 표현한다. Hello, World! This is a paragraph. - html - body - h1 - "Hello, World!" - p.. 리액트 이미지 업로드 구현 이미지를 실제로 input하는 태그 버튼을 연결하여 클릭 시 input하도록. 이미지 업로드 이미지 삭제 버튼에 연결된 함수들const [preview, setPreview] = useState(Object);const uploadImg = useRef(null);const handleUpload = () => {// ref로 참조한 것 클릭 uploadImg.current?.click(); }; const handlePreview = () => { // 파일 객체에 대해 임시 URL 생성하여 preview set if (uploadImg.current?.files != null) setPreview(URL.createObjectURL(uploadIm.. [React / 네이버 맵 api] 마커 활성화 표시하기(useState와 useRef의 상태 업데이트) 프로젝트 지도 구현 파트에서 마커 활성화 표시를 하기 위해 사용했던 실패한 방식 한가지, 성공한 방식 한가지를 기록하고자 한다. 네이버 맵 API를 사용하여 마커를 찍고 다음과 같이 클릭한 마커만 색이 차도록 하는 기능이 필요했다. 간단하게 해결할 수 있을 줄 알았지만 useState를 사용하려고 했던 실수때문에 시간을 조금 쓰게 됐다.. 다음과 같은 로직으로 해당 기능을 구현하고자 하였다. 1. 마커 클릭 시 (현재 활성화된 마커를 비활성화로 바꾸고 클릭한 마커를) 1) 현재 활성화된 마커가 존재한다면 이를 비활성화 2) 현재 활성화된 마커를 클릭한 마커로 업데이트 3) 클릭한 마커를 활성화 2. 맵 클릭 시 1) 현재 활성화된 마커가 존재한다면 이를 비활성화 2) 현재 활성화된 마커 없애기 1. us.. 이전 1 2 3 4 ··· 7 다음
