mini-project

만든 이유사용한 기술구현 기능완성 후 느낀점새로 배운 점 / 궁금한 점추가할 기능만든 이유강의 실습 프로젝트였다.구현 기능보드에 리스트 추가하기보드에 리스트 넘치면 마지막 추가 리스트로 스크롤링보드에 리스트 삭제하기플러스 버튼 누르면 추가, 엔터 키 누르면 추가 완성

요즘 듣고 있는 강의에서 프로젝트로 당근 게임을 만들고 있다.정적 페이지를 먼저 만들고 약간의 자바스크립트를 더했다.(지금 동적요소 추가하느라 만들어 놓은 몇개 요소는 숨겨져있음)재생 버튼, 타이머, 당근 카운터를 원래 각자 다 position absolute를 줘서

혼자 해보다가 결국 강의를 보는 중. HTML, CSS까지 강의를 봤다. HTML, CSS는 나쁘지 않았다고 생각했는데.. HTML을 잘못.. 이라기보다 엉성하게 짜니까 자스 작업할 때 좀 헷갈렸나보다.그냥 강의를 보면서 따라할 생각이었는데 HTML, CSS를 고치고

자스 강의를 보며 하나씩 따라하는 중..솔루션 강의를 보면서 하는 플젝 깃헙과 혼자 해보는 깃헙을 분리했다.솔루션 보고 나서 혼자 깃헙에 다시 코드를 찍어보며 이해하는 식으로 공부 중.물론 아예 바로 솔루션으로 들어가는 것은 아니고, 미리 다음 강의에서 할 내용을 먼저

감격...🥺타이머를 실행 시켰다.🤪살-짝 삐꾸난 타이머긴한데 .. 왜냐면 플레이 버튼 누르자마자 카운트가 안되는 것 같음.왜지?처음에는 함수 안에서 변수 i를 설정하고, innerHtml로 넣어줘서 그런가 하고,,이렇게 말이지 그래서 함수 밖으로 그 부분을 뺐는데도

타이머를 만드는 방식..내가 만든 타이머이다.변수 i를 설정해 5를 할당하고, 인터벌 api를 이용해 i의 숫자를 하나씩 줄여가는 방법으로 타이머 카운트를 표현했다. 그리고 타이머에서 innerHTML을 사용하여 i를 html에도 나타내기.i를 하나씩 줄이다가 0보다

게임이 시작된 상태에서 멈춤버튼을 누르면 타이머가 정지되고, 팝업 창띄우기 구현했다.이번은 뭔가 너무 쉽게 진행되어서😳 얼른 글 정리 하고 강의 들으러가봐야겠다.stopGame함수에 stopTimer, showPopup 두 함수를 넣었다.그리고 각 함수를 만들어줌.타

거의 끝나간다!refresh버튼 누르면 게임 재시작하기당근 잡으면 사라지기버그 잡으면 lose 팝업 창 띄우기당근 잡을 때마다 카운트 숫자 내리기이 중에서 2, 3번을 해결했다.저렇게 for문을 돌리는 건 안좋다고 배웠는데.. 당장 다른건 생각이 안남 ㅎㅎcarrot모

당근과 벌레를 잡으면 일어나는 각 이벤트를 완성했다.정말 장족의 발전이 아닐 수 가 없다. 저번 버그 코드에다 버그를 잡으면 타이머를 멈추는 기능도 추가해주었다.이제 당근을 하나 씩 잡을 때마다 당근 개수 스코어를 하나 씩 내리고 싶은데.. 하나 내리는데만 성공했다.

강의와 함께 기능 하나씩 만들어가며,, 드디어 마지막까지 달려왔다.이제 남은 기능은 소리 넣기📣강의를 완전히 보고 따라하지 않았고, 다음 만들 기능 소개 영상을 본 후 먼저 구현해보고 강의를 들었다.분명 마지막에 확인했을 때는 첫 시작, 재 시작, 벌레 잡기, 당근

소리넣기 하던 중 백그라운드 배경음악을 깔고 게임에서 지거나 이기면 배경음이 멈춘다.여기까진 좋음.근데 게임을 재시작하면 배경음악이 처음부터 다시 재생되는 것이 아니라 아까 멈춘 그 지점부터 재생되는 것이다..?pause를 사용해서 그런가 싶어 end를 찾아봤는데 ,

당근게임 만들기 강의가 끝나고, 리팩토링 강의를 듣기 전, 코드 공부를 했다.화면으로 읽기에는 한 함수안에 있는 함수들이 여기저기 쓰여져있어 불편해서 A4에 쓰면서 공부함. 그리고 강의 들었는데, 잘못 작성되어진 코드, 확장성, 나쁜점 목록, 어떻게 잘게 나눠볼 수 있

강의를 들으며 쇼핑리스트 만들기 미니 프로젝트를 했었다.미니 플젝인데 나에겐 왕거대 플젝이었던😮‍💨.. 어쨌든 그때는 JS기능구현 배우는데 집중하느라 내가 넣고 싶은 기능(넣을능력도 안되긴 함ㅎ), 하고싶은 디자인대로 안하고 강의 디자인 그대로 만들었다.꼭 다시 내

