Section1 회고

프로트엔드 개발자로서 진로를 다잡고 코드스테이츠를 처음 들어와 진행했던 세션이었던 만큼 초반에 나와 약속했던 꾸준히하기, 늦지않기, 페어와 소통하기 등을 잘 지켰던 것 같아서 조금은 뿌듯하다.

✅ 목표

• 연봉 3600만원 이상의 개발자 되기
• 네이버 코딩테스트 및 면접 통과하기
• 나만의 웹 페이지를 기획, 구성, 구현 해서 히트치기

😃 페어프로그램

처음 페어분과 만났을 때는 긴장도 하고 어떻게 대화를 이어가야 하는지에 대해 걱정이 많았는데 처음부터 좋은 분을 만나게 되어 후에 페어분들과도 원활하게 소통을 해왔던 것 같다. 페우분들과 진행 할 때 내가 놓치는 부분을 잡아주는 것이 좋았으며, 내가 알고있는 지식을 전달할 수 있는 능력을 기르게 된 것이 가장 큰 수확이다. 이것은 면접에서 약한 나의 단점을 보완할 수 있는 계기가 되었다.

📌 기본

html, css, js에 대해 기초를 코드스테이츠에 신청서를 넣기 전부터 준비하고 있었던 터라 그나마 무난하게 흘러갔다. 하지만, 중간중간 flexbox를 사용해서 크기를 맞추면 좋았을 것을 하드코딩 하거나, 쉽게 풀어갈 수 있는 것을 알고리즘 형식으로 풀어나가 조금 복잡하게 코드를 작성하는 부분은 라이브세션을 통해 보완할 수 있었다.

📝 솔로프로젝트

나만의 아고라 스테이츠를 만드는 것이 첫 솔로 프로젝트였다. github에 있는 discussion의 화면을 비슷하게 구현하여 화면에 출력시키는 것이다. 기본적인 데이터만 가지고 화면에 출력시키는 방식과 input에 작성된 내용을 추가하여 화면에 출력시키는 방법, Local Storage를 사용하여 브라우저를 닫거나 새로고침을 해도 추가된 내용이 화면에 남아있게 하는 방법, 한 화면에 10개씩 목록을 나타내어 하단에 번호로 이전, 다음 페이지를 이동 할 수 있는 페이지네이션과 같은 다양한 기술을 접하였다. 내가 모르는 부분이 아직 많다는 것에 흥미를 느껴 찾아보고 작성하면서 머리가 조금 아프기는 했지만 다양한 기술을 접하면서 실력이 늘어가는 것을 느끼는 프로젝트였다.

KPT 회고?

• Keep: 만족스러운 부분, 계속 이어가면 좋은 부분
• Problem: 목표를 이루는데 장애물 이었던 것, 개선이 필요한 점
• Try: Keep, problem을 참고하여 반드시 유지하고 싶거나, 더 잘하고 싶은 것

✅ Keep

• 매일 7시 기상 후 학습 준비
  • 원래 기상시간인 8시에 일어났다면 준비하면 바로 학습을 해야진행 해야 했지만 조금 여유롭게 시작할 수 있었다.
• 오후 7시에 진행되는 모각코 매일 참여
  • 솔직히 오후7시에 반드시 모각코에 참여해야 한다는 생각이 많이 들어 의무적으로 들어갔지만 이제는 편안하게 동기들과 만나게 되어 학습하다가 지루해지더라도 견디고 해낼 수 있게되었다.
• 페어 선정 시 먼저 DM 보내기
  • 내향적인 성격이라 먼저 말을 꺼내는 것이 조금 힘들었지만 이것도 개발자로서 커뮤케이션 역량을 키울 수 있다고 생각하니 성격보단 의욕이 앞서게 되어서 항상 페어분들과 잘 진행하였다.
• 시간을 지키면서 정해진 학습 내용과 심화적인 내용을 추가적으로 학습한 것
  • 정해진 학습 자료만 가지고는 부족하다는 것을 조금 느끼게 되어 추가적으로 학습을 진행하여 블로그에 작성을 진행했더니 강의 자료에 있는 내용을 이해하는데 충분했다.
• 알고리즘 1일 1문제 풀이
  • 코딩테스트를 봤던 곳 들을 보아 후에 있는 데일리코딩과 알고리즘 학습으로는 내가 따라가기 벅찰 수도 있다고 생각해 하루에 한문제씩 문제가 쉽더라도 풀어보고 있다.

🚫 Problem

• 점심시간에 밥을 먹고난 뒤 식곤증이 몰려온다.
• 집에서 컴퓨터만 보고 있으니 체력이 많이 떨어진 것을 느끼고 있다.
• 전문적인 언어를 잘 사용하지 못함 (할당을 넣는다 라고 말하는 경우가 다수 있음)

❇️ Try

