전체 글 (168) 썸네일형 리스트형 [CSS] 통통 튀는 바운스 애니메이션 구현하기 화면 메인에 이미지 로고에 통통! 튀는 바운스 움직임을 구현하였다. 이미지는 public/image 폴더에 넣어놓았고, css 파일에서 애니메이션을 추가해주었다~! 통통 튀는 바운스 애니메이션 구현하기 애니메이션 만들기 : animation-name: bounce, @keyframes bounce 애니메이션 속성 값 지정하기 : animation-duration: 0.5s, animation-direction: alternate, animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035), animation-iteration-count: infinite 전체 코드 BounceAnimation.js import React from "react"; .. [React] AWS S3 이미지 파일 업로드 하기 : AWS S3 버킷 생성 AWS S3는 Amazon Simple Storage Service의 약자로, 객체 스토리지 서비스이다. 우선, 이 서비스를 왜 이용하게 되었는가! 나는 프로젝트를 진행하면서 프로필 이미지를 저장 후, 불러오는 작업이 필요했다. 처음에는 백엔드 단에서 DB에 이미지 파일을 저장해두고 작업을 처리하였는데, 점차 파일이 늘어나면서 보다 효율적인 관리 방법이 필요하게 되었다. 그래서 알게 된 것이 AWS S3! AWS S3에 이미지 파일을 올려두고, 이미지 Url만 DB에 저장하는 것이다. 결과적으로 DB의 저장되는 용량을 줄일 수 있었다. 앞으로 또 이 서비스를 사용할 날을 위하여 정리해보았다. 1. 버킷 만들기 Amazon S3를 들어가면 보이는 화면이다. 여기서 오른쪽에 보이는 버킷 만들기 버튼을 클릭한.. 데이터 분석 웹 서비스 : Boardmon - 3주차 회고 (05/03~05/07) 어느덧 3주의 기간이 모두 지났다. 급격히 친해졌던 2주차를 뒤로하고, 3주차에 들어서면서는 프로젝트 마무리에 쫒겨 하루 하루가 정말 보람찬 하루였던 것 같다. 팀원 중 해결되지 않는 문제가 생기면 백엔드, 프론트엔드... 자신이 어떤 포지션인지에 국한되지 않고 누구든지 달려가서 서로를 도왔다...♥ 그렇게 계속 진행하다보니, 서로의 코드를 이해할 수 있는 시간이 된 것 같고, 함께 문제를 해결하면서 새로운 문제 해결 방법도 익힐 수 있었다~~!! 정말... 이번 프로젝트는 소통의 중요성를 크게 느끼게 해주었고, 이러한 팀원을 만나게 된 것은 나에게 넘나 큰 행운이다! 기능 구현 내용Boardgame 페이지 완성BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, 페이지네이션 적용하여 .. [React] useState 객체 값 변경하기 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.. 데이터 분석 웹 서비스 : Boardmon - 2주차 회고 (04/26~04/30) 2주가 정말 금방 지났던 것 같다. 벌써 팀원들과 무척이나 친해져서 밤새 같이 코딩하다가도 회의랍시고 잡담으로 빠지는 경우가 수두룩 했지만 ㅋㅋㅋ 정말 너무너무 재미있었다!!! 기능 구현 내용Boardgame 페이지 구현BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, BoardgameCard으로 데이터 전달BoardgameCategory 컴포넌트 구현 : 카테고리 조건 별로 데이터 요청BoardgameCard 컴포넌트 구현 : 보드게임의 대한 정보 렌더링 Note. BoardgameData 컴포넌트 구현useState : 보드게임 데이터 저장useEffect : 보드게임 카테고리 조건 선택이 바뀔 때 실행할 함수conditionGamesHandler : 보드게임 카테고리 조건이.. [React] 자식 컴포넌트에서 부모 컴포넌트에 있는 state 값 변경하기 부모 컴포넌트에 있는 값을 변경해주기 위해서는 자식 컴포넌트에 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.. 데이터 분석 웹 서비스 : Boardmon - 1주차 회고 (04/19~04/23) 엘리스 4기에서 이루어지는 팀 프로젝트 2번째가 시작되었다! 데이터 분석 웹 서비스로, Kaggle에서 데이터셋을 가져와 정제하고, 그것을 시각화하여 사용자에게 제공하는 웹 페이지를 구현하는 것이 목표이다. 이전 프로젝트와는 다르게 기획부터 직접 하게 되면서, 백엔드 3명, 프론트엔드 3명 총 6명으로 구성된 우리팀은 하루의 대부분을 회의로 보내게 되었다....^^ 아침 스크럼부터 오후 오피스아워까지!! 이번에 만난 팀원들의 에너지가 얼마나 좋은지 ㅋㅋㅋ 아이디어도 통통 튀고, 열정적이었던 분위기 덕분에 나도 점점 의욕이 솟은 것 같다. 그렇게 우리팀의 프로젝트 주제는 보드게임 추천 웹 서비스가 되었다. 프로젝트 소개팀 구성Frontend - 3명, Backend - 3명프로젝트명BOARDMON : .. [Git] GitLab에서 GitHub으로 저장소 옮기기 GitLab에서 진행한 프로젝트를 GitHub Repository로 옮기는 동시에, 잔디도 그대로 심는 방법을 소개할까 한다. GitLab에서 'sample-project'로 진행한 프로젝트를 GitHub 'Boardgame-Project'라는 이름의 Repository로 이동하였다. GitLab에서 GitHub으로 저장소 옮기기 1. 터미널 실행하기 2. GitLab에서 작업했던 저장소 클론하기 git clone --bare https://gitlab.com/sample-project.git 3. 클론한 저장소로 경로 이동하기 cd sample-project.git 4. GitHub에 Repository 만들기 5. 방금 만든 GitHub Repository에 푸쉬하기 : 미러링하기 git push -.. 이전 1 ··· 17 18 19 20 21 다음
