bow_.log

Naver 지도를 만들어보자!

Fri, 11 Nov 2022 08:01:52 GMT

출처-[빠더너스 유튜브]

오늘은 작은 프로젝트를 만드는데 가장 중요한 내용인 네이버 맵 API를 사용할 거다. 근데 내용을 짧게 할 거임

일단 네이버 클라우드 플랫폼 여기에서 가입하고

Web Dynamic Map을 사용할 수 있게 만들고 인증 키를 복사하는 것까지 만드셈

😒

우선 네이버 맵을 쓸 파일 하나 만들어준다 근데 바로는 안 할 거임

나는 지난번에 리액트를 타입 스크립트 형태로 패키지 설치를 했다. tsx을 쓸 거란 말

우선 index.html파일에 해당 내용을 넣어준다

일반적인 순서

Map

복붙만 하지말고 인증키 내용은 바꿔주자 그리고 라이브러리 하나를 설치해주자

npm i -D @types/navermaps

라이브러리는 클라이언트 폴더에 설치해야한다 npx create-react-app 폴더명 --template typescript으로 패키지 설치했던 폴더 안에 라이브러리 설치해야한다.

다음으로 map을 생성, 조작할 파일 내용을 입력한다

export default function NaverMap() {
  let map: naver.maps.Map;
  const center: naver.maps.LatLng = new naver.maps.LatLng(
    37.3595704,
    127.105399
  );

  map = new naver.maps.Map("map", {
    center: center,
    zoom: 16,
  });

  return (
    <>
      
    
  );
}

완성 !

좋다. ..좋니?

인증키도 발급받아 스크립트에 넣었고 라이브러리도 설치했고 맵을 생성해서 html id로 전달해서 div에 id 값을 넣어 지도를 만들었다!

이제 실행시켜보면?

🤬 Uncaught TypeError: Cannot read properties of null (reading 'style') 이라는 오류가 뜬다

왜? 외? 웨?

이유야 여러 가지일 듯

브라우저가 html 파싱하고 dom 트리를 구성하면서 id 값인 map을 불러올 때 아직 스크립트가 참조를 못해서 표시가 안될 수도 있다.
리액트 메인 페이지를 렌더링 했을 때 리액트가 마운트 되기 전이라서 즉, 리액트가 장착되기 전에 네이버 api 코드가 실행되면서 id 값인 'map'이 없기 때문에 오류가 남

그러면 렌더링 이후에 하면 되겠다!라고 생각하면 당신은 멋진 사람이다.

해결방법 중 한가지

사실 두 개임 근데 다시 이런 현상을 막고자 하나는 예방하자는 거임

index.html에서 순서를 바꾸어주자

왜 바디 안에 넣었냐면 브라우저가 html 파싱하고 dom 트리를 구성하면서

id 값인 map을 불러올 때 아직 스크립트가 참조를 못해서 표시가 안될 수도 있다.

방금처럼 같은 이유라고 볼 수 있다 근데 이거는 거의 안 그럴 듯

naverMap.tsx에서도 코드 내용을 수정해 주자 그리고 옵션을 바꾸자!

import { useEffect } from "react";

export default function NaverMap() {

  useEffect(() => {
    let map = null;
    const initMap = () => {
      // naver.maps.Map(mapDiv, mapOptions)
      //    ㄴ> mapDiv : 지도를 삽입할 HTML 요소 또는 HTML 요소의 id , mapOptions : 지도의 옵션 객체
      map = new naver.maps.Map("map", {
        //center : 좌표 / naver.maps.LatLng : 좌표 입력함수
        center: new naver.maps.LatLng(37.43968, 127.12779),
        zoom: 18, //확대 7~21 까지 최소,최대
      });
    };
    initMap();
  }, []);

  const mapStyle = {
    width: "100%",
    height: "300px",
  };

  return (
    <>
      
    
  );
}

그럼 확인해본다람쥐

캬 👍

참고로 좌표 바꾼 곳이 우리 집임 진짜 우연히도 네이버랑 일하기 가까운 곳이네..

React 초기설정을 해주자!

Fri, 11 Nov 2022 06:00:30 GMT

( 서버와 클라이언트를 만들자 편을 참고 )

오늘은 리액트 ( 타입 스크립트 ) 프로젝트를 설치했을 때

