[항해99] WIL 2

항해99 8일차	2022. 5. 16.(월)	알고리즘 기초 주차 스터디(달리기반), CS 발제(조편성) - 책읽기 스터디	D반 - 알고리즘 react 9조, 문제 풀기 21~29        - CS 테즈먼해 배정(8명, 조장) : 매일 오전 11시
항해99 9일차	2022. 5. 17.(화)	알고리즘 기초 주차 스터디(달리기반), CS, 알고리즘 모의고사	D반 - 알고리즘, 문제 풀기 30~34        - CS, 챕터 1, 2 (발표)
항해99 10일차	2022. 5. 18.(수)	알고리즘 기초 주차 스터디(달리기반), CS	D반 - 알고리즘, 문제 풀기 35~40        - CS, 챕터 3
항해99 11일차	2022. 5. 19.(목)	알고리즘 기초 주차 스터디(달리기반), CS, 알고리즘 테스트	D반 - 알고리즘, 문제 풀기 35~40        - CS, 챕터 4, 5
항해99 12일차	2022. 5. 20.(금)	주특기(React) 입문 주차 시작  CS	D반 - React 4조(4명), 환경 설정, 강의 듣기, S.A 제출        - CS, 챕터 6
항해99 13일차	2022. 5. 21.(토)	주특기(React) 입문 주차 CS	D반 - React, 강의 듣기 계속        - CS, 챕터 7, 8
항해99 14일차	2022. 5. 22.(일)	Weekly I Learned 작성, 개인 공부

 

8일 차 오전,

CS(Computer Science) 스터디 시작, 조원이 8명인데 조장됨; 스터디 일지(노션) 정리. 첫날. 인사하고 모이는 시간, 발표 순서 정함. 조장은 1번. 일요일에 책을 조금 읽어둬서 다행. 저자에 대한 호감, 글을 잘 씀. 책은 꽤 재밌음.

---

CS 스터디 기간: 2022.5.17.~6.25.

• 스터디 방법
  1. 📖  ⌜1일 1로그 100일 완성 IT 지식 - 브라이언 W.커니핸/하성창 옮김/인사이트⌟ 일별 목표 챕터 읽기
  2. 발표자는 노션에 정리 또는 블로그 링크 주소 올리기
  3. 다음날 오전 11시 스터디룸 발표 참석하기

발표 시간/장소 : 월~토 오전 11시🕘 , 스터디룸 테즈먼해 테이블

🙋 불참하는 경우, 사전에 알려주기

🙋 발표하는 날 불참하게 되는 경우, 다른 그룹원과 합의하여 발표순서 교체하기

---

8일 차 오후,

웹개발 플러스 4주 차 강의를 조금 들음(4-1~10) , react 과제 거의 완성. 문제 풀기는 계속. 

https://writingcode.tistory.com/21

[항해99] programmers 코딩테스트 연습문제 21~23

https://writingcode.tistory.com/22

[항해99] programmers 코딩테스트 연습문제 24~29

9일 차 오전,

CS 발표 

https://writingcode.tistory.com/20

[항해99] CS 하드웨어 1주차

 

9일 차 오후,

알고리즘 모의고사(게시글: 비공개) https://writingcode.tistory.com/24

문제 풀기 계속

https://writingcode.tistory.com/23

[항해99] programmers 코딩테스트 연습문제 30~34

https://writingcode.tistory.com/25

[항해99] programmers 코딩테스트 연습문제 33

일찍 잔다고 11시에 잤는데...

10일 차 오전,

 새벽 1시 30분에 깨서 잠을 제대로 못 잠. CS 책 정리. 3시에 다시 눈을 붙였는데 한참을 뒤척이다가 결국 일어나서 공부 시작. 어제 어려워서 못 풀었던 문제 다시 봄. 다시 봐도 몰랐으나 답 보고 정밀 분석. 9시 정규 시간(?) 시작하자 피곤이 몰려옴.

 

react 과제 제출함. 간단한 HTML뼈대 만들어 제출하는 것인데, 과제 내용을 꼼꼼하게 살피지 못해서 여러 번 조원의 도움을 받음. 피곤으로 집중력이 많이 흐트러짐.

issue 1: <form>으로 입력 부분을 다 감싸줘야 했는데, css 때문에 박스 분리해서, 기능이 제대로 작성하지 않았던 문제 해결.

