다람쥐줘라줘

Q. 브라우저에 ‘naver.com’을 입력하면 내부적으로 어떤 일이 일어나는지 설명해주세요

① 사용자가 웹 브라우저에서 'naver.com' 을 입력한다

③ 원래 naver의 IP 주소는 125.209.222.141 인데 어려운 IP 주소를 외워서 사용하기는 힘드니, DNS(Domain Name System)이란 곳에서 IP를 외우고 접근하기 쉽게 설정해주고 그 정보들을 가지고 있다. 따라서 DNS 에 naver의 IP 주소를 물어보고 가져오는 과정을 거친다.

⑦⑧ IP 주소를 얻었으니 IP 주소에 해당하는 서버에 요청을 하고, 해당 서버는 요청을 받고 요청에 맞는 데이터를 다시 전송해 줄 것이다.  

⑫ 우리가 받은것은 UI가 완성된 데이터가 아니라 HTML 문서이다. 그러면 이 문서를 읽고 출력을 해야한다
받아온 HTML 문서를 파싱하여 DOM 트리를 구축한다음, CSS 또한 파싱하여 오브젝트 모델을 만든 후
렌더트리를 형성한다. 그리고 그 렌더트리를 이용해서 각각의 노드들이 위치를 지정하는 레이아웃 과정을 거쳐
최종적으로 브라우저 화면에 출력하게 된다.

자세한 흐름은 하기 사이트 참고!

https://amunre21.github.io/web/1-site-works/

간단한 흐름은 하기 사이트 참고!

https://velog.io/@seungmini/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-www.naver.com-%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%83%9D%EA%B8%B0%EB%8A%94-%EC%9D%BC

10/14(금) 간만에 TIL

실전프로젝트가 끝나고 이력서 주간이다.

이력서 주간인데.. 프로젝트 끝나고 힘이 쪽- 빠져서 일주일 정도 그냥저냥 이력서 준비하는 척 하면서 놀고 있다.

이러면 안돼~ 1주일만 더 힘내서 이력서 제출하고 면접준비 잘 해놓자! 하면서도 금방 유튜브 보고, 밀린 드라마 보러가버림. 뭐 우리 항해 친구들도 다들 실전 끝나고 힘 빠져서 비슷한 상황 이길래 죄책감이 덜했다..ㅎ 

 그러다가 1주일만에 정신차리고 부랴부랴 이력서 다듬고 면접질문 준비중.

일단 나도 이력서 제출에 집중하긴 할건데, 무턱대고 이력서 제출 + 면접준비만 하기보다는

30일? 정도의 기간을 잡고 도전하려고 한다.

30일 기간을 잡은 이유는 아직 지원할 이력서 등을 더 다듬고 싶고 항해99 하면서 기초를 너무 다지고 싶었는데 그걸 좀 하고 가고 싶은 욕심이 있어서!

 그래서 크게는 내 실전프로젝트 레퍼지토리에 스택 선정 이유/ 트러블 슈팅/ 시연영상 /코드 리펙토링까지 빠방하게 정리하고, 30일간 블로그도 좀 다듬고 면접문항을 자세하게 파고들어서 꼭 알아야 하는것들은 시간을 들여 천천히 정리하려고 한다. 또 강의는 강의대로 들어야하니까 아침엔 좀 프레쉬하게 코드 리팩토링관련 하고 점심엔 강의 듣고~~ 
저녁이후엔 git 블로그 정리 + js 책 읽으면서 30일을 알차게 보내면 취업도 하고 내 실력도 다지고 참 좋을 거 같은 뇌피셜이당

돌고 돌아 TIL~

항해 63일차 일요일.. 시간이 참 빠르다 어느새 실전 프로젝트 중간발표가 1주일도 채 남지않았다.

추석이 껴서 그런지 항해에서도 분위기가 조금 몽실몽실하다.

디자이너님 의욕이 뿜뿜 이셔서 이번주는 추가 기획 + 메인페이지 커스텀 슬라이더 등등 디자인적 요소를 넣느라 시간이 호로록~ 지나갔다. 

