뚝딱뚝딱 코딩 기록_

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[Python_ACM 호텔] 📢 문제 📢 각 층에 W 개의 방이 있는 H 층 건물이라고 가정하자 (1 ≤ H, W ≤ 99). 호텔 정문은 일층 엘리베이터 바로 앞에 있는데, 정문에서 엘리베이터까지의 거리는 무시한다. 또 모든 인접한 두 방 사이의 거리는 같은 거리(거리 1)라고 가정하고 호텔의 정면 쪽에만 방이 있다고 가정한다. 방 번호는 YXX 나 YYXX 형태인데 여기서 Y 나 YY 는 층 수를 나타내고 XX 는 엘리베이터에서부터 세었을 때의 번호를 나타낸다. 손님은 엘리베이터를 타고 이동하는 거리는 신경 쓰지 않는다. 다만 걷는 거리가 같을 때에는 아래층의 방을 더 선호한다. 초기에 모든 방이 비어있다고 가정하에 이 정책에 따라 N 번째로 도착한 손님에게 배정될 방 번호를 계산하는 프로그램이다. ..

[Python_달팽이는 올라가고싶다] 📢 문제 📢 땅 위에 달팽이가 있다. 이 달팽이는 높이가 V미터인 나무 막대를 올라갈 것이다. 달팽이는 낮에 A미터 올라갈 수 있다. 하지만, 밤에 잠을 자는 동안 B미터 미끄러진다. 또, 정상에 올라간 후에는 미끄러지지 않는다. 달팽이가 나무 막대를 모두 올라가려면, 며칠이 걸리는지 구하는 프로그램을 작성하시오. ❗아이디어 - 달팽이가 올라가야 하는 높이를 하루에 올라가는 높이로 나눈 나머지를 구한다. import sys A, B, V = map(int, sys.stdin.readline().split()) if (V-B) % (A-B) == 0: print((V-B) // (A-B)) elif (V-B) % (A-B) < A-B: print((V-B) // (A-..

[Material UI_ Grid] ❔ window size 구하기 const [windowSize, setWindowSize] = useState(window.innerWidth); const handleWindowResize = useCallback(() => { setWindowSize(window.innerWidth); }, []); window.addEventListener("resize", handleWindowResize); ❔ 컴포넌트 만들기 const ComponentGrid = () => { let colNum = 4; if (windowSize < 1200) colNum = 3; if (windowSize < 900) colNum = 2; if (windowSize < 600) col..

[CKEditor_ HTML Parser] CKEditor로 입력한 내용을 받아왔을 때 html 태그 속성이 사라지는 현상을 해결하는 방법에 대해 알아보자 ❔ CKEditor 사용법은 이전 포스팅을 참고해 주세요. 👉 [CKEditor5] 리액트에서 CKEditor5 사용하기 CKEditor를 사용하여 게시판 글 등록 페이지를 만들었는데 상세보기로 내용을 넣으니 html 태그 속성이 적용되지 않고 태그가 그대로 노출되는 현상이 발생했다. 예를 들면, 제목 1 속성으로 안녕하세요를 입력했을 때 HTML 삽입 미리보기할 수 없는 소스 이렇게 나타나야 하는데 화면에는 안녕하세요 이렇게 나타났다. 이 현상을 해결하려면 HTML Parser라는 라이브러리가 필요한데 프로젝트에서 리액트로 개발을 진행중이었기 때문에..

[Project_Flooming] 🌸 프로젝트 소개 🌼 소개 : 딥러닝 모델을 활용한 꽃 사진 분류, 꽃 그림 생성 모바일 앱 🌼 컨셉 : 꽃에 대한 정보 (이름, 꽃말 등)을 알려주고 그림으로 변환해 주는 애플리케이션 🌼 기능 사용자가 꽃 사진을 촬영 or 갤러리에서 불러오는 경우에 어떤 꽃인지 분류하여 이름과 꽃말을 알려줌 사용자의 꽃 사진을 그림으로 변환 변환된 그림을 개인 디바이스에 저장 '전시관'이라는 커뮤니티에 comment와 함께 업로드 다른 사용자의 꽃 사진 및 그림 관람 가능 전시관 신고 기능 🌼 개발 기간 : 약 7주 🌸 사용 기술 🌼 front Android : JavaScript, React-Native, expo-cli, Axios iOS : Swift, Alamofire, Man..

[React_ Error Boundary] 리액트에서 예외 발생 시 예외 페이지를 보여주는 방법에 대해 알아보자 리액트로 예외 페이지를 생성하는 두 가지 방법을 알아보자. ⚠ 리액트 Lifecycle method를 이용하여 구현하기 - errorBoundary.jsx class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { logErrorToMyService(err..

[Expo_ permissions] 리액트 네이티브 expo cli를 이용한 기본 권한 설정하는 방법에 대해 알아보자 리액트 네이티브 exp-cli를 이용하여 개발한 애플리케이션을 출시하려고 했다. bundle 파일을 올리고 버전 검토를 했는데 자꾸 오류가 떠서 다음 단계로 넘어가지 않았다. 이유는 바로 위치 권한을 이용하고 있었기 때문이었다. 위치정보를 사용할 일이 없는 어플이었는데 자꾸 버전 검토를 통과하지 못해 엄청 답답했다. android.ACCESS_COARSE_LOCATION android.ACCESS_FINE_LOCATION android.ACCESS_BACKGROUND_LOCATION 바로 이 세 가지 권한 때문이었는데 찾아보니 expo-cli를 이용한 경우 permissions를 따로 설..

[React_ react-toastify] react-toastify 사용법에 대해 알아보자 웹사이트를 개발하다 보면 잠깐 경고창이 생겼다가 사라지는 toast를 띄우야 하는 경우가 있다. 직접 구현하는 방법으로는 setTimeout와 state를 사용하여 직접 커스텀하는 방법이 있다. 이번 포스팅에서는 react-toastfy 라는 라이브러리를 사용하는 방법에 대해 알아볼 것이다. 1. 라이브러리 설치 npm install react-toastify 2. 코드 삽입 import { toast, ToastContainer } from 'react-toastify'; export default function App() { const success = () => toast.success('성공!'); re..

[React_ react-pdf] 리액트로 PDF 프리뷰어 만드는 방법에 대해 알아보자 1. react-pdf 설치 npm install react-pdf 2. 필요한 컴포넌트 임포트 + pdf.worker.js 활성화 import { Document, Page, pdfjs } from 'react-pdf'; // pdf.worker.js 활성화 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 📜 pdf.worker.js를 활성화하지 않으면 pdf 파일이 보이지 않으니 유의해 주세요! 3. 코드 추가 import React from 'react'; imp..