📝 프로젝트

토이프로젝트 | [React] TodoAPP

📅 본 글은 2022년 3월 9일 개인 github 에 작성된 글입니다. 🗓 기본 기능 완료: (2022.03.06 - 2022.03.07) 다들 한번씩은 만들어본다는 TodoApp이 나의 첫 리액트 프로젝트가 되었다. 백문불여일견이라는 말처럼, 리액트를 사용하면서 state, props 개념을 이해하게 되고 state Hook, Effet HooK 등을 사용하면서 왜 필요한지, 어떻게 사용하는 것인지 공부하게 된 시간이었다. 무엇보다, 코드의 가독성과 재사용이 좋다는 리액트의 장점을 직접 만들어보면서 다시한번 체감하게 되었다.👍 새로고침을 하여도 데이터를 유지하기 위해 localStorage 를 사용해보고, firebase를 사용하여 배포까지 경험해본 값진 경험이었다. 🎯 구현기능

토이프로젝트 | [JavaScript] 카드 짝 맞추기

🎯 카드 짝 맞추기🃏 2022.2.13 (1차 완성) 게임 규칙 (기본 기능) 2쌍이 같은 랜덤한 카드 N장의 뒷면을 보여준다. 1장을 선택하면 해당카드의 앞면을 보여준다. 나머지 다른 1장을 선택했을때 같다면 보여주고 아니라면 다시 둘다 뒤집어 둔다. 다 맞으면 성공 구현 기능 Object, Array를 사용하여 구현하였다. 1장을 선택하면 해당카드의 앞면을 보여준다. 2장의 카드를 선택하면, 카드의 앞면 그림이 맞는지 비교한다. 아쉬운 점 이번 토이프로젝트는 개인적으로 구현하지 못한 부분이 많아서 아쉬움이 많다. Object의 개념을 보기만 했지, 직접 구현을 하니 간단한 것에도 헷갈려서 여러번 콘솔로 확인해가면서, 구현을 진행하였다. 구현할 당시에 동기비동기, promise, Json 을 배웠어서,..

토이프로젝트 | [JavaScript] 계산기

📅 본 글은 2022년 2월 20일 개인 velog에 작성된 글입니다. 벌써 자바스크립트에 입문한지 한달이라는 시간이 지났다..이번주는 수업도 따라가기 힘들어서 간단한 토이프로젝트를 하자는 생각에 계산기 만들기를 했는데, 예상과 달리 나의 실수들로 인해 꽤 긴 시간 생각하게 만든 토이프로젝트다. 📌 사건의 발단: 구현해야하는 기능들을 전체적으로 파악하지 못함. 이전에 만든 토이프로젝트들은 대략적으로 구현해야하는 기능들을 순서대로 적어놓고 시작하였는데, 이번에는 '계산기는 뭐 계산밖에 더 있나~' 하는 생각에 그냥 시작했다. 즉 구현해야하는 기능들을 전체적으로 파악하지 않은 상태에서 구현부터 시작했고 , 실수의 시작이였다. 잘못된 시작 btnAll.forEach(button => { button.addEv..

토이프로젝트 | [JavaScript] 다른 글자 찾기 게임

📅 본 글은 2022년 2월 7일 개인 github에 작성된 글입니다. ✅ 첫번째 토이프로젝트와 마찬가지로 블로그 를 참고하여 두번째 게임을 만들었다. 게임 기본 요구 사항 1. N x M 의 화면에 하나만 다른 글자로 채워서 보여준다. 2. 해당 게임의 정답 글자 위치는 매번 달라져야 한다 3. 정답 글자를 선택하면 다음 stage로 넘어간다. 4. 아니면 실패 메시지를 띄우고 종료한다. ✅ 구현 기능 1. 기본 동작 2. 시간 초과 ✅ 랜덤으로 위치 설정. // 처음 작성한 코드 function shuffle() { for(let i = 0; i < array.length; i ++) { const randomNum = Math.floor(Math.random() * (i)); const tempor..

토이프로젝트 | [JavaScript] 가위바위보 게임

📅 본 글은 2022년 1월 31일 개인 velog에 작성된 글입니다. 자바스크립트 스터디를 시작하면서 만든 가위바위보 게임이다! 너무 유명한 토이프로젝트이기도 하고, 다른 사람들에게는 너무 간단한 구현일 것 같아서.. 잠시 고민했지만, 그래도 기록하는 것이 스스로에게 좋을 것 같아서 올려본다.😊 게임 규칙 (기본 기능) 사용자가 가위바위보 중 한가지 값을 선택한다. 컴퓨터에서 랜덤으로 가위바위보 중 하나의 값이 출력된다. 두개의 값을 비교하여 점수가 업데이트 된다. 구현 기능 컴퓨터에서 랜덤으로 가위바위보 중 하나의 값이 출력된다. 사용자가 선택한 값과 컴퓨터가 선택한 값을 비교하여 점수가 업데이트 된다. 이긴 쪽의 backgroundColor 가 변경되어, 사용자가 쉽게 파악할 수 있도록 하였다. r..