2. 브라우저는 캐싱된 DNS 기록들을 통해 www.google.com에 대응되는 IP 주소가 있는지 확인한다.

DNS(Domain Name System) : URL들의 이름과 IP주소를 저장하고있는 데이터베이스

인터넷에 있는 모든 URL들은 고유의 IP주소가 지정되어있음

→ 이 IP주소를 통해 해당 웹사이트를 호스팅하고있는 서버 컴퓨터에 접근 가능

즉, DNS 는 전화번호부와 비슷한 역할을 하는데, 웹사이트의 이름들과 웹사이트에 접근하기 위해 필요한 IP주소를 저장하고있음

ex) 구글의 경우 구글을 사용하는 사용자가 매우 많기 때문에 구글의 서버 IP주소는 여러개

DNS의 가장 큰 목적은 사람들에게 편리함을 주기 위함

→ 숫자로 된 IP주소를 작성해도 원하는 웹사이트에 접속할 수 있지만, 매번 랜덤해보이는 숫자들을 검색하는 것은 매우 복잡한 일

→ 사람은 네이버, 다음, 구글처럼 이름을 외우는 것에 더 친숙하기때문

→ DNS 는 사람들이 웹사이트 주소에 쉽게 접속할 수 있게 매핑해주는 역할

www.google.com을 검색하면 브라우저는 DNS기록을 4가지 캐시에서 확인

1. 브라우저 캐시
   • 브라우저는 일정기간동안(유저가 이전에 설정한)의 DNS 기록들을 저장하고있음
   • DNS query가 이 곳에서 가장 먼저 실행
2. OS 캐시
   • 브라우저 캐시에 웹사이트 이름의 IP주소가 발견되지 않았다면, 브라우저는 systemcall을 통해서 OS가 저장하고 있는 DNS 기록들의 캐시에 접근
3. router 캐시
   • 컴퓨터에 DNS 기록을 찾지 못하면 브라우저는 DNS기록을 캐싱 하고 있는 router와 통신해서 찾으려고 함
4. ISP 캐시
   • 마지막으로 ISP 캐시 확인
   • ISP는 DNS서버를 구축하고있고 브라우저가 마지막으로 DNS기록이 있기를 바라며 접근

3. 요청한 URL이 캐시에 없으면, ISP의 DNS서버가 www.google.com을 호스팅하고 있는 서버의 IP주소를 찾기 위해 DNS query를 날린다.

www.google.com 에 접속하기 위해서는 IP주소를 반드시 알아야 함

DNS query 의 목적은 여러 다른 DNS 서버들을 검색해서 해당 사이트의 IP주소를 찾는 것

이러한 검색 ⇒ recursive search

IP주소를 찾을때까지 DNS 서버에서 다른 DNS 서버를 오가면서 반복적으로 검색하던지 찾지 못해 에러가 발생할 때까지 검색을 진행

이 상황에서, ISP의 DNS 서버를 DNS recursor 라고 부르고 인터넷을 통해 다른 DNS 서버들에게 물어 도메인 이름의 올바른 IP주소를 찾는데 책임을 갖고 있음

다른 DNS 서버들은 name server라고 불림 (웹사이트 도메인 이름의 구조에 기반하여 검색하기 때문)

도메인 이름 구조에 기반해서 검색한다고 하면 이해하기 어려워보이지만 원리는 매우 간단

[도메인 이름들의 구조 사진]

우리가 마주하는 웹사이트 URL들은 third-level domain , second-level domain , top-level domain 을 가지고 있음, 각 레벨별로 자신들만의 name 서버가 있고 여기서 DNS look up 프로세스 중에 쿼리가 진행됨

www.google.com 를 검색하면 먼저 DNS recursor 가 root name server에 연락

root name 서버는 .com 도메인 name server로 리다이렉트

