Jaypedia

1. 코드스쿼드 마스터즈 코스 테스트 오늘 10시에 문제가 공개되었고, 8일 수요일 오후 10시까지 제출해야 한다. 테스트가 코드스쿼드 코코아 시절에 쓰던 홈페이지와 서식이 같아서 마치 미션의 연장선상처럼 느껴지기도 했다. 코코아 사람들이 게더타운에서 모여서 새벽까지 열심히 풀고 있는데, 다들 전부 합격했으면 좋겠다. 처음에는 문제를 딱 접했을 때 막막하게 느껴졌는데, 다시 차분하게 문제를 작게 나눠서 하나하나 살펴보니 조금씩 구현할 수 있었다. 또 구현을 해나가면서 배우는 것도 많았다. 테스트에 대해서 공적인 공간에는 자세히 적을 수 없을 거라 생각해서, 테스트를 통해서 배운 내용들은 노션에 작성해 두었다. 2. JavaScript 1일 1커밋을 놓치지 않기 위해서 자바스크립트로 게임 만드는 것을 마무..

JavaScript : 게임 만들면서 공부하기 렛츠기릿 자바스크립트라는 제로초의 강의를 들으며 JS를 복습했다. 보니까 꽤나 분량이 많기도 하고, 생각보다 내가 모르는 부분이 많아서 구멍들을 메꾸면서 공부했다. 로또 추첨기, 숫자야구, 그리고 가위바위보 게임을 만들어 보았다. 가위바위보 게임은 아직 진행중이다. 이번엔 CSS는 정말 최소화하고 JS를 배운다는 생각으로 하고 있다. 코드스쿼드 코코아 코스를 통해 자바스크립트와 어느정도 친해졌다고 생각했지만 또 새로운 문제를 마주하면 역시 아직 잘 풀리지 않을 때도 많다. 특히 클로저 개념이 아직 어려운데, 로또 추첨기를 만들 때 이 개념이 살짝 나왔다. 좀 더 알기 위해서는 책을 좀 읽어봐야겠다.

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 ..