웹 화면 디자인(CSS) + 유동 ip로 외부 접속 가능한 서버 열기 (2주차)

[1901236장석천]

직접 웹을 만들게 되면 사용자가 직접 웹을 디자인 해 줘야 하는데 직접적으로 웹을 디자인하는 언어?는 CSS이다

저번에 올렸던 App.js 파일에서

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

import React from 'react'; import logo from './logo.svg'; import './App.css';   function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <p>           Edit <code>src/App.js</code> and save to reload.         </p>         <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); }   export default App;   Colored by Color Scripter

cs

import './App.css';  이 줄이 App.css  사용할때 써야하는 코드이다

App.css의 원본 파일은 다음과 같다

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

.App {   text-align: center; } .App-logo {   height: 40vmin;   pointer-events: none; } @media (prefers-reduced-motion: no-preference) {   .App-logo {     animation: App-logo-spin infinite 20s linear;   } } .App-header {   background-color: #282c34;   min-height: 100vh;   display: flex;   flex-direction: column;   align-items: center;   justify-content: center;   font-size: calc(10px + 2vmin);   color: white; } .App-link {   color: #61dafb; } @keyframes App-logo-spin {   from {     transform: rotate(0deg);   }   to {     transform: rotate(360deg);   } }   Colored by Color Scripter

cs

VScode에서 npm start를 사용해 웹페이지를 열게 되면 로컬컴퓨터에서만 웹사이트 접속이 가능한데 이를 외부에서도 접속이 가능하게 포트포위딩과 DDNC를 이용하여 만들어 보도록 하겠습니다

***공유기는 ipTime를 기준으로 작성되었습니다***

192.168.0.1 

에 접속을 하면 다음과 같은 화면이 나옵니다

기본적으로 이름과 암호는 admin이므로 바꾸지 않았으면 그냥 치고 들어가면 됩니다

들어가면 다음과 같은 화면이나오는데  관리도구 아이콘을 눌러 들어가면 됩니닺

관리도구 아이콘을 통해 들어가게 되면  아래 화면이 뜹니다

규칙이름 : 사용자가 기억하기 편한 이름

내부 IP주소 : 빨간 동그라미 친부분을 클릭하면 현재 접속중이 공유기의 내부 ip 주소가 자동으로 기입

                  (안뜨면 윈도우 -> cmd -> 콘솔창에 ipconfig 치고 IPv4 주소 확인)

프로토콜 : TCP

외부 포트, 내부포트 : 이 프로젝트에선 포트는 3000번으로 통일해서 사용하도록 하겠습니다

                            (사용자가 사용할 포트로 지정해 주세요)

포트포워딩이 완료되면 DDNC 설정을 하여 유동 ip에게 별명을 지어주겠습니다

DDNC는 숫자 체계의 IP 주소를 사람이 기억하기 쉬운 문자열 주소로 변경해 주는 것을 DNS라고 하고 DNS는 ip가 바뀌게 되면 대응해서 문자열 주소를 바꿔줘야하는 문제점이 있는데 이를 보안하여 ip가 바뀌더라도 지정한 문자열 주소만 입력해도 ip를 자동으로 갱신하여 이동하는것이 DDNC 이다

위 사진은 DDNC 등록을 마친화면인데 등록을 할때

호스트이름은 사용자가 지정하고 싶은 웹페이지 주소로 xxx.iptime.org 의 형태이다

(xxx는 호스트가 지정한 이름 예를 들면 JSC.iptime.org 나 jang0601.iptime.org의 형태)

사용자 ID는 아무 이메일 주소를 치면 된다 사용자가 문의나 데이터 확인 할때 쓴다고 한다

모든 과정을 마무리하면 위와 같이 xxx.iptime.org 옆에 정상 등록 이라는 글이 뜨는데 만약 뜨지앉고 오류가 난다면 다른 사용자가 그 이름을 이미 사용중인 것이므로 DDNC 정보 삭제후 다시 호스트이름을 바꿔서 등록하면 된다

DDNC 등록까지 마쳤으면 다시 VScode를 열어 터미널에 저번과 같이 npm start를 치면

저번과 같은 화면이 뜹니다 저번과 다은점은 xxx.iptime.org:3000을 치면 이제 외부에서도 접속을 할 수 있습니다