처음에 무엇을 건드려야 할지 모를 때 간단한 가이드임

참고로 아무것도 없는 상태로 만드는 가이드라서 기술적인 부분은 없다.

프로젝트를 설치했다면 요런것들이 생겼을것이다.

여기서 Public > index.html src > index.tsx 파일을 제외한 나머지를 삭제

요렇게 남게된다. 그러면 npm start로 실행해본다면?

오류가 있다. 사실 저 한 줄 말고도 없애줘야 할 게 더 있음

먼저 index.html파일부터 보면

맨 위 한 줄 빼곤 다 필요가 없다. import React from 'react'; import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( );

이제 웹브라우저에서 확인해 보면 아무것도 없는 페이지가 완성이 되었다.!

그래도 아무것도 없으니까 허전하니 아주 중요한 메세지를 띄워야겠다.

굿 👍

서버와 클라이언트를 만들자

Thu, 10 Nov 2022 08:01:06 GMT

오늘은 작은 프로젝트를 만들기 위해 초기 세팅을 해주자!

먼저 VSCode로 폴더를 만들어준다!

구조는 서버 폴더 > 클라이언트 폴더로 구성할 거니까 서버 폴더부터 만들어주자

다른 건 그냥 엔터로 넘어가도 된다 하지만 entry point는 서버를 구성할 파일과 같은 이름으로 만들어준다

인스톨하면 알아서 설치해 준다 서버를 구성하는 데 도움을 주는 라이브러리이다.

서버를 조작할 파일을 하나 만들어준다.

이제 서버 폴더의 기본 구조는 완성했으니 클라이언트 폴더를 만들어주자

npm create-react-app 그리고

npx create-react-app 자유작명 또는 타입 스크립트로 사용하려면

npx create-react-app 자유작명 --template typescript 로 만들어 준다.

나의 경우는 typeScript 선택했다.

설치가 완료되면 클라이언트 폴더로 다시 열어도 좋지만 귀찮으니 터미널 창에서

cd 폴더이름으로 이동 후 npm run build로 Html문서를 합쳐주는 작업을 해준다.

그리고 아까 만든 server.js에서

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(__dirname+'/<폴더이름>/build'))

app.get('/',(res,req)=>{
    req.sendFile('index.js')
})


app.listen(8080, function () {
  console.log('listening on 8080')
});

를 작성하여 서버를 켤 준비를 해준다 8080으로 접속하면 build/index.js 파일을 실행시켜주는 것이다!

실제로 클라이언트 폴더에 가서 경로로 따라가면 해당 파일이 있다.

이제 서버를 실행하여 확인해보자! 그 전에 나는 터미널에서 cd 폴더이름 으로 이동했으니 다시 그전 폴더로 이동시켜야 한다. 그래야 서버 폴더에서 서버를 실행하는 거니까

cd.. 해주면 됨

node server.js으로 서버를 실행하면 터미널 창에서 해당 콘솔 내용이 출력 된다.

app.listen(8080,function(){
  console.log('listening on 8080');
});

이제 클라이언트에서 실행하는 게 아니라 서버에서 실행하면 클라이언트 파일이 나온다는 걸 알 수 있다

그리고 웹 브라우저를 열어 localhost:8080 을 입력해서 들어가 보면 !?

굿 👍

인터넷이란 뭘까? ( 브라우저 편 )

Thu, 03 Nov 2022 07:43:19 GMT

브라우저가 뭘까?

이게 브라우저임 내가 원하는 기능을 서버에 요청하여 표시하게 해주는 것

브라우저 기본 구조

사용자 인터페이스 - 주소 표시줄, 뒤로/앞으로 버튼, 북마크 메뉴 등이 포함됨 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
UI 백엔드 - 콤보 박스와 창 같은 기본적인 위젯을 그리는데 사용. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다

※크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만하다. 각 탭은 독립된 프로세스로 처리된다.

렌더링 엔진의 동작 과정

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다...

가끔 우리가 인터넷하다보면 서서히 보여지게 되는것도 이것과 같은 의미이다.

💡 DOM 생성하는동안 만나면 DOM생성을 중지한 후 CSSOM을 생성한다.
💡 DOM ( Document Object Model )
💡 CSSOM ( CSS Object Model )

