Hello, world :)
항해99 2주차를 마치고, 3주차 돌입!
html/css/js/Python 👉 알고리즘 👉 React.js(new!)
알고리즘 주차 회고
👍 배운 점
- 사고하는 연습
알고리즘 문제풀이를 하면서 정말 많은 시간을 문제 화면만 켜둔 채 보낸것 같다.
문제를 멍하니 쳐다본 채 머릿속으로 무엇을 반복해서 어떤 값을 꺼내올까, 만약에 이게 트루라면 저렇게하고 아니라면 그렇게 해볼까. 여러가지 방법들을 고민해보고, 키보드 앞에 앉으니 어디서부터 손을 대야할지 몰라 다시 멍때리고. - 스스로 찾아보는 연습
결국은 구글과 유튜브(둘 다 구글이지만)에서 이런 함수가 있는지, 저런 함수가 있는지 여러차례 검색을 하고 외워지지 않는 함수들을 머릿속에 욱여넣으며 이것저것 시도해본 것 같다. - 진행상황 console.log 찍어보기
미리 준비한 자료를 보여주든, 사용자의 액션으로부터 데이터를 가져오든간에 어쨌든 코딩은 어떠한 데이터를 핸들링해서 원하는 방식으로 보여주거나, 어딘가에 저장하기 위한 작업이다. 이 데이터가 오고가는 (혹은 가공되는) 과정에서 내가 원하는대로 어디까지 진행이 되었는지 체크를 하기 위해서 함수를 사용하여 가공했을때 초기 데이터가 어떻게 변했는지, 가공된 데이터를 2차 가공했을때 어떻게 변했는지 console.log를 마구마구 찍어댔다😤
🥲 아쉬운 점
- 아직 갈길이 멀었다.
프로그래머스 기준으로 레벨 1-2단계의 문제를 접해볼 수 있는 계기가 되었는데, 풀어본 문제를 잘 이해했다고 생각하지만 다시 새로운 문제 앞에 놓였을 때 바로바로 한큐에 문제를 푸는 일은 거의 없다. 같은 레벨1이어도, 풀어본 유형이 아닌 경우 막히는 일이 많아서 훈련이 필요하다. - 정리를 하면 뭐해! 써먹지를 못하는데!
비공개 노트에 알고리즘 문제풀이를 하면서 나왔던 새로운 함수, 새로운 개념들을 열심히 정리해두기는 했지만 막상 함수를 사용하려고 하면 어떤 키값을 담아야하는지, 어떤 경우에 어떤 함수를 써야하는지 바로바로 적용이 안된다.
개념에 대해 이해가 덜 된 상태로 외우려고 용을 써서일까🤔 다시 차근차근 이해하고, 제대로 외울 필요가 있다.
😎 개선방향
-
레벨 2단계 정복할때까지 매일 1문제 풀기 챌린지
행동양식으로 정해두지 않으면 계속해서 미루기만 하니까, 1일 1문제로 일단은 레벨 2단계까지 진행해봅시다.
단, 난이도에 따라 1문제를 하루에 소화하기 어려운 경우, 3일 이내로 기간 재조정하기!
항해99 진행하는 기간에는 최대한 모범답안 탐색을 피하고, 직접 해결하는데 초점을 맞춰 한 문제에 적게는 1시간 길게는 하루종일도 투자했었지만, 프로젝트와 알고리즘 공부를 병행하기 위해 새로운 원칙을 정해보았다. -
[내가 정한 알고리즘 공부 원칙]
⭐️ 메인 목표:
문제풀이 자체가 아니라, 정확하게 개념을 이해하고 부족한 개념을 채우는것
👉 접근방식 고민 30분
👉 적절한 함수/조건문/반복문 탐색 30분
👉 코드 전개 30분
😥 각 단계별로 30분 이내 해결이 안될 경우에는 모범답안 찾아보고 이해하는데 집중하기!
- JS 함수 개념 재정리& 기초다지기
문제 풀이 혹은 프로젝트 등 작업을 할때 새로운 함수를 사용하거나, 헷갈리는 개념이 있을 때는 그때그때 정리하면서 개념을 다지고 넘어가자!
주특기 입문 주차 [SA] html 연습
진행 목표:
- Html 기본 태그 연습하기
- netlify 로 프론트엔드 배포하기
진행 결과:
▶︎Go to Project
▶︎Github
- 사용한 html 태그
1)form
2) div
3)input(textbox, radio, checkbox, date)
4)selcect
ㄴ option - css 연습하기 : 박스스타일, 구글폰트, display: flex; flex-direction: row;
Welcome to React.js
1. JS 개념 다지기
JavaScript의 ES란?
자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람이 최초 개발한 언어다. 이후 MS에서 Jscript 라는 언어를 개발해 IE에 탑재했는데 자바스크립트와 Jscript 언어가 너무 제각각이라 이를 정립하기 위해 Javascript를 ECMA(European Computer Manufactures Association) 비영리 표준기구에 제출하면서 우리가 알고 있는 Javascript가 정립되었다.
ES는 이 비영리 표준기구에서 정립한 ECMA Script 의 약자로, ECMA에서 인정한 표준규격에 따른다는 의미를 내포하고 있다.
👉JavaScript : 개발언어
👉ECMA Script(ES) : 규격, 표준
ES5/ES6 문법 차이
ES5 (2009)
- 배열함수(forEach, map, filter, reduce, some, every 등)을 지원한다.
- object에 대한 getter/setter 지원
- 엄격모드(strict mode) 지원
- Json 지원 (~ES4까지는 XML 사용)
- bind() 메소드 지원 (thisfmf 강제로 bind 시켜주는 메소드)
ES2015, ES6 (2015)
- let, const 키워드 추가 (~ES5까지는 전역키워드 var 사용)
- arrow 문법(화살표 문법) 지원
- iterator / generator 추가
- module import / export 추가
- Promise 도입
- Default, Rest 파라미터
- 해체 할당, Spread 연산자
- 템플릿 리터럴
- 함수 단위 스코프 → 블록 단위 스코프
ES5 와 ES6의 차이점
ES6에서 추가된 사항들로 ES5와의 차이점을 살펴볼 수 있는데, 가장 특징적인 점은 let, const 와 같은 블록 스코프를 가지는 키워드와 화살표함수를 들 수 있다.
2. 과제 진행에 앞선 계획수립
👉금 토 일 :
- [개인] SA 제출, 환경설정
- [개념] 리액트 강의&실습으로 개념 잡기
- [팀과제] 질문 1차 답안 작성
👉월 화 :
- [팀과제] 6문항 팀원들과 답안 정리
- [팀과제] 중요한 개념 질문 토의하기
- [팀과제] 최종 답안 정리
- [개인] 과제 프로젝트 착수
👉수 :
- [개인] 과제 마무리(기능개발, css)
- [팀과제] 답안 보충
👉목 :
- [개인] QA 후 과제 제출
- [팀과제] 팀원들과 상의 후 완료 시 제출
3. React.js TRY (feat.노마드코더)
📘 항해99 입문주차 학습자료
- 학습자료를 훑어보고, CRA 세팅 및 GIT 연동을 마무리했다.
- 자료만으로 공부하기에는 개념을 잡는데 시간이 많이 소요될 것 같아, 외부자료로 공유받은 노마드코더의 영화 웹 서비스 만들기 무료강의를 일부 듣기로 결정했다.
🧑💻 노마드코더 ReactJS로 영화 웹 서비스 만들기
- React 무료강의 중 초급 강의의 전반부를 보면서 리액트의 기본동작, 기본함수를 공부하고 있다.
- 강의에서 가장 좋았던 점은 초반에 바닐라JS와 리액트JS의 차이점을 설명해주고, 본격적인 리액트의 함수를 설명하는 과정에서는 대표적인 useState, Props, useEffect 를 기본적인 양식과 실제 현업에서 사용하는 축약된 양식을 비교하면서 개념을 잡고, 효율적으로 사용할 수 있도록 같은 내용을 여러가지 방식으로 보여준다는 점이다.
- 각 함수가 가지는 키값과, 변수 할당 및 동작을 이해하고, 실제 코드를 작성할 수 있도록 구성되어있다.
웹서비스를 만드는 후반부는 듣지않고 과제 진행으로 넘어갈 예정인데, 틈틈이 남은 후반부 강의와 무료로 제공하고있는 다른 중급강의도 들어봐야지😤
노마드코더 강의 실습 [useState]
▶︎Go to project
▶︎Github
.
.
.
이렇게 무지막지하게 길어질 줄은 몰랐지만 어쨌든 이번주 클리어😂
다음주도 잘 달려봅시다😤