issue 2: 이건 해결되었다고 보긴 애매한데, 알림창 뜨는 걸 구현할 필요가 없었는데, 가이드 이미지만 보고 작동시키려 노력함. 과제 자체에서 자바스크립트 쓸 필요 없다고 해서, 하던 부분 삭제하고 제출.

10일 차 오후,

너무 졸려서 낮잠 15분. 문제 풀기 계속. 정규식을 사용해 문제를 풀어봄. 신기한 정규식의 세계! 

달리기반 마지막 40번 문제를 힘들게 풀었는데, 제출하고 다른 문제와 비교하니 내 코드 너무 지저분하다. 코드 성공하고 생략할 것 살펴보는 습관을 들이자!

https://writingcode.tistory.com/26

[항해99] programmers 코딩테스트 연습문제 35~40

11일 차 오전,

알고리즘 스터디 마지막. 1번 문제부터 복습.

CS 스터디... 엄청난 분 등장 prezi로 만든 발표자료라니. prezi를 알게 됨 ㅎ.

                    코드 이용해서 뽑기함. 사이클 순서대로 다 돌고 6주 차 발표자 3명을 더 선정하려고,,

                    전날 replit에서 안건(?) 만들어서 얘기하고, 불참자가 있어서 오늘 뽑음.

                        안건 => 1. 6주차 발표자 선정의 건 , 2. 랜덤 도서관 10분

                        건의는 내가 하고 안건도 내가 올림 (조장이라서ㅋㅋ) 같이 책 읽는 건 거의 회의적이어서 발표자 선정만 하기로. 

                        만들어 놓은 텍스트를 저장한 곳이 없다......... 아무튼 뽑기는 아래 코드 이용 ㅎ 

console.log("발표자는")
//min <= number <= max
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(rand(1, 8))

11일 차 오후,

복습 계속, 오후 3시 시험 시작, 영상을 몇 번을 녹화했는지...

알고리즘 모의고사(게시글: 비공개) : https://writingcode.tistory.com/30

다면 평가 제출. 우리 조 진짜 열심히 했다!! 전출 완료가 가장 빨리 되고, 모두가 엄청 늦게까지 한..!! 우리는... 30대

웹개발 플러스 4주 차 강의마저 들음. 내일부터 주특기(리액트) 입문 주차 시작.

12일 차 오전,

주특기(리액트) 입문 주차 시작. 

새로운 조 편성~ 4조다. 어제 잠깐 오픈된 공지 노션 덕분에 단톡방은 어제 만들어졌었다.! 

CS 스터디

12일 차 오후,

주특기(리액트) 입문 주차 시작.

 

환경설정이 오래 걸렸다. 앱스토어에서 받는 xcode는 거의 다 다운로드 끝나가나 싶었는데, 한참을 그 상태로 머물고 있어서 설치 안 되는 줄 알고 삭제하려 했지만 설치 중엔 삭제도 되지 않았고, 설치가 되는 거 맞나 계속 의문이었는데, 설치됐다. 그저 오래 걸린 거다... 용량이 크긴 하지.  

 

문제는 터미널에서 home brew 설치 후 ,  NVM 설치가 계속 안 되는 것이었다. 뭐 어디 들어가서 뭐 복사해서 붙여넣고 나와라, 이런 거 해도 소용없다가, Node.js 버전을 18... 최신을 받았었는데, 그걸 16.15.. 버전으로 다시 받고, 그리고 복사하라는 것도, 강의자료에는 짧은데, 터미널 자체에서 그 문장을 포함한 어쩌고 저쩌고 쓰여 있는 게 있어서, 그걸 복사해서 환경설정을 바꿨더니 됐다. 2가지를 바꾸긴 했지만,, Node.js 버전의 문제였던 것 같다. 확인까지는 안 해 못해.. 

 

강의 듣기, 1주차 강의는 그래도 끝!

 

https://writingcode.tistory.com/33

[항해99] 리액트 기초반 - 1주차

 

아니 그런데, 오늘 까지 제출하는 S.A(Starting Assignment) 뭔가... 리액트 수강생들 모두 멘붕 =_= 자바스크립트와 관련된 개념 몇 가지를 적어 제출하는 것이었는데, 양이 많았고, 기본 개념도 잘 모르는데 질문은 심화 개념을 묻고 있었달까... 나중에 알고 보니 node.js 수강생들 저번 주 S.A 였다고.. 아무튼 구글링으로 폭풍 검색.. 붙여 넣기만 하려고 하는데도 이해가 너무 안 되어서 힘들었다. 일단 이 정도로 얕게 끝내고.. 자바스크립트 공부하면서 다시 살펴볼 생각이다. 그리고, 이번 S.A는 저번 주 알고리즘 기초 주차 시작 전에 하는 게 더 낫지 않았나.... 싶다. 

 

