Homile

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

📗 오늘 학습한 내용

회원가입 폼

• 유효성 검사

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

📝 오늘 느낀점 & 마음 가짐

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

📌 일주일간 다양한 내용을 학습할 수 있었고 알고 있는 내용에서 놓쳤던 부분을 매꿀 수 있어서 좋은 기간이었다.

📗 일주일간 학습한 내용

Git

• clone: repository를 받아온다.
• fork: repository를 내 github에 복사한다.
• pull
• push
• add
• commit

node.js

• npm
• nvm
• mocha
• chai

배열

• 순서가 있는 데이터의 저장공간

객체

• 속성과 속성 값이 있는 저장공간

복사

• 얕은 복사
• 깊은 복사

자료형

• 원시 자료형
• 참조 자료형

스코프

• 변수의 유효 범위

클로저

• 함수를 리턴하는 함수
• 외부 함수와 내부 함수가 존재
• 외부 함수의 변수는 내부 함수에서 참조 가능하지만 반대로는 불가능

ES6 신규 문법

• Spread: ...배열 or ...객체

구조분해할당

• 배열 및 객체를 분해 한 후 새 변수에 할당하는 것(Spread 사용)

이번주는 다양한 것을 깊게 배울 수 있는 시간이었고, 다양한 사람들을 만나면서 다양한 풀이를 볼 수 있게 되어 의미있는 기간이 되었다.
아직까지는 내가 아는 것이 조금은 더 많다고 생각하지만 그렇다고 멈춰서있게 되면 내가 발전 할 수 없고 실력은 따라잡히기 마련이 다 절대 자만하지 않도록 하는 것이 이 과정을 끝까지 의미있게 진행 할 수 있다고 생각한다.

📘 다음주간 공부할 내용

Git & Github

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

DOM

• Element 조작 방법

RestAPI

• RestAPI란 무엇인가?

(Test-Driven Development, TDD)

git과 github의 사용방법에 대해서 아고라스테이츠 클론 작업을 통해 배울 수 있을 것 같다.

DOM을 사용하여 이벤트 출력 및 요소의 구조확인, 구조변경 등을 진행한다.

RestAPI는 아직은 배우지 않지만 시간이 조금 많이 남는다면 추가적으로 공부를 진행하려고 한다.

📝 일주일 간 느낀 점 & 마음 가짐

• Koans를 하면서 직접 예제를 가지고 페어분께 설명을 드리며 나도 기술 면접을 준비하는 듯한 느낌이 들고 설명하는 기술이 늘어 좋은 시간이 되었다.
• 시간이 남는다면 놀지 말고 정해진 시간 +2시간 정도는 공부를 더 해보자!!

📌 다른 캠프의 지인도 열심히 하는 것을 보며 나도 열심히 해야겠다고 생각을 하는 날이 되었다.

📗 오늘 학습한 내용

JavaScript

• 스코프, 클로저 내용 정리

GraphQL

• 페이스북에서 만든 쿼리 언어
• 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것을 목적으로 둔다.
• REST API와 비교
• GraphQL의 구조

Python 알고리즘 문제풀이

• [Leectcode] Remove Element
• [Leectcode] Search Insert Position
• [Leectcode] Container With Most Water

주간에 배운 스코프와 클로저에 대해 자세히 정리하였다.

알고리즘 스터디 중 나온 GraphQL에 대한 내용을 개발자가 되기위해 공부해야 한다고 생각하여 추가적으로 공부하였다. GraphQL은 React와 같이 페이스북에서 개발한 아키텍처이란 것을 알고 React를 사용하기 위해서는 같은 회사에서 개발한 GraphQL이 호환성이 확실히 좋다고 생각이 든다.

📘 추가로 공부할 내용

JavaScript

• React
  • React와 vue의 차이
• Graphql
  • GraphQL과 Rest의 차이

위와 같은 프레임워크, 라이브러리를 사용했을때, 왜 사용하는지 정확하게 누군가에게 전달할 수 있도록 공부를해보자.

📝 오늘 느낀점 & 마음 가짐

• 프레임워크, 라이브러리를 조금 더 공부해보자.
• JavaScript와 TypeScript의 관계에 대해 공부해보자.
• 앞으로 정해진 것만 하지말고 한발더 나아가 보자!!!!

📌 이제 section 마지막에 다가오니 기분이 묘하다... 앞으로 더 열심히 해야지!!

📗 오늘 학습한 내용

JavaScript

• 클로저
  • 함수에 함수가 선언되어 return하는 구조이다.
  • 클로저함수: 외부함수의 매개변수에 접근할 수 있는 내부함수
  • 특징
    • 데이터의 보존
    • 정보의 접근 제한(캡슐화)
    • 모듈화
  • 외부함수
    • 외부함수에 선언된 변수는 내부함수에서 접근이 가능하다.
  • 내부함수
    
    • 내부함수에 선언된 변수는 외부함수에서 접근이 불가능하다.
• ES6 신규 문법
  • Spread
  • rest
• 3주간 배웠던 내용 종합 퀴즈

스코프, 클로저의 개념은 조금 어려울 수 있다. 내부함수, 외부함수, 외부함수의 변수 등 다양하게 데이터가 이리저리 움직인다고 생각하기 때문이다. 이럴때는 천천히 그림을 그려보면서 흐름을 이해하면 쉽게 할 수 있다는 것을 적고 싶었다.

그리고 ES6문법의 경우 많이 사용해봤던 부분이라 코플릿 배열, 객체 문제를 풀 때에도 사용했던 적이 있었는데 깊은 사용법까지는 자세히 몰랐으나 알게되었다.

📘 추가로 공부할 내용

JavaScript

• DOM
• Graphql

📝 오늘 느낀점 & 마음 가짐

• 다양한 프론트엔드 지식에 대해 조금 더 알아보자!
• 따라 잡히지 않도록 조금 더 나아가자!!