.com name server 는 [google.com](http://google.com) name server 로 리다이렉트

[google.com](http://google.com) name server 는 DNS 기록에서 www.google.com에 매칭되는 IP주소를 찾아 DNS recursor로 보냄

⇒ 이 모든 요청들은 작은 데이터 패킷들을 통해 보내짐

패킷 안에는 보내는 요청의 내용과 DNS recursor 의 IP주소가 포함되어있음

이 패킷들은 원하는 DNS 기록을 가진 DNS 서버에 도달할 때까지 클라이언트와 서버를 여러번 오감

패킷들이 움직이는 것도 routing table 에 기반

routing table 을 통해 어떤 길로 가야 가장 빠른지 확인 가능

만약 패킷이 도중에 loss 되면 request fail error 가 발생

4. 브라우저가 서버와 TCP 연결한다.

브라우저가 올바른 IP주소를 받게되면 서버와 Connection 을 빌드

브라우저는 인터넷 프로토콜을 사용하여 서버와 연결됨

웹사이트의 HTTP 요청의 경우 일반적으로 TCP 사용

클라이언트와 서버간 데이터 패킷들이 오가려면 TCP Connection 이 되어야 함

TCP/IP 3-way-handshake 라는 프로세스를 통해 클라이언트와 서버 간의 connection

1. 클라이언트 머신이 SYN 패킷을 서버에 보내고 connection을 열어달라고 요청
2. 서버가 새로운 connection을 시작할 수 있는 포트가 있다면 SYN/ACK 패킷으로 수락
3. 클라이언트는 SYN/ACK 패킷을 서버로부터 받으면 서버에게 ACK 패킷 전송

이 과정이 끝나면 TCP connection이 완성되는 것이다.

5. 브라우저가 웹서버에 HTTP 요청한다.

TCP 로 연결되었다면, 데이터 전송

클라이언트의 브라우저는 GET 요청을 통해 서버에게 www.google.com 웹 페이지를 요구

경우에 따라 POST 요청을 사용할 수 있음

• browser identification(User-Agent 헤더)
• 받아들일 요청의 종류(Accept 헤더)
• 추갖거인 요청을 위해 TCP connection을 유지를 요청하는 connection 헤더
• 브라우저에서 얻은 쿠키 정보
• 기타 등등

6. 서버가 요청을 처리하고 response를 생성한다.

서버는 웹서버를 가지고 있음

이들은 브라우저로부터 요청받고 request handler 에게 요청을 전달해서 요청을 읽고 response를 생성

Request handler 는 ASP.NET, PHP, Ruby 등으로 작성된 프로그램 의미

이 Request handler 는 요청과 요청의 헤더, 쿠키를 읽어 요청이 무엇인지 파악하고 필요하다면 서버에 정보 업데이트

response를 특정 포맷(JSON, XML, HTML)으로 작성

7. 서버가 HTTP response를 보낸다.

서버의 response에는 요청한 웹페이지, status code, compression type(Content-Encoding) - 어떻게 인코딩 되어 있는지, 어떻게 페이지를 캐싱할지(Cache-Control), 설정할 쿠키가 있다면 쿠키, 개인정보 등이 포함된다.

샘플 HTTP 서버 response는 다음과 같다.

위 response의 첫줄은 status code를 나타낸다. Status code란 현재 response의 상태를 의미하고 총 5가지의 종류가 있다:

• 1xx은 정보만 담긴 메세지라는 것을 의미
• 2xx response가 성공적이라는 것을 의미
• 3xx 클라이언트를 다른 URL로 리다이렉트함을 의미
• 4xx 클라이언트 측에서 에러가 발생했음을 의미
• 5xx 서버 측에서 에러가 발생했음을 의미

8. 브라우저가 HTML Content를 보여준다.

브라우저는 HTML content를 단계적으로 보여준다.

처음에는 HTML의 스켈레톤(기본 틀)을 렌더링한다.

그 다음에는 HTML tag들을 체크하고 나서 추가적으로 필요한 웹페이지 요소들을(이미지, CSS 스타일시트, Javascript 파일, 등) GET으로 요청한다.

이 정적인 파일들은 브라우저에 의해 캐싱이 되서 나중에 해당 페이지를 방문할 때 다시 서버로부터 불러와지지 않도록 한다.

그 다음 www.google.com의 모습이 보이게 된다.

www.google.com을 검색하고 웹페이지가 뜰 때까지 엄청 많은 일들이 일어나지만, 이 모든 일들이 1초도 되지 않아서 완료가 된다.

• 타입명의 값이 유일
• undefined 타입의 값은 undefined가 유일
• null 타입의 값은 null이 유일

undefined

• 원시자료형 undefined로 분류
• 선언한 후에 아무것도 할당받지 않은 상태를 의미
• var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 됨
• 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 내버려두지 않고 js엔진이 undefined로 초기화
• 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환
• 변수를 참조했을 때 undefined가 반환된다면 선언 이후 값이 할당되지 않은, 초기화되지 않은 변수인 것
• 개발자가 의도적으로 할당하기 위한 값이 아니라 js엔진이 변수를 초기화할 때 사용하는 값

  var a;
  console.log(a);
  console.log(typeof a); // undefined 출력

null

• 원시자료형 null로 분류
• js는 대소문자를 구분하기 때문에 Null, NULL 과 다름
• 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
• 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미
• 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것 의미
• js엔진은 누구도 참조하지 않은 메모리 공간에 대해 가비지 콜렉션 수행

  let b = null;
  console.log(b);
  console.log(typeof b); // object 출력

시작

신입 프론트엔드 개발자로 취뽀에 성공하고, 정말 4개월이 우당탕탕 지나갔다. 올해 상반기 회고도 못썼는데 3개월 수습기간도 끝났고… 더 늦기전에 회고를 작성해야겠다는 생각에 글을 쓰게되었다.

대학생활이 끝나고…

나는 컴퓨터소프트웨어공학을 전공하고 올해 2월에 졸업을 했다.

대학생활동안 학과 동아리, 오케스트라 동아리, 신입생 멘토, 연구실, 과학생회, 근로, 과대, 교직이수, 대외활동 등 정말 여러가지 활동에 참여하면서 열심히 대학생활을 했다고 생각했는데 막상 4학년 종강까지 하고나니 뭘 해야할지, 뭘 하고싶은지 고민도 됐었다. 학기가 끝나고나서는 집에서 지내면서 관심있던 프론트엔드 쪽을 공부하고 원티드에서 진행하는 프리온보딩 프론트엔드 코스도 진행하면서 지냈다. 이 때 다른 사람들과 소통하는 법도 배우고 기술적으로도 성장할 수 있는 계기가 된 것 같다. 원티드 프리온보딩 코스는 따로 회고를 작성해두었다.

코스가 끝난 동시에 코스 이수 조건인 연계 기업 지원이 시작 되었는데, 초반에는 면접 경험도 많이 없었고 정말 많이 긴장하고 버벅댔다. 거의 버벅진트 ..

그렇지만 지금 생각해보면 결과적으로 정말 많이 성장했던 계기가 된 것 같다. 이수 조건이라는 이유로 거의 10개 기업에 지원을 하게 되었는데 이로써 면접 경험이 생겼고, 부딪히는 기회가 되었다. 면접을 볼수록 스스로도 나아지는 모습을 보았고, 예상 질문이나 내가 무엇이 부족한지, 무엇을 공부해야 할 지 알 수 있었다. 그렇게 조금은 자신감이 붙었다.

제주도 살기(4.20~5.2)

기회가 되어 제주도에서 약 2주동안 살았다. 놀러갔다기보다는 반토막 한달살기 체험, 힐링, 생각 정리, 취준생 화이팅이 키워드였는데 그래서 주로 바다가 보이는 카페에서 공부하고, 온라인으로 면접도 보고, 맛있는 것도 먹으면서 잊지못할 추억을 만들고 왔다. 저녁에 시장에서 사온 딱새우에 맥주 한잔하면서 야구나 영화볼때 생각하면 지금도 그 행복함이 생생하게 느껴진다. ㅎㅎ 주말에는 관광지도 가고 유명한 해변이나 맛집, 승마체험도 하면서 재밌는 시간을 보낼 수 있었다. 아! 그리고 한라산 등반도 했다. 아무런 보호대 없이 가서 이후 몇주는 고생했지만… 평생 잊을 수 없는 기억으로 남았다. 그렇게 제주살이는 최종면접(대면)이 잡혀서 원래 예정보다 며칠 더 빨리 올라오게 되면서 끝났다. ㅋㅋ

본격적인 취준

제주도에서 돌아온 이후 정말 하루에 10개 기업에 지원하면서 취준을 했었다. 개발은 정말 공부를 해도해도 해야할 공부가 많았고.. 면접을 보면 또 공부할 부분이 생기고 아무런 소속감없이 계속 개발공부만 하다보니 마음도 조급해졌다. 그래서 56월에는 한 번에 10개씩 기업에 지원하면서 일주일에 23번씩 면접만 보러다녔다. 면접도 계속 경험하다보니 익숙해졌고 내가 공부해야할 부분, 부족한 부분이 점점 더 명확히 보였다.

취뽀!! 신입 프론트엔드 개발자

그렇게 현재 회사에서 합격 통보를 받았고, 신입 프론트엔드 개발자로 입사하게 되었다. 교육계 기업이며 이 회사를 선택한 이유는 회사 규모도 있어 보였고, 안정적으로 보였으며 평소 교육계에 관심이 있었기 때문이다. 또 내가 지원한 부서는 신사업이기 때문에 서비스기업과 SI를 알맞게 경험할 수 있다고 생각했다. 이전에 나는 이미 완전한 서비스 기업은 운영 위주의 업무를 하게 될 것이라고 생각했고, 이 기업은 현재 신사업을 준비중이라 개발 단계이고 내가 직접 서비스를 개발할 수 있다는 점이 좋았다. (제 개인적인 생각입니다.) 6월 27일 입사 날짜를 확정받고 첫 출근을 하게 되었다.

첫 출근

정말정말정말 떨렸다. 10시까지 인사담당자분과 회사 1층에서 만나기로했는데, 출근 연습도 할겸 9시까지 가려는 계획으로 일찍 나왔다. 근데 왠열 .. 출퇴근시간이라는걸 잊었다.. 1시간이면 가는 거리가 2시간이 걸리고.. 이를 계기로 버스는 안된다는 것을 깨닫고 지옥철에 탑승하게 되었다.

정말정말 떨면서 첫 출근을 하고 인사담당자님께 입사 관련 서류를 제출하고 간단한 회사 소개, OJT 일정 등을 듣고 부서로 이동했다. 다들 밝게 맞이해주셨고 간단한 티타임을 가지면서 인사도 나누고 본인 소개도 해주셨다. 첫 날은 그렇게 자리 배정 받고 맥북도 받고!!! 슬랙이나 협업 도구 등을 설치하고 회사를 탐색(?) 하는 시간을 가졌다. 업무에 필요한 내용이나 사용하는 기술 스택도 알려주셔서 관련 레퍼런스 찾아보면서 공부하고 ... 사실 너무 떨어서 하루가 어떻게 갔는지도… 아니 그냥 첫 출근 한 일주일은 기억이 안난다. 다이어리에 매일 그날 하루에 대하여 기록을 했는데 첫 주에 작성한 내용은 스스로 점점 나아지고 있으며 ㅋㅋ 빨리 적응하고 열심히 배워서 일해야겠다는 말들만 온통 적혀있다. 그리고 나는 평소 밥먹는 속도가 느렸어서 이거에 대한 고민도 적혀있다. (지금은 빨라짐)

신입 과제 수행

입사하고 약 한달간 진행할 신입 과제가 나왔고 3주차로 나뉘어 전달해주셨다. 1주차는 4개의 페이지를 구성하는데 그래프나 시계, 애니메이션 효과, 프로덕트 메인 페이지등을 html, css, javascript를 이용하여 수행하는 것이였고 공부하면서 일주일동안 진행했다. 그 이후도 일주일씩 1주차에 수행한 프로덕트 메인 페이지를 리액트 환경으로 옮기고, 브레드 크럼, 반응형, 사이드바 뎁스 등을 구현하였고, 이후에는 퍼블릭 api로 연동하고 상세 페이지 구성 및 검색 등의 기능을 구현하였다. 과제 내용에 대해서는 간단하게 적었지만 코드리뷰를 받으면서 스스로 창피하기도하고 부족함도 정말 많이 느꼈다. 약 한달동안 본 과제를 수행하고 실무에 투입될 준비를 하였는데 시간이 좀 남아서(?) 시니어 분과 스터디(?)(아닌 강의)를 진행했다. 그 동안은 정말 열심히 공부하고 배우고 까먹지 않으려고 했다. 나름 자신감 있는 상태로 입사했는데 한달 지난 나의 모습은 자신감이 바닥이었고 자신감이 떨어지다보니 긴장해서 말도 잘 안나오는 지경까지 되었었다 … 진짜 최악이군..

수습평가

3개월의 수습기간이 있었고 팀원들의 평가를 받아 통과여부를 결정한다. 스스로 돌이켜봤을 때 정말 아쉬움이 많이 남았다. 좀 더 열심히 잘 할 수 있었다고 생각하고, 너무 긴장하고 너무 굳어있는 모습을 많이 보였다. ‘질문도 잘 해야한다’는 생각에 적극적인 모습을 보이지 못했고 커뮤니케이션 모습도 부족했었다. 결과적으로는 통과했지만 아직까지도 스스로에 대한 실망감이 남아있고 이 감정을 꼭 까먹지 말아야겠다고 생각했다. 시니어분은 지금까지도 항상 조급해하지말고 긴장하지말라고 얘기해주신다. (말처럼 쉬운 것만은 아니지만) 이는 정말 감사히 여기면서 꼭 크게 성장해야겠다는 다짐으로 이어진다. 요즘은 내가 운이 좋았다는 생각도 든다. 신입이라서 가능한 현재 모습을 꼭 스스로 알고 빠르게 성장하는 사람이 되어야겠다.

현재

지금은 약 4개월정도 되었고, 실무에 투입되어 코드리뷰를 받으면서 개발하고있다.

신사업이기 때문에 업무 관련하여 글을 작성하기 조심스럽고, 혹시나 하는 마음에 최대한 내가 느낀 점, 든 생각을 위주로 정말 솔직하게 작성했다. 이 글을 나중에 1년뒤, 2년뒤에 봤을 때 또 느끼는 것이 있을 것이라고 생각하며 많이 성장했을 거라고 믿는다. 지금까지를 돌아보며 작성한 회고를 바탕으로 앞으로 나는 !!

• 질문 적극적으로 하기
  • ‘질문을 너무 남발하면 안된다’, ‘질문도 잘 해야한다’는 말에 꽂혀서 소극적인 모습을 보였지만 혼자 끙끙대고, 이게 길어지고, 또 내가 잘못된 방법을 택했다면 결과적으로 더 안좋은 것이니 최대한 스스로 고민해보고 잘 정리해서 질문하도록 하기
• 출퇴근 시간 효율적으로 이용하기
  • 출퇴근 시간이 매주 목요일 재택근무 제외하고 왕복 4시간이다. 일주일이면 16시간. 이 시간을 효율적으로 잘 이용하도록 해보자. 코딩은 못하더라도 기술 블로그나 유튜브, 등등 …
• 기록하기
  • 까먹지 않는 것이 중요하고 까먹더라도 나중에 다시 보고 기억할 수 있도록 기록하는 습관은 잊지말자! 공개적으로 기록하면 더 좋고!

를 목표로 성장하는 사람이 되어야겠다. 두서없이 작성한 글이지만 내 스스로를 돌아보는 뜻깊은 시간이었다.

커리큘럼도 다양한 경험을 할 수 있어 보였고, 매주 2개씩 나오는 과제들로 빡세게 학습할 수 있을 것 같아서 지원하게 되었다.

또 이수 조건이 연계 기업에 70% 이상 지원이기 때문에 취업을 준비하는 나에게는 꼭 필요한 경험 같았다. (면접 볼 수 있는 기회니까!)

지원 과제

지원 서류는 본인의 원티드 이력서와 실력 확인을 위한 과제였다.

이력서는 이전에 작성해놓았던 이력서로 제출했고, 과제는 원티드 메인 홈페이지의 상단 영역을 React 기반으로 클론하는 과제를 진행했다.

처음에는 간단해보였지만 기간도 짧았고, 리액트가 익숙치 않았던 때라 라이브러리 없이 슬라이더 구현하는데 특히 어려움을 느꼈다. 반응형도 처음 구현해보았고 ... 과제하면서도 꽤나 어려워했던 것 같다.

완벽하게 구현하진 못했지만 할 수 있는 만큼 최대한 진행하여 마감 시간에 맞춰 제출할 수 있었다.

(사실 오후 7시까지라 제출하고 좀 더 수정하려고 리포지토리를 비공개로 해놨었는데 전화와서 바로 공개했다 . ㅎㅎ)

코스 진행

2022.1.24 ~ 2022.3.11

약 6주의 기간이지만 중간에 명절도 있었고 마지막 주는 기업 채용 설명회였기 때문에 실제로 활동한 기간은 약 4주이다.

커리큘럼

이수 조건

• 참가 기업의 70% 이상 지원
• 동료 피드백 및 설문
• 출결(2회 이하 결석)

지원할 때 30만원을 결제했고, 코스를 완주할 시 전액을 돌려주는 방식으로 진행되었다. 책임감 있는 지원과 참여를 위해 보증금 제도로 한 것 같다. (중간에 포기하고 싶었던 적도 있었어서 ㅋㅋ 꽤나 좋은 제도였던 것 같다. ㅋㅋ)

완주자 혜택

• 원티드 인증뱃지
• 커리어 성장을 위한 Wanted+ 3개월 구독권
• 각종 유/무 컨퍼런스 초대
• 채용설명회 초대, 취업 시 채용보상금 50만원

활동 방식

일주일에 2번 2시간씩 온라인 세션을 진행했고, 출결에 반영되었다. 사실 지금 다시 보면 커리큘럼 내용을 2시간 만에 진행한다는 것이 당연히 말이 안되는 거였다.. 특히 세션 때 전체적으로 팀 과제 리뷰도 같이 진행하고, 끝날 때 쯤에는 새로운 과제 설명, 해당 과제에 대한 질문을 같이 받았기 때문에 학습 내용은 정말 간단하게 기본 개념을 짚어주는 식으로만 진행되었다. 날마다 세션 내용과 관련 있는 기업 과제가 부여되었고 대부분의 기술 스택에 대한 경험이 없었던 나는 과제를 부여 받았을 때부터 공부하느라 급했던 것 같다.

보통 과제는 월요일 14시 세션 마칠 때 나와서 수요일 10시까지 제출, 목요일 14시 세션 때 또 나와서 토요일 14시까지 제출하는 식으로 매주 반복했다.

코스가 진행되는 동안은 회의하고 공부하고 또 회의하고 개발하고 하루하루 바쁘게 보냈던 것 같다. 이렇게 진행되다보니 부트캠프 느낌을 많이 받았고, 단기간에 빠르게 성장하는 계기도 되었지만 시간이 부족하다보니 이해하지 못한 채로 가져다 쓰는 모습도 보였던 것 같다.

멘붕의 연속

활동을 돌아보자면... 첫날 OT때 팀을 확인했고, 코스가 끝날 때까지 한 팀으로 진행되었다. 팀당 4~5명이었고 우리 팀은 4명이었다. 팀장은 돌아가면서 진행하기로 하고, 첫날부터 바로 팀 과제가 있었기 때문에 인사와 소개는 짧게 나누고 회의하고 개발을 진행했다.

첫 과제가 제일 힘들었던 것 같다. 2명씩 라이브쉐어로 페어프로그래밍을 진행했는데 엄청나게 어려운 과제는 아니었는데도 당장 1~2일 안에 완성해서 제출 해야한다는 것과 나름 리액트 공부를 꽤 했다고 생각했는데 내가 접해보지 않은 스택들을 당장 사용해야했고, 각자 태스크를 분담하여 내가 맡은 일을 시간 안에 완성시켜야 했기 때문에 정말 멘붕이 왔던 것 같다. 다들 첫 과제다보니 삐걱거리기도 했고 거의 밤새는 식으로 진행하여 체력적으로도 힘들었다. 첫 과제부터 정말 멘붕이었다 ...

나아지는 나

첫 과제에서 멘붕이 많이 왔지만, 이 코스를 합격했을 때 엄청 좋아했던 내 모습이 떠올랐다. ‘분명 예상했던 모습이고 당연히 이만큼 빡셀줄 알았으면서 뭘 힘들어해?? 힘들다고 생각하는게 더 스트레스야!!’ 라며 마음을 다잡고 이왕 하는거 진짜 열심히 제대로 해보자고 마음먹고 두번째 과제부터 잘 진행할 수 있었던 것 같다. 좀 더 공격적으로 컴퓨터 앞에 계속 앉아있었고 팀원들과도 많이 소통하려고 노력했다.

연속된 과제로 배운 것

마음을 다잡고 그렇게 매주 2개씩 과제를 진행했다. 스스로 개발을 대하는 태도가 달라졌다고 느꼈고, 작은 협업을 배웠다. 컴퓨터 앞에 오래 앉아있는 습관도 배웠다. 팀원들에게서 배울 점도 많았고 스스로를 반성하기도 했다. 중간에 팀원들끼리 약간의 트러블이 있었는데 협업에서 사소한 배려, 커뮤니케이션이 중요하다는 것도 실제로 경험하니 더 와닿았다. 사용해보지 않은 스택도 먼저 원리를 이해하고 간단한 예제로 경험하여 차근차근 내 것으로 만드는 방법도 배웠다. 매주 진행된 세션과 과제들로 다양한 면에서 배우고 깨달은 것이 많았다.

기업 지원 그리고 면접

내가 이 코스에 지원한 큰 이유인 기업 지원 !!!

코스가 종료되고 한달 안에 연계된 기업들 중 10개 기업에 지원해야했다.

스스로 준비가 더 필요하다고 느꼈고, 바로 지원하지 않고 개인 공부를 조금 더 하다가 10개 기업에 지원했다. (아무래도 수강생들이 몰리다보니 결과가 늦게 나오는 기업들도 꽤 있었다.) 감사하게도 면접 볼 수 있는 기회가 꽤 생겼다. 서류 합격 이후 1차는 온라인으로 직무 면접이 진행되었고 첫 면접에서는 정말 심장이 쿵쾅쿵쾅 아무리 마인드 컨트롤을 해도 떨려서 죽는 줄 알았지만 몇 번 경험해보니 익숙해질 수 있었다. 또 기회가 되어 대면 면접도 경험해보았고 결과에 상관없이 면접 자체는 내가 뭐가 부족한지 알 수 있고 아는 것도 한 번 더 보게 되는 정말 값지고 좋은 경험이었다.

마무리

원티드 프리온보딩 프론트엔드 코스를 통해서 정말 배운 것이 많았다. 개발하는 자세도 더 나아졌고, 기술적으로도 꽤나 성장한 것 같다. 마지막에는 멘토님이 이력서 리뷰, 첨삭도 해주셔서 정말 많이 도와주신다고 느꼈다.

코스 내내 진행한 팀 과제는 중간에 팀원들의 개인 사정으로 진행하지 않게 되어서 아쉬움이 많이 남지만, 짧게나마 협업을 경험할 수 있어서 좋았다. 또한, 코스가 종료되고 작성한 동료 평가지를 읽었는데 스스로 부족하다고 느꼈던 나에게 써준 코멘트들을 보고 다시 한번 동기 부여가 되었다. 팀원들이 작성한 좋은 피드백들을 보고 앞으로 더 열심히 하고 성장해야겠다고 다짐했다.

혼자서 리액트를 공부하거나 클론 앱 등을 만들 때는 단순히 CRA로 제작이 가능하고 전체 구조를 확인하기 편하지만, 실제 실무에서는 사이트 규모에 따라 엄청나게 많은 컴포넌트로 구성이 되어있을 것이고 이후에 내가 투입 되어 이를 다 파악해야 하는 상황도 있을 것이다.

최초 설계 시 의도와 계획, 가이드가 명확하지 않다면 이후 실무처리 과정에서 리액트 구성요소들은 엄청나게 비대하고 복잡해지게 될 것이다. 또한, 정리를 해두지 않으면 이후에 재사용 가능한 컴포넌트가 있음에도 불구하고 활용을 못하는 사태가 벌어질 수 있다.

이러한 문제들을 해결하기 위해서는 프로젝트 구축 전 충분한 고민과 기준을 가지고 설계를 계획하는 것이 중요할 것이다. 또한 내 후임자가 왔을 때, 내 설계 기준을 충분히 이해할 수 있도록 하고, 같이 작업하는 사람이 여럿일 경우 기준을 공유할 수 있도록 가이드가 있어야 할 것이다.

따라서 리액트 컴포넌트와 폴더 구조에는 어떤 것이 있는지 알아보고자 한다.

리액트 컴포넌트 패턴

Presentation - Container Component

Presentation-Container Component 패턴은 과거에 자주 언급되고 활용되었던 패턴이다. Container Component에서 데이터를 처리하고, Presentation Component에서 데이터를 출력하는 형태로, UI와 로직을 분리하여 관리하는 패턴이다. 이유는 하나의 컴포넌트에 api 호출, 이벤트 함수, 로직 등 모든 것이 담겨있으면 파일 하나하나가 엄청 커지고, 유지보수 또한 힘들어질 수 있기 때문이다. 하지만 처음 이 패턴을 소개한 Dan Abramov는 2019년을 기준으로 현재는 이 패턴을 사용하지 말라고 언급하고 있다. Hook 이 등장하며 임의의 분리없이 똑같은 일을 할 수 있기 때문이다.

Custom Hooks

Custom hooks 는 위의 Presentation-Container Component 패턴에서 로직을 hooks로 관리하는 것이다. hooks로 로직을 관리하면 UI 재사용, 로직 재사용까지 가능해진다.

custom hooks 는 로직이 렌더링과 분리되어 있어 이 둘을 연결하는 것은 사용자의 몫이다. 컴포넌트를 올바르게 구현하려면 컴포넌트의 동작 방식에 대한 깊은 이해가 필요하다.

atomic 디자인

아토믹 디자인은 원자, 분자, 유기체, 템플릿, 페이지로 효과적인 인터페이스 시스템을 만드는 것이다. 웹 사이트의 구성 블록이 HTML 요소들이며 이 요소들은 원자로 볼 수 있다. 원자가 결합되어 분자가 되는 것처럼 HTML 요소들은 결합되어 복잡한 페이지를 형성한다.

원자(Atoms) - 버튼, 제목, 텍스트 입력 필드(모든 컴포넌트들의 기초가 되는 블록, 더 이상 분해될 수 없는 필수 요소)

분자(Molecules) - 2개 이상의 원자로 구성, 하나의 단위로 함께 동작하는 UI 컴포넌트의 단순한 그룹

유기체(Organisms) - 분자, 원자 또는 다른 유기체의 그룹으로 구성된 비교적 복잡한 그룹, 이 유기체들은 인터페이스의 개별적인 영역을 형성

템플릿(Templates) - 컴포넌트들을 배치하고 설계의 구조를 보여줌

페이지(Pages) - 실제 컨텐츠들을 배치한 UI를 보여줌, 템플릿의 구체화된 인스턴스

아토믹 구조는 UI 재사용성이 매우 뛰어나다. 하지만 디자인 시스템 구축을 위한 초기 비용이 많이 들고, 로직과 State들을 page 단위에서 props로 내려줘야하는 단점이 있다.

리액트 폴더 구조

리액트는 다양한 폴더 구조가 있다.

• components = 컴포넌트들
• pages = 페이지들
• hooks = hooks들
• style = 스타일
• assets = 이미지, 아이콘 등 정적 파일
• utils = 유틸 함수들
• api = api 목록들
• types = type들(in ts+react)
• store = 전역 상태

자주 사용되는 폴더들은 다음과 같다. 폴더 구조는 리액트 공식문서에서 제시된 구조 두 가지를 예로 살펴보자.

파일의 기능이나 라우트에 의한 분류

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

css, js, 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법이다.

파일 유형에 의한 분류

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

비슷한 파일끼리 묶어주는 방법이다.

또한, 폴더 구조를 정할 때 유의할 점은 너무 많은 중첩을 피하는 것이다.

이렇게 다양한 리액트의 컴포넌트 패턴, 폴더 구조들을 살펴보았는데 그러면 컴포넌트 패턴, 폴더 구조는 어떻게 설계해야할까?

리액트는 수많은 컴포넌트로 이루어져있기 때문에 컴포넌트를 잘 설계하는 것이 리액트 프로젝트를 잘 설계하는 것에 큰 비중을 차지한다.

• 확장성, 재사용성 있는 코드를 만들어야한다.

  의존성이 짙고 목적성이 사라진 코드는 컴포넌트의 특징을 무시한 채 재사용성과 범용성이 부족한 채 작업된 것이라고 할 수 있다.

• 코드를 분리하고 단일 책임을 가지는 컴포넌트를 생성해야 한다.

  재사용성과 범용성을 가지기 위해서는 관심사에 따라 딱 한가지의 역할만 수행시키기를 권장한다.(ex. 단일 책임 원칙) 순수함수의 특성과 같이 동일한 props를 받으면 같은 JSX를 리턴할 수 있어야 한다.

• 외부에 제어를 위임 시키는 것을 고려해야 한다.

  제어를 외부에 위임할수록 코드에 대한 이해 난이도가 높아지고, 가독성이 떨어질 수 있다.

각 컴포넌트 패턴과 폴더 구조의 장단점을 고려하여 해당 프로젝트에 알맞은 패턴, 구조를 계획하는 것은 정말 중요할 것이다.

벌써 2021년이 끝났다!! 시간은 점점 더 빨리 가는 것 같다.😂 2021 회고를 위해 2021을 맞이하며 작성했던 글을 다시 읽어보았다.

2021년을 맞이하며 새해 다짐(?) 글은 요기

2021년에 지키고 싶었던 목표들

• GitHub 잔디밭 채우기(1day 1commit)
• 효율적으로 공부하기
• 부지런한 사람되기
• 공격적으로 덤비기
• 기록하는 습관 가지기

원래 목표들은 이러했는데.... 과연 나는?!

GitHub 잔디밭 채우기(1day 1commit)

2021년 1년동안의 깃허브 잔디밭이다. 1일 1커밋을 외치면서 의식적으로 컴퓨터 앞에 앉으려고 했고, 뭐라도 개발, 공부하려고 했던 것 같다. 결과적으로는 습관적으로 컴퓨터 앞에 앉으려는 태도를 배운 것 같다. 나름 만족!!

효율적으로 공부하기

책상에 앉아있는 시간에 비해 효율적으로 공부하지 못한다는 생각이 들어서 세웠던 목표이다. 쉴땐 제대로 쉬고, 공부할 땐 제대로 공부하는 모습을 원했고 카페나 스터디 카페를 주로 가서 집중하는 시간을 가졌다. 근데 연말에는.. ㅎ 늘어지는 모습을 보였던 것 같다.

부지런한 사람되기

ㅋㅋㅋ 제일 지키지 못했던 목표인 것 같다.ㅠㅠ 일찍 일어나고 일찍 자는 습관을 원했지만 늦게 자고 늦게 일어나는 모습을 많이 보였다. (새벽에 집중이 잘 된다는 핑계.) 확실히 일찍 일어나야 하루가 길다고 생각한다. 이건 지키지 못했다고 봐야지.

공격적으로 덤비기

이건 2021 상반기 회고를 하고 추가된 목표였는데, 뭔가를 접하고 배울 때 좀 더 적극적인 자세로 임해야 한다고 느꼈다. 더 궁금해하고 "왜?" "어떻게?"의 태도를 기르려고 했고 이 목표는 평생 지녀야 할 태도로 가져가야겠다. ㅎㅎ

기록하는 습관 가지기

회고는 정말 좋은 것 같다. 내가 작성했던 글을 보고 그 때의 다짐을 돌아보며 또 한 번의 동기부여가 된다. 회고뿐 만 아니라 학습한 내용 등을 기록하는 습관이 중요하고 예전보다 많이 기록하는 모습을 보였지만 의식적으로 한 행동일뿐 기록하는 "습관" 을 가지지는 못했다. 이 또한 평생 지녀야 할 목표로 가져가겠다. ㅎㅎ

2021년에 나는?

2021년에 나는 스물셋!! 스물셋!! 하면서 대학교 4학년이 되었고 이제는 진짜 내 갈길을 찾아야 한다며 정신차렸다. 나중에 뭐할거냐는 질문에 아직 잘 모르겠다는 대답을 더이상 할 수 없었고 빨리 뭐라도 했어야한다는 마음이 컸다. 마음이 엄청 급했던 것 같다. 이런저런 대외활동, 프로그램 등에 지원했지만 탈락을 여러번 맛보고 기본기부터 다지겠다고 다짐했다.

연구실 탈출

마음 급한 4학년한테는 연구실에서 하는 활동들이 부담이 됐었다. 연구실에서 정말 배운 것도 많고 다양한 것들을 경험하였지만 당장의 나에게는 감당하기 벅찬 일이라고 생각하여 연구실을 나오게 되었고 절대 후회하지 않기로 다짐했다. 나한테 더 필요한, 도움이 되는 것들을 하자는 마음으로 나왔다. 결과적으로는 너무 감사한 경험이었고, 연구실과 관련된 모든 선택이 후회는 없다.

교생실습

컴퓨터소프트웨어공학과에 재학하며 교직이수를 병행하였고, 5월에 모교 중학교로 교생실습을 다녀왔다. 코로나19로 인해 실습 기간은 2주였지만 2주 이상의 값진 경험을 하였다. 2주 내내 온라인 및 오프라인 수업을 진행하였고, 선생님들과도 정말 많이 친해졌다. 좋은 선생님들한테 값진 것들을 배울 수 있었다.

진로 정하기

나중에 뭐하지? 하는 고민이 정말 컸다. 1학년부터 계속된 고민이었고 갈팡질팡 여러 분야를 접해보고 알아보았다. 하지만 확실히 내가 좋아하는게 뭔지, 무엇을 할 때 내가 재미를 느끼고 그것에 푹 빠져 하는지 알지 못했다. 그래! 나는 결과로 내 눈에 바로바로 보이는 게 좋고, 웹 구현할 때 푹 빠져서 시간가는줄 모르고 했던 것 같아! 하는 마음에 웹 프론트엔드로 진로를 정할 수 있었다. 사실 바로 옆에서 많은 조언을 해주는 사람이 있었다. 하지만 갈팡질팡 많이 했다. 자신이 깨닫지 못하면 어쩔 수 없는 것 같다.^_^ 지금 생각해도 그 사람에게 정말 감사하고 미안하지만 그래도 바로 옆에서 바로 잡아주고 응원해줘서 포기하지 않고 지금까지, 아니 앞으로도 달려갈 수 있는 것 같다. 정신차린 나는 더 열심히 할거다.

학술제(졸업작품)

학과 졸업요건인 졸업작품, 졸업논문을 성공적으로 마쳤다. 증강현실을 이용하여 장소에 기록을 남기는 시스템으로 생소한 AR을 다루느라 애먹었던 기억만 남는다. 학술제날까지 떨리는 모습으로 발표를 했던 것 같다. 통과만 해도 감사하다며 겸손한 태도를 가지고 있었지만 학과에서 3등, 우수상을 수상하며 기분좋게 마무리 할 수 있었다!! 막상 학술제, 논문까지 다 끝나니 큰 산을 넘은 기분이라 홀가분했지만 한편으론 허무하기도 했다. 빨리 끝내고 다른 취준을 위한 활동들을 더 해볼걸 하는 마음이 들었고 이젠 정말 졸업이다라는 마음에 더 급해졌던 것 같다. 나 이제 어떡하지?? 하는 마음..?!

해커톤

11월에 학과 선배 추천으로 다른 대학교와 연합으로 진행하는 해커톤에 참가하였다. 학술제 끝나고 바로 연달아서 진행되어 빠르게 공부하기 바빴던 것 같다. 팀에서 1인분 이상은 하자. 하는 마음에 급하게 준비하였고 스스로 많이 부족하다고 느끼는 계기가 되었다. 좋은 팀원들을 만나서 잘 진행한 덕에 대상을 수상한 것도 좋았지만 나에게 많은 자극이 되고, 동기부여가 돼서 "정말 하길 잘했다!" 하는 마음으로 마무리하였다. 리액트에 더 빠지게 된 계기랄까?!

지금

지금 나는 막학기를 마치고 졸업을 앞두는 졸업예정자이자 취준생이다. 회고를 쓰는 이유는 자신을 돌아보며 한 번 더 동기부여가 되고, 앞으로 열심히 뛰어가겠다는 다짐이다. 2021년은 스스로 조금은 성장한 해라고 느껴진다. 하지만 아직 부족하고 배워야 할 것도 많다. 조금만 더 열심히, 시간을 효율적으로 사용할 수 있는, 내가 아는 것을 잘 설명할 수 있는 개발자가 되기 위해 성장해보자! CS공부도 하고, 코딩테스트 준비, 면접 준비, 기술 습득 등 부지런히 뛰어가야겠다!!

2022년 목표

벌써 2022년이라니.. 올해는 취업준비에 힘을 쓰는 시간이 많을 것 같다. 그 외에 조금 구체적인 목표를 세워보고자 한다. 원하는 회사에 취업하는 것은 당연한거고, 이전 목표들에 추가로...

CS 공부, 1일 1알고리즘

개발자로서 CS는 너무나도 중요한 부분이다. 조금씩 되돌아보며 리마인드하는 시간을 충분히 가져야 할 것 같다. 그리고 1일 1커밋에 이은 1일 1알고리즘을 실천해보고자 한다.ㅎ 커밋도 하고 일석이조인듯!

운동하기(체력 기르기!!)

코로나 시작과 함께 운동은 정말정말 안하게 되었고 지금 내 체력은 바닥이다. 나름 운동도 좋아했고 체력도 좋았던 나였는데 요즘 골골대는 나를 보면.. 음.. 건강이 최고라는 생각이 많이 든다. 살도 많이 찌고 근육량이 0이 된 것 같다.ㅎ 건강을 위해 일주일에 3번은 간단하게라도 운동을 해야겠다.

• 홈트레이닝
• 걷기, 가볍게 뛰기
• 스트레칭
• 물 많이 마시기

독서

독서는 인생에서 중요한 것 같다. 어릴 때 책을 많이 읽은 사람과 많이 읽지 않은 사람의 차이도 어느정도 큰 것 같다. 올해는 개발 관련 서적은 물론이고 자기계발을 위한 책들도 꾸준히 읽으려고 한다. 좀 더 성장하는 내가 되자~!!

조금 게을러지고 마음이 해이해지면 지금 쓴 글을 읽고 다시 마음을 다잡고자 한다. 2022년도 화이팅~!!!👍

메모리 생존주기는 프로그래밍 언어와 관계없이 아래 과정으로 동작된다.

1. 필요한 메모리 할당
2. 할당된 메모리 사용(읽기, 쓰기)
3. 해당 메모리가 필요 없어지면 해제

하지만 1, 3번은 저수준 언어에서는 명시적이고, 대부분의 고수준 언어에서는 암묵적으로 작동한다.

음.. 요리로 예를 들어보자. 요리사가 요리를 한다고 할 때, 요리를 하기 위해 식탁에 재료들을 막 올린다. 다 쓴건 치우고 필요없는건 치우고 해야 하는데, 혼자 요리를 하다보면 신경쓰지 못하고 결국 식탁이 가득 차서 요리를 할 수 없을 수도 있다. 이 때 조수가 있다면? 옆에서 알아서 필요없는 재료는 치우고 다 쓴 재료는 버리고 할 수 있다.

프로그래밍에서도 필요한 메모리를 할당하고 사용하고 해제하는데 위의 요리와 연관지어 생각하면 이해가 쉽지 않을까...?

우리는 자바스크립트의 메모리 관리를 알아볼 것이다.

C언어 같은 저수준 언어는 메모리 관리를 위해 malloc()과 free()를 직접 명시함으로써 메모리를 관리한다. 하지만 자바스크립트의 경우 "가비지 컬렉터"가 객체가 생성되었을 때 자동으로 메모리를 할당하고 해당 메모리가 필요 없어지면 자동으로 해제한다.

1. 메모리 할당

값 초기화

프로그래머가 일일이 메모리 할당을 하지 않도록, 자바스크립트는 값을 초기화할 때 자동으로 메모리를 할당

let n = 123; // 정수 담기 위한 메모리 할당
let s = 'abcde'; // 문자열 담기 위한 메모리 할당

let o = {
    a: 1,
    b: null
}; // 오브젝트와 오브젝트에 포함된 값들을 담기 위한 메모리 할당

let a = [1, null, 'abcd']; // 배열과 배열에 담긴 값 담기 위한 메모리 할당

function f(a){
    return a+2;
} // 함수 위한 할당

함수 호출을 통한 메모리 할당

함수 호출의 결과로 메모리 할당이 일어난다.

let d = new Date();
let e = document.createElement('div');

메소드가 새로운 값이나 오브젝트를 할당한다.

2. 값(메모리) 사용

할당된 메모리를 읽고 쓰는 것으로, 변수나 객체 속성의 값을 읽고 쓰거나 함수 호출시 함수에 인수를 전달하여 수행한다.

3. 메모리 해제

할당된 메모리가 더 이상 필요없을 때 할당 해제를 하는데, 해당 단계에서 대부분의 문제가 발생한다. "할당된 메모리가 더 이상 필요없을 때"를 알아내기가 어렵기 때문이다.

위에서 언급한 것처럼, 저수준 언어에서는 메모리가 필요없어질 때를 개발자가 직접 결정하고 해제하는 방식을 사용한다.

자바스크립트와 같은 고수준 언어들은 "가비지 컬렉션(GC)"이라는 자동 메모리 관리 방법을 사용한다. 가비지 컬렉터의 목적은 메모리 할당을 추적하고 할당된 메모리 블록이 더이상 필요하지 않은 시점을 판단하여 회수하는 것이다.

이러한 자동 메모리 관리 프로세스는 궁극의 방법은 아니다. 왜냐하면 어떤 메모리가 여전히 필요한지 아닌지를 판단하는 것은 비결정적 문제이기 때문이다.

가비지 컬렉션

"할당된 메모리가 더이상 필요없을 때"를 찾는 것은 비결정적 문제이다. 가비지 컬렉터들은 이 문제에 대한 제한적인 해결책을 구현한다.

참조(Reference)

가비지 컬렉션 알고리즘의 핵심 개념은 참조이다. A라는 메모리를 통해 B라는 메모리에 접근할 수 있다면 "B는 A에 의해 참조된다."라고 말한다. ex) js에서 모든 객체는 prototype 객체를 암시적으로 참조하고, 그 객체의 속성을 명시적으로 참조한다.

참조-세기(Reference-counting) 가비지 컬렉션

이 알고리즘은 "더 이상 필요 없는 객체"를 "어떤 다른 객체도 참조하지 않는 객체" 라고 정의한다. 특정 객체를 참조하는 객체가 하나도 없다면 그 객체에 대해 가비지 컬렉션을 수행한다.

Mark-and-sweep 알고리즘

이 알고리즘은 "더 이상 필요 없는 객체"를 "닿을 수 없는 객체" 라고 정의한다. Mark-and-Sweep 말 그대로 무엇인가에 표시하고, 정리하는 알고리즘이다. 이 알고리즘은 roots라는 객체의 집합을 가지고 있다.(전역변수 의미 in js)

주기적으로 가비지 컬렉터는 roots로부터 시작하여 roots가 참조하는 객체들, roots가 참조하는 객체가 참조하는 객체들을 접근할 수 있는 객체라고 표시한다. 그 후 접근할 수 없는 객체에 대해 가비지 컬렉션을 수행한다.

⇒ 이 알고리즘은 "참조되지 않는 객체"는 모두 "접근할 수 없는 객체"이지만 역은 성립하지 않기 때문에 참조-세기 알고리즘보다 효율적이라고 할 수 있다.

⇒ 또한, 2012년 기준 모든 최신 브라우저들이 가비지 컬렉션에서 Mark-and-Sweep 알고리즘을 사용한다.

이와 다르게 스레드는 메모리를 서로 공유할 수 있다. 스레드는 코드 내의 함수로 표현할 수 있다. 예를 들어 어떤 프로그램에서 메인 함수는 하나의 스레드가 되는 것이다.

스레드는 실행 흐름의 단위라고 했지만, CPU 입장에서는 스레드가 최소 작업의 단위이고 운영체제 입장에서는 프로세스가 최소 작업 단위인 것이다.

본론으로 가서 멀티태스킹과 멀티스레드를 알아보자!

멀티태스킹

(멀티태스킹은 여러 프로세스가 동시에 실행되는 것처럼 보이지만 그렇지 않다.)

멀티스레드

멀티스레드 장점

• Context-Switching할 때 공유하고 있는 메모리 만큼 자원을 아낄 수 있다.
• 스레드는 프로세스 내의 스택 영역을 제외한 모든 메모리를 공유하기 때문에 통신의 부담이 적어서 응답 시간이 빠르다.

멀티스레드 단점

• 스레드 하나가 프로세스 내 자원을 잘못 건드리면 모든 프로세스가 종료될 수 있다.
• 자원을 공유하기 때문에 동기화 문제가 발생할 수 있다.

프로세스(Process)

스레드(Thread)

컴퓨터에서 실행할 수 있는 파일을 프로그램이라고 하는데,

프로그램이란 파일이 저장 장치에 저장되어있지만 메모리에는 올라가 있지 않은 정적인 상태를 말한다.

이러한 프로그램을 실행하면, 프로그램 파일은 컴퓨터 메모리에 올라가게 되고, 동적인 상태가 된다.

즉, 프로그램이 실행돼서 돌아가고 있는 상태, 컴퓨터가 어떤 일을 하고 있는 상태를 프로세스라고 한다.

다시 말해서, 프로그램은 코드 덩어리 파일! (ex. .exe로 끝나는 파일) 프로그램을 실행하면 그것이 프로세스인 것이다!!

여러개의 프로세스를 돌린다는 것은 아래의 것을 의미한다.

동시성 : 프로세스 하나가 이것저것 작업

병렬성 : 프로세서 하나에 코어가 여러개 달려서 각각 작업

컴퓨터는 프로세스마다 자원을 분할해서 할당한다.

스레드는 프로세스마다 주어진 전체 자원을 함께 사용하면서 프로세스 실행 흐름의 일부가 된다.

다음엔 멀티태스킹과 멀티스레드에 대하여 알아볼 것이다.

webpack에서 제공하는 가장 유용한 기능 중 하나

모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트 가능

모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거

• 전체 로드 중 손실되는 애플리케이션의 상태 유지
• 변경된 사항만 갱신하여 시간 절약
• 소스 코드에서 css/js 수정 시, 브라우저에서 즉시 업데이트(= 브라우저 개발자 도구에서 직접 스타일 변경하는 것과 동일)

작동 방법

In the Application

1. 애플리케이션은HMR 런타임에 업데이트된 내용이 있는지 확인하도록 요청
2. 런타임에서 업데이트된 내용을 비동기적으로 다운받고 애플리케이션에 알림
3. 애플리케이션은 런타임에 업데이트 요청
4. 런타임은 업데이트를 동기적으로 적용

In the Compiler

이전 버전에서 새 버전으로 업데이트할 수 있도록 업데이트를 내보내야 함

1. 업데이트된 매니페스트(JSON)
2. 하나 이상의 업데이트된 청크(JavaScript)

매니페스트에는 새 컴파일 해시와 업데이트된 모든 청크 목록이 포함됨

각 청크에는 업데이트된 모든 모듈에 대한 새 코드가 포함됨

In a Module

HMR은 HMR 코드가 포함된 모듈에만 영향을 미치는 선택적 기능

한 가지 예는 style-loader 를 통해 스타일을 가져오는 것 ⇒ 패치가 작동하기 위해 HMR 인터페이스 구현

In the Runtime

check 는 업데이트 매니페스트에 HTTP 요청

요청 실패 시 가능한 업데이트가 없음을 의미

요청 성공 시 업데이트된 청크 목록과 현재 로드된 청크 목록 비교

모든 모듈 업데이트는 런타임에 저장됨

apply 는 업데이트된 모든 모듈을 유효하지 않은 것으로 표시

유효하지 않은 각 모듈에 대해 해당 모듈 또는 상위 모듈에 업데이트 핸들러가 있어야 함. 그렇지 않으면 잘못된 플래그가 버블링되고 부모도 무효가 됨

어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것

transpiler가 필요한 이유?

모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5 코드로 변환시키는 과정 필요(Babel)

compile과의 차이

Compile

• 입력과 출력의 추상화 수준이 다름
• C언어로 작성된 소스코드를 기계어로 변환

Transpile

• 입력과 출력의 추상화 수준이 비슷함
• Typescript → Javascript, C++ → C, CoffeScript → Javascript

⇒ 이러한 문제를 바탕으로 나온 것이 웹팩의 번들링 개념

번들링(Bundling)이란?

"어떤 것들을 묶는다" 라는 뜻으로, 기능별로 모듈화하나 js 파일들을 묶어주는 것

⇒ 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할(=번들러)

⇒ 서로 연관(의존성)있는 여러 js 파일들을 하나의 번들 파일로 묶어주는 것

(꼭 js파일만이 아닌, 웹팩의 주요 구성요소인 로더(Loader)를 통해 다양한 타입의 파일들도 번들링 가능)

장점

• 이전에는 각 파일들마다 서버에 요청하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 코스트가 줄게 됨

• webpack 4버전 이상부터는 [development], [production] 두 가지의 mode 지원을 하면서, 특히 production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다. (= 상용화된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출 시킬 수 있음)

• webpack의 주요 구성요소인 로더(Loader)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 js 파일을 ES5로 변환하여 사용 가능하게 함. 웹 개발 시 크롬 같은 대중적 브라우저만 고려하는 것이 아닌, 다른 브라우저들에 대해서도 커버 가능

GitHub 가 소개하는 webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

⇒ webpack은 모듈 번들러(묶음체)이다. 브라우저에서 자바스크립트 파일들을 묶어서 사용하는 것을 목적으로, 어떠한 자원(js, css, png, jpg)이나 자산 등을 전송, 구축, 패키징이 가능하게 만드는 유용한 도구이다.

즉, webpack은 브라우저 상에서 자바스크립트 코드로 구성된 프로그램을 실행할 때 이에 필요한 자원들을 프로그램의 목적에 맞게 '모듈(Module)화'된 내용으로 제공해주는 것

구성 요소

1) Entry