• 매일 7시 기상 및 모각코 참여는 더욱 꾸준히 진행하고, 들어가서 아무말도 하지 않고 가만히 있지말고 질문과 답변도 할 수 있도록 해보자!!
• 점심시간에 밥을 먹게되면 식곤증이 몰려와 오후 시간에 영향이 가는 경우를 1주차에 알게되었다. 밥을 조금 먹거나 잠을 청하는 방법을 사용하고 있지만 나의 수면시간이 3~4시간인 것이 가장 큰 문제인 듯 하다 잠을 1시간 더 늘릴수 있게 새벽 3시 전에는 잠을 청하자!!
• 체력 증진을 위해 하루 1시간이라도 산책을 가보자!! 아침에 기상, 식사 후 30분 산책, 저녁 식사 후 30분 산책을 통해 체력을 기를 수 있을 것이다. (진짜로 집에서 잘 안나가서 하루에 걷는 시간이 너무 적었습니다..)
• 페어와 대화를 이어갈때 전문적인 언어를 사용하지 않는 경우가 많이 있었다. 이는 전문적인 단어를 모아 모음집을 만들어 내 삶에 익숙해지도록 하는 것이 좋을 것 같다.

📌 우선순위

1. 매일 7시 기상 후 학습 준비
2. 모각코 참여
3. 알고리즘 풀이
4. 전문단어 모음집 제작
5. 오전, 오후 30분씩 1시간 산책
6. 수면시간 1시간 연장

📌 첫 솔로프로젝트를 하면서 구현하지 못하였던 부분을 추가적으로 작업을 시작하는 날이다.

미니 해커톤이라고 이름은 명칭되어 있지만 우리가 알고있는 해커톤이 아닌 그냥 작업한 것을 다른 분들에게 보여주고 설명해주는 자리였다.

📗 오늘 학습한 내용

Local Storage