브라우저 동작순서?

내가 유저라고 생각하고 하나씩 실행해봄 ( 사용 브라우저 : 크롬 )

www.?.com을 입력
DNS가 입력한 주소의 IP로 반환 받음
반환받은 IP주소로 이동하여 서버에게 요청 = HTTP Request
서버가 요청받은걸 나에게 줌 = HTTP Response
요청받은 데이터들을 이제 유저가 볼수있게 해석 (파싱) 이때 렌더링엔진을 실행한다.
렌더링 엔진의 동작 과정을 지난다.
짜잔 브라우저 화면 완성 !
💡 DNS(Domain Name Server)

물론 설명이 생략된 내용들이 많다. 간단하게 이해하기 쉽게 설명하고 자세히 설명할 거임 일단 렌더링 엔진에서부터 HTML과 CSS를 해석하게 되는데

웹킷 동작 과정이다.

웹킷 동작 과정을 자세히 풀어보자 아래는 예시임



  
    
    
    Critical Path
  
  
    Hello web performance students!

대략 이런 느낌이다.

🌳 DOM Tree 생성과정

바이트 -> 문자 -> 토큰 -> 노드 -> DOM의 과정을 거치게 된다. 그래서 Dom Tree인가보다 이제 어떻게 표시되는지는 CSSOM이 결정한다.

🌳 CSSOM Tree 생성과정

하향식 규칙임 ( body의 스타일이 span에게 영향받음 )
근데 완전한 트리는 아님 스타일이 재정의 되었을때만

근데 DOM이랑 다른 구조인데 이것도 트리 구조라고 할수있는지 의문이다. 하지만 위의 사진을 보면 body에 적용한 스타일이 span까지 영향을 미치게된다. 하양식 규칙을 적용하게 되기 때문에 트리구조로 볼수가 있지만 완전한 트리는 아니다.

🌳🌳 Render Tree

웹킷 동작과정 중 일부

`Attachment`은 웹킷 동작 과정에서 마지막에 tree를 결합하여 표시하고 그려낼 수 있는 과정이다. 그러니까 `DOM Tree`+`CSSOM Tree` 합쳐지는 과정을 `Attachment`라고 하고 결과가 = `Render tree`이다

과정을 그림으로 나타낸 거

Render Tree를 생성하려고 하면 브라우저가 다음 작업을 수행한다.

DOM 트리의 루트에서 시작하여 표시되는 각 노드를 이동
- 일부 노드(스크립트 태그, 메타 태그 등)는 표시되지 않으며 렌더링된 출력에 반영되지 않으므로 제외
- 일부 노드는 CSS를 통해 숨겨짐 ex=( display : none ) 속성을 설정하는 규칙이 있기 때문에 렌더 트리에서 제외
표시되는 각 노드에 대해 일치하는 적절한 CSSOM 규칙을 찾아 적용
컨텐츠와 그 계산 스타일을 포함한 가시적인 노드를 내보냄

Redner Tree에는 무엇이 있을까?

Layout or Reflow

렌더 트리의 노드가 정확한 위치와 크기를 계산한다. 이때 %, rem, vh 이런 상대적인 값들은 절대적인 값으로 px로 바뀐다. 이 과정이 Layout 임 ( Reflow이라고도 함 )
Paint

Layout 나타날 때 Painting 메서드가 호출됨. 그리기 과중 후 화면에 UI가 나타나게 됨

Render Tree를 조금 더 자세히 설명해 주고 있다. 브라우저의 동적 변경이라든지 브라우저가 UI까지 보이게 되고 수치가 변했을 때 어떻게 수행하는지 등 궁금할 테니 찾아보자! 웹 브라우저의 동작원리를 알아보자-thyoondev

출처

인터넷이란 뭘까? ( HTTP 편 )

Thu, 03 Nov 2022 00:42:44 GMT

Http? 그게 머임..

-(HyperText Transfer Protocol) HTML과 같은 하이퍼미디어 문서를 전송하기 위한 프로토콜

저번에도 TCP/어쩌고 프로토콜이 나오는데 이번에도 나온다 그러면 TCP/IP랑 HTTP는 같은걸까?

이걸 이해하기 위해 OSI 7계층을 알아야함.

OSI 7계층

