Jaypedia

1. React - React 수업 50분 (노션에 정리) - 강의 : useEffect 배우기, 내일 마저 복습할 예정 2. JavaScript : 계산기 만들기, Fisher-Yates Shuffle Algorithm, sort() - 알고리즘을 푼다고 생각하고 아주 간단한 계산기 하나를 만들어 보았다. 디자인은 예전에 열심히 해놨어서, 오늘은 JavaScript 로직 짜는 데 집중할 수 있었다. (CSS를 그래도 어느정도 해 놔야 코딩할 맛이 난다. CSS 복습도 할 겸.) 계산기 중에서도 가장 간단한 연산만 하는 계산기이기에 어렵지 않게 만들어 낼 수 있었다. 첫 번째 수가 음수일 때 계산하는 로직, 연속 계산하는 로직을 추가해 보았다. 배열의 요소를 랜덤으로 섞어 주고 싶을 때 쓰는 Fisher..

1. Firebase 오늘은 예전에 미뤄두었던 Firebase 공부를 좀 해 보았다. - firebase 의 필요성 - firebase setup - firebase로부터 데이터 가져와서 HTML에 그려주기 - firebase에 데이터 저장하기 - 이미지 업로드 더 공부를 하려고 했는데, 오늘 모니터 쇼핑을 하게 되어서 많이 공부하진 못했다. 작은 노트북 화면으로만 공부를 하다보니 그동안 항상 불편함을 느껴왔다. 강의도 듣고, 코딩도 해야 하는데 화면 분할을 하면 너무 작게 보이고 글씨가 안 보여서 눈이 쉽게 피로해졌다. 또 코딩할 때도 VS code 화면분할 할 때가 많은데 많은 코드가 눈에 들어오지 않아서 스크롤을 매번 내려야했다. 이제 모니터가 오면 그런 불편함이 많이 해소될 것 같아서 기대가 된다..

1. Todo List : demo 발표 그동안 만들었던 작품을 발표하는 시간이었다. 코드스쿼드 코코아도 오늘이 마지막이었다. 그새 인원이 많이 줄어서 20명 정도가 참여했다. 다들 작품이 정말 훌륭했다. 매번 감탄하면서 봤다. 내 순서가 마지막이었는데 마지막을 잘 장식했을 거라고 믿는다 ㅎㅎ 발표 전까지 위와 같이 했다. 모달 창 다듬고, header에 delete list button 추가하고. 리스트 수정 기능도 넣고 싶었지만 시간이 좀 부족했다. 2. React - 영화 웹 페이지 셋업 : 폴더 만들고 파일 만들고. Navbar 만들고. 그리고 약간의 router 세팅까지. json-server, axios도 써봤다. Promise, async, awiat를 더 공부해야겠다는 생각이 많이 들었음...

1. Todo List 완료한 일 모아보기 기능을 추가했다. 리스트별로 태스크가 나오고 되돌리기도 가능하고, 삭제도 가능하다. 좀 더 친절한 Todo list를 위해 모달창도 만들었다. 아직 이벤트 리스너를 못 달았는데 내일 마무리할 것이다. 캡쳐는 없지만 progress bar도 만들었다. 그 외 setTimeout을 활용하여 버튼 애니메이션도 구현했다. 컴포넌트로 나누는 것은 아직 못 하고 있지만 새로운 기능 추가하는 게 재미있었다. 내일 일어나자마자 또 계속 이어서 할 계획이다. 2. React Router 쓰는 법, useEffect, ajax와 관련된 내용을 배우는 것이 목표였는데 Router 쓰는 법만 좀 익히고 나머지는 아직 하지 못했다. 프로젝트 데모 발표가 내일인데, 그 발표가 끝나면 R..

1. Todo List Component 별로 나눠서 class 문법으로 작성 중 우선 rendering 하는 부분은 마쳤다. HTML에 로직이 없고 모두 자바스크립트로 한땀한땀 만들어서 요소를 붙여주었다. setInterval을 클래스에서 쓰려니 잘 안되는데 이걸 꼭 해결하고 싶다. 이제 이벤트 리스너를 달아서 기능을 할 수 있도록 만들어야 한다. 2. React - modal 창 띄우는 연습을 하며 useState 사용에 익숙해지려고 했다. - map을 이용해서 반복되는 Component를 간단하게 생성할 수 있도록 했다. - props의 사용 방법을 배웠다. - input의 value(사용자의 입력값)를 어떻게 받아오고 화면에 그려주는지를 배웠다. - React class 문법을 간단히 알아보았다...

