포스코x코딩온48 [포스코x코딩온] 풀스택 부트캠프 15주차 정리 -1 3차 프로젝트 회고-1 01/27 ~ 01/28 웹 소켓 채팅 관련해서 다른 팀원분이 만들고 계신 것을 데이터베이스와 연동하기로 했다. 팀원분이 잘 만들어두셔서 웹 소켓은 잘 작동했지만 소켓의 경우 async를 활용하지 않기 때문에 바로 await로 sequelize 함수를 사용할 수 없었다. 그래서 위에 따로 함수를 만들어 sequalize 함수를 이용했고 이를 통해 연동할 수 있었다. 이건 나중에 mvc를 통해서 컨트롤러에 넣어야겠다. 근데 넣다 보니까 데이터베이스를 갈아엎을 필요가 있었다. 그 이유는 1:1 chat과 mono chat을 구분하기 위함에 있었는데 하나의 테이블에 두 개를 넣다 보니까 구분할 수 있는 방법이 없었다. 그래서 useridTo를 만들어서 1:1 chat이면 useridTo에는 상대방 userid.. 2024. 1. 30. [포스코x코딩온] 풀스택 부트캠프 14주차 정리 -1 3차 프로젝트 회고-2 01/24 엄청난 에러가 생겼다. 팀원 분의 에러를 해결하고 나서 갑자기 webpack과 babel defendency에 오류가 생겨서 npm start 자체가 되지 않았다. 그래서 구글링을 해보니까 어떤 옵션을 추가하라고 해서 추가를 해봤는데도 되지 않았다. 그래서 강사님께 도움을 청했는데 알고보니까 어느 순간 package.json 파일에 있는 react-script 버전이 5.0에서 4.0으로 다운그레이드 되어있었다. 그래서 install을 하기 전에는 오류가 뜨지 않았는데 install을 하고 나니까 오류가 뜨면서 start가 안된 것이었다. 이게 거의 역병처럼 돌아서 진짜 전염되는건가 했다. 해당 오류를 수정하는 도중 알게된 사실은 내가 webpack 5.8버전을 uninstall하고 packa.. 2024. 1. 25. [포스코x코딩온] 풀스택 부트캠프 14주차 정리 -1 3차 프로젝트 회고 01/18 로그인, 회원가입 페이지 백엔드, 프론트엔드 작업을 시작했다. 다만 회원가입 페이지에 들어가는 정보가 많아서 여러개의 form의 여러 컴포넌트를 만든 다음 props나 redux를 이용해서 state를 줄까 생각중이었다. 이런 생각을 가지고 리더님께 질문을 했는데, 그냥 하나의 form으로 모든 데이터를 넣고 next를 누르면 이전 페이지를 display none으로 설정하고 다음 페이지를 display block으로 설정하는 것이 훨씬 경제적일 거라고 말했다. 저번 프로젝트에서는 바로 생각해냈을 것 같은데 뭔가 리액트라서 다르다고 생각했던 게 아닌가 싶었다. 마이페이지도 따로 구현해야 하기 때문에 routes와 controller만 만들어놨다. 01/19 얼추 로그인과 회원가입 백엔드는 전부.. 2024. 1. 22. [포스코x코딩온] 풀스택 부트캠프 13주차 정리 -2 3차 프로젝트 회고 01/18 회원가입 로직을 만들고 postman API로 검증을 하려고 했는데 db가 아직 구축이 안되어있어서 확인을 못했다. 그래서 cors error 체크나 할 겸 postman을 돌리고 있었는데 자꾸 fetch에 실패했다는 에러가 등장했다. 만약 에러가 생긴 구문의 line을 알려줬다면 금방 찾았을 텐데, 정확한 위치를 알려주지 않기 때문에 에러가 sequelize에 오타가 있을 수도 있고 다를 수도 있어서 전부 찾아봐야 한다는 게 조금 빡세다. 그래서 다른 팀원 분의 sequelize 구축이 완료되자 마자 postman api를 써서 회원가입 로직 구축한 것을 테스트하려 했다. 하지만 바로 axios error가 등장했다. 일단 팀원분이 만드신 sequelize 파일의 오타를 잡았다. 오타를 잡고.. 2024. 1. 18. [포스코x코딩온] 풀스택 부트캠프 13주차 정리 -1 3차 프로젝트 회고 12월 말에 2차프로젝트를 끝냈는데 2주만에 다시 시작이다...typescript를 이용한 express와 react를 이용할 것 같은데 실습도 많이 안해봤고 리액트 라이브러리도 잘 모르는데 잘 할 수 있을지 의문이다. 그래도 해야지 01/15 현지인에게 외국어 질문 + 통화 서비스라는 컨셉으로 진행하기로 했고 백엔드 express + react with typescript로 프로젝트를 구성하기로 했다.다만 프론트(리액트)와 백엔드를 연결하는 방법을 몰라서 집에 가서 알아오기로 했다.그렇게 구글링 하다보니 express에서 sendfile을 이용해서 url 요청의 경우 react로 연결하는 방법이 있었다.그래서 react의 src 파일 안에 express server.js 파일을 만들고 타입스크립트.. 2024. 1. 17. [포스코x코딩온] 풀스택 부트캠프 12주차 정리 -2 React(Context API, Reduct) Context 부모에서 생선된 props를 자손 요소에 전달하려면 (1 -> 5로) react의 특성상 1 -> 2 -> 3-> 4 -> 5로 전달을 할 수밖에 없다. 이 문제를 해결하기 위해 나온 react의 내장 기능이 context API다. 이걸 사용하면 1 -> 5로 바로 쏴줄 수 있다. 예를 들면 전역적으로 엑세스가 필요한 유저 로그인 정보 같은 곳이나 N대 자손에게만 보내준다던가 할 때 쓰이면 될 것 같다. 함수형 컴포넌트에서는 createContext(), useCotext()의 훅과 함께 쓰인다. UserContext.js 파일 (createContext()를 통해 만들어진 Context를 export) import { createContext } from "react"; export c.. 2024. 1. 12. 이전 1 2 3 4 5 6 7 8 다음
