프론트엔드 멘토링 2일차 / 인터넷 HTTP, HTTPS, DOM, 네이밍컨벤션, 웹팩, 채용공고, 자기소개서

웹개발에 필요한 지식 리스트

[인터넷]

• 인터넷은 어떻게 동작할까?

-> 인터넷은 1969년 미국의 ARPANET에서 시작했다. 단순히 컴퓨터와 컴퓨터의 연결을 위해 만든 ARPANET(네트워크)에 점점 많은 컴퓨터가 연결되면서 대표적인 네트워크가 되었다. Internet은 네트워크의 한 종류이다. 컴퓨터와 컴퓨터를 연결해 주는게 네트워크이고 그 중 가장 널리 사용되는 네트워크가 바로 Internet이다.

IP address는 인터넷에 연결된 모든 디바이스는 일련의 숫자로 이루어진 주소를 가지고 있다. 이 주소를 통해 상대를 찾고 정보를 주고 받을 수 있다. 하지만 네이버, 구글, 유튜브 등에 접속할 때 직접 URL에 IP address를 입력하지 않는다. 이것이 바로 domain name 개념이다. 이 domain name은 각 디바이스의 IP address와 일대일대응하기 때문에 사이트에 접속할 수 있는 것이다.

---

• HPPT와 HPPTS의 차이점은?

HTTP는 인터넷에서 웹 서버와 사용자 컴퓨터에 설치된 웹 브라우저 사이에 문서를 전송하기 위한 통신규약(Protocol)이다. 즉 HTTP는 인터넷에서 하이퍼텍스트(HyperText)를 전송(Transfer)하기 위해 사용되는 통신 규약(Protocol)이다.

HTTP 서버는 기본 포트인 80번 포트에서 서비스 대기 중이며 클라이언트가 TCP 80 포트를 사용해 연결하면 서버는 요청에 응답하면서 자료를 전송한다. HTTP는 정보를 텍스트로 주고 받는다. 단순  텍스트를 주고 받기 때문에 네트워크에서 전송 신호를  인터셑브하는 경우 원하지 않는 데이터 유출이 발생할 수 있다.

 

그래서 HTTP의 보안 취약점을 해결하기 위한 프로토콜이 HTTPS이다. HTTPS는 S(Secure Socket)을 추가한 것이다. 쉽게 말해 HTTPS를 사용하면 서버와 클라이언트 사이의 모든 통신 내용이 암호화된다는 것이며 웹 서버에 접속하는 사용자에게 모두 동일한 암호를 제공하는 것이 아니라 사용자 마다 다른 암호를 제공해야 한다.

 

HTTP와 달리 HTTPS는 보안기능이 추가된 만큼 HTTP보다 HTTPS의 처리 속도가 더 느릴 수 밖에 없고 관련 웹 서버의 사양(스펙)도 중요한 부분이 된다. 물론 요즘 서버와 네트워크 상태가 우수하면서 HTTP와 HTTPS의 차이가 체감하기 어려울 만큼 좁아졌고 HTTPS를 사용하는 웹 사이트가 많아졌다.

 

보안 측면에서 HTTPS 대비 HTTP의 단점가벼운 웹 서핑이라면 HTTP를 사용해도 된다. 하지만 자료를 주고 받는 경우라면 심각한 개인 정보 유출로 이어질 수 있다. 예를 들어 운영하는 웹사이트를 통해서 판매되는 상품 정보와 판매처 정보만 알리는 경우라면 HTTP도 충분하다. 하지만 결제 시스템이 도입되거나 DM 발송 및 회원 가입과 같이 사용자 정보를 웹 서버와 주고 받아야 하는 경우라면 HTTP는 정보 유출의 위험성을 갖게 된다. 이런 경우 HTTP 대신 HTTPS를 사용해야 하는 가장 큰 이유이다.

 

마케팅 측면세서 HTTPS 대비 HTTP의 단점검색 시 우선 순위 때문이다. 네이버, 다음은 물론이고 구글 역시 검색 엔진 최적화 관련 내용을 웹 사이트에 적용하고 있다. 동일한 키워드의 페이지가 있다고 할 때 사용자가 키워드 검색시 상위 노출되는 기준 중 하나가 보안 요소이며 이것이 HTTPS가 우선 검색될 수 있는 것이다.

---

• 브라우저는 무엇이고 어떻게 동작할까?

