Happy Programmer

Chapter1. CSS 기초
1.CSS의 사용 목적을 이해한다.
2.CSS의 기본 문법과 구조를 이해한다.
3.CSS를 HTML에 적용하는 방법에 대해서 이해한다.
4.HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
5.CSS를 이용해 텍스트를 꾸밀 수 있다.
6.CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.
7.MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
Chapter2. 박스모델
8.CSS 박스 모델을 이해할 수 있다.
9.박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
margin, border, padding, content
10.박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
Chapter3. CSS selector
11.다양한 CSS selector 규칙을 이해한다.
12.후손 selector와 자식 selector의 차이를 이해한다.
13.필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.

1.css를 이용하지 않는다면 정렬, 구분, 디자인면에서 문제가 생겨 제대로 이용할 수 없게된다. ui 뿐 아니라 ux까지 고려하는 개발자가 돼야 한다.

2.태그와 속성을 검색해 원하는대로 적용할 수 있다.

3.세가지 방식으로 적용할 수 있는데 주로 보통은 link.css를 이용해 빠르게 불러와 css를 입힐 수 있다.

4.html에 직접 적용할 경우 우선순위는 인라인>내부>외부 순이므로 기본적으로 이용하는 내부 css를 이용하는 순간 인라인 css는 무시될 수 있다.

5.css를 이용해 해당 태그에 color를 입혀주며 사이즈, 폰트, 폰트크기 등을 조절할 수 있다.

6.절대단위와 상대단위의 차이를 이해하고 있으며 되도록 단일 상대단위를 이용할 생각이다.

7.대부분의 구글 검색결과가 .MDN 또는 w3school 등의 레퍼런스 사이트로 나오기 때문에 반복문 코플릿때 부터 참고하고 있다.

8.박스 모델 내부의 박스모델 내부의 박스모델 마트료시카 박스모델은 무섭다. 박스를 구별할 수 있는 안경을 드림코딩에서 받았기 때문에 어느정도 박스 구별과 설정이 가능하다.

9.content는 내용물 그 자체이며 일반적인 상자라고 생각할 수 있다. 이제 그 content와 border(경계선)의 사이에 들어가는 padding, border과 외곽과의 사이에 들어가는 것이 margin이다.

10.박스크기는  box-sizing: (border/content)-box 내부슬래시로 나뉜 두가지이며 일반적인 content는 border, padding까지 고려해줘야 하지만 border를 사용할 경우 할당한 값이 140인 경우 나머지 border, padding을 제외한 후 결정한다.

11.다양한 종류의 Selector(기본, 자식, 후속, 가상 등)을 이해하고 사용할 수 있다.

12.자식은 바로 한 단계 아래의 자식 (1촌)까지만 가능하지만 후손은 그 내부 전역을 포함한다.

13.필요시 MDN 또는 w3school 등 구글 검색을 통해 정렬된 selector를 확인 후 적용할 수 있다.

간단하다고 생각했지만 생각보다 적용하는 방식이 조금씩 다르고 선택하는 방식 또한 수십가지가 넘어가서 쉽지는 않았다. 하지만 실제로 사용하는 선택 및 기능은 단순하며 또한 원하는 기능은 검색을 통해 바로 적용할 수 있다는 자신감을 가지고 과제를 수행할 수 있었다.

엇그제부터 조금씩 아프던 눈이 심해져서 자세히 보니 눈다래끼가 났다.

벌써 세번째지만 그 전까지는 며칠 쉬면 어느정도 안정이 됬었기 때문에 넘어갔는데

이번에는 뭔지 정확하게 알고 싶어져서 검색을 해보니 속다래끼(맥립종)이라고 한다.

나 말고도 오픈톡방에도 이미 눈이 아프신 분들이 있는 것 같은데 이것또한 개발자의 직업병인걸까?

배농산급탕이라는 약이 좋다고 하고 한약성분들 위주라 몸에 크게 안좋지도 않다고 하는 것 같아 약을 사고

다음주 점심을 해결하기 위해 (점심시간이 1시간인데 조리시간까지 포함하면 아주 다급하다) 이것저것 장을 봤다.

그중에 꿀크림빵이라는 신제품(?)을 봤는데 팥과 크림이 들어간 크림팥빵인줄 알았는데 어두운 부분이 다 꿀이었다.

막상 열어보니 꿀은 그렇게 많지도 않고 생크림도 어중간 했지만 그래도 맛있었다.

복습을 좀 하다가 우분투 설치 후 핸드폰으로만 카톡을 보는게 너무 불편해서 카톡 설치를 열심히 도전했는데

생각보다 전제조건도 많고 과정도 이해가 안되서 단순히 따라 하기만 할 뿐이었다.

그래도 간신히 설치하고 보니 이모티콘도 안보이는게 대다수고 (사진은 보인다) 캡쳐한 사진을 복사해도 전송이 안되고

일정 시간(2~30분?)이 지나면 작동이 중지되는 등 이리저리 말썽 많은 녀석이다..

그나마 단방향 전송만큼은 무리없이 작동하니 언제 시간나면 해결해야겠다.

확실히 마음먹은 것과는 다르게 커리큘럼이 시간단위로 정리되어있지 않아서 그런지 일정을 따라갈 때와는 다르게 이것 저것 밀리는 경우가 많은 것 같다. 그래도 복습을 하고 나니 더 잘 할 수 있을 것 같아 기분은 좋다.

다음 주는 더 힘들 것 같지만 그래도 '어린이날'이 있어 한숨 돌릴 수 있을 것 같다.

어린이들 덕분에 어른들도 한숨 돌릴 수 있다니.. 이 얼마나 아름다운 일인가.