계층	이름	단위 (PDU)	예시	프로토콜 (Protocols)	디바이스 (Device)
7	응용 계층 (Application Layer)	Data	텔넷(Telnet), 구글 크롬, 이메일, 데이터베이스 관리	HTTP, SMTP, SSH, FTP, Telnet, DNS, modbus, SIP, AFP, APPC, MAP
6	표현 계층 (Presentation Layer)	Data	인코딩, 디코딩, 암호화, 복호화	ASCII, MPEG, JPEG, MIDI, EBCDIC, XDR, AFP, PAP
5	세션 계층 (Session Layer)	Data	NetBIOS, SAP, SDP, PIPO, SSL, TLS, NWLink, ASP, ADSP, ZIP, DLC
4	전송 계층 (Transport Layer)	TCP-Segment, UDP-datagram	특정 방화벽 및 프록시 서버	TCP, UDP, SPX, SCTP, NetBEUI, RTP, ATP, NBP, AEP, OSPF	게이트웨이
3	네트워크 계층 (Network Layer)	Packet	라우터	IP, IPX, IPsec, ICMP, ARP, NetBEUI, RIP, BGP, DDP, PLP	라우터
2	데이터링크 계층 (DataLink Layer)	Frame	MAC 주소, 브리지 및 스위치	Ethernet, Token Ring, AppleTalk, PPP, ATM, MAC, HDLC, FDDI, LLC, ALOHA	브릿지,스위치
1	물리 계층 (Physical Layer)	Bit	전압, 허브, 네트워크 어댑터, 중계기 및 케이블 사양, 신호 변경(디지털,아날로그)	10BASE-T, 100BASE-TX, ISDN, wired, wireless, RS-232, DSL, Twinax	허브,리피터

보면 HTTP는 7계층에 있고 TCP와 IP는 4층 3층에 있다.

그러면 최상위에 있으니까 같은거라고 볼수 있지 않을까? 개념적으로는 그렇다

ex) 내가 naver.com으로 인터넷 주소창에 쓰고 엔터를 한다면

7부터 1계층까지 지나가기 때문에 같은 의미라고 볼수 있다.

애매하게 말한 이유는 4계층에서 TCP와 HTTP를 놓고 본다면 같다고 할수있다.

하지만 7계층에선? 다르다.. 계층 설명은 OSI7계층에서 확인하면 이해하기 쉽다.

그래서 HTTP가 뭐임?

웹 브라우저와 웹 서버가 통신을 할 때 사용하는 통신규칙

CSS, HTML, JavaScript, image 와 같은 서로 주고받는 컨텐츠가 있을때 서로 주고받고 하기

위해 웹 브라우저와 웹서버가 알아들을 수 있어야 하는 공통 메시지가 바로 HTTP이다.

생활코딩에서 쉽게 설명해 주고 있다.

HTTP는 Request와 Response를 위한 메시지 구분되어 있음

그렇다면 요청과 응답에는 뭐가 있을까?

HTTP Request에는 이런 정보들이 있다.

생활코딩-Request message 에서 쉽게 설명해 주고 있다.

HTTP Resopnse에는 무슨 내용이 있을까?

생활코딩-Response message 에서 쉽게 설명해 주고 있다.

출처

생활코딩

인터넷이란 뭘까? ( 동작원리 편 )

Wed, 02 Nov 2022 07:10:26 GMT

인터넷이 뭐임?

인터넷(Internet)은 인터넷 프로토콜 스위트(TCP/IP)를 기반으로 하여 

전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망을 일컫는 말이다. 

그야말로 인류의 역사상 전례 없는 거대한 정보의 바다인 셈이다.....

🌳나무위키에서 긁어온 글이다.

단순히 생각해본다면 인터넷을 하기위해선 TCP와 IP가 있어야 한다는건데 그럼 TCP는 뭐고 IP는 뭘까?

TCP / IP가 뭐임?

Transmission Control Protocol - 전송 제어 프로토콜 컴퓨터가 다른 컴퓨터와 통신하기 위한 규약이라고 한다.

Internet Protocol - 인터넷 프로토콜 인터넷이 통하는 네트워크에서 어떤 정보를 수신하고 송신하는 통신에 대한 규약을 의미한다.

네트워크에서 컴퓨터시스템에 연결하는데 사용되는 통신프로토콜의 패밀리라는것

