etc. 프론트엔드 개발자 준비방법

https://www.youtube.com/watch?v=YbVuqWD12Ko&t=20s

1. 만들고 싶은 웹앱 하나 준비하기.

2. 성장 가능성 / 협업 능력을 보여줘야 함.

성장 가능성

1.개발을 좋아하는지 -깃헙 커밋이 많이 있는지. 2. 컴퓨터 과학에 대한 지식 -자료구조, 알고리즘, 컴퓨터구조, 운영체제, 네트워크, DB 3. 자바스크립트 지식 -> [모던 자바스크립트 deep dive]라는 책 4. 웹브라우저 지식

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=251552545

모던 자바스크립트 Deep Dive

**코딩테스트 대비 - 알고리즘, 자료구조 파악 = 백준알고리즘 100문제 풀기
https://www.acmicpc.net/

Baekjoon Online Judge

___

협업 능력

Git, GitHub로 pull request 날리고 코드 리뷰하고, 쓰고싶은 기술 정리하여 깃허브 wiki에 남김. README는 잘 정리되어있어야함. 배포 링크 남기기

___





추천 강의 > 생활코딩 , 노마드코더, 제로초

만들고 싶은 앱에 들어가는 기술스탯(예-리액트,뷰,바닐라자바스크립트 등)을 파악하고 정한 기술 배워야함.(강의로)
잘하는 사람들이 코딩할 떄 어떻게 하는지 보기 위해 강의를 보는 것을 추천함.

---

주로 면접 질문에는
웹브라우저 지식(google.com을 입력하고 엔터치면 무슨 일이 일어나는가)

<답>
구글 서버에서 index.html을 GET요청으로 가져와야하는데
IP주소가 필요한데,
google.com이라는 도메인 네임을 통해 dns서버에 요청을 보내 구글의 ip주소를 찾고
그걸로 index.html을 가져와서 브라우저에 렌더링한다.


what happens when type google

1. You type maps.google.com into the address bar of your browser.

2. The browser checks the cache for a DNS record to find the corresponding IP address of maps.google.com.

DNS(Domain Name System) is a database that maintains the name of the website (URL) and the particular IP address it links to. Every single URL on the internet has a unique IP address assigned to it. The IP address belongs to the computer which hosts the server of the website we are requesting to access. For example, www.google.com has an IP address of 209.85.227.104. So if you’d like, you can reach www.google.com by typing http://209.85.227.104 on your browser. DNS is a list of URLs, and their IP addresses, like how a phone book is a list of names and their corresponding phone numbers.


To find the DNS record, the browser checks four caches.

● First, it checks the browser cache. The browser maintains a repository of DNS records for a fixed duration for websites you have previously visited. So, it is the first place to run a DNS query.
● Second, the browser checks the OS cache. If it is not in the browser cache, the browser will make a system call (i.e., gethostname on Windows) to your underlying computer OS to fetch the record since the OS also maintains a cache of DNS records.
● Third, it checks the router cache. If it’s not on your computer, the browser will communicate with the router that maintains its’ own cache of DNS records.
● Fourth, it checks the ISP cache. If all steps fail, the browser will move on to the ISP. Your ISP maintains its’ own DNS server, which includes a cache of DNS records, which the browser would check with the last hope of finding your requested URL.


You may wonder why there are so many caches maintained at so many levels. Although our information being cached somewhere doesn’t make us feel very comfortable when it comes to privacy, caches are essential for regulating network traffic and improving data transfer times.

3. If the requested URL is not in the cache, ISP’s DNS server initiates a DNS query to find the IP address of the server that hosts maps.google.com.

As mentioned earlier, for my computer to connect with the server that hosts maps.google.com, I need the IP address of maps.google.com. The purpose of a DNS query is to search multiple DNS servers on the internet until it finds the correct IP address for the website. This type of search is called a recursive search since the search will repeatedly continue from a DNS server to a DNS server until it either finds the IP address we need or returns an error response saying it was unable to find it.
In this situation, we would call the ISP’s DNS server a DNS recursor whose responsibility is to find the proper IP address of the intended domain name by asking other DNS servers on the internet for an answer. The other DNS servers are called name servers since they perform a DNS search based on the domain architecture of the website domain name.
Without further confusing you, I’d like to use the following diagram to explain the domain architecture.

4. The browser initiates a TCP connection with the server.

To transfer data packets between your computer(client) and the server, it is important to have a TCP connection established. This connection is established using a process called the TCP/IP three-way handshake. This is a three-step process where the client and the server exchange SYN(synchronize) and ACK(acknowledge) messages to establish a connection.

1. The client machine sends a SYN packet to the server over the internet, asking if it is open for new connections.
2. If the server has open ports that can accept and initiate new connections, it’ll respond with an ACKnowledgment of the SYN packet using a SYN/ACK packet.
3. The client will receive the SYN/ACK packet from the server and will acknowledge it by sending an ACK packet.
Then a TCP connection is established for data transmission!

5. The browser sends an HTTP request to the webserver.

Once the TCP connection is established, it is time to start transferring data! The browser will send a GET request asking for maps.google.com web page. If you’re entering credentials or submitting a form, this could be a POST request. This request will also contain additional information such as browser identification (User-Agent header), types of requests that it will accept (Accept header), and connection headers asking it to keep the TCP connection alive for additional requests. It will also pass information taken from cookies the browser has in store for this domain.

6. The server handles the request and sends back a response.

The server contains a webserver (i.e., Apache, IIS) that receives the request from the browser and passes it to a request handler to read and generate a response. The request handler is a program (written in ASP.NET, PHP, Ruby, etc.) that reads the request, its’ headers, and cookies to check what is being requested and also update the information on the server if needed. Then it will assemble a response in a particular format (JSON, XML, HTML).

7. The server sends out an HTTP response.

The server response contains the web page you requested as well as the status code, compression type (Content-Encoding), how to cache the page (Cache-Control), any cookies to set, privacy information, etc.

● 1xx indicates an informational message only
● 2xx indicates success of some kind
● 3xx redirects the client to another URL
● 4xx indicates an error on the client’s part
● 5xx indicates an error on the server’s part
So, if you encountered an error, you can take a look at the HTTP response to check what type of status code you have received.

8. The browser displays the HTML content (for HTML responses, which is the most common).

The browser displays the HTML content in phases. First, it will render the bare bone HTML skeleton. Then it will check the HTML tags and send out GET requests for additional elements on the web page, such as images, CSS stylesheets, JavaScript files, etc. These static files are cached by the browser, so it doesn’t have to fetch them again the next time you visit the page. In the end, you’ll see maps.google.com appearing on your browser.