https://writingcode.tistory.com/31

[항해99] React 입문주차 S.A.

 

소곱창 맛있겠다...

13일 차 오전,

주특기(리액트) 입문 주차. 강의 계속.

CS 스터디

13일 차 오후,

주특기(리액트) 입문 주차. 강의 듣기 계속. 2-3을 아침에 시작했는데, 오후 9시 현재 3-2밖에 오지 못했다. 많은 리액트 수강생들이 강의 내용이 이해가 안 된다고 멘붕 중.

같은 조원이 yarn create react-app 폴더 실행이 안 되어서 애를 먹고 있다. react 실행 화면을 못 본 ㅠㅠ 질문방에 질문 올렸지만, 평일엔 오후 7시 이후 언젠가 답변이 달린다 했지만,, 토요일에 답변이 올지 의문. 얼마나 답답할지 공감이 되어서, 나를 포함해 같은 조원들이 같이 해결법을 찾았지만 해결하진 못했다... 체념하고 일단 쉬라고 하고 바이바이 했는데, 강의를 듣다 보니 직접 해보는 게 많았고, 나는 다시 방법을 강구했다. 그러다 찾은 코드샌드박스!!! 설치하지 않고도 리액트를 연습할 수 있는 방법이 있었고, 실행되지 않는 당사자와 공유하여 답답함과 속상함을 조금 덜 수 있었다. 후, 잠들기 전에 이 사이트라도 찾아서 얼마나 다행인지 ㅎㅎ 3-4까지 수강. 내일을 위해 자야겠다.

 

https://codesandbox.io/s/new

React - CodeSandbox

 

https://writingcode.tistory.com/34

[항해99] 리액트 기초반 - 2주차

 

리액트 종료 관련

vscode에서 프로젝트를 만들고 yarn start 해서 리액트를 실행시키면, 기본으로 localhost: 3000에 연결되는데, 새로 프로젝트를 만들면 3000 포트가 종료되지 않아서인지 이미 3000 포트를 실행 중이니, 다른 포트로 연결하겠냐고 묻는다. 처음엔 뭐 다른 포트 연결하면 되지 싶어서, 3001 포트에 새로 연결시켰는데, 그다음 새 프로젝트를 실행하려고 보니, 다시 다른 포트, 3002 포트에 연결해주는 것.. 종료의 필요성을 이제야 느끼고.. 종료하는 방법을 찾아봤다. 

 

1. ctrl + c 

Ctrl + c로 종료된다고 해서 눌러봤지만 종료되지 않았다. macOS에서도 종료는 ctrl + c 가 맞다고 하는데도. 

 

2. 명령어 입력

구글에 '맥 localhost 3000 포트 종료' 검색했더니 아래와 같이 설명.

현재 열려있는 포트 확인 및 닫기(mac)
1. 특정 포트를 찾아 포트를 닫고 싶으면 다음과 같이 쳐서 PID를 알아낸다. sudo lsof -i :3000. 여기서 3000이 포트번호이다.
2. 위에서 나온 PID를 다음 명령어에 넣으면 포트가 닫힌다. sudo kill -9 PID

 

sudo lsof -1 :3000 입력하면, 패스워드를 묻는다. 컴퓨터에 설정한 비밀번호를 입력하면 정보가 뜨는데, node 옆에 숫자 (PID) 정보가 보인다. 2758이어서, sudo kill -9 2758을 입력했다. 다시 sudo lsof -1 :3000을 입력해서 확인하자, 아무것도 나오지 않았고, 크롬 창에 로컬 호스트 3000을 들어가서 새로고침하니 페이지를 찾을 수 없다고 나왔다. 종료 성공. 그렇게 3001, 3002도 닫았다. 

 

ctrl + c를 사용한 종료는, 터미널을 새로 열었을 때는 안 됐는데, 새로고침이랄까? 줄 추가라고 해야 하나? ctrl+c가 다른 단축키로 작동하는 것 같았고...

