프로젝트 회고

[Project/React] 다크모드 구현으로 Context API 학습하기

개요 context API를 학습하기 위해 다크모드 on/off 기능을 만들어보기로 했다. 스위치를 토글하면 이미지가 해 -> 달로 바뀌고 테마 색이 바뀌는 간단한 사이트이다. 순수하게 React의 기능만 사용해 만들고 싶어서 styled-components를 쓰지 않고 만들었다. 👉github로 전체 코드 보러가기 만들면서 참조한 글 (Thanks to) 리액트 다크모드 구현하기 feat. styled-components & context API 토글 스위치 버튼 만들기 Context API란 우리가 Context API라고 하는 것은 js의 history API처럼 Context 라는 기능을 사용할 수 있도록 해주는 기능 모음을 의미한다. Context는 전역적으로 컴포넌트끼리 값을 공유할 수 있도록..

[Project] 포카리뷰 (Phoca Review) 만들기 회고 | 토이프로젝트

포카리뷰 (Phoca Review) 개요 독서/영화 감상문을 포토카드 형태로 남길 수 있는 웹 어플리케이션. 분류: 토이프로젝트, 개인 기간: 2022.10.20 ~ 2023.02.15 주요 기능: 만든 카드 앨범 형태로 모아보기, 카드 상세보기, 카드 에디터, 이미지 컨버팅 사용 툴: React, Typescript, Emotion, html2canvas(이미지 컨버팅 library) / Express, ajv (JSON validator library) 예상 이용자: 작품 감상문을 간단하게 남기고 싶은 사람 / 포토티켓 처럼 작품의 한 장면을 넣은 카드를 만들고 싶은 사람 link: github 1. 만들게 된 계기 종종 문학작품이나 영화에서 좋아하는 구절을 발췌해 감상문을 쓰는데, 이미지도 많이 첨..

[Project] React Login 프로젝트로부터 배운 점 회고

프로젝트 소개 완성된 코드 보러가기 https://github.com/bluepebble25/react-login 최근 styled-component와 Typescript, TDD를 연습하고자 프로젝트를 하나 해보기로 했다. 프론트엔드의 중요 개념들을 연습하기에는 로그인 제대로 만들어보기만한게 없는 것 같아서 로그인을 구현해보려고 했다. 그런데 통신과 인증을 연습하기 위해서는 더미 데이터가 아니라 API를 하나 만드는 게 좋을 것 같았다. API를 만들자면 못 만들것도 없지만 인증과 예외처리를 구현하자니 머리가 아팠다. 배보다 배꼽이 더 큰 것 같던 차에, 마침 감사하게도 개발바닥의 leejaycoke님께서 배포하셨던 API (https://github.com/leejaycoke/pilot-react)를..

[Project]Vanilla JS - Todo 리스트 만들기

보러가기 - https://github.com/bluepebble25/TodoList 1. 구현할 기능 1. 할 일을 입력하고 + 버튼 혹은 엔터키로 할 일을 추가한다. 2. 항목 앞의 체크박스를 클릭해 완료 여부를 toggle한다. 3. 휴지통 버튼을 눌러 항목을 삭제한다. 4. 항목을 더블클릭해서 수정할 수 있다. 5. 상단에 남은 할 일의 개수를 표시한다. 6. delete Checked items 버튼을 클릭해 체크된 항목들을 한꺼번에 삭제할 수 있다. 7. 새로고침해도 목록이 유지된다. (Local Storage) 2. 다 만들고 느낀 점 디자인 시스템 필요! :root { /* Color */ --skyblue-color: #DEEBF7; /* Size */ --base-space: 14px;..