전체 글

기업과제 협업 프로젝트

🔎 프로젝트 소개 참여기업 : 비트바이트, 바딧, 하이, 룰루랩 프로젝트 기간 : 2022/10/04 ~ 2022/10/20 사용된 기술 : vite, react, Typescript, axios, styled-components, firebase 및 UI 관련 라이브러리 🚀 주소 플레이키보드 웹스토어 github 주소 : https://github.com/Poylib/Custom-keyboard-webstore 배포 주소 : https://pre-onboarding-3team-bitbyte.vercel.app/ 오디오 재생 프로그램 github 주소 : https://github.com/Poylib/Voice-recording-web 배포 주소 : https://pre-onboarding-4team-h..

커스텀 음료 주문 모바일웹 프로젝트

🔎프로젝트 소개 참조 사이트 : 공차 프로젝트 기간 : 2022/09/19 ~ 2022/09/30 팀원 : Front-end : 3명 / Back-end : 1명 github 주소 : Front-end / Back-end 사용된 기술 (front) : vite, react, Typescript, zustand, axios, styled-components 협업 Tool : Notion, Slack, Zep, Postman, Dbdiagram 기능 포스팅 검색기능 프로젝트 시연 연상 프로젝트에서 맡은 역할 로그인, 회원가입, 검색 기능 UI 및 통신 소셜 로그인(카카오톡) 💡회고 들어가며 저번 프로젝트는 여태 공부했던 기본기를 프로젝트에 적용해보고 깃을 이용한 협업을 경험해보는 것에 의의를 뒀다면, 이번 ..

9월 회고

들어가며 9월 내내 진행했던 프로젝트 두 개가 마무리되는 중이다. 프로젝트를 하기 전후로 가장 유익했던 것은 내가 무엇을 얼마나 모르는지에 대해 알 수 있었다는 점이다. 별생각 없이 쓰던 로직이 어떤 문제가 있었는지, 더 효율적인 방법으로 가려면 어떤 걸 알아야 하는지 프로젝트를 진행할수록 하나씩 깨닫는 게 생겼다. 프로젝트 중에 새로운 것을 익혀가며 바로 적용하려니까 오류도 잦았고 진행속도도 느렸지만 배운걸 바로바로 써볼 수 있어서 빨리 이해됐던 것 같다. 여러모로 많은 도움이 되는 과정이었기 때문에 잘 기록하고 복습해서 배우게 된 지식들을 완전히 습득하고 싶다. 협업 협업은 단순히 같이 코드만 작성하는 게 아니라 훨씬 많은 상호작용이 필요했다. 컨벤션을 만드는 것부터 진행상황을 공유하는 것까지 팀원들..

로컬푸드 주문 페이지 제작 프로젝트

🔎프로젝트 소개 참조 사이트 : 미래식당 프로젝트 기간 : 2022/08/29 ~ 2022/09/08 팀원 : Front-end : 4명 / Back-end : 2명 github 주소 : Front-end / Back-end 사용된 기술 (front) : CSS, SASS, Javascript, React 협업 Tool : Notion, Slack, Zep, Zoom, Trello, Postman, Dbdiagram 프로젝트 시연 영상 프로젝트에서 맡은 역할 헤더, 카테고리, 메인 페이지 서브 캐러셀 UI 구현 위 기능의 동작에 필요한 API 💡회고 들어가며 팀 레포에 리드미 작성을 마지막으로 1차 프로젝트가 완전히 끝났다. 첫 프로젝트였지만 계획했던 완성도는 거의 달성하고 마무리된 것 같아서 결과물도 ..

8월 회고

들어가며 변명이겠지만.. 프로젝트를 하다 보니 8월이 끝나버린걸 이제 알게 돼서 급하게 회고를 남겨본다. 8월 중반까지는 기초 쌓기에 시간을 보내게 됐다. 한 달가량 놓고 있던 알고리즘을 풀어볼 기회도 생겼고, 자바스크립트, 리엑트 전반을 익혀 볼 수 있었다. 일정이 많이 빠듯해서 하루하루 쫓겼지만 어찌 잘 마무리하면서 지내온 것 같아 다행이라 생각한다. 해야 할 일을 해낸 것과 별개로 아쉬운 것은 마주치는 문제를 리뷰할 시간이 없었다는 점이다. 지금 수준에서 해결할 수 없는 문제는 놓을 줄도 알아야 했는데 붙잡고 있던 것이 시간을 조율하기에 좋지는 않았다. 깃을 조금 더 잘 사용하게 된다면 문제 지점을 기록해두고 추후에 리뷰해보는 식으로 적용해보고 싶다. 리엑트 한 달 중에 얻은 가장 큰 수확은 리엑..

[Git] github repository 연결하기

로컬 저장소에서 작업한 후 깃허브에서 만든 원격 저장소에도 저장할 수 있다. 1. 깃허브에서 레포지토리 생성 자신의 깃허브에서 레포지토리로 들어가면 New 버튼을 눌러 새 레포지토리를 만들 수 있는 버튼이 있다. 레포지토리를 만들고 나면 다음 화면을 볼 수 있는데, 우측 복사 버튼을 눌러 주소를 가지고 로컬 저장소로 이동한다. 2. 로컬 저장소를 원격 저장소와 연결 git remote -v 로컬 저장소에서 해당 명령어를 입력하면 현재 로컬 저장소와 연결된 레포지토리의 주소를 보여주는데, 연결되어있지 않다면 아무것도 나오지 않는다. 원격 저장소의 등록 레포지토리와 연결시키기 위한 명령어는 // git remote [name] [레포지토리 주소] git remote add origin https://gith..

[React] 소셜웹페이지 - 서버 통신 & 로그인

서버의 도움을 받아 회원가입 - 로그인 - 메인 페이지로 로그인 유저 넘기는 과정까지 진행해보았다. 목데이터가 아닌 실제 서버랑 통신하게 되면서 오류도 많이 봤지만, 이런저런 정보를 받아보면서 재밌었던 것 같다. 회원가입 const navigate = useNavigate(); const [id, setIdValue] = useState(''); const [pw, setPwValue] = useState(''); const onSubmit = (e) => { // email : justpoy@email.com // pasword : 11111 e.preventDefault(); fetch("http://localhost/users/signup", { method: "POST", headers: { "C..

[React] 댓글 입력 오류

댓글을 받으면서 공백인 상태에서도 댓글 입력이 들어가는 문제가 있었다. 처음엔 button에 집중해서 문제를 해결했지만 form에서 해결하는 방법이 더 만족스러웠다. button에서 onClick 게시 form 태그 안에서 input과 button이 있고, button에 onClick으로 클릭 시 input 값을 댓글로 쓰도록 만들었다. const [userName] = useState('codelike'); const [commmentArr, setCommentArr] = useState([]); const [isValid, setIsValid] = useState(true); const [id, setId] = useState(0); const value = useRef(); const post = ..