브라우저는 사용자와(Client) 웹 서버(Web Server) 사이에서 HTML 문서, 파일을 출력하는 그래픽 사용자 인터페시으 기반의 응용 소프트웨어이다. 웹 브라우저(Web Browser)가 웹 서버(Web Server)에 웹 페이지(Web Page)를 요청하면 웹 서버는 HTML 문서로 응답한다. 브라우저는 웹 서버가 보낸 HTML 문서를 해석한 후 사용자에게 보여준다.

 

웹 브라우저는 웹 페이지를 가져오기 위해 대부분의 웹 서버가 사용하는 HTTP로 통신한다. HTTP를 이용해 웹 페이지를 가져오고 웹 서버에 정보를 송신한다. 브라우저의 종류에는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로어/마이크로소프트 엣지, 사파리, 오페라 등이 있다.

 

브라우저의 주요 기능은 사용자가 원하는 자원(HTML 문서, PDF, Image 등)을 서버에 요청하고 브라우저에 표시한다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTM: 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다.

URI(Uniform Resource Identifier) : 통합 자원 식별자는 인터넷에 있는 자원을 나타내는 유일한 주소이다.

URL(Uniform Resource Locator) : 네트워크 상에서 자원이 어디에 있는지를 알려주기 위한 규약이다.

---

• DNS 호스트 도메인 이름을 호스트 네트워크 주소로 바꿈
• domain name이란? 네트워크상에서 컴퓨터를 식별하는 호스트명

DNS(Domain Name System) 도메인네임서버의 역할은 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대로 네트워크 주소를 호스트 이름으로 변경할 수 있도록 하기 위해 개발 되었다. DNS는 영문/한글 주소를 IP 네트워크에서 찾아갈 수 있는 IP로 변환해 주는 서비스이다. 예를 들어 전화번호 저장에 이름을 사용하고 전화번호를 찾을 때 이름을 검색하면 되는 것과 같다. 주소도 이와 마찬가지로 사람이 주소를 위우기 쉽게 하기 위해 이렇게 한 것이다.

• 호스팅이란 무엇일까?

제공자 등의 사업자가 주로 개인 홈페이지의 서버 기능을 대행하는 것. 기업의 대용량 메모리 공간 일부를 이용하여 사용자의 홈페이지나 웹 서버 기능을 대행하는 서비스. 이로써 사용자는 웹 서버의 운영 관리와 고속 전용선을 상시 사용하므로 회선 사용료의 부담을 줄일 수 있다. 사용자가 가진 도메인에서 홈페이지 개설부터 서버 관리까지 대행해주므로 독자 도메인 서비스라고 한다. 한편, 서버를 갖고 있지 않는 사용자에게 웹 사이트나 서버 기능을 대여하는 것을 렌탈 서버라고 한다.

 

웹 호스팅이란 컴퓨터전문업체로부터 자원의 일부를 임대받아 웹 사이트를 구축하는 것을 말한다. 즉, 인터넷상에서 정보를 제공하기 위해서는 웹 사이트를 구축할 수 있을 만한 성능을 가진 컴퓨터와 통신회선과 소프트웨어를 갖추는 비용이 적지 않게 들어간다. 따라서, 비용 때문에 독립적인 인터넷 서버를 운영하기 어려운 중소기업들에게 인터넷 서비스 제공업체(ISP)를 통하여 웹 서버를 임대해 줌으로써, 자체 도메인을 갖게 해 주는 서비스를 말한다. 웹 호스팅 서비스를 이용하면 ISP가 보유하고 있는 고속 인터넷 백본에 직접 서버를 연결, 빠르게 정보를 제공할 수 있다. 웹 호스팅 서비스는 전문인력을 투입하지 않고도 저렴한 비용으로 홈페이지를 관리할 수 있을 뿐만 아니라 ISP가 제공하는 홈페이지와 연결하여 이곳을 방문하는 이용자들을 대상으로 홍보 효과를 높일 수 있다는 장점이 있다.

---

인터넷 기본 지식에 대한 질문을 토대로 따로 조사를 하여 답을 달아 보았는데 순차적으로 연결되면서 흥미로운 지식을 얻었다. 인터넷을 쓰면서 당연하게 써왔던 것들을 알아보니 조금 더 웹에 친숙해진 느낌을 받는다.

 

[JavaScript]

DOM에 대한 이해

- HTML의 태그를 JS가 이용할 수 있는 객체로 만드는 것

- 트리구조를 이해하고 적절하게 DOM을 이용하는 것이 필요

 

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조잘할 수 있도록 API를 제공합니다.

 

DOM은 어떻게 생성될까(어떻게 보여질까?)

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만,  DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다. DOM의 개체 구조는 '노드 트리'로 표현된다.DOM은 HTML도 아니고 DOM은 브라우저에서 보이는 것도 아니다. DOM은 개발도구에서 보이는 것이 아니다.

