프로그래밍/웹 개발46 [React] Button 통한 파일 업로드 및 진행상황(progress) 표시 input 태그만 사용 시 문제점 위 코드처럼 input 태그를 사용하면, 파일 업로드를 위한 UI가 화면에 생성됩니다. 그러나 위 UI를 화면에 표시하고 싶지 않은 경우가 있습니다. input 엘리먼트를 화면에서 숨기되, Button 엘리먼트를 통해서 파일을 업로드하는 코드를 구현해보겠습니다. 파일 업로드 코드 구현 1. display:none 스타일 속성으로 input 엘리먼트를 화면에서 숨깁니다. 2. useRef를 사용하여 을 참조하고, 버튼 클릭 시 에 대한 클릭이벤트가 발생하도록 합니다. useRef를 사용하면 버튼 엘리먼트에서 onClick 이벤트가 발생했을 때 input 태그가 동작하도록 만들 수 있습니다. input 태그에 클릭 이벤트를 발생시키는 함수를 제작하고, 이를 버튼 엘리먼트.. 2023. 4. 12. [react-color, TypeScript] 컬러 선택 기능 구현하기 (color picker) react-color 라이브러리를 사용하여 컬러 선택 기능을 제작해보려 한다. 주로 어드인 페이지에서 활용가능한 기능일 것이다. 1. react-color 라이브러리에서 ChromePicker를 불러온다. 다양한 형태의 컬러피커를 불러올 수 있다. ChromePicker가 가장 깔끔하다고 생각하여 이것을 선택했다. 불러올 수 있는 컬러피커의 종류는 아래와 같다. https://casesandberg.github.io/react-color/ AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker Swatch.. 2023. 4. 8. [SCSS, JS] JavaScript를 통해 SCSS 속성값 동적으로 연결하기 JS의 코드를 통해 SCSS의 속성값을 동적으로 변경하여 스타일을 동적으로 변경하고자 한다. SCSS 파일 내부 코드 1. SCSS에서 :root 셀렉터를 사용하여 그 안에 동적으로 변경할 속성값을 기재하기 :root 셀렉터는 JavaScript와 CSS를 연결하는 문법이다. 커스텀 속성값의 변수명을 정의할 때에는 --(double hyphen)을 사용해야 한다. 그래야 브라우저가 CSS에서 사용할 수 있는 변수로 인식힌다. --(double hyphen)이 없으면 브라우저는 이를 일반 CSS 속성으로 이해하여 의도한 커스텀 기능대로 작동하지 않는다. 2. var() 함수로 :root 내부의 속성값을 변수처럼 불러오기 :root { --elementColorCode: "#ff0000"; --backgr.. 2023. 4. 8. [EC2] sudo node 명령어 에러 (The Node-API version of this Node instance is 1) AWS EC2에서 node index.js 명령어는 문제 없이 실행이 된다. 그러나 sudo node index.js는 실행이 되지 않는다. Error: The Node-API version of this Node instance is 1. This module supports Node-API version(s) 3. This Node instance cannot run this module. 이는 sudo 경로의 문제로 발생한 에러이다. sudo 경로를 바꿔서 해결할 수 있다. 그러나 which 명령어를 사용하여 간단한 해결이 가능하다. sudo `which node` index.js 참고 링크 : https://stackoverflow.com/questions/4976658/on-ec2-sudo-no.. 2022. 9. 30. [AWS] HTTPS 배포 관련 URL 생성 및 공인인증서 Client HTTPS 배포 1. AWS Route53에 URL 등록 -> NS, SOA 유형의 URL 생성 2. AWS Route53의 NS 유형 URL에서 네임서버를 제공 -> 가비아에 등록 3. AWS 공인인증서 발급 시 적용할 URL을 2개 입력함 (www.cheongjici.com, cheongjigi.com) : Route53에 CNAME 유형 URL 2개 생성됨 4. 별칭 레코드 생성을 통해 A유형 URL 생성 : A URL 주소를 통해 Cloudfront URL과 공인인증서가 연동됨 참고 링크 : https://velog.io/@seongkyun/AWS-S3-CloudFront-Route53%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A0%95%EC%A0%81.. 2022. 9. 30. [Front-end] 에러 메시지에 따른 조건부 처리 (err.message) 서버에서 클라이언트로 여러 유형의 에러 메시지를 보내게 됩니다. (500, 404, 401) 그 중 특정 에러를 별도로 처리해야 할 경우가 있습니다. 저는 인증과 관련된 401 에러가 발생했을 경우, 기존 토큰을 삭제하는 코드를 실행시키고자 했습니다. err객체 내의 message 프로퍼티를 활용하여 이를 해결했습니다. (err.message) axios.post(`${process.env.REACT_APP_SERVER_API}/api`, { token: token }) .then(res => { setIsOpened(false) }) .catch(err=>{ if (err.message = "Request failed with status code 401") { dispatch(deleteToken().. 2022. 9. 30. [React] 이벤트핸들러(event handler)에 event 외에 추가 인자 전달하기 이벤트 핸들러(Event Handler)에 합성 이벤트 객체(event) 외에 추가적인 매개변수를 전달하는 방법을 알아보자. 먼저 event 객체만 전달하는 방법부터 살펴보자. 1. event 객체만 전달하기 클릭 2. event 객체 외 다른 매개변수만 전달하기 {eventHandler(parameter)}}> 클릭 3. event 객체와 추가 매개변수를 함께 전달하기 {eventHandler(event, parameter)}}> 클릭 2022. 8. 10. [git] modified: (untracked content) 에러 해결하기 - submodule 삭제 문제 상황 Repository 내부 특정 디렉토리의 수정사항을 git 에서 트래킹 할 수 없음 해당 디렉토리를 GITHUB에 push 하더라도, GITHUB에서 해당 디렉토리에 접속 불가능 원인 해당 디렉토리를 submodule (하위 Repository)로 인식하기 때문 실수로 루트 디렉토리가 아닌 하위 디렉토리에서 git add를 했더니 이와 같은 문제 발생 다른 Repository에 소속된 디렉토리를 해당 Repository로 복사해온 경우도 이와 같은 문제 발생함 해결방안 submodule 삭제하기 하위 디렉토리 내부의 git 폴더 검색 $ find . -name '.git' 하위 디렉토리의 git 폴더 삭제 $ cd 하위디렉토리 $ rm -rf '.git' 루트 디렉토리에서 해당 하위 디렉토리의.. 2022. 2. 3. 이전 1 2 3 4 5 6 다음 반응형