1. Todo List 오전~오후까지는 Todo List의 UI를 개선하는 작업을 많이 했다. List input 하단의 버튼을 없애고 header에 작은 동그라미로 대체해서 좀 더 깔끔하게 바꾸었다. 또한 Task들의 수정과 삭제 버튼도 hover시에만 보일 수 있도록 해서 심플하게 바꿨다. List를 선택했을 때 좀 더 가시화할 수 있도록 border를 둘러 주고, 각 List에 해당하는 task의 개수도 명시해주었다. 그 외 소소하게 개선 작업을 했다. 그리고 이 코드를 module로 분할해서 처음부터 다시 코드를 짜는 작업도 하고 있다. 정확히 같은 기능을 하는 Todo list이지만, 코드는 많은 개편을 하게 될 것이다. 2. React 오늘부터 React 공부도 다시 시작했다. 사실 저번에 공..

Todo List 기능 추가, 수정 오늘의 커밋 9개. 커밋 메시지와 Description을 좀 더 상세하게 적어서 무엇을 수정했고 왜 수정했는지를 더 알아보기 쉽도록 작성해 보았다. task를 많이 작성했을 때 스크롤이 되도록 scrollIntoView를 적용하고 싶었는데 기존 로직에서 template을 쓰는 바람에 적용이 잘 되지 않았다. 그래서 task를 rendering 하는 로직 자체를 좀 바꿔야겠다는 생각이 든다. 현재 코드는 기능을 추가하거나 유지보수할 때 매우 어렵다. 내일 또 todo list를 가지고 여러 기능을 추가해 볼 예정이다. 이런 식으로 List 옆에 생성한 Task의 개수가 표시되고, Progress bar를 넣어서 task 진행 상황을 좀 더 가시화할 수 있게 만들어 보려고..

1. Todo List CSS 위주 수정 - task 입력 폼이 위에 올라가 있는 것을 아래에 오도록 수정 : flexbox, justify-content : space-between 활용 - 자바스크립트도 약간 수정해야 했다. - list와 task 많이 추가했을 시 스크롤 되도록 수정 : overflow-y : scroll 활용과 디자인 - 다음 주 3일 동안 프로젝트 하면서 추가할 기능들 명세 2. Leetcode Algorithm 4문제 twoSum, reverse integer, longest common prefix, roman to integer 이렇게 총 4문제를 풀었다. (reverse integer는 어제도 풀었지만, 새로운 풀이로 한 번 다시 풀었다.) merge two sorted ..

1. Git Commit Message 그동안 내가 해 왔던 커밋 메시지를 보니, 일관성과 설명이 부족하다는 생각이 들었다. 그래서 컨벤션을 알고 정리해서 적용할 수 있도록 Notion에 정리하였다. 정리할 때 참고한 사이트는 아래와 같다. How to Write a Git Commit Message Commit messages matter. Here's how to write them well. chris.beams.io 앞으로 Commit message에 Description도 작성해서 커밋을 좀 더 잘 설명할 수 있어야겠다고 생각했다. 2. LeetCode Algorithm 코드스쿼드 코코아에서 제시해 준 6문제 중 2문제를 풀었다. 다른 문제들도 모두 시도는 해 봤으나 Todo List가 마음에 ..

1. Hello Coding Algorithm 스터디 : Recursion & Tail Recursion 오늘 스터디에서는 어제 정독한 챕터 3의 재귀를 중심으로 진행되었다. 기본 단계와 재귀 단계, 그리고 호출 스택이 재귀 함수에서는 어떤 식으로 쌓이고 리턴되는지에 대해 복습하였다. 읽어 온 부분이 같기 때문에, 좀더 확장해서 꼬리 재귀에 대해 공부하는 시간도 가졌다. 얄팍한 코딩사전 유튜브 채널에서 재귀함수를 잘 설명한 영상을 찾아서 함께 봤다. https://youtu.be/aPYE0anPZqI 하노이의 탑을 예시로 들어서 재귀함수를 설명한 영상인데, 한 번 보고는 잘 이해가 되지 않아서 제대로 이해하기 위해서 다시 볼 예정이다. 함수형 프로그래밍 - 재귀 함수(Recursive Function) ..