슬슬 마감 시간이 다가오니까 쫄린다.. 뭔가 남은 양이 엄~청 많아 보이지만, 그동안 잘 했으니까 이번에도 잘 끝내겠지..?

화이팅하자 화이팅~! 

아래는 항해원들 캐릭터로 4조 갓 디자이너님이 그려주신... 보고 뭉클했당

다들 복 많이 받자~

써야지 써야지하면서 TIL 정도만 쓰고 넘어갔는데... 항해를 진행하며 느끼는 감정들이 아까워서 기록을 하러 슬며시 기어나왔따..

일단 항해99에 탑승한 상태니 여기에 관해 먼저 이야기를 해보려한다

대상은 항해가 궁금한 사람들 + 우리 항해 동기들 + 내 감정풀이용? 이다

저번 WIL까지는 살짝 까는 형태로 작성이됐는데, 이번에는 대놓고 까야겠워.. :)

항해의 불친절? 은 주특기[숙련]인 4주차부터 시작되었다.

리덕스 툴킷을 쓰지않은 오리지널 리덕스를 훈련하는 주차였고 다들 그런가보다~ 하고 꾸역꾸역 진도를 나갔다.

그 전까지는 다들 고만고만한 실력? 인데 4주차부턴 실력의 차이가 확연히 생긴다.

우선 1달 온라인종합반 정도만 정도만 깔짝 듣고 시작한 No Base 비 전공자들은 멘탈부터 갈리기 시작한다.

여러 이유가 있는데 크게 2가지 인거 같다.

1. 진도 따라가느라 벅차다 

2. 옆에 잘 하는 동기들을 보며 마음이 급해진다(잘하는 동기들은 최소 주특기 한 두번 돌리고 + 4개월 이상 공부를 하고옴)

그 상태로 주특기[심화]인 5주차를 들어가면 진도가 말이 안 된다

저번주 까지 배웠던 리덕스는 안쓰고, 리덕스 툴킷(RTK) / 미들웨어인 Thunk / Mock API 인 Json-server / 커스텀 훅 까지..

이럴거면 전 주차에 툴킷쓰고 + Thunk 맛이라도 보여주던가 리덕스만 천천~히 진도나가다가 다음주부터 난이도가 이상해진다, 물론 React 기초 한 두번 정도만이라도 돌리고 온 사람이라면 그래도 그래도 따라갈 수 있다.

근데, 노베이스 비전공자들은 안 된다. 

하고싶은 말은 항해99의 과대광고? 에 속아서 정말 노베이스로 항해에 탑승하지 말라는거... 4~5주차에 react 엄청 나가떨어진 걸 실시간으로 보고나니 항해 시작하는 분 들께 꼭! 하고싶은 말이었음ㅠ

뭐 요정도만 하고,

다음은 항해시스템 칭찬도 좀 하려고한다

위의 요소들을 이겨내고 팀 프로젝트가 본격적으로 진행되는 5주차부터는 실력이 엄청나게 향상한다.

일단 Git 협업 능력은 깔고가고 주특기인 React를 프로젝트에 적용해보면서 실시간으로 실력이 올라감  

6주차 미니프로젝트 부터는 백엔드도 합류해서 FE 2 / BE 3 비율로 진행되는데,

API 연결하고 data 가공하고 view 만들고.. 프론트는 갈리면서 실력이 계속올라간다..

백엔드도 합류하니까 알게된 충격적인 사실이 있었는데, 백엔드는 프론트보다 실력차이가 극심하다. 여포들이 많아서 일단 노베이스로 시작한 분들은 프로젝트에서 정말 작은 부분밖에 참여 못하고, 심하면 프로젝트는 같이 진행했지만 나중엔 잘하는 사람 코드만 가져가고 나머지는 다 밀려버린다고 들었다.. (Git 에 본인꺼는 점 하나만 찍혀있다고 함..)

이제 실전프로젝트 10일정도 됐는데 1주일은 정말 꼬박 프로젝트 '기획' 만 한거 같다.. 하루는 15시간동안 기획 만 한 날도 있어서 "이제 코딩시켜주세요.." 라며 한숨을 쉬던 팀원도 있었음ㅠ