기존 터미널,,, 그러니까 yarn start로 3000 포트 연결시킨 터미널에서 마지막 메시지 webpack complied successfully 밑에 ctrl +c를 누르는 경우 정상적으로 종료되었다. 

=> 교훈은 1) 처음 연결시킨 터미널 창 끄지 말기 (서버 종료는 그 창에서..)

                   2) vscode 종료하기 전에 서버 종료 꼭 하기..!

 

FAQ에서 찾아낸 팁(?) 

Q. VS Code에서 자동 완성이 안됩니다!

A. 우측 하단(파란색 바 부분!) javascript로 되어 있는 부분을 클릭해주세요!

그리고 나오는 셀렉트 박스에서 javascript react로 변경해주시면 끝!

 

vscode에 설치한 패키지 정리 (그냥 궁금해서 확인함. 언제 이렇게 많이 설치됐지... 무언가와 같이 설치되는 것도 있는 것 같다.)

 

---

#자바스크립트의 ES란? ES5 와 ES6 문법 차이는?

 

ES == ECMAScript의 약어.

ECMAScript == 표준화된 스크립트 프로그래밍 언어.

=> 자바스크립트를 표준화하기 위해 만들어짐. 다른 언어도 포함하지만 자바스크립트의 표준 규격이라고 이해하면 될 듯. 더 풀어서 얘기하면, 브라우저에서 동작하는 걸 만들 때 필요한 문법사항을 잘 정리한 문서라고 봐도 됨.

ECMA스크립트 또는 ES란,  Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어로, 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. 웹의 클라이언트 사이드 스크립트로 많이 사용되며 node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. (위키피디아) 

 

1995년 넷스케이프社에서 자바스크립트를 개발해 출시했는데, 마이크로소프트社가 이를 보고 자바스크립트를 따라한 언어 JScript를 내놓음. 처음엔 거의 비슷한 문법이었지만 시간이 지날수록 차이가 생겼고 각각의 언어는 각 회사에서 만든 브라우저에서만 제대로 작동하게 되었음. 넷스케이프社는 ECMA International에 찾아가 자바스크립트의 표준화를 만들자고 제안했고, 1997년 ECMAScript 1이 나옴.

관련 역사는 위키피디아 참고.

 1996년 3월, 넷스케이프에서 넷스케이프 네비게이터 2.0을 출시하면서 자바스크립트를 지원하기 시작했다. 웹 페이지 동작을 향상시키는 언어로서 자바스크립트의 성공은, 마이크로소프트가 이와 "적당히" 호환되는 J스크립트를 개발하는 계기가 되었다. J스크립트는 1996년 8월, 인터넷 익스플로러 3.0에 포함되어 출시되었다.
 넷스케이프는 표준화를 위해 자바스크립트 기술 규격을 Ecma 인터내셔널에 제출하였고, 이 규격에 대한 작업은 ECMA-262의 이름으로 1996년 11월부터 시작됐다. ECMA-262의 초판은 ECMA 일반 회의에서 1997년 6월 채택됐다. (위키피디아) 

ECMAScript는 업데이트를 거듭하여 현재 10판(ES2019)까지 나왔는데, ES5와 ES6가 나올 때 많은 변화가 있었다고. 변경 사항이 많으므로 알아둘 필요가 있음. 현재는 ES5는 거의 쓰이지 않지만, 예전에 만들어둔 코드를 만날 수 있으므로 ES6와의 차이를 알고 있어야 한다.

 

표: ECMA-262 판본 주요사항 (출처: 위키피디아)

출판일	이름	이전 판과의 차이점
1	1997년 6월		초판
2	1998년 6월		ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경.
3	1999년 12월		강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등.
4	버려짐		4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.
5	2009년 12월		더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.
5.1	2011년 6월		ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.
6	2015년 6월	ECMAScript 2015 (ES2015)	6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 "ECMAScript Harmony" 혹은 "ES6 Harmony" 등으로 불리기도 한다.
7	2016년 6월	ECMAScript 2016 (ES2016)	제곱연산자 추가, Array.prototype.includes
8	2017년 6월	ECMAScript 2017 (ES2017)	함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.
9	2018년 6월	ECMAScript 2018 (ES2018)	Promise.finally, Async iteration, object rest/spread property 등.
10	2019년 6월	ECMAScript 2019 (ES2019)	Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.

 

ES5와 비교하여 변화된 ES6의 문법

 