---

클라이언트에서 직접 API를 호출하여 사용하는 일/ 리소스를 비동기로 요청할 수 있음

Ajax (Asynchronous JavaScript AND XML) 데이터를 요청하고 가져오는 방법

비동기식 데이터 전송은 요청-응답 중에서도 다른 작업을 할 수 있기 때문에 많이 사용되는 방법

XHR (XHLHttpRequest) 객체를 사용

JSON Java Script 형태로 데이터를 전송함

 

각 프레임워크의 차이점, 장점, 단점을 이해하여 필요한 프레임워크를 선택하고 개발

React 가상 DOM을 사용하여 복잡하고 동적인 웹 어플리케이션의 상태를 관리

Next.js React의 단점을 보완하고 SSR을 구현, 사용자 측면에서 더 빠른 웹 페이지, SEO를 사용

* React 사용해보기

 

---

네이밍컨벤션

소스코드와 변수, 함수, 타입 등 식별자에 사용되는 문자열을 선택하기 위한 여러 규칙 중 하나이며, 프로그래밍 언어마다 다르다. 쉽게 말해 변수/함수 등의 이름을 무엇으로 지어야 하는가?를 정하는 규칙이다.

 

네이밍컨벤셩이 필요한 이유

가장 핵심적인 이유는 '가독성'을 향상시키기 위함이다. 가동성이 높아진다면, 협업 시에도 팀의 생산성과 효율성을 증가시킬 것이다. 다른 사람들이 코드를 보고 보다 빨리 이해하고 활용 가능할 것이기 때문이다. 물론 협업의 상황이 아니어도, 개인의 코드를 일관성으로 관리하기 위해서는 필요하다.

 

대표적인 네이밍 컨벤션

1. 카멜 케이스

낙타 등 모양을 닮았다고 해서 붙여진 이름, '카멜 케이스'이다.

첫 문자는 소문자, 그 이후 의미 있는 단위로 대문자를 이용한다. honeygyuPro

 

2. 스네이크 케이스

뱀 모양을 닮았다고 해서 붙여진 이름, '스네이크 케이스'이다.

모든 문자가 소문자로 이루어지며, 언더바를 이용하여 단어를 구분한다. honeygyu_pro

 

3. 파스칼 케이스

첫 문자부터 대문자로 시작하고, 의미 단위로도 대문자를 사용한다. HoneygyuPro

---

웹팩(Webpack)

웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.

---

Github Essentials 책추천

https://www.yes24.com/Product/Goods/38824449

GitHub Essentials - YES24

 

채용 공고 분석

 

바텀업 방식 (DOWN - TOP)

각 세부적인 모듈을 먼저 구성하여 전체를 만드는 방식

순차적으로 일을 진행할 경우

 

탑다운 방식 (TOP-DOWN)

뼈대와 설계를 먼저 만들고 세부적인 사항을 진행

 

대기업 채용역량 중 신입에 대한 역량이 안적혀있으면 경력직을 보면 앞으로 공부해야할 방향성이 보인다.

경력은 2~3년이며 프론트엔드는 React가 거의 필수 같다.

여러 직무를 보면 공통점이 보인다.

채용연계형 인턴, 테크캠프 등을 참여해보는 것도 좋다.

배달의민족 모집은 자세히 나오니 보는 것을 추천한다.

스타트업 갈 때 주의할 점은 원활하게 회사가 투자를 받고 있는지 확인해야 한다.

 

자기소개서 및 서류전형

내가 누구인지 얼마나 많은 경험을 했는지 초점을 맞추기 보다 회사가 원하는 인재는 무엇일지 생각해 보기

 

정량화 시킬 수 있는 것은 정량화 하자

~을 열심히 했다 ~을 원활히 할 수 있다 등등을 잘 할 수 있다 X -> 절대 X

수치를 통해 보여준다. 1개월 동안 ~을 기획 후 4개월 동안 ~을 사용하여 ~을 통해 ~을 4개월 동안 운영 및 서비스 했다

구체적인 사례를 보여준다. 3학년 때 ~ 활동을 통해 ~를 기획할 때 다툼이 있었고 ~이 문제였으며 ~을 통해 문제를 해결했다.

 

경험을 구체화하자

사건의 발생 -> 문제점 발견 -> 해결 -> "깨달은 점"

경험을 통해 결과를 얻지 못했다면 왜 얻지 못했는가? 개선할 점은?

 

지원 동기

