🌊 메인 프로젝트 - 제로힙 프로젝트 소개 프로젝트 명 : 제로힙 프로젝트 배포 링크 | 프로젝트 Github 프로젝트 기간 (ver.1) : 2023. 06. ~ 2023. 07. (4주) 제로힙 화면정의서 바로가기 제로힙 기획서 바로가기 제로힙 팀원 회고 바로가기 프로젝트 개요 요즘은 SNS에서의 과시가 당연시 되는 시대입니다. 과시를 조장하는 SNS가 아닌 절약을 유도하는 SNS와, 나의 소비 내역을 기록할 수 있는 가계부를 함께 기획하였습니다. 나의 ‘절약 팁’을 유저들에게 공개하며 메인에 노출시킬 수 있으며, 유저들은 해당 게시물에 투표 기능을 이용하여 훌륭한 팁을 명예의 전당에 노출시켜 절약을 유도하며, ‘제로빌리티’도 ‘힙’하다는 것을 알리고자 합니다. 1. 기록해요, 가계부 제로힙에서는 ..
🌊 [Main Project] 스프린트 3, 마지막 회고 회고는 이전에 적었는데, 다시 부랴부랴 블로그로 옮겨옵니다 ㅎㅎ.. 오늘이 데모데이라니 🥹 정말 믿을 수가 없다.. 오늘 회고에서 다룰 세 가지 로컬 테스트 CORS : 중요한건 꺾이지 않는 마음 👊 배운 것 배우고 싶은 것 로컬 테스트 전체적으로 나의 로컬테스트가 미흡했던 것 같다. 준프님과 아서님이 로컬테스트에 대해 엄청 강조하셨는데, 우당탕탕 진행하다보니 로컬테스트를 진행하지 못한게 너무 아쉬웠다. 테스트를 진행하려하면 이미지 서버.. 기타 등등의 문제로 서로 어떻게 하면 좋을까 하며 거의 배포서버에서만 진행했는데 그러다보니 처음에 잘 지켜지던 컨벤션도 무너지고 PR도 중구난방으로 하게 되고, 급한 맘에 dev로 바로 push도 바로 하게 된..
🌊 [Main Project] 스프린트 2 회고 스프린트 2 기간동안 내가 고려했던 것이 있는데 바로 아래 세 가지다. 이 세가지에 대해 회고하고자 한다. 웹 접근성 Git 전략 공통 컴포넌트 웹 접근성 우린 스프린트 1 멘토링 때 멘토이신 준프님께서 웹 접근성에 대한 설명을 포함하여 내년부터는 법제화가 된다는 소식을 알려주셨는데, 사실 나는 웹 접근성에 대한 지식이 살짝은 있는 편이었다. 과거에 웹 접근성 PDF문서를 읽어본 적이 있고 처음에 HTML,CSS를 배울 때 웹접근성을 염두해두고 배웠기 때문에 배경색과 글자 색의 색상대비 4.5:1, 헤딩 태그 등, img에 alt값 넣어주기 등 부트캠프 기간 내에 교육과정에도 포함되어 있었고 회사 다닐 때도 접근성 심사를 통과해본 적이 있었기 때문에 알..
🌊 [Main Project] 기획 회고 프로젝트 기획 팀 빌딩 멘토링 기획 수정 디자인 브랜치 전략 next.js 프로젝트 기획 메인프로젝트를 진입하기 전 선아님이 함께 메인프로젝트를 하자고 제안해주셨다. 프론트앤드로는 내가 세 번째로 합류하게 되었지만 이미 계시던 팀원분이 취업 이슈로 빠지게 되셔서 선아님과 단 둘이 남아 기획을 새로 검토하게 되었다. 선아님이 내게 프로젝트 팀을 제안해주셨을 땐 챗봇을 사용 가능한 가계부를 기획이 되어있었는데 챗봇의 비용적인 문제와, 챗봇을 공부하기엔 너무 짧은 시간 등을 고려하여 새로 주제를 선정하게 되었는데 처음에 그저 가계부만을 하기엔 우리에겐 너무 아쉬운 점이 많았다. 그래서 여러가지 의견을 내다가 금융결제원 API를 사용하여 유용한 정보를 주는 가계부에 대한..
🌊 Youtube clone 기간 5/11~6/2 (프로젝트 셋업 5월 11일, 부트캠프 프로젝트로 인해 실제 시작은 22일) 구현 요소 완료 헤더 검색하기 로딩바 index, 핫 트렌드 페이지 핫 트렌드 리스트 출력 디테일페이지 동영상 출력 동영상 상세설명 연관된 동영상 기술 스택 JavaScript React.js Tailwind.css Yarn Tanstack Query ESLint Prettier React-Router-Dom React-Icons Tools Visual Studio Code 개선할 점 데이터 요청 부분은 거의 솔루션 강의를 보며 진행하였다 'ㅇ` 한 차례 더 시도할건데 기간도 줄이고 스스로 만들고 싶다. 곧 부트캠프 프로젝트 시작이라 JS Class와 리액트 기초문법부터 다시 ..
🌊 Coz Shopping 코드스테이츠에서 진행한 일주일간의 솔로 프로젝트로, 메인페이지/상품리스트 페이지/북마크 페이지로 이루어져있는 SPA 웹페이지입니다. 깃허브 https://github.com/dreamogu/fe-sprint-coz-shopping GitHub - dreamogu/fe-sprint-coz-shopping Contribute to dreamogu/fe-sprint-coz-shopping development by creating an account on GitHub. github.com 기술 스택 JavaScript React.js Post.css Yarn redux, react-redux, redux/toolkit ESLint Prettier React-Router-Dom R..
🌊 Todo list 배포 링크 & 깃허브 배포 링크 Todo list tiny-rolypoly-6912ef.netlify.app 깃허브 GitHub - dreamogu/React-Practice-TodoList Contribute to dreamogu/React-Practice-TodoList development by creating an account on GitHub. github.com 구현 요소 전체 리스트 보여주기 리스트 삭제 리스트 추가 리스트에 공백 있으면 삭제 리스트에 공백만 있으면 추가 안되게 상단 리스트 필터링 리스트 체크박스 CSS 다크, 라이트 모드 OS 셋팅 값에 따라 모드 다르게 보여주기 localStorage dark/light 설정해둔 것 localStorage에 저장..
🌊 쇼핑 목록앱 만들기 구현 요소 완료 HTML/CSS + 버튼을 누르면 리스트 추가하기 input을 입력후 엔터를 누르면 리스트 추가하기 휴지통 버튼을 누르면 해당 리스트 삭제되기 느낀점 이렇게 금방 끝낼 줄 알았으면 저번에 완료할 걸.. 구현 방법 HTML Shopping List 고민했던 부분 클래스명 짓기 조금 더 직관적으로, 남들이 알아 볼 수 있게 정하고자 했다. 버튼 안에 div 태그 사실 가상요소 선택자인 before, after로 하는 것이 더 좋은 방법일 거라고 늘 생각해서 선호하지 않는 방식이나 이렇게 한 번 구현해봤다. CSS @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/P..