<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>bo_ri.log</title>
        <link>https://velog.io/</link>
        <description>borison and me</description>
        <lastBuildDate>Tue, 08 Aug 2023 21:01:54 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>bo_ri.log</title>
            <url>https://velog.velcdn.com/images/bo_ri/profile/7aadf488-57a4-49a6-9191-00b7a0c6a5a3/image.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. bo_ri.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/bo_ri" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[[Java] class note]]></title>
            <link>https://velog.io/@bo_ri/Java-class-note</link>
            <guid>https://velog.io/@bo_ri/Java-class-note</guid>
            <pubDate>Tue, 08 Aug 2023 21:01:54 GMT</pubDate>
            <description><![CDATA[<h4 id="--constructor-overloading">- constructor overloading:</h4>
<ol>
<li>must have same name as class</li>
<li>have no ‘void’ return type //void is returning null</li>
<li>public</li>
</ol>
<h4 id="--methodsgettersetter-override">- methods(getter,setter) override</h4>
<h4 id="--override-tostringbuilt-in-method">- override toString(built-in method)</h4>
<pre><code>public String toString(); //returning string type

{

return “\nName: “ + name + “\nAge: “ + age; //return only returns 1 datatype

}</code></pre><p>// printf, println suppose to work with primitive datatype</p>
<h4 id="--argument-promotion">- argument promotion:</h4>
<p>promotion: conver to upper datatype.</p>
<p>ex. float → double, int → long, float, double</p>
<h4 id="--method-call-stack-and-stack-frames">- Method call stack and stack frames:</h4>
<ul>
<li>FIFO(First In First Out): que</li>
<li>LIFO(Last In First Out): stack</li>
</ul>
<h4 id="--scope-of-declatations">- Scope of Declatations:</h4>
<p>variable 가 선언 된 후 (int x) 그 블럭{} 안에서만 사용할 수 있다는 것. it is not transferring to other block.</p>
<h4 id="--method-overloading">- Method overloading:</h4>
<p>method same name w/ different signature.(not parameter)</p>
<pre><code>public static void xyz(int x, String y){

//body

}</code></pre><h4 id="how-to-override-method">how to override method?</h4>
<ol>
<li>change number of parameters.(int x, String y, char z)</li>
<li>change data type of parameters.(String x, int y)</li>
<li>change order of parameters.(char x, int y, string z)</li>
</ol>
<h4 id="--array">- Array:</h4>
<p>array of specific datatype[ ]</p>
<h4 id="--enhance-for-loop">- Enhance for loop:</h4>
<pre><code>for (int e : array)

system.out.printf(”\n%d”, e);</code></pre><h4 id="--format-specifier">- Format specifier</h4>
<p>%s = string</p>
<p>%d = double</p>
<p>%f = float or double</p>
<p>%n = line breaking</p>
<h4 id="--instance-variable">- instance variable?</h4>
<h4 id="--package">- Package:</h4>
<p>groups related classes, so that they could be imported into programs and reused.</p>
<h4 id="-access-modifier">-Access Modifier</h4>
<table>
<thead>
<tr>
<th>Modifier</th>
<th>Class</th>
<th>Package</th>
<th>Subclass</th>
<th>World(outside of package)</th>
</tr>
</thead>
<tbody><tr>
<td>public</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
</tr>
<tr>
<td>protected</td>
<td>Y</td>
<td>Y</td>
<td>Y</td>
<td>N</td>
</tr>
<tr>
<td>no modifier</td>
<td>Y</td>
<td>Y</td>
<td>N</td>
<td>N</td>
</tr>
<tr>
<td>private</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>N</td>
</tr>
</tbody></table>
<h3 id="-inheritance">-Inheritance</h3>
<ul>
<li>Object<ul>
<li>Base class (= Parent class, Super class)<ul>
<li>Derived class(=Child class, Sub class)</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>//field</p>
<pre><code>protected int gear;

protected int speed;</code></pre><pre><code>public class Bicycle(int gear, int speed){}  ← Super class

class MountainBike extends Bicycle { ← Sub class

public mountainBike(int gear, int speed, int seatHeight){

super(gear, speed);

this.seatHeight - seatHeight;} 
}</code></pre><h4 id="-abstract-class">-Abstract class</h4>
<p>Abstract class can have both ‘abstract class’ and ‘concrete class’</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[Web application devel] w5]]></title>
            <link>https://velog.io/@bo_ri/Web-application-devel-w5</link>
            <guid>https://velog.io/@bo_ri/Web-application-devel-w5</guid>
            <pubDate>Tue, 08 Aug 2023 20:54:20 GMT</pubDate>
            <description><![CDATA[<ul>
<li>ejs? → “Front end”</li>
</ul>
<h4 id="--mongosh">- Mongosh:</h4>
<h4 id="--메뉴얼리-입력할-때">- 메뉴얼리 입력할 때</h4>
<pre><code>db.users.insert({

“key”: “value”,

“key”: “value”})</code></pre><h4 id="--찾을-때하나만-찾을-때">- 찾을 때(하나만 찾을 때)</h4>
<ul>
<li>db.users.findOne({”email: sdlkfjsldkfj”})</li>
</ul>
<h4 id="--찾을-때한번에-여러개-찾을-때">- 찾을 때(한번에 여러개 찾을 때)</h4>
<ul>
<li>db.users.find({”email: sdlkfjsldkfj”})</li>
</ul>
<h4 id="--지울-때">- 지울 때</h4>
<ul>
<li>remove</li>
</ul>
<h4 id="--appweb-browser-에서-유저가-입력할-때">- App(Web browser) 에서 유저가 입력할 때:</h4>
<ul>
<li>.save</li>
</ul>
<h4 id="--passport-란">- Passport 란?</h4>
<p>노드에서 제공하는 모듈. user authenticate, validate하는 middleware</p>
<ul>
<li>패스포트가 패스워드를 받으면 encrypt 해서 DB에 저장.</li>
<li>ex) passport-facebook</li>
<li>passport-local → 로컬로 관리</li>
<li>passport-jwt ??</li>
</ul>
<p>npm install passport passport-local passport-local-mongoose</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[Web application devel] w2]]></title>
            <link>https://velog.io/@bo_ri/Web-application-devel-w2</link>
            <guid>https://velog.io/@bo_ri/Web-application-devel-w2</guid>
            <pubDate>Tue, 08 Aug 2023 20:51:18 GMT</pubDate>
            <description><![CDATA[<p>//MVC: Model - View - Controller architecture pattern</p>
<h4 id="--mean">- MEAN</h4>
<p>-MongoDB, Express, Angular(google), Node.js</p>
<h4 id="--lampwhat-ppl-would-do-before">- LAMP(what ppl would do before)</h4>
<p>-Linux(Node.js)</p>
<p>-Apache(Express.js → web server)</p>
<p>-MySQL(MongoDB → persistence layer)</p>
<p>-PHP or Python or Perl (Angular → User Interface)</p>
<h4 id="--mern-stack">- MERN stack</h4>
<p>same as MEAN with React.js(face book)</p>
<p>Angular is still versatile but React is more popular</p>
<p>//bottle necking(병목현상)</p>
<p>//type script is a part of Javascript</p>
<h4 id="--3-tier-architecture-for-developing-web-app">- 3 tier architecture for developing Web App</h4>
<ol>
<li>Data (model)</li>
<li>Presentation (view)</li>
<li>Logic (controller) → client side</li>
</ol>
<h4 id="--diff-btw-static-and-dynamic-website">- diff btw STATIC and DYNAMIC website:</h4>
<p>ex. value of the stock changing ← Dynamic Web site (using AJAX)</p>
<p>//ajax 를 이용해서 조금 더 dynamic 하고 user friendly 한 web site개발 가능</p>
<h4 id="--var-let-const-차이">- var, let const 차이:</h4>
<p>-var: 재선언, 재할당 가능(e.g. var a = a;, var a = b;)</p>
<p>-let: 재할당 가능(e.g. var a = a;, a = b;)</p>
<p>-const: 둘다 불가능 (e.v. var a = a;)</p>
<p>&lt;ㅇevent-driven programming&gt;</p>
<h4 id="--thread-pool-system이란">- Thread pool system이란:</h4>
<p>-multi threading? can manage events or task at same time</p>
<p>one task → one thread</p>
<p>other event → another thread</p>
<p><strong>- intro to npm</strong></p>
<ul>
<li>npm(node packaged manager):</li>
</ul>
<p>Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램</p>
<p>//package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미</p>
<h4 id="--mongo-db">- Mongo DB</h4>
<ul>
<li>NoSQL(비정형, no relations, no JOIN query)</li>
<li>Replica set(Primart - Secondary…)<ul>
<li>Primary only can write</li>
<li>Provide data redundancy, recover from hardware failure.</li>
</ul>
</li>
<li>Vertical Scaling(when not too heavy) ↔ Horizontal Scaling(when big)</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[깃 앤 히로쿠]]></title>
            <link>https://velog.io/@bo_ri/%EA%B9%83-%EC%95%A4-%ED%9E%88%EB%A1%9C%EC%BF%A0</link>
            <guid>https://velog.io/@bo_ri/%EA%B9%83-%EC%95%A4-%ED%9E%88%EB%A1%9C%EC%BF%A0</guid>
            <pubDate>Tue, 08 Aug 2023 20:44:58 GMT</pubDate>
            <description><![CDATA[<p>&lt;깃 upload&gt;</p>
<ol>
<li><p>in folder, create file ‘.gitignore’ (깃에 올리지 않을 파일/폴더 지정할 수 있음)</p>
</li>
<li><p>write ‘node_module’ in .gitignore file.(용량이 큰 노드 모듈 폴더를 깃에 올리지 않기로 함)</p>
<p> 2.5. create file ‘.gitkeep’ under folder that has no content(빈 폴더 스트럭쳐를 깃에 그대로 유지하고 싶을때 폴더 안에 해당 파일을 만들어 놓으면 됨)</p>
</li>
<li><p>터미널 켜고!</p>
</li>
<li><p>git init</p>
</li>
<li><p>git add .</p>
</li>
<li><p>git commit -m “initial commit” → commit into my local git repository</p>
</li>
<li><p>github 에서 new repository 만들기</p>
</li>
<li><p>마지막  세줄 터미널에 입력</p>
<pre><code>git branch -M main
git remote add origin https://github.com/어쩌구
git push -u origin main</code></pre></li>
<li><p>package.json에서 “scripts” 밑에 몇가지 추가 (엔진을 정해줌)</p>
<pre><code>&quot;engines&quot;: {
 &quot;node&quot;: &quot;^16.00.0&quot;, //버전 확인 후 대략 16 이상으로 사용 -&gt; ^16.17.0으로 하면 에러 없이 됨
 &quot;npm&quot;: &quot;^8.00.0&quot; //버전 확인 후 8 이상으로 사용
},</code></pre></li>
<li><p>다시 npm init</p>
</li>
</ol>
<pre><code>    package name: (comp229-001) comp229-f2022-a1
    version: (0.0.0) 0.0.1
    description: demo app for comp229 a1
    entry point: (app.js) index.js
    git repository: (https://github.com/boandri/COMP229-F2022-A1.git)
    keywords:

    author: Seo Woo Jang</code></pre><ol start="11">
<li>바뀐 package.json을 다시 깃에 업로드:
a. git add .
b. git commit -m “updated package.json for Heroku”
c. git push</li>
<li>Heroku에서 git 연결하기(검색해서 connect)</li>
<li>Enable Automatic Deploys / Deploy Branch</li>
</ol>
<p><strong>* my page: <a href="https://comp229-f2022-a1.herokuapp.com/">https://comp229-f2022-a1.herokuapp.com/</a> *</strong></p>
<ul>
<li><p>npm install -g express-generator -e</p>
</li>
<li><p>Route under “routes” → “index.js”</p>
<p>  and render each pages</p>
</li>
<li><p>“index.ejs” 형식을 html로 변경</p>
</li>
</ul>
<ul>
<li>Download</li>
</ul>
<p>(npmjs.com 페이지에서 다양한 패키지 검색 가능)</p>
<ul>
<li>npm install bootstrap —save</li>
<li>npm install jquery —save</li>
<li>npm install popper.js —save</li>
<li>npm i @fortawesome/fontawesome-free</li>
</ul>
<p>이후 “app.js”에서 app.use(express.static(path.join(__dirname, &#39;node_modules&#39;)))로 경로 설정해서 사용할 수 있도록 해줌</p>
<ul>
<li><p>‘index.ejs’ → CSS section 에서 Bootstrap 링크:</p>
<ul>
<li>&lt;ㅇlink rel=&quot;stylesheet&quot; href=&#39;/node_modules/bootstrap/dist/css/bootstrap.min.css&#39;&gt;</li>
</ul>
</li>
<li><p>fontawesome 링크:</p>
<ul>
<li>&lt;ㅇlink rel=&quot;stylesheet&quot; href=&#39;/node_modules/@fortawesome/fontawesome-free/css/all.min.css&#39;&gt;</li>
</ul>
</li>
<li><p>‘index.ejs’ → JS section 에서 jquery링크:</p>
<ul>
<li>&lt;ㅇscript src=&#39;/node_modules/jquery/dist/jquery.min.js&#39;&gt;</script></li>
</ul>
</li>
<li><p>bootstrap 링크:</p>
<ul>
<li>&lt;ㅇscript src=&quot;/bootstrap/dist/js/bootstrap.min.js&quot;&gt;</script></li>
</ul>
</li>
<li><p>Bootstrap 에서 Nav Bar copy paste</p>
</li>
</ul>
<p>응..?</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[OOP - Class 와 Object의 차이?]]></title>
            <link>https://velog.io/@bo_ri/OOP-Class-%EC%99%80-Object%EC%9D%98-%EC%B0%A8%EC%9D%B4</link>
            <guid>https://velog.io/@bo_ri/OOP-Class-%EC%99%80-Object%EC%9D%98-%EC%B0%A8%EC%9D%B4</guid>
            <pubDate>Wed, 02 Aug 2023 00:02:24 GMT</pubDate>
            <description><![CDATA[<h4 id="1-class란">1. Class란?</h4>
<ul>
<li>A class is a <strong>template</strong> / <strong>blueprint</strong> / <strong>prototype</strong> from which objects are created. </li>
</ul>
<h4 id="2-instance란">2. Instance란?</h4>
<ul>
<li>An instance is a single and unique <strong>unit</strong> of a class.</li>
</ul>
<h4 id="3-object란">3. Object란?</h4>
<ul>
<li>객체(Object)는 현실의 대상(Object)과 비슷하여, 상태(state)나 행동(behavior) 등을 가지지만, 소프트웨어 관점에서는 그저 콘셉(<strong>concept</strong>), 즉 사유의 결과일 뿐이다.</li>
</ul>
<p><strong>_정리하자면, 설계도-class-를 바탕으로 object를 소프트웨어에 실체화 하면 그것이 Instance가 되고, 이 과정을 인스턴스화(instantiation)라고 한다. 실체화된 instance는 메모리에 할당된다. _</strong></p>
<p>참고:
In OO Programming, we often hear of terms like “Class”, “Object” and “Instance”; but what actually is a Class / Object / Instance?</p>
<p>In short, 
An <strong>object</strong> is a software <strong>bundle of related state and behavior.</strong> 
A** class** is a <strong>blueprint or prototype</strong> from which objects are created. 
An <strong>instance</strong> is a <strong>single and unique unit</strong> of a class.</p>
<p>Example, we have a blueprint (class) represents student (object) with <strong>fields</strong> like name, age, course, and <strong>methods</strong> like eat, sleep, study (<strong>class member</strong>). And we have 2 students here, Foo and Bob. So, Foo and Bob is 2 different instances of the class (Student class) that represent object (Student people). </p>
<p>Object:
Real world objects shares 2 main characteristics, state and behavior. Human have state (name, age) and behavior (running, sleeping). Car have state (current speed, current gear) and state (applying brake, changing gear).
An object stores its <strong>state</strong> in <strong>fields</strong> and exposes its <strong>behavior</strong> through <strong>methods.</strong></p>
<p>Class:
Class is a “template” / “blueprint” that is used to create objects. Basically, a class will consists of <strong>field, static field, method, static method</strong> and <strong>constructor</strong>. Field is used to hold the state of the class (eg: name of Student object). Method is used to represent the behavior of the class (eg: how a Student object going to stand-up). Constructor is used to create a new Instance of the Class.</p>
<p>Instance:
An instance is a <strong>unique copy of a Class</strong> that representing an Object. When a new instance of a class is created, the JVM will allocate a room of memory for that class instance.</p>
<p>++ 클래스의 속성값을 변화시키지 않고 Instance를 만드는 이유? 
클래스안의 기능을 사용하기 위해 매번 같은클래스명과 같은 멤버를 반복적으로 호출하여 (돌려막기식으로)사용했어야 했던 것과는 달리,
 클래스 복제본인 인스턴스를 여러 개 생성하고 각각의 인스턴스마다 (사용자가 필요한/혹은 넣고싶은) 다른 내용들을 넣어 사용할 수 있게 되었다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[Next.js] 많이 쓰는 이유를 알아보자]]></title>
            <link>https://velog.io/@bo_ri/Next.js-%EB%A7%8E%EC%9D%B4-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</link>
            <guid>https://velog.io/@bo_ri/Next.js-%EB%A7%8E%EC%9D%B4-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</guid>
            <pubDate>Wed, 26 Jul 2023 03:31:24 GMT</pubDate>
            <description><![CDATA[<ol>
<li><p>chat-gpt 4가 나온 세상. 외주가 인력고용보다 싼 세상에서 백엔드와 서버 관련 지식은 선택이아닌 필수</p>
</li>
<li><p>라기보단 사실 그간 유행했던 client-side rendering 보다 server-side rendering이 </p>
<ul>
<li><p>구글 검색과</p>
</li>
<li><p>첫페이지 로딩 속도의 빠름</p>
<p>때문에 부흥하고있기때문(검색 안되고 로딩 느리면 돈버는데 치명적)</p>
</li>
</ul>
</li>
</ol>
<ol start="3">
<li>그런데 server-side rendering의 경우, <del>useState useEffect react-query redux ajax react-router props</del> 등등... 프론트엔드의 전문성이라고 부르는 것들이 딱히 필요가 없어지게됨. 백엔드의 기능이 강조되고, 바로 이 Next.js가 섭 개발을 갱장히 쉽게 도와줌</li>
</ol>
<p>++물론 단점도 있는데</p>
<ul>
<li>리액트 라이브러리의 신문법인 client component, server component를 도입해서 코드를 짜는데</li>
</ul>
<p>그거 구분해서 코드짜는게 매우 귀찮고 </p>
<ul>
<li>많이 쓰진 않지만 WebSocket, WebRTC같은 기능을 이용해야한다면 직접 Nodejs + express 서버를 하나 더 만드는게 낫다고함</li>
</ul>
<p>(출처: coding apple)</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[SSR(Server-side rendering) vs CSR(Client-side rendering)]]></title>
            <link>https://velog.io/@bo_ri/server-side-rendering-vs-client-side-rendering</link>
            <guid>https://velog.io/@bo_ri/server-side-rendering-vs-client-side-rendering</guid>
            <pubDate>Thu, 13 Jul 2023 18:06:22 GMT</pubDate>
            <description><![CDATA[<p>우리가 브라우저를 통해 웹페이지를 볼때 브라우저는 2가지 방식으로 렌더링해 페이지를 보여줌</p>
<h3 id="1-server-side-rendering">1. Server-side Rendering?</h3>
<p>&quot;꽉찬 html 파일&quot;을 서버가 클라이언트에게 보냄</p>
<h3 id="2-client-side-rendering">2. Client-side Rendering?</h3>
<p>&quot;구멍난 html과 Data&quot;를 서버가 클라이언트에게 보내면 JS가 브라우저를 통해 <strong>Data Binding</strong>하여 보여줌</p>
<h4 id="next를-사용하는-경우라고-생각하면-됨">&lt;Next를 사용하는 경우라고 생각하면 됨&gt;</h4>
<p>1-1. SSR은 browser에서 HTML rendering 부터 함(이때부터 볼 수 있음)
1-2. 그리고 browser가 JS를 다운받음
1-3. 그러면 browser가 React를 실행시킴
1-4. 이때부터 페이지 Interactable함</p>
<h4 id="react를-사용하는-경우라고-생각하면-됨">&lt;React를 사용하는 경우라고 생각하면 됨&gt;</h4>
<p>2-1. CSR은 처음에 아예 Data가 없음. browser에서 rendering을 하게됨
2-2. browser가 JS다운받고
2-3. 그다음 React를 돌림 =&gt; 이때 Data binding함
2-4. 이때부터 페이지 볼 수 있고, Interactable함</p>
<p>따라서</p>
<ul>
<li>CSR= 처음에 Data가 아예 없기때문에 검색엔진봇이 크롤링할 수 없음 =&gt; SEO 어려움</li>
<li>반면 SSR= 브라우저가 JS 다운받기전에 HTML 다운로드 받아서 화면을 일단 볼 수 있음 =&gt; 검색엔진봇이 크롤링 가능.</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[[JS] 소수점 연산시 오류가 나는 이유(feat. .toFixed(), .parseFloat())]]></title>
            <link>https://velog.io/@bo_ri/Javascript-%EC%86%8C%EC%88%98%EC%A0%90-%EC%97%B0%EC%82%B0%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%82%98%EB%8A%94-%EC%9D%B4%EC%9C%A0feat.-.toFixed-.parseFloat</link>
            <guid>https://velog.io/@bo_ri/Javascript-%EC%86%8C%EC%88%98%EC%A0%90-%EC%97%B0%EC%82%B0%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%82%98%EB%8A%94-%EC%9D%B4%EC%9C%A0feat.-.toFixed-.parseFloat</guid>
            <pubDate>Sat, 10 Jun 2023 17:52:49 GMT</pubDate>
            <description><![CDATA[<ol>
<li>컴퓨터는 연산할 때 10 + 11 = 22 와같이 그대로 더하지 않고 
1) <strong>binary 로 변환한 뒤
2) 연산함</strong></li>
</ol>
<ol start="2">
<li>이때 소수점은 binary 로 바꾸면 <strong>무한소수</strong>가 되는 경우가 있다</li>
</ol>
<ol start="3">
<li>이경우 컴퓨터의 용량은 유한하기때문에 적정한 소수점 이하의 숫자는 날려버림 -&gt; 예를 들면 1.10010110010011... =&gt; 1.10010110으로!</li>
</ol>
<ol start="4">
<li>이렇게 바뀐 숫자를 연산하면 원래값과 아주 미세하게 다른 값이 도출됨.</li>
</ol>
<ol start="5">
<li>이경우 해결방법 3가지가 있는데...</li>
</ol>
<ul>
<li>첫째는 10 to power of x 를 <strong>곱해 소수점을 없애서 연산</strong>한 뒤 10~으로 나누거나</li>
<li>둘째는 소숫점 계산을 쉽게 해주는 <strong>라이브러리</strong>를 쓰거나</li>
<li>셋째는 .toFixed() 메소드를 사용해 <strong>결과값을 반올림</strong>하면됨</li>
</ul>
<ol start="6">
<li>이중 셋째의 경우 주의해야할 사항이 있는데...!</li>
</ol>
<ol start="7">
<li>결과값이 숫자형이 아닌** 문자형-string-**으로 반환됨... 에러의 온상</li>
</ol>
<ol start="8">
<li>string을 number로 바꿔주는 작업이 필요함. <strong>.parseFloat(x자리까지 반올림해줘)</strong>를 쓴다거나 여러가지 다른 메소드를 사용(<strong>Number(), Math.round()</strong>등)</li>
</ol>
]]></description>
        </item>
        <item>
            <title><![CDATA[정규식으로 이메일 검사하기]]></title>
            <link>https://velog.io/@bo_ri/%EC%A0%95%EA%B7%9C%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%A9%94%EC%9D%BC-%EA%B2%80%EC%82%AC%ED%95%98%EA%B8%B0</link>
            <guid>https://velog.io/@bo_ri/%EC%A0%95%EA%B7%9C%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%A9%94%EC%9D%BC-%EA%B2%80%EC%82%AC%ED%95%98%EA%B8%B0</guid>
            <pubDate>Fri, 09 Jun 2023 03:04:25 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p>/a/.test(&#39;apple&#39;)
//안의 문자가 test안에 포함되어있는가? =&gt; a가 하나라도 발견되면 true
&lt; true</p>
</blockquote>
<blockquote>
<p>/[a-zA-Z]/.test(&#39;k&#39;)
소문자 알파벳, 대문자 알파벳 포함되어있는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/\S/.test(&#39;fffffsdlfk&#39;)
모든문자 &quot;1&quot;개(숫자, 문자, 특수기호 포함)를 포함하는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/\S+/.test(&#39;fffffsdlfk&#39;)
모든문자 &quot;여러&quot;개(숫자, 문자, 특수기호 포함)를 포함하는가? =&gt; &#39;+&#39;는 왼쪽 문자 반복검색
&lt; true</p>
</blockquote>
<blockquote>
<p>/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test(&#39;ㅇㅗ캌&#39;)
자음, 모음, 모든 한글이 있는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/^a/.test(&#39;apple&#39;)
단어가 a로 시작하는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/e$/.test(&#39;apple&#39;)
단어가 e로 끝나는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/a|b/.test(&#39;apple&#39;)
a or혹은 b를 포함하는가?
&lt; true</p>
</blockquote>
<blockquote>
<p>/\S+@\S+.\S+/.test(&#39;aaa@bbb.ccc&#39;)
모든문자(&#39;\S&#39;) 여러개(&#39;+&#39;) + @ + 모든문자여러개 + .(&#39;.&#39;은 앞에 백슬레시 해줘야함) + 모든문자여러개의 형태인가?
&lt; true</p>
</blockquote>
]]></description>
        </item>
        <item>
            <title><![CDATA[RESTful API  = 대표적인, 상태, 전달...?]]></title>
            <link>https://velog.io/@bo_ri/RESTful-API-%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8-%EC%83%81%ED%83%9C-%EC%A0%84%EB%8B%AC</link>
            <guid>https://velog.io/@bo_ri/RESTful-API-%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8-%EC%83%81%ED%83%9C-%EC%A0%84%EB%8B%AC</guid>
            <pubDate>Thu, 16 Feb 2023 21:24:27 GMT</pubDate>
            <description><![CDATA[<h4 id="-rest---representational-state-transfer">* REST  = REpresentational State Transfer</h4>
<pre><code>= 대표적인, 상태, 전달...? 뭔말</code></pre><h3 id="1-일단-api는">1. 일단 API는,</h3>
<ul>
<li>클라이언트가 서버에 request할 때(예를들면 로그인 정보를 주고받을 때 라고 해보자)</li>
</ul>
<ul>
<li><p>어떤 요청인지 구분할 수 있도록(로그인인지, 사진업로드 요청인지, 다운로드 요청인지...)</p>
</li>
<li><p>요청별로 주소를 구분해서 만든 <strong>체계</strong>가 API임</p>
<p>  예를 들면 &#39;GET/members/soccer/345/photo&#39; 이런식 (&#39;서버주소/A&#39;) </p>
<p>  &#39;POST/timeline/food/24/sandwich(.jpg같은 파일확장자 사용x)&#39; 이런식</p>
</li>
</ul>
<h3 id="2-이런-api를-개발할-때-데이터를-주고받는-기능도-넣어야-함">2. 이런 API를 개발할 때 데이터를 주고받는 기능도 넣어야 함</h3>
<ul>
<li>이미지 파일과 같은 요청에 response할 때 같이 보내야하기 때문</li>
</ul>
<h3 id="3-이때-api에서-필요한-대표적인-기능이-crud">3. 이때 API에서 필요한 대표적인 기능이 CRUD</h3>
<ul>
<li>그래서 app개발 때 모든 기능이 구현되어야 하며, 빠진 기능이 있다면 그 기획 의도가 분명해야함</li>
</ul>
<h3 id="4-그치만-주소가-너무-많아지는-문제-발생">4. 그치만 주소가 너무 많아지는 문제 발생</h3>
<ul>
<li>&#39;서버주소/포스팅수정&#39;, &#39;서버주소/포스팅삭제&#39; 이런식으로 주소가 많아지게 되는데, 중복의 문제도 생기고 관리하기 힘듦 -&gt; 코드벌레 생성 가능성...</li>
</ul>
<h3 id="5-그래서-더-체계적으로-api를-관리하고자-탄생한-사회-운동이-restful-api-인-것이다">5. 그래서 더 체계적으로 API를 관리하고자 탄생한 사회 운동이 RESTful API 인 것이다...</h3>
<ul>
<li>CRUD를 하나의 주소로 관리함. 주소 개수가 줄어듬</li>
<li>Post/, Get/, Put/(Patch/ = 일부만 업뎃), Delete/ 와 같은 함수를 붙여 구분</li>
<li>이런식의 REST 아키텍처를 구현하는 웹 서비스를 &#39;RESTful&#39;하다고 부름</li>
<li>REST는 성능 향상이 목적이 아니라 일관성있는 작명 방법을 통해 API이해도, 호환성을 높이는것이 목표이므로 성능 향상이 목표인 웹이라면 구현 안해도 됨</li>
<li>RESTful하지 못한 경우:<ul>
<li>CRUD기능을 모두 Post/로만 처리하는 API</li>
<li>route에 resource, id 외의 정보가 들어가는 경우(/students/updateName)</li>
</ul>
</li>
</ul>
<h4 id="-웹-개발을-하는-중-구글-지도-기능을-넣고-싶어졌다">++ 웹 개발을 하는 중 구글 지도 기능을 넣고 싶어졌다..?</h4>
<ul>
<li>내 소프트웨어에 Google maps SDK(Software Development Kit) 설치</li>
<li>Google maps SKD에서 제공하는 API사용해서 구글 지도에 request가능</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[우분투가 그래서 뭐야? 서버엔 왜 리눅스를 씀?]]></title>
            <link>https://velog.io/@bo_ri/%EC%9A%B0%EB%B6%84%ED%88%AC%EA%B0%80-%EA%B7%B8%EB%9E%98%EC%84%9C-%EB%AD%90%EC%95%BC-%EC%84%9C%EB%B2%84%EC%97%94-%EC%99%9C-%EB%A6%AC%EB%88%85%EC%8A%A4%EB%A5%BC-%EC%94%80</link>
            <guid>https://velog.io/@bo_ri/%EC%9A%B0%EB%B6%84%ED%88%AC%EA%B0%80-%EA%B7%B8%EB%9E%98%EC%84%9C-%EB%AD%90%EC%95%BC-%EC%84%9C%EB%B2%84%EC%97%94-%EC%99%9C-%EB%A6%AC%EB%88%85%EC%8A%A4%EB%A5%BC-%EC%94%80</guid>
            <pubDate>Fri, 10 Feb 2023 19:26:58 GMT</pubDate>
            <description><![CDATA[<h3 id="와이-서버를-돌릴땐-windows도-아니고--macos도-아니고-ios도-아니고-android도-아닌-linux를-쓰지">와이 서버를 돌릴땐 Windows도 아니고  MacOS도 아니고 iOS도 아니고 Android도 아닌 Linux를 쓰지?</h3>
<ul>
<li><p>Linux만 공짜기 때문
(git을 만든 Linus Torvald가 만들어서 오픈소스로 배포함)</p>
</li>
<li><p>서버는 GUI필요없고 <strong>안정적</strong>으로 24시간 돌아가기만 하면 되기때문
(리눅스 버전들은 GUI없이 명령어로만 동작)</p>
</li>
<li><p>그치만 리눅스는 공짜기 때문에 예를들어 금융회사가 쓰다가 서버가 멈추거나 고장이나면 AS를 신청하거나 책임을 물을 수 없음 =&gt; 큰손실!</p>
</li>
<li><p>따라서! <strong>유료로 쓰는 대신 품질을 보장</strong>해주는 버전들을 사용하게 됨 ex.RedHat, Unix</p>
</li>
</ul>
<h2 id="-왜-macos-windows는-unix에-비해-비쌈">+ 왜 macOS, Windows는 Unix에 비해 비쌈?</h2>
<ul>
<li><p>과거엔 MS-DOS 와 같이 CLI기반의 운영체제를 사용했음 -&gt; 어려움!</p>
</li>
<li><p>apple과 Microsoft가 일반인도 쓸 수 있게 운영체제를 개발(바탕화면, 폴더, 파일등 사무실의 개념을 활용) </p>
</li>
<li><p>이 라이센스 비용, 개발비용, 마케팅 비용, 독점, 유지보수 비용등... 때문에 비쌈</p>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[Network Protocols(TCP/IP등등...)]]></title>
            <link>https://velog.io/@bo_ri/Network-ProtocolsTCPIP%EB%93%B1%EB%93%B1</link>
            <guid>https://velog.io/@bo_ri/Network-ProtocolsTCPIP%EB%93%B1%EB%93%B1</guid>
            <pubDate>Fri, 10 Feb 2023 18:47:09 GMT</pubDate>
            <description><![CDATA[<h3 id="인터넷의-기본-프로토콜---tcpip--osi-7-layers-model-중-layer34"><strong>인터넷의 기본 프로토콜 - TCP/IP ( OSI 7 layers model 중 layer3,4)</strong></h3>
<h3 id="ip">IP</h3>
<ul>
<li><strong>I</strong>nternet <strong>P</strong>rotocol(인터넷 프로토콜)</li>
<li>packet 통신 방식</li>
<li>패킷 전달 여부 보증 X</li>
<li>패킷 전달 순서 상관 X</li>
</ul>
<h3 id="tcp">TCP</h3>
<ul>
<li><strong>T</strong>ransmission <strong>C</strong>ontrol <strong>P</strong>rotocol(전송 컨트롤 프로토콜)</li>
<li>IP 위에서 동작하는 프로토콜</li>
<li>패킷의 전달 여부를 보증하고 전달 순서를 정렬함</li>
<li><strong>HTTP, FTP, SMTP</strong> 등 <strong>TCP기반의 앱</strong>들이 <strong>IP위에서 동작</strong>하기 때문에 묶어서 <strong>TCP/IP</strong>로 부름.</li>
<li>따라서 TCP/IP를 쓰겠다는 것은 <strong>IP주소체계</strong>를 사용해 목적지에 도달해 <strong>TCP를 활용해 신뢰도를 높이는</strong> 통신을 하겠다는 뜻</li>
</ul>
<p>또한</p>
<p><strong>+원하는 웹사이트의 웹페이지를 볼 수 있는 - HTTP</strong></p>
<p><strong>++메일을 주고 받을 시 - SMTP, POP3</strong></p>
<p><strong>+++인터넷으로 데이터나 파일의 업로드, 혹은 다운로드 시 - FTP</strong>
도 있음</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[부정적 편향]]></title>
            <link>https://velog.io/@bo_ri/%EB%B6%80%EC%A0%95%EC%A0%81-%ED%8E%B8%ED%96%A5</link>
            <guid>https://velog.io/@bo_ri/%EB%B6%80%EC%A0%95%EC%A0%81-%ED%8E%B8%ED%96%A5</guid>
            <pubDate>Fri, 10 Feb 2023 17:31:47 GMT</pubDate>
            <description><![CDATA[<p>인간은 부정적인 편향을 갖고있다.
같은 강도라고 해도 부정적인 생각이나 감정이 중립적, 혹은 긍정적인 생각이나 감정보다 우리의 심리 상태에 더 큰 영향을 미친다. 요컨대 우리의 행동은 긍정적인 감정보다 부정적인 감정에 더 쉽게 좌우된다.</p>
<p>그런데 이 부정적 편향이 인간의 생존에는 오히려 도움을 준다.
실수를 범하는 극단적인 상황을 늘 염두에 두기 때문에 생명을 위협하는 최악의 상황만큼은 피해갈 수 있다. 이처럼 부정적 편향이 인간의 생존 역사에 그 뿌리를 두고 있다 해도 과거의 실패나 미래에 대한 두려움을 끊임없이 되새기는 행위는 지나치게 소모적이다.</p>
<p>유감스럽게도 부정적인 생각에 매여 있으면 뇌도 부정적인 생각에 익숙해진다.</p>
<p>-캐럴라인 웰치, 마음챙김이 일상이 되면 달라지는 것들</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[memory가 있는 이유?]]></title>
            <link>https://velog.io/@bo_ri/memory%EA%B0%80-%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0</link>
            <guid>https://velog.io/@bo_ri/memory%EA%B0%80-%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0</guid>
            <pubDate>Fri, 10 Feb 2023 00:29:18 GMT</pubDate>
            <description><![CDATA[<p>기본 로직은</p>
<ol>
<li>cpu는 빠름 (뇌)</li>
<li>HDD는 느림 (storage)</li>
<li>cpu &lt;-&gt; HDD 처리할때 gap 이 너무 큼</li>
<li>더 빠른 임시 저장할수있는 memory를 개발함!</li>
<li>memory로 큰 데이터들을 한번에 옮겨놓은 뒤 작업하게됨.</li>
</ol>
<h4 id="logic-pro를-켠다고-해보자">Logic pro를 켠다고 해보자</h4>
<ol>
<li>c drive(non volatile,HDD) 어딘가에 있을 Logic pro X 바로가기를 눌러 실행시킨다</li>
<li>로딩화면이 뜨는동안 느린 HDD에서 빠른 memory로 큰 데이터들을 이동시킨다.</li>
<li>이동이 끝나면 로딩이 끝나고, 이후 memory 위에서 작업한다.</li>
</ol>
]]></description>
        </item>
        <item>
            <title><![CDATA[언어가 왜이렇게 많음? low-level language 왜씀]]></title>
            <link>https://velog.io/@bo_ri/%EC%96%B8%EC%96%B4%EA%B0%80-%EC%99%9C%EC%9D%B4%EB%A0%87%EA%B2%8C-%EB%A7%8E%EC%9D%8C-low-level-language-%EC%99%9C%EC%94%80</link>
            <guid>https://velog.io/@bo_ri/%EC%96%B8%EC%96%B4%EA%B0%80-%EC%99%9C%EC%9D%B4%EB%A0%87%EA%B2%8C-%EB%A7%8E%EC%9D%8C-low-level-language-%EC%99%9C%EC%94%80</guid>
            <pubDate>Fri, 10 Feb 2023 00:09:26 GMT</pubDate>
            <description><![CDATA[<h3 id="언어가-많은-이유">언어가 많은 이유?</h3>
<ul>
<li>자신의 언어와 컴파일러를 개발하는 천재들이 많음. 그중에서 사용하기 편리한 언어, 강점을 가진 언어들이 남게됨.<h3 id="low-level-language가-쓰이는-이유">low-level language가 쓰이는 이유?</h3>
</li>
<li>값이 싼 = 사양이 낮은 컴퓨터를 판매할 때 필요하기 때문. 사양이 낮은 컴퓨터는 high-level 언어를 이해하기에 너무 느림</li>
<li>ex) iptv 컴퓨터 셋톱박스 가격이 100만원이면 사람들이 안씀
=&gt; 가격 30으로 낮추려면 컴 사양을 낮춰야함</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[[JS] var, let, const 뭐가 다른거]]></title>
            <link>https://velog.io/@bo_ri/JS-var-let-const-%EB%AD%90%EA%B0%80%EB%8B%A4%EB%A5%B8%EA%B1%B0%EC%A7%80</link>
            <guid>https://velog.io/@bo_ri/JS-var-let-const-%EB%AD%90%EA%B0%80%EB%8B%A4%EB%A5%B8%EA%B1%B0%EC%A7%80</guid>
            <pubDate>Wed, 01 Feb 2023 07:30:36 GMT</pubDate>
            <description><![CDATA[<h3 id="var--let-const-차이점">var , let, const 차이점?</h3>
<ul>
<li>var: re-declare, re-allocate 가능</li>
<li>let: re-declare 불가능, re-allocate 가능</li>
<li>const: re-declare 불가능, re-allocate 불가능</li>
</ul>
<blockquote>
<p>var 국적 = &#39;Korea&#39;;//재선언 가능, 재할당 가능
var 국적 = &#39;Canada&#39;;</p>
</blockquote>
<blockquote>
<p>let 이름 = &#39;Jang&#39;; //재선언이 불가능함
이름 = &quot;Lee&quot;; //재할당 가능
//let 이름 = &#39;Han&#39;; &lt;- X</p>
</blockquote>
<blockquote>
<p>const 나이 = 29; //재선언이 불가능하고, 재할당도 불가능함
//const 나이 = 29; &lt;- X
//나이 = 30; &lt;- X</p>
</blockquote>
]]></description>
        </item>
        <item>
            <title><![CDATA[핑(ping)이 뭐지]]></title>
            <link>https://velog.io/@bo_ri/%ED%95%91ping%EC%9D%B4%EB%9E%80</link>
            <guid>https://velog.io/@bo_ri/%ED%95%91ping%EC%9D%B4%EB%9E%80</guid>
            <pubDate>Wed, 01 Feb 2023 07:24:53 GMT</pubDate>
            <description><![CDATA[<h4 id="핑이란">핑이란?</h4>
<ul>
<li><p>Packet INternet Grouper</p>
</li>
<li><p>네트워크를 통해 상대에게 접근할 수 있는지를 확인하는 프로그램</p>
</li>
<li><p>URL 이나 IP를 지정하면 상대에게 echo를 요청하는 데이터를 전송(echo request) -&gt; 응답을 기다리는 형태로 동작(echo reply)</p>
</li>
<li><p>ICMP 프로토콜을 사용</p>
</li>
</ul>
<p>​</p>
<h4 id="-그렇다면-icmp-프로토콜이란">+ 그렇다면 ICMP 프로토콜이란?</h4>
<ul>
<li><p>Internet Control Message Protocol : 인터넷 제어 메시지 프로토콜</p>
</li>
<li><p>TCP/IP 에서 패킷을 처리할 때 발생되는 문제를 알려주는 프로토콜</p>
</li>
<li><p>Echo request : 해당 수신자가 메시지를 받으면 응답을 달라는 요청</p>
</li>
<li><p>Echo reply : 수신자가 보내는 응답</p>
</li>
<li><p>Destination unreachable : 네트워크가 끊겨있거나 장비가 꺼져있거나, 경로가 없거나 하는 이유로 최종 목적지에 도달할 수 없을때 보내는 메시지</p>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[인터넷이 뭐길래]]></title>
            <link>https://velog.io/@bo_ri/%EC%9D%B8%ED%84%B0%EB%84%B7%EC%9D%B4-%EB%AD%90%EC%9E%84</link>
            <guid>https://velog.io/@bo_ri/%EC%9D%B8%ED%84%B0%EB%84%B7%EC%9D%B4-%EB%AD%90%EC%9E%84</guid>
            <pubDate>Wed, 01 Feb 2023 07:13:44 GMT</pubDate>
            <description><![CDATA[<h4 id="1-인터넷은-가상의-구름이-아님">1. 인터넷은 가상의 구름이 아님</h4>
<ul>
<li><p>나는 인터넷이라는 가상의 클라우드 공간에 모든 웹 페이지가 저장되어있고, 그 안에 자유롭게 돌아다니면서 정보를 찾는 무언가라고 생각했지만 실은 아니었음 </p>
</li>
<li><p>그럼 인터넷은 무엇?</p>
</li>
</ul>
<p>​</p>
<h4 id="2-인터넷은-컴퓨터서버와-컴퓨터서버끼리-연결한-선이었음">2. 인터넷은 컴퓨터(서버)와 컴퓨터(서버)끼리 연결한 선이었음</h4>
<ul>
<li><p>구리선일 수도 있고 광케이블일수도 있고..</p>
</li>
<li><p>땅속에 묻혀진 이 선을 통해 컴퓨터끼리 연결해 각종 데이터를 전송받는 것이었음</p>
</li>
<li><p>예를들면 웹페이지는 그 서버 컴퓨터의 하드디스크에 저장 된 파일임!!!</p>
</li>
</ul>
<p>​</p>
<h4 id="3-바다-건너-미국에-있는-아마존-웹페이지에는-어떻게-접속">3. 바다 건너 미국에 있는 아마존 웹페이지에는 어떻게 접속?</h4>
<ul>
<li>바다 밑에 인터넷 케이블을 깔아놓아서 각 대륙으로 연결시켜놓았음 이미...! 거리상 멀기때문에 한국에서 롤 북미서버로 게임을 하면 핑이 높은것...</li>
</ul>
<p>​</p>
<h4 id="4-각각의-서버는--internet-protocol-주소ip-address라는-주소를-가지고있고-이-주소를-통해-접근할-수-있음">4. 각각의 서버는  internet protocol 주소(=ip address)라는 주소를 가지고있고, 이 주소를 통해 접근할 수 있음</h4>
<ul>
<li>그러나 숫자 주소는 복잡해 외우기 힘들기때문에 domain name으로 변환해서 amazon.com등으로 접근</li>
</ul>
<p>​</p>
<h4 id="5-우리가-쓰는-가정집의-컴퓨터는-서버가-아님-왜냐하면-인터넷선에-직접적으로-케이블로-연결되어있지-않기때문">5. 우리가 쓰는 가정집의 컴퓨터는 서버가 아님. 왜냐하면! 인터넷(선)에 직접적으로 케이블로 연결되어있지 않기때문.</h4>
<ul>
<li><p>대신 indirect하게 ISP에 연결되어있음(Internet Service Provider).</p>
</li>
<li><p>ISP란 LG U+, SK 브로드밴드, coextro나 bell과 같은.... 인터넷 서비스 제공 업체를 뜻함)</p>
</li>
<li><p>서버 컴퓨터가 아닌 클라이언트라고 불림. (ISP의 클라이언트이기 때문인듯)</p>
</li>
<li><p>그렇기때문에 서버 컴퓨터로 패킷을 보내고 받으려면 ISP를 거쳐서 인터넷(선)에 연결 될 수 있음</p>
</li>
</ul>
<p>​</p>
<h4 id="6-gmail을-통해-naver로-이메일을-보내는-과정">6. gmail을 통해 naver로 이메일을 보내는 과정?</h4>
<ul>
<li><p>나(클라이언트)는 ISP를 통해 인터넷으로 연결해 gmail 서버로 연결 후 이메일 (사진) 첨부</p>
</li>
<li><p>첨부되는 과정: 모든 텍스트나 사진, 파일등은 가장 작은 데이터 단위인 &#39;페킷&#39;으로 나누어진 후 전송된 뒤 다시 텍스트나 사진, 파일등으로 재조립됨.</p>
</li>
<li><p>gmail서버는 인터넷(선)을 통해 naver mail로 이메일(사진을 패킷의 형태로)을 전송한 뒤</p>
</li>
<li><p>naver서버는 전송망?을 통해 목적지인 이메일주소로 패킷을 전송</p>
</li>
</ul>
<p>​</p>
<h4 id="7-보통-다른-서버로-연결될-때-1015개의-라우터를-거친다고-생각하면-됨">7. 보통 다른 서버로 연결될 때 10~15개의 라우터를 거친다고 생각하면 됨.</h4>
<ul>
<li><p>내 컴퓨터를 통해 패킷을 서버로 전송할 때 패킷은</p>
<p>1) 내 컴퓨터의 ip주소를 가지고 출발</p>
<p>2) 거쳐가는 라우터마다 ip주소를 입힘</p>
<p>3) 사탕 껍질이 덮여 씌워지듯이 모든 라우터에서 ip주소를 입히고 도착함</p>
</li>
</ul>
<p>---&gt; 서버 도착 후 다시 내 컴퓨터로 패킷을 다운로드 할 때 역시 마찬가지로 라우터를 지날때마다 사탕껍질을 벗기듯 해당하는 ip주소를 가진 라우터를 찾아가면서 최종적으로 내 컴퓨터로 도착</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[허브, 스위치, 라우터, 공유기 ???]]></title>
            <link>https://velog.io/@bo_ri/%ED%97%88%EB%B8%8C-%EC%8A%A4%EC%9C%84%EC%B9%98-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EA%B3%B5%EC%9C%A0%EA%B8%B0-9oqt16cm</link>
            <guid>https://velog.io/@bo_ri/%ED%97%88%EB%B8%8C-%EC%8A%A4%EC%9C%84%EC%B9%98-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EA%B3%B5%EC%9C%A0%EA%B8%B0-9oqt16cm</guid>
            <pubDate>Wed, 01 Feb 2023 07:10:02 GMT</pubDate>
            <description><![CDATA[<h3 id="1-허브">1. 허브</h3>
<ul>
<li><p>여러대의 컴퓨터를 연결해주는 장치</p>
</li>
<li><p>데이터 패킷을 받으면 연결된 모든 장치에 보냄</p>
</li>
<li><p>즉 단순 분배 중계 장치</p>
</li>
<li><p>연결 된 모든 장치에 데이터를 뿌리기 때문에 데이터 전송 대역폭을 분리해서 사용해야함. 즉 허브의 대역폭이 500Mbps 라면, 5대의 장치가 연결되어 있다면 100Mbps의 속도로 나누어져서 각각 전송함</p>
</li>
</ul>
<p>​</p>
<h3 id="2-스위치">2. 스위치</h3>
<ul>
<li><p>연결된 모든 장치의 ip주소와 MAC 주소를 표로 가지고 있는 장치</p>
</li>
<li><p>그 표에 따라서 원하는 목적지로 패킷을 전송함</p>
</li>
<li><p>어떤 ip주소와 port로 요청이 들어오면 스위치는 표에 입각해서 MAC주소를 찾음 -&gt;그 장치에게 패킷을 전송</p>
</li>
</ul>
<p>(만약 일치하는 MAC이 없을  경우 허브처럼 모든 연결된 장치에 패킷을 다 뿌리고 표를 갱신함)</p>
<p>-장치가 5대 연결 되어 있다고 하더라도 목표된 장치에만 패킷을 전송하기때문에 500Mbps로 전송</p>
<p>​</p>
<h3 id="3-라우터">3. 라우터</h3>
<ul>
<li><p>LAN(local area network/근거리 통신망)을 연결해주는 장치</p>
</li>
<li><p>최종 목적지에 도달하기 위해 한 통신망에서 다른 통신망으로 넘어갈 때 적절한 경로를 찾아 전송하는 장치</p>
</li>
</ul>
<p>​</p>
<h3 id="4-공유기">4. 공유기</h3>
<ul>
<li><p>ISP(Internet service provider)업체에서 ip를 제공하고 소비자는 ip를 구매해서 사용</p>
</li>
<li><p>이 때 구매한 하나의 ip를 여러대의 장치에 나누어 인터넷에 연결하고 싶을 때 사용되는 장치</p>
</li>
</ul>
<p>​</p>
<p>​</p>
<h4 id="-리피터repeater">+ 리피터(repeater):</h4>
<ul>
<li>전송 거리가 짧아서 신호가 도달하지 못하는 경우에 설치해 신호 전달을 용이하게 함</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[Public IP vs Private IP?]]></title>
            <link>https://velog.io/@bo_ri/Public-IP-vs-Private-IP</link>
            <guid>https://velog.io/@bo_ri/Public-IP-vs-Private-IP</guid>
            <pubDate>Wed, 01 Feb 2023 07:04:48 GMT</pubDate>
            <description><![CDATA[<h4 id="1-public-ip는-외부의-네트워크에서-로컬-네트워크를-식별하기-위해-ispinternet-service-provider가-제공하는-ip-주소임">1. Public ip는 외부의 네트워크에서 로컬 네트워크를 식별하기 위해 ISP(internet service provider)가 제공하는 ip 주소임</h4>
<ul>
<li><p>전세계에서 유일함</p>
</li>
<li><p>인터넷에 연결 된 다른 pc로부터 접근이 가능함</p>
</li>
</ul>
<p>​</p>
<h4 id="2-private-ip는-집이나-회사등-안에서-라우터공유기에-의해-할당-된-ip주소임">2. Private ip는 집이나 회사등 안에서 라우터(공유기)에 의해 할당 된 ip주소임</h4>
<ul>
<li><p>local ip, 가상 ip 라고도 불림</p>
</li>
<li><p>ipv4의 부족으로 서브넷팅된 ip임</p>
</li>
</ul>
<p>​</p>
<h4 id="3-private-ip는-3가지-주소-대역을-가짐">3. Private ip는 3가지 주소 대역을 가짐</h4>
<p>  1) class A : 10.0.0.0 ~ 10.255.255.255</p>
<p>  2) class B : 172.16.0.0 ~ 172.31.255.255</p>
<p>  3) class C : 192.168.0.0 ~ 192.168.255.255</p>
<p>​</p>
<p>​</p>
<h4 id="-static고정ip와-dynamic유동ip의-차이">+ Static(고정)ip와 Dynamic(유동)ip의 차이??</h4>
<ol>
<li>Static ip는 컴퓨터에 고정적으로 부여된 ip로 한번 부여되면 반납되기 전까지 다른 장비에서 사용할 수 없음</li>
</ol>
<ol start="2">
<li>Dynamic ip는 장비를 통해 네트워크에 접속할 때 남아있는 ip 중에서 돌아가면서 부여받는 ip임</li>
</ol>
<p>​</p>
<h4 id="-인터넷에서-서버를-운영하고자-할-때엔-public-ip를-static-ip로-부여해야함">++ 인터넷에서 서버를 운영하고자 할 때엔 public ip를 static ip로 부여해야함.</h4>
]]></description>
        </item>
    </channel>
</rss>