JavaScript (또는 HTML, CSS, png) 파일로 이루어진 여러 모듈들을 포함하고 있는 파일을 정의할 때 사용

만약 애플리케이션이 App.js라는 파일 내부에 선언된 여러 모듈들로 실행된다면, App.js가 webpack의 Entry 파일

→ 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)를 중심으로 번들링 되는 것

→ 선언 방법 : 루트 경로(node_modules이 설치된 directory)에 webpack.config.js파일 생성해서, 내부에 정의

// 파일명: webpack.config.js
module.exports = {
        entry: "./App.js",
}

2) Output

webpack의 번들링 결과물을 어디에 만들어낼 것인지, 어떤 이름을 만들 것인지 정의할 때 사용

→ 선언 방법: Entry와 동일한 루트 directory에 dist 폴더 생성해두고, bundle.js라는 이름으로 output 지정

// 파일명: webpack.config.js
module.exports={
    entry: './App.js',
    output: {
            path: './dist',
            filename: 'bundle.js'
    }
}

3) Loader

webpack은 js 또는 JSON만 이해 가능한데, 이외의 다른 타입(HTML, CSS, png 등)의 파일들을 webpack이 이해할 수 있도록 변환해주는 역할

module.exports={
    entry: './App.js',
    output: {
            path: './dist',
            filename: 'bundle.js'
    },
    module: {
        rules:[ 
            {
                test: /\.txt$/, // 적용할 파일의 타입 선언
                exclued: /node_modules/, // 로더 적용 제외
                use: 'raw-loader' // 적용할 로더 정의
            }
        ]
    },
}