자바스크립트로 기능 구현 하나씩 추가할 예정오늘은 리스트를 추가하는 기능을 구현했다. 강의들으면서 했던 내용인데 기억안나는거 실화냐.. 원래 그런거겠지 하며눈물을 참고 코드를 쳤다.....리팩토링 전 하나씩 appendchild했던 코드는 기억이 안나고 리팩토링 후 전

todo list 만들기를 조금 빨리 끝내야할 것 같아서 오늘 좀 많은 걸 하려고 했는데 ㅎㅎ오늘은 리스트를 추가했을 때, 동그라미 아이콘을 클릭하면 체크 아이콘으로 변경 후, 리스트 색을 black에서 grey로 변경하고 리스트에 줄을 긋는 것을 했다.적고보니 나 진

강의를 보며 다시 내용 복습을 하다가 내가 원하는 구현이 어려워졌다.이런 일 있을 때마다 자괴감 폭발해..아이콘을 누르면 원래 글자 색을 변경하고 줄을 긋고, 아이콘도 체크 표시로 바뀌도록 했는데 어떻게 하는 지 모르겠다.그냥 강의에서 배운대로 삭제되게 만들었음. 그래

전에 만들다가 중간에 그만뒀던 TodoList를 다시 처음부터 만들고 있다. 지금까지 구현한 것은 전체 컴포넌트와 페이지 마크업과 스타일링 그리고 회원가입과 로그인 로직이다. 일단 최종 완성본처럼 스타일링을 끝내고 하드 코딩으로 데이터를 넣어두었다. 그리고 TodoL

TodoList를 작성하고 이제 화면으로 불러오는 코드를 작성 중이다. 그리고 난 멘붕이 왔다. todo를 불러오는 훅을 커스텀 훅으로 만들고 해당 컴포넌트에서 불러와서 사용하려고 했다. 근데 TodoTitle 컴포넌트에서 커스텀 훅을 사용해 작성한 todo 데이터

나에겐 고비였던 단계, 투두 타이틀을 클릭하면 상세 내용을 보여주는 단계를 해치웠다✨ 사실 맞게 한 건지는 모르겠는데, 일단 내가 생각한 대로 구현은 해냈다. 리팩토링 하면서 틀린 부분은 또 고쳐가는 거지 뭐 ㅎㅎ우선 구현한 화면 먼저 보고 코드랑, 왜 그렇게 구현했는

삭제하기는 쉬웠다.다만 rerendering이 일어나지 않는다는 점이 날 답답하게 할 뿐... 컴포넌트가 뚝 뚝 나뉘어 있어서 그렇고 이 둘을 연결해주는 일이 아직은 쉽게 안 떠오르는군... 리팩토링하면서 고민해봐야겠다. 왜 난 아직도 이런 거 하나 해결 못 하는 인간

기본적인 TodoList의 CRUD기능을 모두 구현하고 다시 코드를 확인해보고 기능 동작을 확인해보며 버그는 없는지, 내가 실수한 것은 없는지 돌아봤다.Todo데이터를 받아오고 세부사항을 보여주고 수정, 삭제를 하는 기능은 모두 headers Authorization에

로그인이나 회원가입을 하면 더 이상 로그인, 회원가입 페이지를 보여줄 필요가 없으니까 홈 화면으로 리다이렉팅 해주는 코드를 작성했다. 이때 token정보를 받아와서 true이면 홈 화면을 보여주고 false면 로그인 화면으로 이동하도록 만들었다. 개별 글을 관리하기

데이터를 새로 만들거나, 기존 데이터를 삭제할 때 실시간으로 반영되는 것이 아니라,새로고침을 해줘야만 데이터가 변경되었다.처음 구현했을 때는 실시간 반영이 잘 되었는데, 여기에서 문제점을 발견했다.TodoList CRUD 구현하기②에서 썼던 내용을 보면 알 수 있는데,

로그인, 회원가입, todo Form 작성 axios로직들은 모두 분리를 했지만 todo title 받아오기, todo detail 받아오기 로직들은 UI 컴포넌트 내에 같이 작성해주었다. 처음에는 todo title, todo detail axios로직들도 분리를

todo 수정을 해주는 로직에서

이전 글에서 todo를 수정하고 모달 창을 닫았을 때 todo 내용은 바로 업데이트가 되는데 todo 제목은 새로고침을 하거나, 다른 todo가 있다면 한 번 클릭해줘야(즉, TodoTitle 컴포넌트의 useEffect의 의존성 배열에 담긴 변수가 변경되어야) 수정된

현재 TodoList 프로젝트의 폴더 구조는 다음과 같다.server는 제공된 서버를 사용했고, todo폴더 안의 내용들을 내가 작업했다.폴더 이름을 좀 더 직관적인 이름으로 변경해주고, REST API 통신을 위해 만들었던 커스텀 훅들과 로그인과 회원가입을 위해 만든

원티드 8월 프리온보딩 리액트 쿼리 수업에 참가해 처음 만들기 시작했던 TodoList를 드디어 마무리 지었다.수업의 주제였던 리액트 쿼리를 사용하진 않았지만, 나름의 방법으로 프로젝트를 완성했다.TodoList를 처음 만들면서 느꼈던 생각과 감정은 '내가 아직도 이렇