ECMAScript 5판(ECMA-262 5 판 으로 발행됨)은 브라우저 구현에서 일반적이 된 언어 사양에 대한 사실상의 해석을 성문화했으며 3판 발행 이후 등장한 새로운 기능에 대한 지원을 추가했습니다. 이러한 기능에는 접근자 속성, 객체의 반사 생성 및 검사, 속성 속성의 프로그램 제어, 추가 배열 조작 기능, JSON 객체 인코딩 형식 지원, 향상된 오류 검사 및 프로그램 보안을 제공하는 엄격 모드가 포함됩니다. 5판은 2009년 12월 Ecma 총회에서 채택되었습니다.

 대규모 응용 프로그램, 라이브러리 생성, 다른 언어의 컴파일 대상으로 ECMAScript 사용에 대한 더 나은 지원 제공이 포함됩니다. 주요 개선 사항 중 일부는 모듈, 클래스 선언, 어휘 블록 범위 지정, 반복자 및 생성기, 비동기 프로그래밍에 대한 약속, 구조 분해 패턴 및 적절한 꼬리 호출을 포함합니다. 내장된 ECMAScript 라이브러리는 이진 숫자 값의 맵, 세트 및 배열을 포함한 추가 데이터 추상화를 지원하도록 확장되었으며 문자열 및 정규식의 유니코드 추가 문자에 대한 추가 지원도 지원합니다. 내장 기능은 이제 서브클래싱을 통해 확장할 수 있습니다.
(ECMA-262 6 판)

Some of its major enhancements include modules, class declarations, lexical block scoping, iterators and generators, promises for asynchronous programming, destructuring patterns, and proper tail calls. The ECMAScript library of built-ins has been expanded to support additional data abstractions including maps, sets, and arrays of binary numeric values as well as additional support for Unicode supplemental characters in strings and regular expressions. 

 

1.  let , const 추가

var는 선언하기도 전에 쓸 수가 있고, 함수 레벨 스코프로 선언이 된다는 단점이 있었음. 이를 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const가 추가됨.

 

=> [항해99] React 입문주차 S.A. 글에서 정리했었음

 

2. 화살표 함수 Arrow function 추가

함수 표현식을 화살표 함수로 간결하게 표현할 수 있게 됨. 

//ES5
var execute = function  (v) {
    if (v % 5 === 0)
    console.log(v)
};

//ES6
let execute  = (v => {
    if (v % 5 === 0)
    console.log(v)
})

 

3. Destructuring assignment 구조 분해 할당

 

객체나 배열에서, 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정.

// 객체에서 Spread 사용
const obj = {
 firstName: 'world',
 lastName: 'hello'
};
const { firstName, lastName } = obj;
firstName // world
lastName // hello

 

4. 기본값 매개변수 Default parameters 추가

 

{function printMessage(message = ‘default message’) {

     console.log(message);

}

 

5. ?: Ternary Operator 추가 

condition ? exprIfTrue : exprIfFalse

6. 전개 구문 Spread syntax 추가

 

 […array, {key: value}] { …object } […arr1, …arr2] { …obj1, …obj2 } 

 

7. 템플릿 문자열 Template Literals 추가

`(backtick)` 이용. 문자열 대체( ${} ). 다중 행 문자열 가능(줄바꿈).

 

8. 모듈화 지원 

모듈이란 재사용하기 위한 코드 조각.

모듈 스코프를 가지며, export, import 키워드로 사용.

 

9. 클래스 Class 추가

 

Class 키워드 도입. 호이스팅이 let, const 키워드 처럼 동작.

 

10. 프로미스 promise

 

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. (mdn)

참고 ↓

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

++ ES6의 브라우저 호환성

인터넷 익스플로러 빼고 es6를 모두 지원. 인터넷 익스플로러는 전세계 1%도 안 되는 정말 소수의 사용자들이 쓰고 있으므로, 인터넷 익스플로러를 지원해야 한다면, 바벨을 이용해 es6 이상으로 개발하고 나중에 배포할 때 es5로 내려서 개발할 것. (드림코딩)

 

(참고)

https://262.ecma-international.org/6.0/

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

https://youtu.be/wcsVjmHrUQg

https://hbsowo58.tistory.com/407

https://jusungpark.tistory.com/53

https://perfectacle.github.io/2017/04/26/js-001-es/

https://agramar.tistory.com/7

 

 

(더보기)

https://ui.toast.com/weekly-pick/ko_20200409