4) Plugin

번들링(Bundling) 된 결과물에 대해서 적용할 수 있는 속성 - 난독화를 하거나, 번들된 css, js 파일들을 html 파일에 주입하는 역할

로더(Loader)의 경우, 파일 단위로 작업이 이루어짐

module.exports={
    entry: './App.js',
    output: {
            path: './dist',
            filename: 'bundle.js'
    },
    module: {
        rules:[ 
            {
                test: /\.txt$/, // 적용할 파일의 타입 선언
                exclued: /node_modules/, // 로더 적용 제외
                use: 'raw-loader' // 적용할 로더 정의
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
    ]
}

webpack 장점

• 의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요X
• HTML 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움을 줄일 수 있음

<script src="/js/test.js"></script>
<script src="/js/api.js"></script>
<script src="/js/tags.js"></script>
<script src="/js/time.js"></script>
<script src="/js/search-box.js"></script>
<script src="/js/fragments.js"></script>
<script src="/js/testjs.js"></script>

⇒ 이렇게 모든 페이지마다 일일이 필요한 js파일들을 하드코딩 해야함..

• 모듈 시스템 관리
• 로더 사용 (webpack은 js밖에 모르는데, js파일 뿐만 아니라 이미지, 폰트 등도 전부 모듈로 관리. js가 아닌 파일을 webpack이 이해할 수 있게 변경하는 역할이 로더)
• 빠른 컴파일

전통적인 과거의 웹 사이트는 문서 하나에 전달되는 파일의 용량이 작았음

→ 어떤 요소를 한 번 클릭하면 Server에서 완전히 새로운 페이지를 전송 (용량이 작았기 때문에 부담X) → SSR(Server Side Rendering, 서버 사이드 렌더링) 방식으로 화면에 보여질 리소스를 Server로 요청하고, 받아와서 렌더링

하지만! 시간이 흘러 웹 사이트가 고도화되어 한 페이지 각각의 용량이 커졌고, 매번 새로운 페이지를 전달하는 것이 점점 버거워짐

이러한 문제를 해결하기 위해 SPA 등장!

SPA(Single Page Application)

SPA는 'Single Page Application'의 약자, 단일 페이지로 구성된 웹 애플리케이션 기존 SSR방식과 다르게 렌더링 역할을 서버에게 넘기지 않고 브라우저에서 처리

웹 애플리케이션에 필요한 모든 정적 리소스를 최초로 한번 받고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지 갱신

SPA의 장점

• 전체적인 트래픽 감소, 렌더링에서 효율적 (새로운 페이지 요청 시, 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문)
• 빠른 화면 이동 가능(변경되는 부분만 렌더링하기 때문에 새로고침 발생X)
• 앱 같은 자연스러운 사용자 경험(UX) 제공(트래픽 감소, 속도와 반응성 향상)
• 모듈화, 컴포넌트별 개발 용이
• 백엔드, 프론트엔드 비교적 명확히 구분 가능

SPA의 단점

• 초기 구동 속도 느림(필요한 정적 리소스를 한번에 다운로드 하기 때문)
• 데이터 처리를 Client에서 하는 경우가 많은데, 해당 로직들은 js를 통해 구현되므로 코드가 외부에 노출되는 보안적 문제 존재
• SEO(검색 엔진 최적화) 어려움(검색 엔진이 크롤링 시, js를 실행하지 않고 애플리케이션이 로드되기 전 빈 상태의 코드를 크롤링하기 때문에 인덱싱이 제대로 이루어지지 않음)

SPA 프레임워크

Angular, React, Vue → 모두 SPA를 쉽고 확장성 있게 구현하는 것을 목표로 함

- Inline Style Sheet

HTML 태그의 style 속성에 CSS 코드를 넣는 방법

  <p style="color: blue">example</p>

[장점] 직관적 사용 가능
[단점] 꾸미는데 한계가 있고, 재사용이 불가능함

- Internal Style Sheet

HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법

  <style>
  h1{
    color: blue;
  }
  </style>

[장점] HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있음, 한 문서에만 해당되는 스타일 지정 가능
[단점] 다른 HTML 문서에는 적용할 수 없음, HTML 문서마다 스타일을 매번 지정

- Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

  h1{
    color: red;
  }

적용을 원하는 HTML 문서에 다음 코드 추가

  <link rel="stylesheet" href="style.css">

[장점] 여러 HTML 문서에 적용 가능, 웹의 전체 스타일을 일관성있게 유지하며 변경시에도 일괄적으로 변경되어 효율을 극대화 가능
[단점] 권장하는 방식으로 전체 페이지를 잘 구조화하여 재사용이 가능한 style을 고려해야 함

1탄은 요기 클릭

우당탕탕 첫 출근과 첫 수업을 마쳤다. 첫 수업에서 아이들이 생각보다 잘 따라오지 못하고, 천천히 자세하게 설명해주어야한다는 피드백을 바탕으로 두번째 수업부터는 원활하게 진행할 수 있었다. 점점 익숙해지고 능숙해져서 직접 실습해보는 시간을 주고 마이크 끄고 교과 선생님이랑 수다도 떨었다.ㅋㅋㅋ

온라인 주간

쌤들과 친해지고 학교에 적응하기!

온라인주는 학생들보다는 선생님들과 가까워지는 시간이었다. 선생님들이 정말 잘 챙겨주시고 신경도 많이 써주시고 간식도 많이 주시고 편하게 해주셨다. 첫날에는 긴장돼서 아무것도 안들렸지만 점점 적응해서 교무실에서도 편하게 있을 수 있었다. ㅎㅎ 내가 중학생때 계셨던 체육선생님이 다른 학년에 계셨는데 점심시간에 밥먹으러 놀러오시고 얘기하러오시고 하셨다.ㅎㅎ 그때는 정말 무서운 쌤이었는데... (사실 아직도 무서 ..ㅂ....)

대면 수업 참관

해당 주는 3학년 등교주였기때문에 실제 교실에서 수업하는 과목들을 참관했다! 과학, 가정 과목 한시간씩 참관하는 시간을 가졌다. 참관하면서 실습일지도 작성하고, 실제로 선생님들이 어떻게 수업을 진행하는지 볼 수 있었다.

교육 연수

부장선생님께 연수받는 시간이 1시간씩 2번정도 있었다. 선생님은 단순히 수업만 하면 되는 것이 아니라 각각의 업무들, 일들을 처리해야하고 학교 안의 부서도 엄청 다양하고 많다는 것을 알게되었다. 학교의 전체적인 흐름? 을 알 수 있었다. 연수받은 내용을 바탕으로 실습일지를 작성할 수 있었다!

학생들 등교

2주차가 되고 드디어 1학년 학생들이 등교를 하는 주간이 되었다! 온라인때랑은 또 다르고 조용했던 학교가 시끌벅적해졌다. 첫 출근하는 기분도 들었다. ㅋㅋ "안.. 안녕하세요 정보 교생 선생님입니당.. 잘부탁해요~~"

조례시간에 실제로 아이들과 인사를 했다!! '온라인때랑은 또 다르구나..' 를 느꼈다.ㅎㅎ 아이들도 오랜만에 등교해서 신나고 정신없어보였다.ㅋㅋ

등교 첫날 1교시부터 수업이 있어서 실제 컴퓨터실에서 참관하는 시간을 가졌다.ㅎㅎ 또 내일부터 당장 수업해보라는 스파르타 교과 선생님에 의해 참관한 모습을 바탕으로 수업준비만 겁나 열심히했다!!

수업

수업은 엔트리를 이용해서 두더지게임을 만드는 실습을 진행했다. 블록들을 이용해서 프로그래밍하고 제어구조(순차, 선택, 반복) 중 각각의 블록들이 어디에 해당하는지에 대하여 이야기 나누는 시간을 가졌다. 확실히 실제 수업에 있어서 온라인 수업보다는 훨씬 도움이 되는 것 같다ㅎㅎ 계속 수업을 진행하면서 다른반 아이들과도 친해지고 재밌었다!!

교문 지도

1학년 아이들 등교주에는 교문지도도 함께 하였다. 코로나로 인해 등교시간도 정해져있기 때문에 미리 나가서 교감선생님, 학생부장 선생님, 1학년 선생님과 함께 교문지도를 하였다. 사실 교문지도..기보다는 그냥 아이들과 인사하기 ㅎㅎㅎㅎㅎ "쌤!!! 교생쌤이져!!!! 안녕하세옄!!!!!!" 하면서 밝게 인사하는 아이들도 있고, "안..안녕하세요..!!" 하면서 수줍게 인사하는 아이들도 있었다. 다 너무 귀여웡ㅋㅋ 아이들 얼굴 한번씩 더 볼 수 있어서 좋았다.ㅎㅎ

공개 수업

시간이 정말 빠르게 흘렀고 실습기간도 거의 다 끝나갔다. 마지막주 목요일 2,3 교시에 우리반 아이들(1학년 8반)과 함께 공개 수업을 진행했다. 내가 수업하는게 궁금하다며 선생님들도 다 들어오신다고 하고 평가받는 자리여서 그런지 정말정말 너무 떨렸다. ㅠㅠ 그래서 괜히 반 아이들한테 대답 잘하라고.ㅋㅋㅋ 딴짓하지말라고.ㅋㅋㅋ 강요하고.. 수업지도안도 열심히 작성하고, 수업준비도 정말 열심히해서 긴장만 하지 말자! 하는 마음으로 진행했다. 교실 뒤에서 촬영도 하고,, 역시나 초반에는 겁나 떨었다.ㅋㅋ 무슨말했는지 기억도 안ㄴ... 그렇게 조금 진행하다보니 긴장이 풀렸고, 수업은 정말 잘했다!! 교감쌤과 부장쌤이 수업을 너무 잘해서 평가는 전혀 걱정안해도 된다고 하셨다!!! 캬캬 근데 무엇보다 원래 우리반애들이 제일 착하긴 했지만 정말 대답도 너무 잘해주고, 수업도 다들 열심히 참여해줘서 나도 잘 할 수 있었던 것 같다. 고마워 애드라 ㅎㅎ 좀 선생님 같나요? 후후후..

마지막 날

오지 않을 것 같은 마지막날이 왔다. ㅠㅠ 코로나때문에 2주밖에 실습하지 못한게 너무 아쉽고 또 아쉬웠다.

마지막 조례를 하러 반에 갔더니 애들이 앞에서 나를 못들어오게 막았다. ㅋㅋㅋ '오~ 파티인가? 실제로는 일주일 밖에 못봐서 기대안했는뎅ㅎㅎ' 이제 됐다고 들어오라해서 들어갔더니.ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 너무 귀엽넹 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 기분 좋게 마지막날 하루를 시작할 수 있었다. ㅎㅎ 1교시 전에 칠판 깨끗하게 지우라고 하고 마지막 조례를 마쳤다!!

마지막 수업

마지막 수업을 진행했는데.. 이제는 수업도 익숙해져서 무난하게 진행할 수 있었는데 날 힘들게 하는 아이가 나타났다.ㅠㅠ 요 뺀질이... 아직 이름도 기억난다... 후우후우.. 적당히 타이르며 수업을 마쳤지만 기분이 별로 좋지 않았고, 이를 눈치챈 교과선생님이 다음 수업도 진행해보시라고 하셨다. ㅎㅎ 대신 수업이 아니라 아이들이랑 게임하면서 놀라구.... 교과선생님 진짜 천사셨다..

그래서 아이들이 직접 만든 그림판 프로그램으로 캐치마인드 게임했다. ㅎㅎ 앞에서 원격으로 컴퓨터 조정하면서 돌아가면서 문제내고 맞추고 있었는데 갑자기 어떤 아이가 "선생님!! 제 화면 틀어주세요!!" 해서 틀었더니 흡...ㅠㅠ 이맛에 선생님 하는건가... 그렇게 마지막 수업까지 기분좋게 마치고!! 실습일지쓰면서 마무리하는 시간을 가졌다!!

마지막 종례

진짜 찐막. 마지막 종례를 하러 반에 가는데 아니 이번에도 날 못들어오게 하는거 아닌가!! 'ㅋㅋㅋㅋㅋㅋㅋㅋㅋ오 뭐야 이번엔 또 무슨 귀여운짓일까ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ' 근데 갑자기 내 눈을 가리는게 아닌가!! 'ㅋㅋㅋㅋㅋㅋ오옼ㅋㅋㅋㅋㅋㅋ' 눈을 뜨니 보이는 건 정렬된 편지들 ㅋㅋㅋㅋㅋ 너무 귀엽고 예뻤다. 자기들끼리 편지지 하나씩 사오기로 하고 열심히 썼단다.ㅋㅋㅋㅋㅋ 꼭 선생님 돼서 다시 우리학교 오란다. ㅋㅋㅋㅋㅋ 귀여운 짜식들ㅋㅋㅋㅋ (고마워 얘들앙 난 우리반이 제일 좋았어) 마지막 종례하고 전날 밤새 만든 사과 쿠키... (사과 맞음) 나눠주고 같이 사진찍고 종례를 마쳤다. 눈물은 안났다. ㅎㅎ

끝

정말 일과가 다 끝나서!! 선생님들께도 쿠키 드리면서 그동안 너무 감사했다고 인사하고 인사했다. ㅠㅠ 꼬옥 안아주시는 선생님도 있었다. ㅋㅋ 편하게 놀러오라며 .. (아직 놀러가지는 못함) 끝나고 커피한잔하러 가자며. ㅋㅋㅋ 다들 너무 감사했다. 아이들이랑 인사할 때는 전혀 슬프지 않았는데 오히려 선생님들이랑 인사할 때 눈물이 쬐끔 날 뻔 했다. ㅋㅋㅋ 너무 감사했습니당. ㅠㅠ

후기

졸업한 중학교라서 좀 더 편하게 실습할 수 있었고, 선생님들도 다 너무 잘해주시고 아이들도 잘 따라와줘서 감사히 배울 수 있었다. 나중에 교사가 될지는 잘 모르겠지만 정말 뜻깊고 좋은 값진 경험이었다.

그럼 여기서 끝-!!

MongoDB 설치 사이트 바로가기

우선 MongoDB설치 사이트에 접속하여 알맞은 버전을 선택하고 Download 버튼 클릭!

파일이 설치되면 실행하여 Next버튼을 클릭

라이센스 동의 체크하고 Next버튼 클릭 Setup Type을 선택하는 것인데 모든 기능을 포함하여 기본 경로로 설치하려면 Complete 선택 (변경하고 싶으면 Custom 선택) 경로 확인하고 Next 버튼 클릭 그러면 다음과 같이 MongoDB Compass를 설치할 것인지 여부를 묻는데 Install MongoDB Compass 체크하고 Next버튼 클릭 (MongoDB Compass는 MongoDB를 GUI를 통해 편리하게 관리하기 위한 툴)

이제 설정이 완료되었고 Install 버튼 클릭! 그러면 다음과 같이 설치가 진행되고 MongoDB 설치를 완료한다.

이제 환경 설정을 해주어야 한다. 윈도우 검색에서 시스템 환경 변수 편집을 검색하여 클릭 환경변수 편집을 위해 우측 하단에 환경변수 클릭 시스템 변수에서 Path 선택하여 편집 클릭 새로 만들기 클릭하여 설치된 MongoDB의 bin폴더 경로를 입력하고 확인 확인 클릭하여 설정 저장

이제 정상적으로 MongoDB가 설치되었는지 확인해야한다. 윈도우 창에서 cmd검색하여 명령 프롬프트에 접속 다음과 같이 mongo --version 입력하고 엔터 정상적으로 설치된 것을 확인할 수 있다. MongoDB Compass를 실행하여 정상적으로 MongoDB에 접속이 되는지 확인 CONNECT 클릭하여 다음과 같이 보이면 접속 완료!

이렇게 MongoDB 설치가 정상적으로 완료되었고, CONNECT까지 확인하였다.

교직 이수

교직 이수는 교원이 되기 위해 필요한 이론이나 기술을 습득하는 과정이다. 나는 사범대가 아닌 공과대 컴퓨터소프트웨어공학과에 재학중이기 때문에 따로 교직이수를 신청해서 이수해야했다. 교직이수는 1학년 말에 1차로 신청을 하고 면접을 본 뒤, 합격이 되면 2학년 말에 최종 면접을 보고 최종 불합 여부를 알 수 있다. 과의 10%가 교직이수를 할 수 있는데 신청 인원이 많을 시 성적을 보는 것 같고, 추가로 면접에서는 열정(?)을 보는 것 같다.

교생 실습 시작

4학년 1학기에 교생 실습을 나가게 되었다. 모교인 중학교로 가게 되었고, 코로나로 인해 2주간 실습을 진행하기로 하였다.(5.17~5.28) 실습 전주에 미리 OT를 진행하였고, 간략하게 실습 기간동안의 계획, 주의할 점 등을 듣고 선생님들께 인사하는 시간을 가졌다.

약간의 선생님처럼 보이기 위한 준비(?)를 조금 하고 첫날 출근을 하였다. 3년간 다녔던 학교인데 느낌도 이상하고 설렜다. 계속 같은 동네에 살고 있기 때문에 등굣길도 그대로고 학교도 크게 변한 것이 없어 익숙한 모습이었는데도 엄청 떨렸던 것 같다.

2주동안 매일 8시30분까지 출근, 16시30분 퇴근! 1학년8반 담당!

담당교과선생님은 정보과학부에 계셨지만 나는 노트북을 받아서 1학년 교무실을 쓰게 되었다.

첫날 담당교과선생님이 앞으로의 일정을 자세하게 알려주셨고, 2주동안 진행하면서 첫 주는 온라인, 마지막 주는 대면으로 진행한다고 했다. (아이들을 많이 못봐서 아쉽 ㅠㅠ) 2주간의 일정인데 일단 수업부터 빡셌다ㅎㅎ

교육과정이 개편되면서 정보 교과가 중학교 필수과목으로 들어갔고, 실습학교는 2시간씩 블록 수업을 한다고 한다. 정보 선생님이 한 명이기 때문에 10반을 전부 수업해서 선생님도 힘들다고 하셨다.ㅋㅋ 위의 그림에서 빨간색으로 동그라미 친 수업들이 내가 하게 될 수업이라고 했다. ㄴ....ㄴ....네...?! 당장 내일부터요?!

?? : 다 필요없고 수업은 많이 할수록 늘기 때문에 수업을 많이 해보시면 좋겠어요ㅎㅎ

하하하하하하!!!! 당황스럽기도 하고.. 감사하기도 하고.... 온라인 줌으로 반 아이들에게 인사도 하고.. (긁적긁적) 화면 속 모습이었지만 아이들은 정말 애기애기 했다. 착하고 예뻐보였다. ㅎㅎ 첫 날은 수업 참관과 동시에 수업 준비도 하면서 바쁘게 하루가 지나갔다!!

첫 수업

첫 수업은 온라인 줌으로 수업을 진행했다.

정보 교과서에서 프로그래밍 단원을 진행하고 있었고, 앞의 이론은 거의 진행된 상태였기 때문에 엔트리를 이용해서 프로그램 만드는 실습 수업을 진행하면 되었다. 첫 수업은 아이들 실력도 파악할 겸 간단하게 보물상자 프로그램 만들기 수업을 진행했다. 온라인 수업이라 그런지 더 떨리고 수업 진행이 힘들었던 것 같다.

아이들 실력 파악하기도 어려웠고, 진행하다보니 잘하는 아이들 위주로 수업을 진행한 것 같아 아쉬움이 많이 남았다. 응용하는 것을 이용해서 수업 시간에 맞게 수업을 진행할 순 있었지만 못 따라온 아이들이 많은 것 같아 미안하고 나한테 실망스러웠다.ㅠㅠ

선생님이 아이들이 생각보다 잘 못따라오고, 천천히 자세하게 설명해주어야 한다는 피드백을 주셨고 이를 보완해서 다음 수업을 준비할 수 있었다.

급식

제일 기대됐던 급식! 오랜만에 먹는 급식에 기대도 됐고, 학교 다닐 때도 우리 학교 급식이 맛있는 편이었어서 실습 나가기 전부터 급식에 기대가 컸다. ㅋㅋ

근데 한 가지 놀랐던 건.. 원래 급식실이 없었긴 했지만 당연히 생겼을 줄 알았지.. 아직도 급식차 끌고와서 교실에서 먹다니.. ㅠ 옛날 생각 나서 웃기면서도 맴찢.. 선생님들은 교직원 식당에서 먹거나 사람이 많을 때는 교직원 식당이 1학년 교무실 바로 옆이라서 교무실에 와서 먹었다. ㅎㅎ 밥먹으면서 선생님들이랑 많이 친해져서 좋았고 급식도 전체적으로 맛있었다!

-1탄 끄읕-

버스

• CPU와 메모리, 주변 장치 간에 데이터를 주고받을 때 사용

• 제어 신호(다음 작업을 지시), 주소(메모리의 위치 정보), 데이터가 이동

제어 버스(Control bus)

• 제어 신호(다음 작업을 지시)가 오고 감
• CPU의 제어장치와 연결되어있음
• CPU, 메모리, 주변장치와 양방향

주소 버스(Address bus)

• 주소(메모리의 위치 정보)가 오고감
• 메모리 주소 레지스터와 연결, 단방향(CPU→주소 버스)

데이터 버스(Data bus)

• 데이터를 실어 목적지까지 이동
• 메모리 버퍼 레지스터와 연결, 양방향

+ 버스 대역폭(bandwidth)

한 번에 전달할 수 있는 데이터의 최대 크기

예시로 32bit CPU는 메모리에서 데이터를 읽거나 쓸 때 한 번에 최대 32bit를 처리할 수 있는 것이고, 레지스터의 크기도 32bit, 버스의 대역폭도 32bit이다.

메모리(Memory)

• 모든 프로그램은 메모리에 올라와야 실행 가능
• 메모리에는 실행에 필요한 프로그램과 데이터 존재
• CPU와 협업하여 작업이 이루어짐

메모리는 RAM(읽고 쓰기 가능)과 ROM(읽기만 가능)으로 구분

RAM(Random Access Memory)

휘발성 메모리(전력이 끊기면 데이터가 사라짐)와 비휘발성 메모리(전력이 끊겨도 데이터를 보관할 수 있음)로 나뉨

휘발성 메모리(Volatility memory)

• DRAM(Dynamic RAM=동적 램)

  시간이 지나면 데이터가 사라져서 일정 시간마다 다시 재생시켜야 함 ⇒ 메인 메모리

• SRAM(Static RAM=정적 램)

  전력이 공급되는 동안에는 데이터를 보관할 수 있어 재생할 필요가 없음 ⇒ 고속 메모리

  속도는 빠르지만 가격이 비쌈

• SDRAM(Synchronous Dynamic RAM)

  DRAM이 발전된 형태(SRAM과는 완전히 다름)

비휘발성 메모리(Non-Volatility memory)

• 플래시 메모리(Flash Memory)

  각 소자는 최대 사용 횟수가 제한되어 보통 소자 하나당 몇천번에서 만번정도 사용하면 제 기능을 잃음 ⇒ SD카드나 USB를 오래 사용하면 성능이 저하되거나 데이터를 잃을 수 있음

• FRAM(Ferroelectric RAM)

• PRAM(Phase change RAM)

• SSD: 하드디스크 대신, 가격은 비싸지만 빠른 데이터 접근 속도, 저전력, 내구성에 좋음

ROM(Read Only Memory)

• 전력이 끊겨도 데이터를 보관
• 마스크 롬(mask ROM): 데이터를 지우거나 쓸 수 없음
• PROM(Programmable ROM): 데이터를 여러번 쓰고 지울 수 있음
• EPROM(Erasable Programmable ROM): 플래시 메모리처럼 사용(but 가격 비쌈)

부팅(booting)

컴퓨터를 켰을 때 운영체제를 메모리에 올리는 과정 사용자가 컴퓨터의 전원을 켜면

1. 롬에 저장된 바이오스 실행
2. 바이오스는 CPU, 메모리, 하드디스크, 키보드, 마우스와 같은 주요 하드웨어가 제대로 작동하는지 확인
3. 이상 있다면 삐~ 소리와 함께 오류 메시지 출력
4. 이상 없다면 하드디스크의 마스터 부트 레코드에 저장된 작은 프로그램을 메모리로 가져와 실행

substr()

string.substr(start, length)

⇒ start 인덱스부터 length 길이만큼 string을 잘라내어 반환

[예시]

let str = "Hello";

console.log(str.substr(1,2)); // el 출력
// index 1번부터 2만큼 잘라서 출력

substring()

string.substring(start, end)

⇒ start 인덱스부터 last 인덱스 바로 앞까지 string을 잘라내어 반환

[예시]

let str = "Hello";

console.log(str.substring(1,4)); // ell 출력
// index 1번부터 index 3번까지 출력

slice()

string.slice(start, end)

⇒ substring()과 동일

substring() vs slice()

파라미터의 start, end 요소가 start>end인 경우

substring(2, 0) => start와 end값(0, 2) 바꾸어 처리

slice(2, 0) => "" 반환

파라미터가 음수인 경우

substring(-2, 5) => 음수는 0으로 처리

slice(-2, 5) => 음수는 뒤에서부터 절대값 처리 (-2는 뒤에서 2번째 자리) 즉, (3,5)로 처리

파라미터가 음수이고, 문자열의 길이보다 큰 경우

0으로 처리

split()

string.split(separator, limit)

⇒ 일정한 구분자로 잘라서 배열로 저장

[예시]

let str = "Hello";
let arr[] = str.split("");
for(let x of arr){
    console.log(x);
}// H e l l o 출력

toLowerCase()

⇒ 문자열 소문자로 변환

[예시]

let str = "Hello World";
console.log(str.toLowerCase()); // hello world 출력

toUpperCase()

⇒ 문자열 대문자로 변환

[예시]

let str = "Hello World";
console.log(str.toUpperCase()); // HELLO WORLD 출력