매번 생각하는데 팀으로 작업하는게 정말 어려운 것 같다. 실력적인 부분은 부차적이고 우선 인성적으로나 상대방 배려가 없으면 같이 일 하기가 너무 힘든거 같다. 다행히 이번 팀원들은 그렇게 모난 사람은 없다. 역시 나를 꼭 있어야 할 자리에 두신다. 감사하다.

이제 기획은 끝나서 MVP 기능들 구현하고 View 시작 중인데 모든 프로젝트를 성공적으로 끌고왔으니 마지막 프로젝트도 잘 할거라 믿는다. 나 뿐 아니라 다들 :) 

화이팅하자 칭구들!

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🍦

[1일1로그 100일 완성 IT지식] 63번 '표준과 프로토콜의 세계, 인터넷'

인터넷이란 컴퓨터들이 서로 통신 가능한 거대한 네트워크이다~ (네트워크 - 컴퓨터끼리 연결하는거)

전세계의 컴퓨터를 연결하게되면 저희가 인터넷 사용하듯이 서로 파일 주고받고 수많은 정보의 저장, 무료 정보 제공과 공유, 시간과 공간의 제약이 없고(게임에서 바로 이동하고 만나는것 처럼), 유투브 스트리밍처럼 실시간으로 정보 제공이 가능합니다. 

전세계 컴퓨터를 연결하려면 뭐가 필요할까?

-> 이름 + 주소 + 경로 + 그리고 프로토콜

여기서 프로토콜이 중요한데, 프로토콜은 컴퓨터끼리 데이터를 주고 받을 때 어떤식으로 주고 받을껀지 미리 규칙을 정해놓은 겁니다.

우리가 카페에서 아이스 아메리카노를 먹으려면 점원한테 아이스 아메리카노 주세요 해야지 프라프치노 달라고하면서 아이스 아메리카노가 나오길 기대하면 안되잖아요?

컴퓨터 간에도 똑같이, 어떻게 데이터를 요청하는지 어떻게 데이터를 건내주는지 서로 정해놓은 규칙이 있습니다. 그걸 포로토콜이라고 하고 저희가 아는 HTTP TCP/IP도 통신규약 프로토콜의 종류중 하나입니다.

[1일1로그 100일 완성 IT지식] 64번 '인터넷이 가능한 메커니즘'

먼 컴퓨터끼리는 인터넷으로 연결되지만, 가까운 컴퓨터는 유선으로 연결된 이더넷 케이블이나 와이파이, 블루투스로 연결합니다.

와이파이랑 블루투스 연결은 다들 잘 하시니까 아실텐데 거리가 멀어지면 연결이 잘 안되고 가까우면 전자기기 끼리 연결이 되잖아요? 

그것처럼 이더넷 케이블도 가까운 거리의 컴퓨터들은 이 선을통해 연결이 가능합니다.

회사에서 이 선 꼽아서 컴퓨터도하고 프린터도 연결하고 집에 TV도 뒤에 저거 꽃혀 있잖아요? 그겁니다.

거리가 먼 네트워크는 인터넷으로 연결

1. 주소

2. 이름

근데 저 IP주소 외우고 있다가 웹페이지 접속하는 사람은 많지 않죠?

웹 상에서는 도메인 네임으로 접속해서 인터넷끼리 데이터 통신을 주고받게 됩니다.

3. 라우팅 (경로 설정)

또 라우팅이 필요합니다. 먼 거리의 컴퓨터끼리 연결할때 출발 컴퓨터에서 도착할 컴퓨터까지의 최적의 경로를 찾을떄 중간에 게이트웨이라는 전자망을 통해서 가는데, 그 최적의 경로를 선택하는 겁니다.

또, 라우팅은 인터넷 뿐만 아니라, 전화 통신망, 그리고 교통망 등 여러 종류의 네트워크에서 사용된다고 합니다. 

4. 프로토콜 (컴퓨터끼리 데이터 교환할때 정해놓은 규칙)

진짜 라이브러리나 npm install yarn add 설치할 거 진짜 댕같이 많은데, 그때마다 구글링하기 귀찮으니까 싹 정리해보자.

$ git clone (레퍼지토리에 있는거 받아오는 경우 많으니까) 