화,수 무려 8시간동안이나 페어로 진행될 계산기 목업만들기..  거기에 계산기 구현 7시간까지?

아마 한 페어분과 15시간을 같이 하거나 8시간 /7시간 따로 할 것 같은데 (그러기엔 목업과 구현을 나눠서 하니 뭔가 의문이 들지만 유닛별로 페어를 바꾼다고 하셨고 두 과제는 유닛이 다르기 때문에 어떤게 맞는지는 아직 모르겠다.) 페어분에게 민폐끼치지 않고 어느정도라도 도움을 드릴 수 있도록 열심히 학습해야곘다.

내일 일어나면 눈이 조금 더 편안하기를 바라며 잘 준비를 시작한다.

아.. 그리고 블로그 댓글을 남겨주신분을 보고 댓글을 달다가 12시 전에 글 작성하는 것을 까먹어 12:00에 작성이 되어버렸다..ㅠㅠ

1일 1작성이 오류로 하나 날아갔는데 이번엔 부주의로 5초차이로 넘겨버리니 마음이 아프다.

다음부터는 회고 작성 전 두가지 글을 미리 띄워두고 수정하는 방식을 확실히 해야겠다 (어차피 12시전에는 못끝내니까...)

1.단어의 길이 리턴에서   if (word.length > 0) 가 왜 들어가야 하는지 이해할 수 없다.
테스트에서도 return word.length만으로도 충분히 정답으로 인정이 됬었고 값이 없는 경우에는 원래 0이 나오기 때문에 string 타입의 10글자 이하의 문자열을 제공하기로 했는데 문자열이 음수가 될 수 없으므로 0>를 적어야 했던 이유는 아무리 생각해도 모르겠다. 최소한 음수값이 어떻게든 나올 수 있다고 해도 공백('')문자열은 0으로 반환이 되기 때문에 0>=으로 했어야 하지 않을까? 
console.log를 통해 비교해보니 string 타입이 아닌 경우에는 저 조건을 추가하고 if문 밖의 결과로 나머지는 모두 0을 넣어버리기 때문에 string 타입의 인자만 들어온다는 조건이 없다면 저 방식으로 해결해야 옳은 결과가 나오기 때문에 일반적으로는 조건을 추가해야 하는 것 같다.


