매일 해내는 개발/Develog62 [Develog] 타입스크립트 기초 1. 타입스크립트란? 자바스크립트에 타입이 추가된 문법이다. 자바스크립트는 자료형이 동적이기 때문에 프로젝트 실행 전에는 어떤 오류가 있을지 파악하기 어렵기 때문에 유지보수가 어렵지만 타입스크립트는 자료형을 정적으로 할당하기 때문에 IDE에서 컴파일 타임에 에러를 빨간 줄로 미리 알려줄 수 있다. TypeScript : 변수의 타입이 컴파일 타임에 결정됨 JavaScript: 변수의 타입이 런타임에 결정됨 *컴파일 타임: 작성한 소스코드가 (js, binary 등으로) 변환되는 과정 *런타임: 프로그램이 실행되는 과정 2. 타입스크립트를 사용하는 이유 장점 단점 TypeScript 1. Microsoft에서 만들었고 꾸준히 업데이트한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 vscode.. 2023. 1. 17. [Develog] Glitch로 json-server 배포하는 방법 심화 프로젝트 S.A 1. 프로젝트 소개 www.notion.so 이번 프로젝트에서 한 일 1. 로그인 페이지 구현 처음 SA를 작성할 때 칸반보드 아이디어를 짜다보니 로그인 기능이 꼭 필요하다고 생각했다. 그래서 파이어베이스를 활용하여 이메일 로그인, 구글 로그인 기능을 구현하였고 thunk과 redux를 이용해 데이터를dispatch하여 json-server에 저장되도록 하였다. 하지만 로그인 기능을 구현하고 나니 마이페이지도 필요하다고 생각되어 필수 기능이 아님에도 마이페이지를 구현하게 되었다. 2. 마이 페이지 구현 fileChange 함수로 파일을 변환하고 storeImg 함수로 파이어스토어에 저장한다. 3. 사이드바에서 로그아웃 기능 구현 4. 배포 처음에 버셀에서 json-server배포 및.. 2023. 1. 2. [Develog] 리액트 칸반보드 프로젝트 KPT 회고 6조 KPT 회고 1. 한 주의 흐름 1) 한 일 프로젝트 명: 🍬 CANDY(you CAN Do anYthing) 🍭 칸반보드 필수 작업: Task CRUD, 댓글 CRUD, 로그인 기능 구현 추가 작업: 캘린더 기능, 친구초대 기능, Task와 댓글 생성 시간 표시 기능, 마이페이지 기능 구현 2) 느낀점 명준 - 그 동안 실력이 부족해서 해보고 싶었던 파트를 맡아보지 못했었는데 부담을 정말 많이 줄여주셔서 기능구현 역할을 맡아볼 수 있었습니다. 비록 성공하지 못했지만 너무 좋은 팀원들을 만나 정말 후회없을 정도로 결과에 상관없이 도전을 해볼 수 있어 의미있는 프로젝트가 되었습니다. 예슬 - 여러 라이브러리를 쓰면서 생각보다 제공된 것들을 제대로 사용하는 것들이 어려웠습니다. 하지만 구현을 해냈다는 .. 2022. 12. 28. [Develog] 칸반보드 프로젝트 진행중 칸반보드 프로젝트 진행 중 1. 탭종료시 로그아웃 안됨 db에 현재 로그인 한 회원의 데이터를 추가하고 로그아웃 시 삭제하는데 창을 닫았을 때 데이터 삭제가 안돼서 재접속해도 로그인이 되어있다. 이를 해결하기위해 window 객체를 사용하였다. 이렇게 이벤트리스너를 추가해서 unload(탭이나 창을 끌 때) 이벤트가 발생하도록 구현하였다. 하지만 로컬 json-server를 사용할 때는 효과가 있었는데 서버를 배포하고 나니 효과가 없어서 아쉬웠다. 코드는 아래 링크를 참고했다. JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload) 브라우저 우측 상단의 x 버튼을 눌렀을 때 이벤트를 감지하여 창을 닫기 전 윈도우창 닫기 이벤트를 취소할지를 묻는 팝업창을 띄우는 방법입니다. Window: be.. 2022. 12. 28. [Develog] 옵셔널 체이닝 1. 오늘의 문제점 : 새로고침시 로딩 오류 2. 해결방법 : 옵셜널 체이닝 DetailPage에 접속하면 기존에는 내용이 잘 나오는데 새로고침 할 경우 post.id를 찾을 수 없다는 오류가 떴다. 이 부분에 대해서 고민해봐도 답이 나오지 않아 재현님께서 튜터님을 찾아가 문의했다. 튜터님께서 이것 저것 만져보라고 하시더니 로딩문제인 것 같다고하셨고. 140번째 줄에 있는 post와 user를 console을 찍어보라고 하셨다. 튜터님께서 콜솔 결과를 보시더니 물음표를 찍어보라고 하셨고 결과는 해결! 문제는 로딩이 맞았고 물음표는 옵셔널 체이닝이라는 문법이었다. 위 사진의 콘솔 결과를 보면 초반에 빈값을 읽어오는 것을 볼 수 있다. 아직 로딩 중인 상태여서 post 값을 읽어오지 못했는데 post.id .. 2022. 12. 27. [Devleog] 2022년 12월 마지막주 로그 친구들 크리스마스에 파티할 때 난 집에서 공부하면서 일했다. 그래도 본가에 와서 금복이랑 같이 놀 수 있어서 좋았다. 1. 이번주 한 일 1) 로그인 페이지 구현 2) 마이 페이지 구현 - 프로필 이미지, 닉네임 수정하여 메인페이지에서 보이도록 구현 > userSlice에 __updateUser Thunk 추가하여 프로필 수정시 데이터 변경되도록 디스패치함 2. 다음주 목표 - 댓글 CRUD 구현 - 회원 추가하여 추가된 사람들끼리 댓글 달 수 있도록 구현 - 글 쓸 때 날짜 추가하기 - 글 쓸 때 작성한 회원 이미지 뜨도록 구현 2022. 12. 25. [Develog] 리액트 심화프로젝트 / 파이어베이스 + 리덕스 툴킷으로 로그인 기능 구현 1. 현재상태 우리의 주제가 이다 보니, 로그인 기능이 필요하다고 생각해서 파이어베이스를 사용하기로 했다. 파이어베이스는 서버리스 프로그램아닌가? 그런데 json server를 사용해야하나? 라는 고민에 부딪혔다. 파이어베이스에 db기능이 있는데 json 서버를 사용하는게 맞나? 하지만 배운걸 시도해본는데 의의를 두고 json-server와 redux toolkit, thunk, axios를 사용하여 구현해보기로 했다. 2. 구현사항 1) 파이어베이스로 이메일/구글 회원가입, 로그인 기능 구현 2) userSlice.js 파일을 만들어서 리덕스 툴킷 구현 - __getUser : axios.get dispatch시 데이터 받아오기 - __addUser: axios.post 로그인 시 데이터 추가 - __.. 2022. 12. 25. 리덕스 투두 수정 / 심화 프로젝트 진행 리덕스 투두 수정 수정사항 //Todo1: 삭제하면 404에러 --> 갑자기 잘됨.. 뭘 수정했지..? //Todo2: 체크버튼 에러 --> 처음에 !todo.isDone값만 넘기는 걸로 수정했는데 __updateTodo에 id값까지 넣어줬어야 했음 //Todo3: 수정 에러 --> 원래 todo의 데이터에 직접접근해서 수정했는데 서버를 꼈더니 read only 객체가 돼버렸음 // 원래 updateTodo안에 payload로 id: param.id, modifiedtitle, modifiedcontents로 넣었는데 // 서버에서 기존 데이터에 modifiedTitle, modifiedContents 데이터가 붙어서 들어감 // 그래서 id: parma.id, title: modifiedTitme, c.. 2022. 12. 23. [Develog] 리덕스 툴킷, json-server, axios, Thunk를 이용한 투두리스트 배포 12/22 커밋 이전에 리덕스로 작업했던 투두리스트를 리덕스 툴킷, json-server, axios, thunk를 이용하여 배포 진행함 https://github.com/jeLee94/TodoList/tree/dev GitHub - jeLee94/TodoList Contribute to jeLee94/TodoList development by creating an account on GitHub. github.com 2022. 12. 22. 이전 1 2 3 4 5 6 7 다음
