더 알아보기166 [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. 애자일(Agile) 방법론 아침마다 커리어리에서 개발 관련 글을 3개씩 읽으려고 노력하는 중인데, 오늘 본 글에서 요즘 개발팀에서 애자일 방식을 많이 사용한다는 글을 보게 되었다. 고로 애자일 방식이 뭔지에 대해서 알아보기로 했다. 내가 알고 있던 애자일의 정의는 "프로젝트를 장기적으로 보고 순차적으로 진행하는 방식이 아니라 일정 기간마다 회의를 통해 팀 단위로 해당 기간 동안 진행할 부분들을 정하고 빠르게 개발해 나가는 방식"으로 알고 있었으며 이번 기회를 통해 위 정의가 맞는 지 또는 더 자세한 부분이 있는지 알아보고 정리해 나갈 예정이다. 정의 애자일(Agile)이란? : 소프트웨어 개발 방법론 중 하나로 사전적 의미로는 '기민한, 날렵한'이라는 뜻을 가지고 있다. 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을.. 2023. 3. 24. document scroll event 대신 new IntersectionObserver 사용해보기 new IntersectionObserver 무한 스크롤이나 스크롤 내릴 때 애니메이션을 넣고 싶은 경우에 document scroll event를 사용해 왔었는 데 구현하고자 하는 기능에 document scroll event를 사용했을 때는 한계가 있다고 느껴져 '코딩애플'님이 올려주신 new IntersectionObserver를 사용하기 전 실현 가능성을 체크하고자 테스트해보았다. 알기 쉽게 설명해 주셔서 따라 하기 어렵지 않았고 영상에서는 HTML/JS/CSS를 사용하셨고 내가 테스트할 때는 Next.js를 사용하여서 코드를 프레임워크에 맞춰 변형하는 과정에서 새롭게 알게 된 부분을 정리하려고 한다. 새롭게 알게 된 부분 useRef()에 자식들을 선택하는 방법 (이전까지는 사용할 일이 없어서 .. 2023. 3. 13. [Error] 프론트에서 백엔드로 JSON 보낼 때 textarea 다루기 등록/수정 기능을 구현하던 중 프론트에서 백엔드로 Json 형태의 값을 보내고 불러오는 과정에서 오류가 발생했다. 이 오류는 JSON 형식이 문자열이 아니거나 문자열로 작성하였는 데 오타가 있는 경우 발생한다고 한다. Unexpected token o in JSON at position 1 해결 방법 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse() 에러 해결 방법에 대하여 알아보겠습니다. 이 에러코드의 발생 원인은 다음과 같습니다. 1. json 형식의 문자열이 맞는지? 2. json 형식의 itprogramming119.tistory.com 온갖 시도를 거쳐 이유를 알아낼 수 있었다. 둘의 다른 점은 desc .. 2023. 3. 9. [Error] Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts Next.js에서 _app.js에 를 사용했더니 아래 사진처럼 빨간 줄이 떴다. 오류 내용을 살펴보니 script를 동기적으로 사용하려고 해서 발생한 오류였고 공식문서에서 답을 찾았다. no-sync-scripts | Next.js No Sync Scripts Prevent synchronous scripts. A synchronous script was used which can impact your webpage performance. import Script from 'next/script' function Home() { return ( Home Page ) } export default Home nextjs.org 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩,.. 2023. 2. 14. 이전 1 2 3 4 5 6 ··· 19 다음 728x90
