꿈꾸는 개발자의 블로그

AWS S3는 Amazon Simple Storage Service의 약자로, 객체 스토리지 서비스이다. 우선, 이 서비스를 왜 이용하게 되었는가! 나는 프로젝트를 진행하면서 프로필 이미지를 저장 후, 불러오는 작업이 필요했다. 처음에는 백엔드 단에서 DB에 이미지 파일을 저장해두고 작업을 처리하였는데, 점차 파일이 늘어나면서 보다 효율적인 관리 방법이 필요하게 되었다. 그래서 알게 된 것이 AWS S3! AWS S3에 이미지 파일을 올려두고, 이미지 Url만 DB에 저장하는 것이다. 결과적으로 DB의 저장되는 용량을 줄일 수 있었다. 앞으로 또 이 서비스를 사용할 날을 위하여 정리해보았다. 1. 버킷 만들기 Amazon S3를 들어가면 보이는 화면이다. 여기서 오른쪽에 보이는 버킷 만들기 버튼을 클릭한..

어느덧 3주의 기간이 모두 지났다. 급격히 친해졌던 2주차를 뒤로하고, 3주차에 들어서면서는 프로젝트 마무리에 쫒겨 하루 하루가 정말 보람찬 하루였던 것 같다. 팀원 중 해결되지 않는 문제가 생기면 백엔드, 프론트엔드... 자신이 어떤 포지션인지에 국한되지 않고 누구든지 달려가서 서로를 도왔다...♥ 그렇게 계속 진행하다보니, 서로의 코드를 이해할 수 있는 시간이 된 것 같고, 함께 문제를 해결하면서 새로운 문제 해결 방법도 익힐 수 있었다~~!! 정말... 이번 프로젝트는 소통의 중요성를 크게 느끼게 해주었고, 이러한 팀원을 만나게 된 것은 나에게 넘나 큰 행운이다! 기능 구현 내용 Boardgame 페이지 완성 BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, 페이지네이션 적용하여..

useState의 값을 객체로 가지고 있을 때, 객체 내용을 업데이트 하는 방법이다. useState 객체 변경하기 setContition의 current 값을 가져온다. 원하는 객체 key, value를 저장하고, 업데이트 된 객체를 리턴한다. 전체 코드 import React, { useState } from "react"; function Test() { const [condition, setCondition] = useState({ category: "", val1: "", type: "", }); const changeCondition = (key, value) => { setCondition((current) => { let newCondition = { ...current }; newCond..

2주가 정말 금방 지났던 것 같다. 벌써 팀원들과 무척이나 친해져서 밤새 같이 코딩하다가도 회의랍시고 잡담으로 빠지는 경우가 수두룩 했지만 ㅋㅋㅋ 정말 너무너무 재미있었다!!! 기능 구현 내용 Boardgame 페이지 구현 BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, BoardgameCard으로 데이터 전달 BoardgameCategory 컴포넌트 구현 : 카테고리 조건 별로 데이터 요청 BoardgameCard 컴포넌트 구현 : 보드게임의 대한 정보 렌더링 Note. BoardgameData 컴포넌트 구현 useState : 보드게임 데이터 저장 useEffect : 보드게임 카테고리 조건 선택이 바뀔 때 실행할 함수 conditionGamesHandler : 보드게임 카테고리..

부모 컴포넌트에 있는 값을 변경해주기 위해서는 자식 컴포넌트에 Props을 내려주게 된다. 하나의 방법으로 useState의 set 함수를 내려주어 부모의 state 값을 직접 바꾸는 모습을 볼 수도 있지만, 그것보다는 부모 컴포넌트에서 state 값을 변경하는 함수를 작성하고 자식 컴포넌트에 이 함수를 전달하는 방법이 안전한 것 같다. 부모 컴포넌트 import React, { useState } from "react"; import Child from "./Child"; function Parent() { const [search, setSearch] = useState(undefined); const changeSearch = (value) => { setSearch(value); }; return..