회고

싸피 7기 수료 회고

2022.01-2022.12 1년의 싸피 과정이 끝이 났다. 운이 좋게 싸피를 수료하자 마자 취업을 했다. 알고리즘도, 프로젝트 경험도 전무했는데 싸피를 통해서 많은 것을 얻어 갈 수있었다. 이 글은 싸피 생활을 돌아보며 조금 개인적으로 아쉬움이 남았던 부분과 싸피에서 이룬 성취(?)에대해 이야기 해보고자 한다. 긴글 주의 싸피를 선택한 이유 졸업을하니 전공 지식도 애매하게 알고있었고 포트폴리오, 자기소개서에 쓸만한 프로젝트도 딱히 없었다. 그래도 전공에서 간혹 맛 보았던 웹 개발은 재미있었기 때문에 개발자의 진로를 포기하고 싶진 않았다. 따라서 졸업을 하고 개인적으로 웹 공부를 하고 혼자 프로젝트도 진행 해 보았는데, 혼자서 하다보니 내가 잘 하고 있는것인지 의문이 들었다. 거기다 주로 1인 개발을 했..

React와 TeachableMachine을 적용한 프로젝트(회고글)

싸피 2학기 첫 프로젝트였던 집에서 운동중(줄여서 집중) 프로젝트 회고 글이다. https://github.com/camiyoung/ZipZong GitHub - camiyoung/ZipZong: 머신러닝을 활용한 화상 채팅 운동 플랫폼 | 🏆 SSAFY 공통 1등 수상 머신러닝을 활용한 화상 채팅 운동 플랫폼 | 🏆 SSAFY 공통 1등 수상. Contribute to camiyoung/ZipZong development by creating an account on GitHub. github.com 화상 채팅방에서 모두 다함께 운동을 할 수 있는 서비스를 제공한다. 구글의 Teachable Machine으로 제작한 머신러닝 모델을 활용하여 현재 진행중인 동작의 수행 횟수를 자동으로 카운트해준다. 이 ..

openVidu와 Teachable machine 사용해보기

우리 프로젝트는 실시간 화상 채팅을 하며 다같이 운동을 하도록 제공하는 서비스를 제공한다. 운동 동작(스쿼트, 런지 등등)을 카운트 해주어야 하는데, 이를 위해서 웹캠 영상을 통해 실시간으로 자세를 분석하고 미리 학습시켜둔 데이터로 올바르게 수행하는지 체크한다. 운동 동작 학습을 위해서 구글의 teachale machine을 사용한다. teachable machine 홈페이지에서 쉽게 동작 학습 시켜 모델을 만들 수 있다. 문제는 react에서 모델을 불러와서 영상의 포즈를 학습 시키는것 teachable machine에서 웹에서 쉽게 사용 가능하도록 구현해둔 라이브러리인 Teachable Machine Pose를 사용하면 웹캠 생성부터 쉽게 이용이 가능하다. //웹캠을 생성,초기화,시작하는 코드 web..

OpenVidu 적용 테스트

지난주는 기본적인 페이지들 UI 뼈대 잡는 작업정도 진행했고 이번주는 본격적으로 기능 구현 개발 시작했다. OpenVidu로 화상 채팅방을 만들어야 하는데 openvidu 홈페이지의 예제가 잘 되어 있어서 바로 구현이 가능했다. 근데... 원래라면 마이크 아이콘, 카메라 아이콘 등등 기본적으로 toolbar에 주어진 아이콘들도 그대로 쓰려고 했는데 예제에서 사용된 material-ui 컴포넌트와 현재 프로젝트의 react버전이 맞지 않아서 오류가 났다. 버전에 맞게 수정해서 쓸까 하다가 ui 프레임워크를 사용하지 않으려고 이번에 tailwind를 도입했는데 material-ui를 설치하고싶진 않았다. 그래서 해당하는 아이콘 손수 하나씩 찾아서 적용했다.. 이것들 또 CSS작업 해주고 아래와 같이 만들었는..

개발 시작, Tailwind CSS 써보기

지난주는 내내 기획 회의를 했고 이번주에 들어서 개발을 시작했다. 기획 회의는 팀원 모두가 일과 시간 내내 의견을 내고 조율하면서 이루어졌는데, 팀원들 모두 열정적이고 적극적이라서 너무 재미있었다. 이번 프로젝트에서는 리액트와 테일윈드를 사용하기로 했다. 오늘은 거의 테일윈드 쓰는법 익히고 간단한 컴포넌트 몇개만드는데 시간이 다 갔다. 테일윈드를 얼마 쓰지도 않았는데도 바로 감이왔다. 이거 진짜 편하고 좋다..라고 element에 css를 입힐 때 테일윈드를 사용하면 class에 바로 테일윈드 속성들을 나열해주면 끝이다. 테일윈드를 사용하지 않는다면 아래와 같이 각각의 클래스명을 정하고, css파일을 새로 만들어서 연결하고 하는 과정을 거쳐야 하는데 이 번거로운 과정을 없애버린다. 중복되지 않게 클래스 ..

서버 연결하기

백엔드에서 만들어주신 api를 연결해서 기본 기능들이 동작하게 했다. 글 불러오기, 작성, 수정 회원가입, 로그인 jwt 인증을 사용하기로 해서 request-header에 추가 해 줘야 하는데 요청하는 함수 마다 axios에 access-token을 등록했다. 로그인 -> localStorage에 토큰 등록 토큰 인증이 필요한 요청일 경우 -> localStorage에서 토큰 가져와서 헤더에 등록하기 builder.addCase(logIn.fulfilled, (state, action) => { console.log("로그인 완료 token=", action.payload); localStorage.setItem("access-token", action.payload["access-token"]); s..