전체 글400 [리액트] 파이어베이스 이용하여 사진 저장하는데, 사진이 하나씩 밀리는 현상 발생 🤔 트러블슈팅 (사진 저장 시 , 사진이 하나씩 밀리는 현상 발생) 지난번에 파이어베이스 사진 업로드 기능과 파이어베이스에서 뱉어낸(?) 포토URL을 넣는 과정에서 사진이 앞전 사진으로 하나씩 밀리는 현상이 발생했다. (localStorage에 앞전에 저장된 포토URL이 들어가는듯했다) >> 해결한 부분 state를 새로 만들어, 단순히 localStorage에 사진url이 저장이 되는 onChange 함수에서도 새롭게 만든 state의 set함수를 실행시켜 해당 state 변화를 인지하도록 했다. // 어떤 state가 업데이트 될때만, 사진저장 메소드가 실행하게 설정하면 되지 않을까? const [test, setTest] = useState(""); // onFileChange : 사진 업로드 (사.. 2022. 12. 27. [TIL] 감사함을 흠뻑 느낀 오늘의 개발일지 1. 지금까지 내가 작업한 브랜치를 dev 브랜치에 병합 (-> merge하다가 충돌난 부분 해결해서 무사히 성공❤️ 집단지성의 힘 짱 >_< ) 2. 캐라우셀 기능 3. 글쓰기 저장할 때 현재시간 추가 기능 작업 주말동안에 각자 맡은 필수 기능 구현들을 먼저 마무리를 시켰고 오늘부터 이제 세부적으로 css와 디테일하게 들어가는 기능들을 또 각자 맡아서 구현하는 작업을 했는데 작업에 앞서 내가 작업했던 브랜치를 dev에 병합하는 작업(우리는 dev아래 크게 또 두가지 큰 dev미니 브랜치를 쪼개서 사실 미니dev에 넣은거) 을 처음으로 해보았다. 개강하고 제대로 된 프로젝트를 한지 몇번이 되진 않긴 하지만, 팀플을 할때 깃허브 사용에 익숙하지 않다보니 늘상 깃에 올리긴 해도 팀끼리 계속 깃으로 기능을 추.. 2022. 12. 26. [리액트] Carousel (이미지 자동 슬라이드) 기능 구현하기 1. 먼저 react-slick과 slick-carousel을 터미널에 깔아주기 npm install react-slick npm install slick-carousel 2. 작성하는 파일에 아래 두개 임포트 해주기 import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 3. 이건 내가 이번 프로젝트를 만들면서 기본 프레임을 짜놓은 코드이다 :) import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { Component } from "react"; import Slider f.. 2022. 12. 26. [HTML] 파일경로 찾아가는 방법 오늘 리액트 프로젝트하면서, 캐라우셀 창에 Img 넣으려고 평소처럼 파일 경로를 '../~~~.jgp' 이런식으로 찾아가려고 했는데 이상하게 계속 사진경로가 내가 작성하고 있는 파일에서 경로를 찾는게 아닌가 ㅇㅅㅇ!!! 그동안 내가 이 사소한 부분을 제대로 알고 있지 않다는 사실을 깨달았다. (오늘 알았으면 됐지 뭐 ㅋ) 팀원분들에게 왜 사진경로가 자꾸 내가 작성하고 있는 컴포넌트 를 기준으로 찾고 있는건지 모르겠다고 여쭤봤는데, 다른 팀원분의 아이디어로 사이다처럼 ../.. 으로 하나씩 붙여가며, vs code에서 추천으로 띄워주는 키워드들을 보면서 찾아가서 성공을 시켰다 (무한감사❤️) 그럼 어떻게 파일 경로를 찾아가는지 다시 한번 제대로 정리하기 >> 상대경로 : 현재 위치로부터 파일을 찾아가는 경.. 2022. 12. 26. [WIL] 드디어 사진저장 완성!!! / 오늘의 개발일지 파이어베이스 스토리지에 사진을 저장하는 것까지는 완료했는데, getDownloadURL를 하려고 하니, promise 문법으로 인해 실행되는 시점이 데이터를 제이슨서버에 저장시키는 시점보다 늦게 실행되서데이터에는 undefined가 계속 찍히고 있었다 처음에는, 그게 늦게 실행이 되고 있다는 사실을 생각할 수도 없었고 튜터님께 여쭤보고 그 해답을 찾을 수 있었다. (콘솔창에 데이터가 찍히니까 왜 안넣어지는지가 너무 의문이었는데, 알고보니 콘솔창에 찍힌 데이터는 나중에 프로미스 문법으로 받아온 데이터를 표시해준 것이었다(한마디로 안불러와진게 맞앗음) 튜터님께서 이건 promise문법이라 데이터를 저장하는 시점보다 더 늦게 함수가 실행되서, 빈 데이터가 저장된거라고 state를 사용하면 될거라고 힌트를 주셨.. 2022. 12. 26. [TIL] 오늘의 개발일지 ( 리액트 심화강의 바탕으로 CRD 기능 구현) 1. 프젝에 앞서 손으로 정리해보며 코드 분석 2. CRD 기능 구현 ( update는 내일 분석해봐야지 ) 리액트를 공부하면서 느끼는게, 컴포넌트화를 시키고 편하게 쓰려고 한다는 건 알겠지만 오히려 초보자 입장에선 쪼개고 쪼개지는 구조에 중구난방처럼 느껴지는 것 같다 몇 달 뒤면 왜 이런식으로 쓰는지를 지금보다 더 확- 와닿을 것이라고 생각한다 (지금은 되게 안개처럼 어렴풋이 느껴짐 ㅎ.ㅎ) 구조 분석하다가, 문득 들었던 의문점 component랑 feature가 정확하게 어떤 기준으로 나눠지는거지?? 궁금해서 튜터님께 여쭤보니, 사실 feature를 아예 안쓰는 개발자도 있고 리덕스는 개발툴이 아니다보니 형식이 정해진 게 없어 스타일이 정말 다양하다고 말씀해주셨다. 나는 컴포넌트를 실제 기능 구현 대.. 2022. 12. 24. 이전 1 ··· 32 33 34 35 36 37 38 ··· 67 다음