• 브라우저의 Local Storage에 데이터를 저장하여 새로고침, 브라우저 다시열기 등과 같은 일이 생겨도 저장된 값을 변화하지 않고 화면에 출력할 수 있도록 한다.
• 문자열로만 저장이되기 때문에 문자열이 아닌 다른 값으로 사용할 때에는 형식을 변경해주어야 한다.
• localstorage.setItem('키', 값): 로컬 스토리지에 저장
• JSON.parse(localstorage.getItem('키'): 조회
• localstorge.removeItem('키'): 해당 키에 대한 데이터 삭제
• localstorage.clear(): 전체 삭제

Session Storage

• Local Storage와 방식은 같지만 브라우저를 닫는 경우 데이터가 삭제되는 것이 다르다.

Pagination

• 페이지 하단에 생기는 1,.... 10번, 다음, 이전 버튼을 구현하는 것이다.

페이지네이션은 구현하는데 실패했지만 로컬 스토리지 방식으로 구현하는 것에는 성공해서 뿌듯하게 하루를 끝낼 수 있었다. 하지만 페이지네이션을 구현하지 못한것은 남겨진 주말에 나에 대한 숙제라고 생각하며 앞으로는 기능을 구현할 때 시간에 맞출 수 있도록 많이 학습할 것이다.

📘 추가로 공부할 내용

JavaScript

• 고차함수
• 객체 지향
• 프로토타입
• 비동기

Pagination

• 페이지 네이션이란?
• 페이지 네이션의 구성
• 페이지 네이션의 사용방법

📝 오늘 느낀점 & 마음 가짐

• 다양한 기술을 접하면서 내가 구현할 수 있는 기능을 늘리자!!

📌 대망의 첫 솔로 프로젝트를 하는 날이니 만큼 예측했는데 내가 예측한 것과는 너무 다르다... 데이터를 가지고 github의 discussion을 html, css, js로 구현하는 프로젝트였다... 열심히 하자!!

📗 오늘 학습한 내용

HTML

CSS

JavaScript

DOM

• 이벤트 핸들러

Local Storage

• 브라우저의 Local Storage에 데이터를 저장하여 새로고침, 브라우저 다시열기 등과 같은 일이 생겨도 저장된 값을 변화하지 않고 화면에 출력할 수 있도록 한다.
• 문자열로만 저장이되기 때문에 문자열이 아닌 다른 값으로 사용할 때에는 형식을 변경해주어야 한다.

Session Storage

• Local Storage와 방식은 같지만 브라우저를 닫는 경우 데이터가 삭제되는 것이 다르다.

Pagination

• 페이지 하단에 생기는 1,.... 10번, 다음, 이전 버튼을 구현하는 것이다.

프론트엔드 개발자로서 다른 웹 페이지를 클론 해보는 것은 많이 했지만 정해진 기능을 내가 하나하나 구현하는 것은 거의 처음이었던 것 같다.. 하면서 많이 어려운 부분은 스토리지와 페이지 네이션 부분이었는데 구글링을 통해 학습은 했으나 아직 사용하는 것은 어려웠다. 이것을 발판 삼아 더욱 열심히 해야 한다고 마음을 다시 한번 다잡을 수 있었다.

📘 추가로 공부할 내용

JavaScript

• 고차함수
• 객체 지향
• 프로토타입
• 비동기

📝 오늘 느낀점 & 마음 가짐

• 다양한 기술에 대해 학습해보자..
• 페이지 기능 구현을 더욱 다양한 방법으로 생각해보자!!

📌 갑작스러운 비가 내려 시원하게 하루를 시작할 줄 알았지만 아직 몸살이 낫지 않아서 추웠다.... 그리고 정규표현식에 대해 다시 학습하는 계기가 되는 날이었다.

📗 오늘 학습한 내용

회원가입 폼

• 유효성 검사

JavaScript

• 정규표현식
  • RegExp

Github

• 아고라스테이츠 클론 작업해보기

Mini Hackathon Final에 대해 알아보기

정규 표현식에 대해 학습을 추가적으로 진행하였다. 어떻게 사용하고 어디에서 사용하는 지를 정확하게 알아야 효율적으로 코드를 작성 할 수 있다고 생각했기 때문이다. 다음날 있을 아고라스테이츠 클론을 작업해보았다.또한, 금요일에 있는 미니 해커톤에 대해서 어떤것인지 한번 찾아 보았는데 2~3명이 모여서 하나의 주제를 가지고 간단한 페이지를 개발을 하는 것이라고 했다. 나의 의견도 내야할 것이기 때문에 프로젝트에 대해 PPT를 작성해 봐야겠다.

📘 추가로 공부할 내용

JavaScript

• 고차함수
• 객체 지향
• 프로토타입
• 비동기

Section2 부터 배우는 내용에 대해 조금 학습을 진행해야할 것 같다. 이전에 학습할 때에도 어려워 했던 부분이기 때문이다.

또한, 6월 1주차부터 있는 리액트에 대해서도 학습을 진행하자

📝 오늘 느낀점 & 마음 가짐

• 디자인 감각을 늘려보자!!
• 여러가지 페이지를 분석해보자!

📌 DOM을 사용한 유효성 검사를 해봤는데 역시 프론트엔드가 재밌다!!

📗 오늘 학습한 내용

DOM

• Create
• Append
• Read
• Update
• Remove
• Delete

회원가입 폼

• 유효성 검사

간단하게 회원가입 폼의 아이디, 비밀번호의 유효성 검사를 dom을 사용해 작업했다. Dom을 다양하게 더 사용할 수 있을 것 같다.

또한, 정규표현식에 대한 나의 지식이 아직 부족해 누군가에게 설명하는 것이 어려웠다.

📘 추가로 공부할 내용

React

• Component
• props
• states

Github

• 아고라스테이츠 클론 작업해보기

코드스테이츠 과정에서 가장 먼저 사용하는  RestAPI를 먼저 공부해야겠다. Graphql이 RestAPI보다 좋다는 것은 많은 글과 영상을 봐서 알지만 현재 내가 먼저 사용하게 되는 것을 공부하는게 우선이라고 생각한다. 먼저 공부하고 Graphql을 후에 공부한다면 두 가지의 차이를 확실하게 알 수 있을 것이라 생각된다.

아고라스테이츠를 클론 작업해보는 것은 이번에는 페어와 같이 하는 것이 아니기 때문에 먼저 한번 작업을 해보면 그날 조금 더 수월하게 할 수 있을 것이기 때문이다.

📝 오늘 느낀점 & 마음 가짐

• 공감 능력을 기르자...
• 프론트엔드 과정에서 좋은 프레임워크를 사용하는 것을 당연하게 생각하지 말고 어떤 부분때문에 사용하는지 알아보자!
• 일단은 앞에 있는 고비를 먼저 생각하자!

📌 오늘은 Koasn를 주말간 남은 것에 대해 학습하고 나서 궁금한 점을 하나하나 페어와 함께 맞추는 시간을 가졌다.

📗 오늘 학습한 내용

JavaScript

• 배열
• 객체
• ES6 신규문법
  • Spread
  • rest
• 얕은 복사
• 깊은 복사
• Koans (JS기초 문법 문제)

Koans는 여태까지 배워왔던 내용을 종합해둔 문제들이었다. 비교적 복습을 많이 진행했다면 쉽게 풀 수 있던 문제라고 생각이 들었다.

하지만 뒤의 객체에 속성과 속성값에서는 많이 헷갈릴 수 있다고 생각한다. 그리고 블로그에 내용을 찾기전에 공식 문서를 보는 것이 첫번째라고 생각하는 계기가 되었다. 블로그에는 자신만의 생각으로 정리한 곳이다 보니 전문적일 수 없었다...

📘 추가로 공부할 내용

DOM

• Create
• Append
• Remove
• Update
• Read

📝 오늘 느낀점 & 마음 가짐

• 쉬운 내용이라도 건너뛰지말고 자세히 파헤쳐보자!!