$ git clone [원격 저장소 주소!]

부트스트랩 설치

npm install react-bootstrap bootstrap

https://react-bootstrap.github.io/getting-started/introduction

styled-component 도 없으면 서운하지

npm install styled-components
import styled from 'styled-components'

Font awesome도 쓸꺼지?ㅎㅎ

$ npm i @fortawesome/fontawesome-svg-core
$ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
$ npm i @fortawesome/react-fontawesome

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

추천 페이지 https://ssddo-story.tistory.com/15

react-router-dom 설치

npm i react-router-dom

useNavigate() 쓸꺼면 index.js 에 <BrowserRouter> 잘 씌워주자.

redux & toolkit 설치

npm i redux react-redux
npm install @reduxjs/toolkit

https://translucent-bit-b63.notion.site/12-eefdf1c4d4434f329d29627a596dbe20

axios 설치

$ npm install axios

json-server 설치 & 활성화

$ npm i -g json-server
$ json-server --watch db.json --port 3001

react - JWT 설치

npm install react-jwt

https://www.npmjs.com/package/react-jwt

JWT Token 헤더나 payload 로 날라오는거 decode 하는 방법 등!

백엔드 없이도 다할 수 있다 Firebase

공식사이트 (https://firebase.google.com/docs/web/setup?hl=ko&authuser=0)

0. 일단 설치

npm install firebase

1. 이미지 업로드 (->Url로 뱉어줌)

2. Auth (로그인, 회원가입)

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감💎

[1일1로그 100일 완성 IT지식] 36번 '파일 시스템과 블록'

우리가 당연하게 사용하는 파일들은 사실 운영체제가 사용하기 쉽게 추상적으로 나타내준 형태이다.

기본적으로 데이터는 0과 1의 형태로 컴퓨터에 저장되어있다.

근데 이렇게만 저장되어있으면 우리가 데이터를 찾기도 힘들고 쓰기도 힘드니까 운영체제가 우리가 쓰기 편하게 이걸 파일형식으로 만들어줬다.

오른쪽 파일의 용량에 따라 데이터가 들어가있는 블록들이 배정이되는데 용량이적으면 3개만 배정되기도하고 용량이 크면 그만큼의 블록들이 더 배정된다.

하나의 블록안에는 1바이트짜리 데이터가 1000개정도 들어가있다.

그러니까 우리가 보고있는 파일 하나하나는 안에 블록이 차곡차곡 쌓여있고 그 블록은 0과 1의 데이터들이 모여있는 형태이다.

[1일1로그 100일 완성 IT지식] 37번 '파일을 휴지통에 넣을 때 일어나는 일'

사실 휴지통에 버린 파일은 언제든지 복구 가능하다.

실제로 휴지통에 들어가보면 파일이 남아있다.

휴지통 비우기를 눌러야 휴지통 안에있는 파일이 지워지는데, 사실 블록은 미사용 목록으로 돌아가지만 안에있는 0과 1의 데이터들은 그대로 남아있다. 미사용 목록으로 돌아간 블록들이 다른 데이터로 덮어 씌워지기 전까지 정보를 그대로 가지고 있는거다! 

그래서 그런 데이터는 복구 가능하니 중요한 정보라면 정보를 지우는 프로그램을 사용하거나 여러 방법으로 확실하게 지워줄 필요가있다.  근데 요새는 클라우드 컴퓨터나 분산저장 등 데이터 지우기가 여간 힘든게 아니라고하니.. 확실한건 하드디스크를 꺼내서 물리적으로 ^박살^을 내는것이 최고라고 한다~ 

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🎃

[1일1로그 100일 완성 IT지식] 33번 '컴퓨터를 작동하게 만드는 운영체제'

운영체제는 사용자의 컴퓨터 조작을 도와준다.

데스크탑의 윈도우즈 운영체제를 예로들면 (다른것도 구조는 비슷하다),

바탕화면에 있는 카카오톡을 클릭하면 운영체제는 카카오톡이 클릭됐으니까 카카오톡의 정보를 주메모리(RAM)로 옮겨준다. RAM으로 옮겨진 정보는 프로세서(CPU)에 의해 처리가 되고 처리 된 정보는 디스플레이 화면을 통해 카카오톡을 실행된 정보를 우리에게 보여준다. 여기서 마우스의 조작 & 디스플레이의 조작 또한 운영체제 한다!

운영체제의 역할을 조금 더 들어가보자면,

운영체제는 사용자가 프로그램을 실행할 수 있는 환경을 제공한다. 이 환경에서 사용자는 프로그램을 편리하고 효율적으로 실행할 수 있다.

또한, 하드웨어에 따라 필요한 운영체제의 역할도 많이 달라지는데 대형 컴퓨터의 운영체제는 주로 하드웨어의 이용을 최적화 하는데 집중을하고, 휴대용 컴퓨터 운영체제는 사용자가 프로그램을 실행하기 위해 컴퓨터와 쉽게 인터페이스할 수 있는 환경을 제공하기 위해 설계된다.

전체 흐름을 보자면, 

하드웨어는 중앙처리장치(CPU), 메모리 및 입출력(I/O) 장치로 구성되어 기본 계산용 자원을 제공한다.

응용 프로그램인 워드프로세서, 스프레드시트, 컴파일러, 그리고 웹 브라우저 등은 사용자의 계산 문제를 해결하기 위해 이들 자원이 어떻게 사용될 지를 정의한다.

운영체제는 하드웨어를 제어하고 다양한 사용자를 위해 다양한 응용 프로그램간의 하드웨어 사용을 조정한다.

또한, 컴퓨터 시스템은 하드웨어, 소프트웨어 및 데이터로 구성된다고 볼 수 있다. 운영체제는 컴퓨터 시스템이 동작할 때 이들 자원을 적절하게 사용할 수 있는 방법을 제공한다. 운영체제는 정부(government)와 유사하다. 정부처럼 그 자체로는 유용한 기능을 실행하지는 못하지만, 단순히 다른 프로그램이 유용한 작업을 할 수 있는 환경을 제공한다.

(출처 -https://velog.io/@vvsogi/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-1)

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🧸

[1일1로그 100일 완성 IT지식] 30번 '기술 표준의 중요성'

표준의 뜻은 '어떻게 만들어지고' '어떻게 작동하는지' 인데, 지역마다 콘센트와 콘센트 구멍의 표준이 다르다면 집에서 조금 먼 카페에 가면 핸드폰을 충전하기 쉽지 않을거다.

소프트웨어에도 많은 표준이 있다.

아스키코드, 유니코드 같은 문자 집합, C와 자바 같은 프로그래밍 언어, 암호화와 압축 알고리즘 등등..

종류와 규격이 동일하기 때문에 사용자가 편하게 사용할 수 있다!

표준은 상호운용성을 보장하고 공개경쟁이 이루어지도록 하는데 결정적인 요소이다.

[1일1로그 100일 완성 IT지식] 31번 '자유로운 소프트웨어, 오픈소스'

프로그래머가 작성한 코드는 보통 소스 코드라고 하고, 소스 코드를 컴파일한 결과는 오브젝트 코드라고 한다.

옛날에는 오픈 소스라는 개념이 희박해서 소스 코드에 저작권 등이 걸려있었고 해당 기업은 기업 비밀이 유출되는 소스 코드를 공개하지 않고 오브젝트 코드만을 공개하는 경우가 대부분 이었다.

그러다 사회 발전에 발맞춰 오픈소스가 대두되었고, 현재 구글 마이크로소프트 등 많은 기업들은 오픈소스 문화에 기여하는 부서를 따로 만들어 오픈소스 생태계에 기여하고있다. 우리 같은 프로그래머들은 정말 감사한일이 아닐 수 없다!

(위키백과 오픈소스란 -오픈 소스 소프트웨어는 소스 코드를 공개해 누구나 특별한 제한 없이 그 코드를 보고 사용할 수 있는 오픈 소스 라이선스를 만족하는 소프트웨어를 말한다. 통상 간략하게 오픈 소스라고 말하기도 한다.)

-오픈 소스에 대한 참고 블로그 https://brunch.co.kr/@bumgeunsong/15