제일 많이 쓰는 네트워킹방식이다. 참고로 TCP와 IP의 OSI계층은 서로 다르다

인터넷 동작원리

인터넷이 동작하려면 컴퓨터들끼리 통신을 해야한다. 그러면 위와 같이 TCP/IP를 사용함

인터넷이 동작하려면 컴퓨터끼리 연결해야 할 것 같음

그런데 여러 컴퓨터가 연결하려고 하는 상황이면??

굉장히 보기 불편하다 중간 다리 역할 같은 장비를 추가해 준다면?

너무 깔끔하다 이게 라우터임 라우터끼리 통신도 가능

만약 멀리 아주아주 멀리~ 있는 사람에게도 네트워크 연결을 하고 싶다면?

ISP를 연결해야한다. 즉 통신사와 연결해야한다는 것이다. 그러면 아주 멀리 있더라도 서로 연결이 가능함

TypeScript가 뭐지?

Tue, 01 Nov 2022 08:36:25 GMT

요새 채용공고에 보면 React와 TypeScript를 자주 보고 있다.

💡 TypeScript가 뭘까?

쉽게 풀어보자면.. 오타 교정, 타입 체크 ( 문자인지 숫자인지 ~기타 등등) 자바스크립트가 다이나믹타이핑을 지원하는 걸 막아주는 언어라고 해야 할까? 공항 검색대처럼 굉장히 엄격한 언어라고 할 수 있다

그럼 다이나믹 타이핑은 뭘까?

변수를 지정할 때 데이터 타입을 명시하지 않아도 컴퓨터가 알아서 해석하도록 해준다고 쓰여있다. 사람처럼 비유하자면 *"거기에 있는 그거 좀 줘봐"* 가 아닐까?

💬 어떻게 사용해야할까?

변수를 쓸 때

var name = "kim";

에서 타입을 지정해 주면 된다.

var name : string = "kim";

이런 식으로 사용할 수 있는 방법이 많다.

let name : string[] = ["kim","lee"...]

let name : string | number = 4885;

let age : { 나이 : number } = { 나이 : number };

type nameType = string | number;
let name : nameType = 'lee'

let user : [string,number] = ['kim',10]

//함수를 사용할때는 타입을 미리 체크해줘야한다
function 함수( a : number) { 
    if(typeof x === 'number'){
        return a * 2
    }

// object 타입
type userType={
    name? : string, // name 속성이 string거나 name이 undefined라는 의미이다
    age : number
}
let kim : userType = {
    name : 'kim',
    age : 10
}

//object안에 속성이 전부 같은 속성일때 타입 지정하는것도 있다
let Person : { [key : string] : number } = {
    na_E : 10,
    kI : 190,
    mu_gea : 100
  }

//class도 사용가능하다 대신 중괄호안에 변수를 만들어야 사용가능

하지만 꼭 타입을 지정하지 않아도 알아서 타입을 지정해 준다 편하다.. 그래도 나는 주니어_주니어 니까 사용하는 버릇을 만들자

추가로

let name ;
name = 'kim'

일 때 let name : Any 가 된다. 타입 속성을 해제하는 거랑 같은 의미이다

Any와 unknown 타입이 있는데
** 타입이 지정된 변수 = Any텍스트로 지정된 변수** 는 에러가 나지 않지만 ** 타입이 지정된 변수 = unknown로 지정된 변수** 는 에러가 난다

👀 사용해보자

function 함수( a : number | string ) {
    return a + 1;
}

이런 계산식을 사용하는 함수가 있다고 하자 그렇다면 문자 형식으로 된 숫자가 입력된다면?

어떻게 사용하는 방법들이 있을까?

Narrowing

 function 함수( a : number | string ) {
    if ( typeof a === "number") { // in , instanceof 사용 가능
        return a + 1
      }
      else if ( typeof a === "string"){
        return a + 1
      }
      else {return 0}
  }

Assertion

function 함수(a : number | string) {
    return (a as number) + 1 
    // a를 number로 인식하게 만듬 하지만 인식만할뿐 임시해결용에 가깝다.
}

Assertion은 확실할 때아니면 임시로 에러 해결할 때 사용하고 나머진 Narrowing을 사용해야겠다.