2.대부분의 변수명을 a,b,c등으로 순차 처리했는데 Reference는 하나 하나 적당한 네이밍을 잘 해준 것을 볼 수 있었다. 혼자만 생각하는 것이 아닌 협업을 한다고 생각하고 규정에 따라 네이밍 하는 법도 생각해 봐야겠다.
(https://github.com/airbnb/javascript 참조하기)

3.if문 속의 if문등 헷갈리게 쓰는 것을 지양해야겠다. Reference에 if문이 연달아 세개가 나오는데 그 중 하나는 주석 때문에 if문 속의 if문인지를 확인하지 못한 채 이상한 방식의 순서진행이라 직접 진행과정을 그림으로 그리며 작성을 해도 맞지 않아 자세히 보니 If(){if였던 것이었다. if 윗줄에 //@@@@ 등의 주석 때문에 다음 줄로 넘어간 줄 알아버렸다. 내가 작성했던 문법은 if내부 조건 ()에 &&로 두가지를 묶어 처리했기 때문에 더 이해하기 쉽게 잘 쓴 것 같았다. Reference를 이긴 것 같아 뿌듯하다.
(뭐가 잘못된건지 확인하느라 30분도 넘게 썼지만..)

4.return(word.length%2!==0)라는 문장으로 홀수인지 불리언판단결과를 냈지만 reference에는 If내부에 두가지 출력을 따로 적어두었다. 잘 생각해보니 저것만 딱 보고서는 무슨 동작을 원하는지 파악할 수 없을 수 있으므로 명확하게 true / false를 리턴하는 것을 보고 판별이라는 사실을 쉽게 유추할 수 있게 쓰는 것 같다.(글자가 몇글자 더 길다고 처리속도가 유의미한 차이를 보이는 건 아니니까?)

5. 수와 문자열의 길이를 비교 해 num과 str중 작은 수만큼 저장하는 문제인데
return(str.slice(0,num))하나로 해결되는데 이걸 굳이 조건을 두가지로 나눠서 하는 이유는 잘 모르겠다.
어차피 길이보다 초과되는 숫자일 경우 길이만큼까지밖에 출력이 되지 않고 숫자가 더 적을 경우에는 당연히 숫자까지 나오니 그냥 num까지 출력 하나면 두가지 조건이 모두 들어있는데 왜 굳이 조건을 두개로 나눴을까? 아무래도 가독성 문제라면 옆에 주석 한줄이 더 이해하기도 편할 것 같다.

6.num과 str.length 중 최소값만큼 제거(drop) 라는 조건 자체가 숫자가 더 크면 모두 제거하라는 의미이므로 좋지 못한 설정 같다. num이 작으면 당연히 num만큼 num이 더 크면 모두 제거되니 윗 문제와 같이 if문이 필요없이 return 하나로 처리가 되서 당황스러웠다.

7.혼자 let a=num1, b=num2, c=str 등 여러가지를 선언부터 하고 봤는데 복습도중 보니 선언이 없이 그대로 변수를 할당해주면 되는 문제도 있어 실제 사용에서는 선언부터 하는 버릇을 고치거나 선언 후라도 내용이 그대로 들어간다면 선언을 지우고 변수값을 그대로 이용해야겠다. 

8.Reference에서도 let num1 = parseInt(numStr1);와 같이 복잡한 함수값등이 적용될 때는 적게 사용되더라도 선언을 통해 간편하게 이용하는 것 같다.

9.`문자열 ${함수 또는 변수}`를 자연스럽게 사용할 수 있도록 연습하자

10.홀수인지 여부를 불리언값으로 받는데 반복문을 사용하라고 해서 더비 반복문을 제작한 후 (리턴없음) 밖의 리턴값에 홀수판별식을 넣었는데 지금 Reference를 참조해보니 양수로 만든 n이라는 숫자에서부터 2씩 계속해서 빼서 1이나 0인지 비교하는 문제였다. 당황스럽다.

11.for문 내부에서 (let i = 1; i <= num; i++) let i =1 부분을 i = 1 으로 해도 문제가 없다는 사실을 알게 되었다. 생각하보면 let은 언제나 변수 수정이 가능한 선언이고 값을 초기화를 선언으로 하지 않아도 어차피 'i = 1;'만 사용해도 값을 할당하는 것이기 때문에 굳이 let을 하지 않아도 괜찮은 것 같다.

12.조건식 내부에서 배수만 작동하는 경우 함수 자체를 1~n까지가 아닌 3~ n 까지 n += 3을 사용하는 것이 더 효율적이다. *(n++ n+=2 n+=3 ...)

13.순서를 start, end에 지정하고 시작숫자가 조건이하일 경우 지정한 다음 반복문을 돌리는 방식을 이용하면 매 비교마다 조건이하를 체크할 필요가 없어 가벼워진다.

14. Reference에서 i=1 또는 0으로 시작하며 뒤로 갈수록 0의 비중이 커지는데 (특정 배수체크 제외) 이해할 수가 없다. 심지어 1일때는 <=이고 0일땐 <라 사실상 정수횟수기준으로 다른 점을 체감할 수 없지만 굳이 다른 방식으로 했다는 것은 작성자가 바뀐 것을 암시하는 걸까? 뒤로 갈수록 오히려 reference와 몇가지 표기법을 제외하면 비슷해 지는 모습을 보며 뿌듯해진다.

15.저번 회고에도 적었지만 시간복잡성을 따져야만 제대로 된 개발자가 됐다고 할 수 있을 것이다. 소수체크 문제를 보며 다시 한번 되새겨본다.

16.특정 규칙을 추가해 반복을 시키고 싶으나 처음 또는 마지막을 바꾸고 싶을 경우에 나는 처음을 예외처리하고 규칙을 추가해 나가게 처리했는데 reference에서는 마지막 또는 처음을 slice로 잘라내는 것도 나쁘지 않은 것 같다.


복습하며 돌아보니 이제 작성의 기술적인 문제보다는 어떻게 해야 더 이해하기 쉽고 가벼워지는지가 중점이 되는 것 같다. 수도코드의 중요성을 다시 한번 알게됐다.

점심에 약속을 다녀왔는데 요즘 화면을 너무 들여다봐서일까? 눈이 아파서 낮잠을 좀 잤더니 시간이 훅 지나가버렸다.

내가 예상한건 오늘은 이번주치 복습을 끝내고 남는 하루는 자격증이나 추가학습을 하고 싶었는데 

정신차리고 복습을 하는데 생각보다 쉬웠다!

정말 세션 때 말하신 것 처럼 눈감고도 할 수 있는게 아닐까? 라는 기분이 들 정도로 쉽게 풀 수 있었다.

신나는 기분으로 열심히 문제를 풀며 내용을 메모장에 정리하고 있었는데 갑자기 차단기가 내려가버렸다.

정리한 내용들도 생각한 멘트도 모두 안녕..

콘센트 하나가 작동을 멈춰서 밥솥과 전자레인지는 이제 힘들게 이용을 하게 됬다.

수요일 과정 일부까지 복습을 했지만 사실 월요일은 오리엔테인션 느낌이 강했기 때문에

1.5일치밖에 복습을 하지 못했다. 내일은 아침부터 복습을 시작해 2.5일치 복습을 마무리하고

계산기에 들어갈 내용을 생각하며 내가 공부한 범위내에서 어떤게 들어가는지 더 생각해봐야겠다.

복습을 하는 도중 Reference를 참고하지 않고 페어분과 과제를 모두 마쳐 뿌듯한 마음이었는데

알고보니 그건 잘못된 학습이었다.

각 문제를 해결하면 Reference를 참고해서 어떤 부분을 개선해야 하는지, 어떤 부분이 이상한지 파악하지 않고 넘어갔기 때문에 

페어분이 복습하실 때 곤란하실 수 있지 않을까 생각이 들었다..

내일 페어분께 사과드리고 Reference를 참고해서 복습하시기를 추천드려야겠다.

??? 지금 확인해보니 어제자 일기가 날아가 있다...

매일매일 하나씩 채우려고 했는데 참 슬픈 일이다

주로 복습한 내용은 '변수와 자료'형과 '조건문'이다.

복습을 하자 저번에 막혔던 문제들도 이미 해결법을 알아서인지 순조롭게 모든 문제들이 해결됬다.

또한 저번에는 단지 문제 해결에만 급급해 조건과 결과만을 봤기 때문에 놓쳤지만

많은 수의 문제들이 '대놓고' 계산기를 만드는 법에 대해 설명해 주고 있었다.

표시기능(숫자,기호), 입력기능(숫자, 기호), 계산기능(덧셈, 뺄셈, 곱셈, 나눗셈)등으로 그 중에서 표시, 계산까지는 배운 내용으로 해결할 수 있었다.

이제 추가적으로 꾸미기(CSS)와 각 버튼에 기능을 부여(JavaScript)를 보충하면 계산기가 나올 것 같고 어떤 기능들이 필요한지 유추할 수 있어 다음주 공부는 더 집중되고 재미있을 것 같다.

다만 단순히 사칙연산 뿐만 아니라 추가적인 기능(num1만 제공시 처리 규칙, **2, √, % 등)에도 신경을 써서 좋은 계산기를 만들 욕심이 생겨 계산기들을 비교해서 장점만 뽑아내야할 것 같다.

문제가 모두 풀려 Reference를 하나도 참고하지 않고 풀었고 시간에 쫓겨 그대로 넘어가버렸는데 이게 얼마나 큰 문제인지를 복습하다 알게되었다.

저번의 시간복잡성에 대한 글을 보고  이런 부분에서는 어떻게 해결하는게 더 우수한지를 비교하고자 눌렀는데 굳이 하지 않아도 되는 방식으로 처리해서 비효율적인 부분들에 대해 반성하는 시간을 가지게 되었다. 

새로 배우거나 정리한 내용으로는

1. if문들을 여러개를 써도 상관없지만 else if를 사용하지 않으면 맨 아래의 if문이(범위별 지정 처리 등 체로 거르는 작업에서는) 최종적으로 처리되므로 주의해야 한다. 

예시)

if (score >= 90) {
    grade = 'A';
  } else if (score >= 80) {
    grade = 'B';
  } else if (score >= 70) {
    grade = 'C';
  } else if (score >= 60) {
    grade = 'D';
  } else if (score >= 0) {
    grade = 'F';
  }

console.log(80)= B

---------------------------------

  if (score >= 90) {
    grade = 'A';
  }  if (score >= 80) {
    grade = 'B';
  }  if (score >= 70) {
    grade = 'C';
  }  if (score >= 60) {
    grade = 'D';
  }  if (score >= 0) {
    grade = 'F';
  }

console.log(80)=F

---------------------------------

2. let이 아닌 const를 Reference에서 사용해서 그 이유에 대해서 생각해보니

지금은 단순히 하나의 동작만을 테스트 하기 때문에 문제가 없지만 계산 공식등은 상수로 지정하지 않고 처리 시

큰 프로젝트 또는 협업에서 중복되는 이름설정시 서로 충돌이 날 수 있다 (상수지정시에는 지정이 안되서 발견이 쉬울 것)

3.현재 시간에 1초를 더해서 출력하는 문제는 시분초, 분초, 초를 거르는 방식으로 3가지 타입의 결과를 내보냈지만

초 체크, 분체크, 시체크를 해서 순차적으로 증가시킨 후 하나의 결과값만을 보내는 방식이 더 간결하고 이해하기 쉬웠다.

간결하면서도 이해하기 쉬운 방식으로 작성하는 연습을 더 해야겠다.

4. 세미콜론이 삽입 된 경우 또는 되지 않은 경우등 여러가지 일들이 있고 또한 처리에는 전혀 지장이 없는 것을 발견해서 검색을 해보니 세미콜론 자동 삽입(ASI, automatic semicolon insertion)기능이 있기 때문에 사용하지 않아도 된다는 의견, 오히려 쓰면 안된다는 의견, 그리고 마지막으로 새로운 규정이 추가될 예정이니 쓰지 않으면 안된다는 의견도 있어서 일주일차에게는 어려운 것 같다. 아래에 쓰면 오류가 난다는 의견을 첨부하며 세미콜론 이야기를 마친다.

"https://feross.org/never-use-semicolons/" 인용 

class Foo {
  constructor () {
    if (baz) {
      return 42; // ok
    };           // <– AVOID!
    return 12;   // ok
  };             // <– AVOID!
};               // <– AVOID!

생각보다 복습을 조금밖에 하지 못해 아쉬움이 남는다. 내일은 약속이 없으니 금요일내용까지 빠르게 복습해야곘다.

Chapter1. 웹 개발 이해하기
1.웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
2.VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
3.VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
Chapter2. HTML 기초
4.HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
5.HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
6.HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
7.<div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
8.<ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
9.<input> 요소에 type 을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
10.시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
Chapter3. HTML 심화
11.만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
12.와이어프레임을 보고 HTML로 코딩할 수 있다.
13.<div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.
14.HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
15.id와 class를 목적에 맞게 사용할 수 있다.
16.사람과 컴퓨터가 읽기 쉬운, 의미 있는(Sementic) HTML 문서를 작성할 수 있다.

1.HTML은 구조적인 설계 및 내용물(text)이 들어가며 CSS는 배치 및 꾸미기를 할 수 있고 JavaScript는 기능들을 추가할 수 있다. 집으로 예시를 들자면 html은 집안 구조, css는 인테리어, javascript는 전기 및 인터넷 등 가전제품 추가라고 볼 수 있다.

2.가능하다.

3.live server를 통해 실시간으로 확인하며 진행할 수 있다.

4.개발할 수 있게 작성할 수 있는 것에 대한 의미는 모르지만 html에 css를 입혀 꾸미고 javascript로 기능들을 동작하게 id, class 속성들의 값을 필요에 따라 지정할 수 있다.

5.1번에서 설명했지만 자세하게 들어가자면 html만 보고서도 이게 어떤 페이지인지 어떤 내용인지는 다 알아볼 수 있는 뼈대가 된다. 보통 작성할 때는 구조를 나눈 후 내용을 각자 다 작성하고 그 위치를 css로 조절하고 JavaScript로 기능을 추가하는 방식으로 진행한다.

6.아직 모든 내용을 학습하지 않아 확신할 수 없지만 새로운 태그들을 무난히 적용할 수 있다.

7.div요소는 한 줄 자체를 모두 차지하고 span요소는 그 크기만큼의 자리를 차지하는 태그이다. 보통 묶음으로 하위 태그들을 관리할 때는 div요소를 많이 차지하는데 div는 줄 자체를 차지하기 때문에 크기조절등을 신경쓰지 않아도 되는 편리함이 있기 때문이 아닐까 생각한다.

8.ul은 순서 미지정, ol은 순서나열이며 li는 자식태그로 내부에 배치시 자동으로(ol시) 1,2,3등 순서가 매겨진다.

9.checkbox, Text, Radio 등 원하는 기능의 input요소를 사용할 수 있다.

10.시멘틱 요소(h1, header 등)를 어떻게 사용하느냐에 따라 협업에서 이해하기 쉬운 작성 및 검색엔진에 원하는 내용을 강조할 수 있음을 이해하고 필요한 세부기능을 검색해 추가적으로 적용할 수 있다.

11.창을 보며 각 작동 및 내용 별로 구분해 어떤 태그를 이용해 나눠야 할지 추측이 가능하며 각 부위별 분류를 할 수 있다.

12.간단한 내용은 가능하지만 공부가 더 필요하다

13.10번에서 언급한 내용이지만 같은 기능을 낼 수 있다고 해도 보는 사람의 이해를 돕고 그 위치에 추천되는 기능을 사용해야 본인의 의도와 맞는 데이터 처리가 가능하다고 생각한다.

14.고유한 값들에는 id를 넣지만 여러가지의 동시 처리가 필요한 항목들에는 class를 넣어준다.

15.가능하다

16.참고를 보면서 하면 가능하지만 아직 부족하기 때문에 어느정도 연습이 더 필요할 것 같다.

html의 여러 태그들과 시맨틱요소 그리고 속성들에 대해서 공부했다.

태그들의 자식 태그도 있고 태그 내부에 속성도 한두가지가 아니고 

굳이 일반 태그를 써도 되는 부분들도 시맨틱 요소들의 위치를 고려해 사용하는 방법들 까지 

내용은 전체적으로 쉽지만 입력하는 방식들이 다른 부분들이 많아 고려할 것은 오히려 더 많은 것 같았다.

반복문이 조건넣는 방식 몇가지만 알면 그 뒤로는 의사코드로 해결이 된다면 이건 반대로 설계도를 미리 생각해서 나열하고

그 내부를 태그를 통해 구현해야 한다고 할까?

문제만 풀고도 이제 어느정도 원하는 대로 사용할 수 있다고 확신한 조건문, 반복문등과는 다르게 html은 뒤에 진행되는 과정들을 열심히 실습하며 적응을 더 해야 할 것 같다.

다음주에 바로 계산기를 구현한다고 하는데 기능뿐 아니라 디자인도 고려한 계산기를 만들고 싶다.

오늘은 반복문을 공부했다.

조건문과 문자열은 배우지 않은 내용들을 검색시키기 위해 강제적으로 배우지 않은 내용을 이용하게 하려고

특정 기능을 제한하거나 강제적으로 특정 기능을 넣으라는 요구들이 많아 고통스러웠지만

반복문은 단순히 알고리즘만 동작하게 구현하면 되는 문제가 많아 즐겁게 공부할 수 있었다.

평소에도 프로그래밍에 관심이 있어 군대에서(휴가를 딸 목적으로) 취득한 정보처리 기능사의 알고리즘과 유사한 느낌을 받았다.

예습을 하고 온 것이나 마찬가지인 상태로 과제를 진행하는데 페어분께서 칭찬을 많이 해주시니 기분도 더 좋았다.

정보처리 기능사 자격증을 딸 때만 해도 이걸 쓴다는 생각은 없고 스도쿠나 퀴즈를 푸는 느낌으로 했었는데 

어느새 프론트엔드 과정을 듣고 있는 나를 보니 배워둔 건 언젠가는 쓴다는 말이 떠올랐다.

우연치 않게 읽었던 몇줄의 정보가 마침 대화의 주제가 되어 칭찬받는 경험은 종종 했지만 내가 개발자를 목표로 공부하게 될줄은 누가 알았을까? 

배울 수 있는 기회가 있다면 놓치지 않고 시도해야겠다.

페어 프로그래밍은 유닛단위인데 이번이 세번째 유닛(1-공부자세, 2-JS기초문법, 3-JS기초제어문)의 마지막 날이라 페어분과는 작별을 하게 됐다. 

페어분께서는 도움이 잘 안되는 것 같다고 말씀하시지만 함께 해서 오히려 오랜 시간동안 집중하며 공부할 수 있었고 정규표현을 정확하게 모르셔서 나오는 창의력으로 문제의 새로운 키를 발견하는 즐거운 경험도 할 수 있었다. %, 백틱 등 학습 내용에는 들어있지 않았던 부분들에 대해서도 빠른 검색으로 문제를 해결해주시고 칭찬을 멈추지 않으셔서 행복한 페어활동을 진행할 수 있었던 것 같다.

가족들이 모두 교육관련 일을 해서 그런지 배움도 좋지만 도움을 줄 수 있는 상황에서 알려주며 함꼐 배우는 재미가 더 큰 것 같았다.

다음 페어분도 열정적이고 친화적인 좋은 페어분이 오셨으면 좋겠다.

화요일까지는 널널하게 공부를 했기 때문에 자격증 공부도 함꼐 하면 어떨까 라는 생각을 했었다가

수요일의 충격과 공포로 인해 사실상 포기했었지만

목요일인 오늘은 또 다시 자격증 공부에 대한 관심이 생기고 있다.

하지만 코플릿(문제)복습만 한바퀴를 다 돌아보려고 해도 주말중 하루가 사라질 것 같아 사실상 2달밖에 남지 않은 시험을 준비하는게 맞나 싶기도 하다.

이번 주 코플릿 복습을 하며 시간을 보고 결정해야 할 것 같다.

Chapter3. 반복문
1.반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다.
2.반복문(for문)과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다.
3.기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다.
4.for문과 while문의 차이에 대해서 설명할 수 있다.
5.반복문과 조건문을 응용하여 특정 조건에서만 코드가 실행되도록 할 수 있다.
6.이중 for문을 이해하고 활용할 수 있다.

1.반복문을 이용해 버그확인, 자동합계, 홀수체크, 구구단출력, 배수 체크 , 랜덤 문자열 내부의 철자 갯수 확인, 랜덤 숫자구성 문자열 중 가장 큰 수 찾기, 약수합계 구하기, 소수찾기,  범위 소수 갯수 찾기 등 여러가지 기능을 사용할 수 있다.

2.for의 초기화, 조건설정, 증감문을 통해 원하는 형태로 반복적으로 코드를 실행시킬 수 있다.

3. for문 내부에 함수적용 또는 리턴값에 추가 함수적용 등을 통해 원하는 문제를 해결할 수 있다.

4.for문은 직관적으로 보기가 깔끔하고 while문은 한번에 횟수를 파악하기 힘들다는 단점이 있다. for문은 특정 횟수에 종료는 문제 해결에 자주 사용하고 while문은 break등을 사용하거나 무한반복 등 횟수파악을 하지 않아도 되는 문제에 주로 사용한다.

5.반복문 내부에 조건문을 이용해 조건을 걸어 증감되는 값에 따라 작동, 비작동을 결정할 수 있다.

6.두가지 이상의 변수가 상호작용하며 계산 또는 동작이 수행되야 하는 경우 이중 for문을 사용하며 for문 내부에 조건문을 만들어 필요한 값들만 이중for문(내부for문)에 들어가 작동하게 할 수 있다.

반복문은 오히려 정처기능사 공부 때 배운 알고리즘이 생각나 더 쉽게 문제를 풀 수 있었던 것 같다.

생각보다는 수월하게 문제를 다 풀었다고 생각했는데 아고라 스테이츠를 보니 시간복잡도라는 중요한 개념에 대한 이야기가 있었다.

단순히 결과만 원하는 값을 얻어낼 수 있다고 해도 극단적으로 한달, 1년, 10년이 걸린다면 누가 그 프로그램을 이용할까라는 생각이 들었다. 소수를 구할 때 단순히 1~str.length -1로 하고 1로만 나눠지는 1이 아닌 수로 설정을 했는데 제곱근에 정수를 씌우고 그 값까지만 하고, 짝수는 2를 제외한 나머지는 전부 계산자체를 하지 않는 4배정도 더 효율적인 방식을 보며 반성하게 된다.

##5.23 - 이렇게 단순하게 작성했을지 몰랐는데 생각을 조금 덜 한것 같다. 간단하게 1만이라는 값을 넣는다고 할 때 저 당시 만든 함수로는 3~10000 (9998개)를 조회해야 하지만 제곱근100까지면 1~100으로 100개, 그리고 1, 2, 2의배수를 제외하면 49개가 된다.  9998/49= 1만까지만 해도 이미 204배의 차이가 존재하는 것을 볼 수 있는데 백 또는 몇백정도의 값은 암산으로도 소수판별을 쉽게 할 수 있기 때문에 이용하지 않을 것이라고 가정하면 제곱근을 이용하지 않은 함수는 '쓰레기'라고 볼 수 있을 것 같다.

코드를 단순히 동작하는 것에만 신경쓰지 않고 어떻게 하면 더 효율적인지를 고민하는 시간을 조금씩이라도 문제마다 가져야 겠다.

오늘 하루를 보내고 나니 어제의 오만함을 크게 반성할 수 밖에 없었다.

페어와 더 보람찬 과제 수행을 위해 더 높은 난이도를 원한다고?

배가 부른 소리였다..

오늘의 난이도는 가히 말하자면 불지옥 난이도(그정도는 아니긴 하지만)

디스코드의 화기애애하고 떠들석 하던 분위기도 충격과 공포로 휩싸였다.

다행히 좋은 페어분을 만나 화기애애하게 문제를 해결해 나갔지만

생각보다 뒤로 갈 수록 문제의 난이도는 어려워져만 갔다.

결국 예정시간을 초과해 간신히 문제를 풀고 쉬는 시간도 없이 바로 다음 일정을 따라가고

그 일정이 끝나고 다시 들이닥친 문제를 해결하고 정신이 쏙 빠졌다.

여기서 더 큰 문제는 초반에 네비게이터를 하면서 여유로운 마음가짐으로 어차피 복습할 때 또 해야되는데

내가 네비게이터 하면서 이거 시끄럽게 따라치면 방해가 될 수 있으니까 이따 혼자 복습해야지! 같은 태평한 생각을 했는데

저녁을 먹은 후 막상 혼자 다시 푸니 학습 효과는 좋았지만 어느새 10시에 가까운 시간이 되어버렸다..

물론 혼자서 공부했던 내용들보다 두세배 이상씩 깊게 공부한 느낌이 들고 코플릿(문제풀기)을 통해 적어내려가는 것 또한 자연스러워졌다. 

시키면 손코딩도 할 수 있을 것 같다고 할까?

교육만 잘 따라가면 좋은 개발자는 될 수 있을 것 같다. 

말 그대로 '부트캠프'.. 훈련소에 들어온 기분으로 열심히 따라가야겠다.

내일 하루는 조금은 여유가 있었으면 좋겠다.

Chapter1. 조건문
1.truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.
2.비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.
3.if 와 else if , else를 이해하고 무리 없이 활용할 수 있다.
4.논리 연산자를 (&&, ||, ! ...) 통해 복잡한 조건을 간결하게 작성할 수 있다.
5.복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다.
Chapter2. 문자열
6.length 속성을 활용해 문자열의 길이를 확인할 수 있다.
7.두 개 이상의 문자열을 하나의 문자열로 만들 수 있다.
8.slice() 메서드를 활용해 문자열을 원하는 만큼 ‘복사’할 수 있다.
9.영문으로 된 문자열을 대문자 또는 소문자로 바꿀 수 있다.
10.문자열 중 원하는 문자의 index를 찾고 접근할 수 있다 str.indexOf('a') 또는 str.lastIndexOf('a'),str[1]
11.includes() 메서드를 활용해 문자열 중 원하는 문자가 포함되어 있는지 알 수 있다. str.includes('a')
12.split() , join() 메서드를 활용해 문자열을 배열로 바꾸거나, 배열을 문자열로 바꿀 수 있다.
13.템플릿 리터럴(Template literals) 문법을 사용할 수 있다.

1.truthy와 falsy는 조건문에서 true, false와 유사하게 작동한다 (만약 엄격한 비교가 아니라면)

2.엄격한 비교를 하지 않으면 1과 '1'이 같게 취급될 수 있기 때문에 주의해야한다 (오류도 날 수 있다고 한다.)

3.if, else if, else 순으로 넘어가며 만약 else if가 없다면 if 다음에 바로 else로 넘어간다. 범위 밖에 있는 값들은 랜덤(undefined으로 지정될 수 있기 때문에 else로 범위 밖의 값들에 대한 결과를 마무리 해주는 것이 안전하다.

4.&&(그리고), ||(또는)을 이용해 여러가지 문장을 압축해 하나의 조건으로 만들 수 있으며 !를 통해 반대되는 의미를 쉽게 적용할 수 있다.

5.일정 범위내의 조건들을 식으로 풀어 등급정하기, 월별 날짜맞추기, 다음날짜 요일 맞추기 등 간단한 범위 내의 알고리즘을 구현할 수 있다.

6. xxx.length를 통해 문자열의 길이를 알 수 있다 str로 보통 축약해 str.length로 표현된다.

7.문자열은 +기호를 통해서 하나로 합칠 수 있다 ex) '문자열'+'문자열'='문자열문자열'

8.slice() 메서드를 이용해 특정 값에 slice()를 할당하는 방식으로 자유자재로 복사 할 수 있다.

9.str.toUpperCase()또는 str.toLowerCase()를 통해 대,소문자로 변환할 수 있다.

10.문자 또는 문자열을 indexOf() 또는 lastIndexOf()를 통해 앞 뒤에서 찾을 수 있다 또한 str[]으로 지정 순서를 호출할 수 있다.

11.indexOf와 작동 방식은 유사하며 앞에서 찾는 내용이 나오면 뒤의 내용은 관계없으며 구버전 익스플로러 등에서는 작동을 하지 않는다고 한다.

12.join()을 통해 배열을 문자열로 바꿀 수 있고 split()을 통해 문자열을 특정기호 또는 문자 또는 공백을 이용하며 ()와 같이 아무것도 없어도 하나씩 다 해체되는 방식으로 배열로 변경할 수 있다. 

13.문제를 푸는 도중 +기호를 제외하고는 함수와 문자열을 합칠 수 있는 방법을 알 수 없어 페어와 하던 도중 페어분이 발견해주신 백틱을 이용해 문제를 해결했다 `

어제는 생각보다 그렇게 쉽지는 않네? 라는 느낌이었다면 오늘은 그만둬!! 더 이상 내게 모르는 문제를 검색하게 하지 말아줘!! 같은 느낌이었다.

기초와 다르게 기초 제어는 굳이..? 이걸 왜 알아야 해? 이게 없어도 되는데 왜 이걸 쓰지 않고 이 문제를 해결해야해? 같은 고난이도 문제들이 있었기 때문에 고통스러웠지만 페어와 함께 해결해 나가면서 이렇게 했는데 한번에 통과라고? 같은 기쁨도 느낄 수 있었다.

오늘은 드디어 JavaScript 진도가 나간 날이다.

긴장했던 것과는 다르게 기초적인 내용은 간단하고 심화되는 내용일수록 스스로 학습하도록 유도하는 방식으로 공부를 했다.

처음으로 페어를 할당받아 연락을 하는데 디스코드에서 몇번 봐서 눈에 익은 아이디의 동기분이셔서 조금 긴장이 풀렸다.

페어프로그래밍에 대해 교육받은 것 처럼 밋 방을 개설하고 1시 정각에 만나서 들어왔지만 

서로 어색한건 어쩔 수 없었다.

간단하게 인사를 나눈 후 사다리타기로 네비게이터와 드라이버를 정하고 문제를 풀기 시작했는데

처음에는 네비게이터를 하기에도 민망한 단순 따라치기(xx를 선언하세요)였다면 뒤로 가니 갑자기 fuction을 선언하고 내부 데이터 값도 결과를 정해서 리턴하게 하라는 고난이도로 바뀌었다.

하지만 오히려 고난이도로 가니 네비게이터 하는 맛이 나고 서로 협력하는 재미가 생겼다.

다음부터는 조금 더 난이도가 높아서 서로 대화도 더 하고 문제도 해결해 나가면서 성취감을 느낄 수 있었으면 좋겠다.

라이브 세션은 오늘 했던 문제들을 쭉 해설하면서 사람들을 마구잡이로 지목해서 해설도 시켰는데 다행히 걸리지 않았다.

다섯분정도가 하셨는데 모두 전문용어?를 사용하며 명확하게 대답하셨기 때문에 부담감은 갈수록 더 커졌다.

내일은 전문용어로 대답하는 연습도 미리 해야겠다.

아직까지는 따라가기 어렵다고 생각되지는 않아서 다행이다. 내일 수업을 기대해본다.

라이브 세션에서 질문결과 회고에 있는 이해도 자가점검리스트를 이용해도 괜찮다는 답변을 받아서 회고에 참조해 본다.

Chapter1. 변수
1.변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
2.JavaScript에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
3.=가 "같다"라는 의미가 아니라 할당 연산자임을 이해할 수 있다.
4.크롬 개발자 도구의 console 탭을 이용하여 원하는 값을 출력할 수 있다.
5.변수를 사용하여 보다 효과적으로 구구단을 출력할 수 있다.
Chapter2. 타입
6.원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
7.타입마다 다른 속성과 메서드가 있다는 것을 이해할 수 있다.
8.typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
9.비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.
Chapter3. 함수
10.함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
11.함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
12.함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
13.함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
14.매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
15.같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

1.변수는 자주 변하는 값들을 변수로 설정하고 쉽게 바꿔 원하는 결과를 쉽게 얻을 수 있다.

2.변수를 선언하면 데이터 저장소의 위치 중 하나에 그 이름의 변수가 지정되고 그 변수에 값을 할당하면 저장소에 값이 들어간다.

상수가 아닌 변수이기 때문에 저장소에 들어있는 값은 언제나 바뀔 수 있으며 선언된 변수가 그 데이터의 주소가 된다.

3.=는 선언한 변수에 값을 할당하는 할당연산자로 수학에서의 =과는 기능이 다르다.

4.F12(환경마다 다를 수 있음)로 개발자 도구로 들어가 console 탭을 이용할 수 있다.

5.변수 ex)num을 선언한 후 함수 또는 지시를 복사한 후 num에 할당된 값을 다른 값으로 재할당하면 효과적으로 이용할 수 있다. 

6.자료형에는 8가지 numer(숫자), bigint(10^48-1 큰수), boolean(true,false), undefined(미지정), null(공백으로 지정), string(문자열), symbol(중복값을 제거하기 위해 같은 값을 넣어도 중복되지 않음), object(객체)가 있다.

7.타입마다 들어가야하는 속성(숫자,문자,참-거짓 등)이 있다. ----

8.typeof()를 사용해 타입을 확인할 수 있다.

9.비교시 엄밀한 비교를 하지 않으면 원하는 결과와 반대(참/거짓 둘 뿐이므로)의 결과를 얻을 수 있다. string속성의 '1'과 number타입의 1은 사용하기따라 다르겠지만 대부분은 다른 값이라고 판단하기를 원할 것이다. 또한 ==을 이용할 수 있지만 오류가 많다고 한다.

10.함수는 작은 기능들을 함수라고 하며 함수들을 모아 더 큰 동작의 함수도 만들 수 있다.

11.keyword(function), name(함수 이름; mulTablePrinter), parameter(매개변수; num), body({ ~ })로 구분된다. 매개변수 parameter(매개변수)를 넣어 내부 함수들을 정의하고 argument(전달인자)값을 함수에 투입해 결과를 얻을 수 있다.

12.함수는 리턴을 넣지 않아도 내부적으로는 동작을 하기 때문에 명령을 지정한 후 그 값으로 함수를 호출하면 정상적으로 작동하지만 보통은 리턴을 반드시 넣어 그 함수를 호출시에 결과값이 대입되도록 한다.

13.prameter가 있는 함수의 경우에는 argument가있어야 하기 때문에 ()내부에 parameter 이상의 argument가 할당되야 하지만 지정된 상수 또는 명령만을 반복하는 함수의 경우에는 함수 자체를 사용할 수 있다.

14.매개변수는 함수 내부의 값의 위치 또는 동작을 위한 선언된 값이고 매개변수는 그 선언된 위치에 할당된 값이다.

15.일반적으로 사용하는 것이 선언식이고 회사 또는 프로젝트마다 지정된 규정이 있기 때문에 표현식도 자주 사용할 수 있다. 하지만 화살표 함수는 한줄짜리가 아니면 되도록 사용하지 않는 것이 좋고 한줄짜리라 하더라도 혼동을 줄 수 있기 때문에 지양하는 편이 좋다.

기초라고 하기에는 상당히 어렵고 또 어렵다고 하기에는 간단한 내용들이었다.

단순히 구구단 만들기 또는 데이터 타입 비교는 쉬웠지만 데이터 타입의 8가지 종류를 모두 보자니 처음에는 symbol이 뭘 의미하는지도 헷갈렸고 배우지 않거나 딱 한번 언급된 내용들도 추측해서 풀어나가는 과정이 쉽지는 않았다.

하지만 검색해서 모든 내용을 다 풀었을 때 조금 더 성장했다는 사실을 알게 되서 기쁘다.

기본적으로 제공하는 회고와는 다른 내용이지만 뭘 배웠는지 비교하기에는 자기점검리스트로 작성한 이 회고가 조금 더 복습하기 쉽다고 생각되기 때문에 자기점검 리스트가 제공된다면 이런 방식으로 정리를 해야겠다.