내가 설명하고 싶은 내가 아닌 기업이 원하는 내가 되도록

단순히 개발자가 되기 위해 X -> 왜 이 기업인지? 왜 이 기업의 서비스인지? 내가 이 기업과 서비스에 대한 관심, 개발 직무를 바라보는 나의 태도

 

채용 공고 사이트

사람인 https://www.saramin.co.kr/zf_user/

사람인 - 내일이 더 즐거운 취업플랫폼

로켓펀치 https://www.rocketpunch.com/

로켓펀치 - 비즈니스 네트워크

원티드(서류탈락 시 재지원 불가) https://www.wanted.co.kr/

커리어 여정을 행복하게, 원티드

링크드인 https://www.linkedin.com/

LinkedIn 로그인 또는 회원 가입

잡코리아 https://www.jobkorea.co.kr/

잡코리아 - 대한민국 대표 취업플랫폼

잡플래닛(회사 정보 사이트) https://www.jobplanet.co.kr/contents

NO.1 기업 정보 플랫폼

블라인드 https://www.teamblind.com/kr/

직장인 기업 연봉 & 이직 커리어

 

---

포트폴리오 구성하기

포함되어야 하는 기본 내용

간단한 자기 소개(한줄로 자신을 표현한다면?)

학력(소속)

연락 가능한 연락처, 블로그, 깃허브 주소

 

주의사항

깃허브와 블로그는 여러분 그 자체 이다.

따라서 관리만 잘 되어 있다면 엄청난 가산점!

내가 어떻게 구현했는지 코드를 볼 수 있음

내가 얼마나 성실했는지 날짜를 통해 알아 볼 수 있음

내가 무엇을 공부했는지 알 수 있다

블로그를 첨부하는 경우 그 블로그의 내용을 물어 볼 수 있다

제출 했을 때 이점이 있는지 아니면 오히려 발목을 잡을 지 판단하시고 첨부해야 한다. 만약에 제출했다면 블로그와 깃허브의 코드를 한 번 확인하시고 면접에 가시는 것을 추천드린다.

 

프로젝트

간략한 프로젝트 정보

- 작업 기간

- 투입 인원

- 내가 맡은 일 및 주요 업무

- 특이사항

- 프로젝트의 전체 구조를 알 수 있는 사진이나 대표 이미지

 

프로젝트 개요

- 이 서비스는 무엇을 누구를 위한 서비스 인가?

- 어떤 서비스를 제공하는가? 누구를 위한 서비스인지?

 

이슈사항, 해결한 경험

- 어떤 상황 때문에 이슈가 발생했고 그것을 어떻게 해결하는지 해결 방법 중 다른 방법도 있는데 왜 그 방법을 사용했는지

 

사용한 라이브러리 및 프레임워크

- 이 프로젝트에 사용된 라이브러리를 다 적지 않아도 됨

- 면접에서 '왜 사용했는가' 라는 질문을 받을 때 답  할 수 있어야 함

- 왜 적용했고 그래서 어떠한 결과를 얻었으며 보안할 내용은 없는지 얻은 경험은 무엇인지 적어두어도 좋음

 

주의사항

모든 프로젝트를 넣는게 좋을까?

지원하는 회사가 사용하고 있는 기술 스택, 관심 이쓴 기술 위주로만 우선 구성

관련이 없는 프로젝트를 넣어야겠다면 중요도 순으로 넣고 마지막에 넣을 것

회사에 따라 여러가지 경험을 가지고 있는 개발자를 원할 수 있음

api 통신에 대해 경험할 수 있었떤 프로젝트가 있는 겨우 넣어도 좋다고 생각함(개인적인 주관)

절대 절대 주의 할 것! 내가 이런거 해봤다 나는 이런 사람이다가 아닌 면접관의 입장에서 회사의 입장에서 생각해 보기 이 포트폴리오를 보고 같이 일하고 싶은 사람, 관심이 생기도록 구성 하는 것이 중요

 

포함되어야 하는 기본 내용

스킬(기술 스택을 상중하등의 방법으로 얼마나 할 수 있는지 표현)

개발과 관련된 경험

사용할 수 있는 툴

 

 toy project IDEA(개인 프로젝트)

드리블 https://dribbble.com/ 

Dribbble - Discover the World’s Top Designers & Creative Professionals

색조합, 디자인시드 확인

 

핀터레스트 https://www.pinterest.com/ 

Pinterest

 

자기소개서와 포트폴리오 작성할 때 참고하면 좋을 듯한 팁을 얻었다. 조만간 있을 자소서에 다시 작성해 봐야겠다.