Project
1.[날씨어때]체크리스트 및 완료된 작업 요약
1)로그인/로그아웃 버튼으로 화면에 표시해주기 ===> useEffect와 전역관리 부분 2)아이디 중복체크3)통신 오류 해결 정리 4)통신 오류 axios 이후에 정리 5)이미지 binary 형식 전송하기 6)JS 디스트럭쳐링과 스레드 문법
2.[날씨어때] 리프레쉬토큰
리프레쉬 토큰리프레쉬 토큰 설명 및 사진 참고클라이언트에서 로그인 > 서버가 클라이언트에게 Access Token과 Refresh Token 발행 > 클라이언트의 local저장소에 두 token 저장 > 요청시 헤더에 Access token과 함께 요청 > Access
3.[날씨어때] 소셜로그인 이슈 해결
목표: 구글을 통한 소셜 로그인 방법은 간단하지만 내 코드에 어떻게 녹여낼지 화면에 표현될 흐름 등을 생각해서 다시 만들어보아야 했다.과정:초기에 만든 코드:1\. firebase 초기설정, 팝업창 로그인 함수 팝업창 로그인 함수 호출()이슈:구글 함수가 실행되기도 전
4.[회사소개페이지]데이터 불러오기/화면 랜더링
목표: json-server로 mock 데이터를 만들어보고 product list 화면에 map()함수를 통해 불러와서 그려내본다. 과정: 1) 설치 mac 기준2) 작업하는 폴더의 최상단에 json-server 폴더를 만들고 db.json 파일을 생성합니다. 배열
5.[회사소개페이지]사후관리 - 구글애널리틱스 연동
2023년 7월 부터 더이상 유니버셜 애널리틱스를 데이터 추적을 지원하지 않지만react-ga4를 통해서 같은 기능을 계속 사용할 수 있는 것 같다.참고 문서는 npm 공식 문서 - React Google Analytics 4다른 블로그
6.[할일리스트]상세페이지 만들기와 컴포넌트 구조 (+추가된 현재사항)
내가 현재 만들고 있는 리액트 앱의 컴포넌트 구조는 아래와 같다. useParam과 :id로 해당 url를 찾아 상세페이지를 들어가게 하려면저장된 data인 list를 가져와야한다. 나는 여기서 상태를 사용해서 만들고 있다. props로 list의 상태를 왔다갔다 하고
7.[할일리스트]리덕스 코드 수정
목표: 현재 작성한 리덕스에서 오류는 아니지만 useSelect((state)=>state)처럼 같은 상태를 변환함으로 좋지 않다는 콘솔창의 메시지를 보고 다음과 같이 변경하여 불필요한 랜더링을 막는다. 변경 전 : 변경 후 :해당 컴포넌트에 useSelector를 사
8.[할일리스트/오류해결] 이벤트 스크롤 충돌
문제: 첫번째 스크롤 기능인 메뉴버튼을 누르면 해당 부분으로 이동하는 스크롤 기능과 두번째 스크롤 기능인 화면에 들어오면 컨텐츠가 아래에서 올라오는 애니메이션 부분이 충돌을 일으켜서 첫번째 기능이 되고 있지 않은 것 같다. 콘솔에는 위치가 숫자로 찍히고 있지만 스크롤
9.[할일리스트]페이지전환과 스크롤 이벤트가 함께 발생할때 (useEffect에 클린업 함수를 써주어야한다.)->수정: useCallback함수를써준다-> 최종수정:React Router Hash Link
이제 이 작업을 마지막으로 마무리할 수 있을것 같다.디테일 페이지의 헤더부분에서 Link를 통해 메인화면으로 갔다가 메인화면이 랜더링 되면 스크롤이동이되는 페이지이다. 처음에는 그냥 순서대로 진행하면 될 것같아서 useEffect를 써주고 그 안에서 id의 값이 바뀌면
10.[할일리스트]삭제/ 완료 or 진행중 버튼추가 + 진행중만 보기
목표: 현재 있는 카드컴포넌트에 삭제/완료 or 진행중 버튼을 추가 하고 진행중인 카드컴포넌트만 따로 보여주는 기능을 만든다. 과정: 1) 리듀서 툴킷 slice 에 삭제 액션을 추가한다.(1)삭제 방법으로는 filter 메서드를 사용하였다. 주의할 점은 action.
11.[회사랜딩페이지] 배포, AWS 호스팅, 도메인변경
json-server를 client 폴더와 함께 넣고heroku로 배포하려는 시도 => 실패하였다참고한 블로그: https://whwl.tistory.com/276firebase database에 json-server를 옮겨주었다. => 1) 데이터를 fetc
12.[날씨어때2]weather_closet의 mysql 과 node.js 환경준비
13.[날씨어때2] nordjs, express multer-파일포함 form전송 요청 받기
이미지 파일이 포함된 폼데이터 post 요청을 express에서 받아서 프런트에 응답을 주려면 express의 multer를 사용해야 한다. 미들웨어 upload.single('avatar')는 뒤의 function(req, res)함수가 실행되기 전에 먼저 실행.미들
14.Aws호스팅, firebase database, vercel 도메인주소 변경과 배포
과정: 일단은 aws에 호스팅을 하고 vercel에 구매한 도매인 주소로 변경하는 것까지는 완료되었다.앞에서 firebase를 사용하지 않는 정적인 페이지는 여기까지만 해도 정상적으로 작동되었다.하지만 완료된 주소로 들어가보니 로딩이 엄청 많이 걸리고 네트워크를 보니p
15.[회사랜딩페이지]파일선택이 됐을 때 서버로 전송되지 않게 바꾸기 (submit할 때 전송)
firebase에 있는 업로드 메서드를 그대로 가져왔다. 현재 파일을 업로드 할 때 문제는 클릭을 해서 파일선택이 되었을 때 firebase의 클라우드서버에 업로드되고 말았다. 그러면 사용자가 테스트로 파일을 선택하고 모든 폼을 입력하지 않고 서비스에서 나갔을 때 괜히