728x90 🧠 지식창고170 [React + Typescript] Canvas 태그와 useRef를 사용하여 그림판 만들기 아직 블로그에 올리진 않았지만 지금 개인적으로 만들고 있는 프로젝트에 그림판 기능을 넣어보고 싶어서 canvas 태그와 useRef를 사용하여서 그림판 기능을 만들었습니다. 기능에 관한 코드와 설명은 추후 프로젝트가 완성되면 추가적으로 기재하도록 하겠습니다. 2023. 10. 20. [React + Typescript] 부모 자식 간에 useRef 사용하는 방법 React와 Typescript를 사용한 프로젝트에서 input에 useRef를 사용하던 중 새롭게 알게된 내용을 정리했습니다. 동일한 컴포넌트에서 useRef를 사용하는 경우 이 내용이 큰 도움이 되지 않을 수 있지만, 부모 컴포넌트에서 자식 컴포넌트에 prosp로 ref를 넘기고, 해당 ref에 접근하여 DOM을 조작하거나 값을 얻어야 하는 경우에 도움이 될 듯 합니다. 실행 화면 코드 useRef() : DOM 취득 용도로 HTMLInputElement 타입을 설정하고, 초깃값으로 null을 설정한다. // Parent.tsx import { useState, useEffect, useRef } from "react"; import Input from "./Input"; import Button f.. 2023. 10. 19. [React-Toastify] 토스트 기능 구현해보기 사이드 프로젝트 Linkey를 진행하면서 토스트 기능을 React + Typescript에서 구현해보았고, 그 과정을 정리해보았습니다! 라이브러리 선택 과정 React Bootstrap과 react-toastify라는 두 가지 선택지 중에서 최종적으로는 React-Toasitify 라이브러리를 선택하였는 데, 현재 개발 중인 사이드 프로젝트가 디자이너나 기획자가 없는 상태에서 프론트 1명과 백엔드 1명이 진행하는 프로젝트이다 보니 UI적으로 임펙트가 부족하다는 느낌이 들어 React Bootstrap에 애니메이션을 추가해서 구현하는 것보다는 빠른 개발을 위해 Node.js 패키지 (React-Toasitify)를 선택하게 되었다. React Bootstrap > Toasts Toasts | React B.. 2023. 9. 26. react-dom의 createPortal 사용 후기 react-dom의 createPortal이란? React 프로젝트에서는 구현된 화면을 /public/index.html의 에서 렌더링 하는 데 react-dom의 createPortal을 사용하면 #root가 아닌 다른 태그에 id를 부여함으로써 영역을 분리하여 화면을 렌더링 할 수 있다. [React] ReactDOM.createPortal() 모달 공부를 하다가 마주친 ReactDOM.createPortal()에 대해 알아보자! velog.io 어떤 상황에 사용할 수 있을까? Modal 컴포넌트를 생성할 때 화면을 감싸고 있는 root를 개별적으로 사용할 수 있기 때문에 화면 우선순위 처리면에서 유용할 것 같다. 이외의 새롭게 알게된 부분 예제에서는 document.getElementId("#mod.. 2023. 7. 28. [AWS] S3에 이미지 추가/삭제/복사(이동) 및 설정하는 방법 입사한 지 1년 3개월 만에 드디어 AWS S3의 추가/삭제/복사 기능을 구현했다. 팀장님 계실 때도 못했던 걸... ChatGTP와 팀원분과의 합동으로 해결해 냈다. 무한한 감사를... 이 글이 AWS S3에 늪에서 헤매고 있는 개발자분들에게 도움이 되기를 바라며... AWS S3 설정하는 방법 next/image src에 AWS S3 이미지 삽입하는 방법 이미지 추가 이미지 삭제 이미지 복사 AWS S3 설정하는 방법 이 부분은 다른 블로그에도 설명이 잘 되어 있어서 간결하게 넘어갑니다 AWS 접속 후 로그인하고 S3에 버킷에 들어간다. 무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비.. 2023. 7. 13. [Error] AWS S3 CORS error 발생 Access to XMLHttpRequest at '해당 이미지' from origin '해당 사이트' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. local에서는 AWS S3에 이미지가 잘 업로드 되다가 실서버에서 위와 같은 오류가 발생한다면 아래와 같이 해결할 수 있습니다. AWS S3 접속 > 해당 버킷으로 이동 > 하단 스크롤 > CORS(Cross-origin 리소스 공유) > 편집 > "AllowedPOrigins" value에.. 2023. 4. 11. axios 여러 개 요청하기 (multiple request) 프로젝트 리뉴얼 과정에서 한 컴포넌트에 5개의 get api를 요청해야 해서 단순하게 생각했을 때는 useEffect에 api를 넣으면 된다고 생각했었지만 실제로 테스트해보았을 때 몇 가지 문제가 발생했었다. 불러온 값이 없다는 error 발생 순차적으로 불러오려니 시간이 오래 걸려 로딩이 느림 유지보수가 용이하지 않음 한꺼번에 api를 요청하는 방법은 없을까 찾아보니 axios.all을 사용하는 방법이 있다는 걸 알게 되었다. 기존에 axios와 크게 다르지는 않아서 좋았다. import axios from "axios" import { useEffect } from "react" const Test = () => { const getAHandler = () => { return axios.get("/.. 2023. 3. 30. MVC 패턴 내 머릿속에 MVC 패턴은 백엔드에서 사용하는 아키텍처로써 Model, View, Controller가 있다고 알고 있었는 데, 막연히 Spring과 같은 백엔드에서만 사용하는 것이다라고 생각하며 3년이라는 시간이 지나자 이제는 MVC 패턴이 프런트에서도 사용되고 있다는 것을 알게 되어 새로운 마음으로 MVC 패턴에 대해 알아보았다. 프론트엔드의 MVC 아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로 velog.io 위 글에서 MVC 패턴에 대한 설명과 프론트에서는 MVVM, MV*과 같은 MVC에서 파생된 개념들도 잘 정리되어 있기 때문에 한번 읽어보면 개념 잡는.. 2023. 3. 27. SWR vs React-Query 앞서 작성한 애자일 방법론의 서론과 마찬가지로 커리어리에 올라온 Q&A를 통해 SWR과 React-Query의 차이점을 알아보게 되었고 좋은 글을 발견하여 따로 정리할 것 없이 해당 글을 첨부하였다. React Query vs SWR React Query와 SWR의 차이점 tech.madup.com 추후 패캠에서 SWR과 React-Query 강의 시청 후 추가하거나 사용법을 정리해 볼 예정이다. 2023. 3. 24. 이전 1 2 3 4 5 6 ··· 19 다음 728x90
