<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>genie__rorok.log</title>
        <link>https://velog.io/</link>
        <description>😜💖</description>
        <lastBuildDate>Sat, 12 Jun 2021 13:37:10 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>genie__rorok.log</title>
            <url>https://images.velog.io/images/genie__rorok/profile/cea89db8-4ec2-4f1a-a846-1992fbaf233d/KakaoTalk_20210609_150941167.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. genie__rorok.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/genie__rorok" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[⭐ PreW2) 파이썬 문법 뽀개기]]></title>
            <link>https://velog.io/@genie__rorok/PreW2-%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%AC%B8%EB%B2%95-%EB%BD%80%EA%B0%9C%EA%B8%B0</link>
            <guid>https://velog.io/@genie__rorok/PreW2-%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%AC%B8%EB%B2%95-%EB%BD%80%EA%B0%9C%EA%B8%B0</guid>
            <pubDate>Sat, 12 Jun 2021 13:37:10 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/6143d7d4-fe1b-48bc-ac7e-afee8c4eacc1/giphy.gif" alt=""></p>
<h3 id="파이썬-문법-뽀개기-수업-자료">파이썬 문법 뽀개기 수업 자료</h3>
<p>링크 : <a href="https://www.notion.so/dfb89a042c6f4b29b64ea4da03a37ea6#cf5611d0d873436f9983ed3a96268231">https://www.notion.so/dfb89a042c6f4b29b64ea4da03a37ea6#cf5611d0d873436f9983ed3a96268231</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🌕 W1) 웹개발 플러스_4]]></title>
            <link>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A44</link>
            <guid>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A44</guid>
            <pubDate>Sat, 12 Jun 2021 09:31:39 GMT</pubDate>
        </item>
        <item>
            <title><![CDATA[🌔 W1) 웹개발 플러스_3]]></title>
            <link>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A43</link>
            <guid>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A43</guid>
            <pubDate>Sat, 12 Jun 2021 09:31:08 GMT</pubDate>
        </item>
        <item>
            <title><![CDATA[🌓 W1) 웹개발 플러스_2]]></title>
            <link>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A42</link>
            <guid>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A42</guid>
            <pubDate>Sat, 12 Jun 2021 09:30:47 GMT</pubDate>
        </item>
        <item>
            <title><![CDATA[🌒 W1) 웹개발 플러스_1]]></title>
            <link>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A41</link>
            <guid>https://velog.io/@genie__rorok/W1-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A41</guid>
            <pubDate>Sat, 12 Jun 2021 09:30:23 GMT</pubDate>
        </item>
        <item>
            <title><![CDATA[🌑 W1) 웹개발 플러스_0]]></title>
            <link>https://velog.io/@genie__rorok/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A40</link>
            <guid>https://velog.io/@genie__rorok/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%ED%94%8C%EB%9F%AC%EC%8A%A40</guid>
            <pubDate>Sat, 12 Jun 2021 09:28:43 GMT</pubDate>
        </item>
        <item>
            <title><![CDATA[🌕 Pre) 웹개발 종합반_4&5]]></title>
            <link>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%9845</link>
            <guid>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%9845</guid>
            <pubDate>Sat, 12 Jun 2021 09:08:13 GMT</pubDate>
            <description><![CDATA[<h3 id="웹개발-종합반-4주차-수업-자료">웹개발 종합반 4주차 수업 자료</h3>
<p>링크 : <a href="https://www.notion.so/4-682b2d244357441f8469b861562781fc">https://www.notion.so/4-682b2d244357441f8469b861562781fc</a></p>
<h3 id="웹개발-종합반-5주차-수업-자료">웹개발 종합반 5주차 수업 자료</h3>
<p>링크 : <a href="https://www.notion.so/5-1b3d15250da24078985644649cd3a558">https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d</a></p>
<br>

<ul>
<li><strong>FLASK</strong> : 파이썬의 프레임워크 <ul>
<li>파이썬 flask는 파이썬 언어를 사용하여 web페이지 서버를 구성할 수 있게 해주는 프레임워크이다. 원래는 django가 많이 사용되었지만 flask는 더 빠르고 간결한 코드, 가벼운 구성으로 점유율을 높여 가고있다.</li>
</ul>
</li>
</ul>
<blockquote>
<p>💡 프레임워크가 기억나지 않는다면?? -&gt; <a href="https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9-%EA%B8%B0%EB%B3%B8-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC">https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9-%EA%B8%B0%EB%B3%B8-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC</a> </p>
</blockquote>
<p><img src="https://images.velog.io/images/genie__rorok/post/d7f74445-22e8-4a9a-8bdb-dfc5cd2188ae/screenshot-www.notion.so-2021.06.12-17_53_10.png" alt=""></p>
<p><img src="https://images.velog.io/images/genie__rorok/post/c8475d49-3d68-42ce-a430-42df6b0d6217/screenshot-www.notion.so-2021.06.12-18_11_11.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🌔 Pre) 웹개발 종합반_3]]></title>
            <link>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%983</link>
            <guid>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%983</guid>
            <pubDate>Sat, 12 Jun 2021 06:02:00 GMT</pubDate>
            <description><![CDATA[<h3 id="웹개발-종합반-3주차-수업-자료">웹개발 종합반 3주차 수업 자료</h3>
<p>링크 : <a href="https://www.notion.so/3-ed5a2f9b258b4ac6bb63b95c3af4f6a5">https://www.notion.so/3-ed5a2f9b258b4ac6bb63b95c3af4f6a5</a></p>
<ul>
<li>파이썬이라는 언어를 통해 컴퓨터에게 &#39;서버 역할을 해줘&#39; 라고 명령 내리기</li>
<li>서버라는건 역할이고 실체는 그냥 컴퓨터 </li>
<li>한 컴퓨터가 네트워크로 연결된 여러 개의 컴퓨터들에게 뭔가를 해주면 서버라고 함. 
<img src="https://images.velog.io/images/genie__rorok/post/25860787-663d-41d8-8552-df7747bd61da/%EC%BA%A1%EC%B2%98.PNG" alt=""></li>
<li>서버도 다른 곳에서 데이터를 받아와 클라이언트에게 전달 할 수도 있다. </li>
<li>이런 서버를 개발할때 클라이언트 = 서버 컴퓨터를 사용하게 되면 &#39;로컬 개발&#39;이라고 하는 것.</li>
<li>하지만, 금전적으로나 시간이 많이 들기 때문에 AWS의 클라우드 컴퓨터 등을 사용한다.</li>
</ul>
<ul>
<li><p>그 데이터를 담을 곳 -&gt; mongoDB</p>
</li>
<li><p><strong>파이썬 기본 문법</strong>
<img src="https://images.velog.io/images/genie__rorok/post/a42cb0e3-3c28-4047-a872-78c654e04639/screenshot-www.notion.so-2021.06.12-15_44_13.png" alt=""></p>
</li>
<li><tr> :  행
 <th>, <td> : 특정 셀에 대한 정의
</li>
<li><p>스크래핑에서 속성을 가져오려면 &#39;href&#39;  사용</p>
</li>
</ul>
<ul>
<li><p><strong>DB 개괄</strong></p>
<p>데이터 베이스를 사용하는 이유는 데이터를 잘 가져다 쓰기 위해 잘 보관하는 것.
그래서 많은 데이터 베이스 프로그램 회사들이 강조하는 것이 우리는 이렇게 쌓기 때문에 나중에 이러한 상황에 이렇게 잘 가져다 쓸 수 있어.</p>
<ul>
<li>DB는 두 가지 종류로 나뉨 <strong>SQL vs NOSQL</strong></li>
<li><strong>SQL</strong> : 엑셀과 비슷한 형태, 정형화 되어 있어 데이터의 일관성이 뛰어나고 분석에 용이하다. 하지만, 열이 모두 정해져 있기 때문에 데이터 수정 등이 유연하지 않다. (MY-SQL, ORACLE 등)</li>
<li><strong>NOSQL</strong> : 딕셔너리와 같은 형태로 정형화 되지 않음. 그냥 쌓는 것.  (MONGODB)</li>
</ul>
<p>DB가 돌아가는 건 눈으로 보이지 않기 때문에 Robo 3T와 같은 프로그램을 통해 확인한다. </p>
<ul>
<li>pymongo는 mongodb를 조작하는 라이브러리</li>
</ul>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[📁 Pj 1) 웹 개발 미니 프로젝트_1]]></title>
            <link>https://velog.io/@genie__rorok/Pj-1-%EC%9B%B9-%EA%B0%9C%EB%B0%9C-%EB%AF%B8%EB%8B%88-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B81</link>
            <guid>https://velog.io/@genie__rorok/Pj-1-%EC%9B%B9-%EA%B0%9C%EB%B0%9C-%EB%AF%B8%EB%8B%88-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B81</guid>
            <pubDate>Sat, 12 Jun 2021 05:52:44 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/bad87849-e448-4ea3-b71a-a705b9f8c395/screenshot-velog.io-2021.06.12-14_49_49.png" alt=""></p>
<p>public github repo 주소
<a href="https://github.com/Code-Angler/KoreanSoupsMania.git">https://github.com/Code-Angler/KoreanSoupsMania.git</a></p>
<p>originally published by @code_angler</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🤸‍♀️ W1) 21.06.07~21.06.13]]></title>
            <link>https://velog.io/@genie__rorok/21.06.07</link>
            <guid>https://velog.io/@genie__rorok/21.06.07</guid>
            <pubDate>Sat, 12 Jun 2021 05:45:00 GMT</pubDate>
            <description><![CDATA[<p>시작!ㅎㅎㅎ</p>
<p>이번주에 진행한 미니 프로젝트로 국밥 맛집 리뷰 사이트를 제작. 
웹개발 플러스 강의를 통해 다양한 기능 구현을 시도했다.
좋은 팀원들을 만나 많이 부족한 내가 해내다니!!! 뿌듯하다...</p>
<p>금요일부터는 알고리즘 강의를 듣기 시작했다.</p>
<p>사실 대학원때 태영오빠가 추천해준 딥러닝 책을 읽으며 알고리즘을 살짝 맛 봤었는데... 3/4만 읽고 내팽겨치긴했지만... 
이론적으로 개념을 익히고 논문을 읽는 것과 실제로 내가 구현하는 것은 전혀 다른 이야기다..
난 Academic 스타일이였던건가...ㅎ...;;; 당황... 대학원 공부가 존잼이였던걸줄... 몰랐네 ㅋㅋㅋㅋ
그리고  ㅠㅠㅠ 자꾸 결국 데이터 분석하려는거 아니야? 라는 생각으로 이어지는 아주 못된 태도가 ㅋㅋㅋㅋㅋㅋㅋ </p>
<p>에효효 
힘내자! 사실 계획충에 지금까지 항상 개념을 확실히 알고 넘어가는 공부 습관 때문에 이정도로 빠른 속도로 간단하게 짚고 넘어가는 학습법이 매우 힘들다.. </p>
<p>일단 강의 두번씩 듣고 혼자서 개념 공부하느라 남들보다 시간이 배가 들어가는 듯...ㅎㅎㅎ</p>
<p>그래도 힘내야지 찡긋  &gt;-^</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🌓 Pre) 웹개발 종합반_2]]></title>
            <link>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%982</link>
            <guid>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%982</guid>
            <pubDate>Sat, 12 Jun 2021 05:37:53 GMT</pubDate>
            <description><![CDATA[<h3 id="웹개발-종합반-2주차-수업-자료">웹개발 종합반 2주차 수업 자료</h3>
<p>링크 : <a href="https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d">https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d</a></p>
<h3 id="--let-">- let :</h3>
<p>선언하는 것은 함수(function) 밖에서 해야한다. 그렇지 않으면 함수가 끝나면서 같이 사라진다.</p>
<h3 id="--jquery-">- jQuery :</h3>
<p>이전에는 브라우저의 코드가 모두 달라 호환성의 문제가 생겼음.
이 호환성의 문제를 해결하기 위해 jQuery 재단에서 전체 브라우저 코드에 대한 메타 분석을 진행하여 같은 기능이지만 각기 다른 코드에 대한 통일 작업을 진행하였음.
그렇게 탄생한 것이 <strong>jQery</strong> 이다. 즉, 미리 작성된 JavaScript문인 것(library 이다). 
import 하지 않으면 사용 할 수 없다. </p>
<p><strong>jQuery를 불러오는 문</strong> &lt;head 내에 삽입&gt;
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></p>
<p>CSS와 동일하게 jQuery도 특정하지 않으면(가리키지) 않으면 조작 할 수 없다. 
변수 지정시 </p>
<p>CSS는 class
jQuery는 id</p>
<p>를 사용한다. </p>
<blockquote>
<p>📕 </p>
</blockquote>
<ul>
<li>브라우저 개발자 모드에서 id의 값 가져올 때, 
__$(&#39;#post-url&#39;).val(); __ : id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다. val 안의 값을 바꾸면 그 값으로 바꿔줌. val은 input 박스에만 사용하는 것~!!!</li>
<li>div 보이기 / 숨기기
<strong>$(&#39;#post-box&#39;).hide();</strong> : id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
<strong>$(&#39;#post-box&#39;).show();</strong> : show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)</li>
<li>CSS 관련
<strong>$(&#39;#post-box&#39;).css();</strong> : css()값을 가져오거나 ()안에 적힌 값을 반환한다. 내용 입력을 통해 기존의 값을 바꾸는 것도 가능하다. (&#39;display&#39;) 를 치면 현재 보이는지 안보이는지에 대한 값을 반환한다. 이처럼 .css() 는 현재 화면에 보이는 값을 반환해준다. 
__$(&#39;#post-url&#39;).text(); __ : 인풋 박스가 아닌 것의 값을 가져와주거나 내용을 바꿀 수 있다. </li>
</ul>
<p><img src="https://images.velog.io/images/genie__rorok/post/39dc9bf9-b199-4a57-a16f-79117afc7a8c/screenshot-www.notion.so-2021.06.12-14_36_26.png" alt=""></p>
<h3 id="--브라우저-통신의-이해">- 브라우저 통신의 이해</h3>
<ul>
<li><strong>서버 -&gt; 클라이언트 통신 : &#39;JSON&#39;</strong> (페이지 없이 js로 값을 받아오는 법)</li>
<li><strong>클라이언트 -&gt; 서버 통신 : &#39;GET&#39; 요청</strong> (데이터 조회(read)를 요청할 때)</li>
<li><strong>클라이언트 -&gt; 서버 통신 : &#39;POST&#39; 요청</strong> (데이터 생성(cread), 변경(update), 삭제(dlete)를 요청할 때)</li>
</ul>
<p><img src="https://images.velog.io/images/genie__rorok/post/162e364a-2364-4ff0-8715-79299dacc5b7/screenshot-blog.naver.com-2021.06.12-14_06_34.png" alt=""></p>
<blockquote>
<p>📕 은행이라고 가정
서버 : 은행
클라이언트 : 은행을 찾아온 고객
(뭐하러 오셨어요? )
API : 은행 창구 
GET : 조회하러 왔어요 고객
POST : 투자 등 다양한 업무 하러 왔어요 고객
 =&gt; 고객의 타입에 따라 가져와야 하는것 / 처리해야 하는 것 / 처리 결과가 다름. </p>
</blockquote>
<p><img src="https://images.velog.io/images/genie__rorok/post/7ad12bf8-db30-47af-9299-a2924208bc35/screenshot-www.notion.so-2021.06.12-14_08_10.png" alt=""></p>
<ul>
<li>https://<span style="color:red">movie.naver.com</span>/<span style="color:blue">movie/bi/mi/basic.nhn</span><span style="color:yellow">?</span>code=161967</li>
</ul>
<p>빨간색 : 서버 주소 (우리은행 용산지점)
파란색 : 창구 이름(API) (우리은행 용산지점의 입출금 창구)
노란색 : 구분 기준점
검정색 : 기준점 뒤로 클라이언트가 가지고 가는 데이터 (주민등록, 번호, 계좌 내 금액 등) </p>
<p>-&gt; 그런 이런 code 값은 누가 정하는가? 요청하는 클라이언트와 요청을 받는 서버가 미리 약속한 것. code로 가져오면 내가 code에 맞는 값을 줄께
브라우저 주소창에 엔터를 치는 행위 자체가 GET하는 것.</p>
<h3 id="--ajax">- <strong>Ajax</strong></h3>
<ul>
<li>자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
<img src="https://images.velog.io/images/genie__rorok/post/18b2b0c4-9765-42b9-b80b-8fd638b401b0/image.png" alt=""></li>
</ul>
<p>Ajax는 jquery를 import한 페이지에서만 작동한다. </p>
<ul>
<li><p><strong>Ajax의 동작방식</strong>
요청 : 브라우저는 서버에 정보를 요청한다.  (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현하고 있다.)
[ 서버의 동작 : 서버는 응답으로 데이터를 전달한다. (XML, JSON) ]
응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.</p>
</li>
<li><p><strong>Ajax의 구조</strong>
<img src="https://images.velog.io/images/genie__rorok/post/5a2bafc4-ad74-4676-89e4-cd9af606108f/screenshot-devyj.tistory.com-2021.06.12-14_22_04.png" alt=""></p>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[👍 프로그래밍 언어의 종류와 특징]]></title>
            <link>https://velog.io/@genie__rorok/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%96%B8%EC%96%B4%EC%9D%98-%EC%A2%85%EB%A5%98%EC%99%80-%ED%8A%B9%EC%A7%95</link>
            <guid>https://velog.io/@genie__rorok/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%96%B8%EC%96%B4%EC%9D%98-%EC%A2%85%EB%A5%98%EC%99%80-%ED%8A%B9%EC%A7%95</guid>
            <pubDate>Sat, 12 Jun 2021 01:32:56 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/31decf60-8624-476e-bbc1-1af4e7ec8059/%EC%96%B8%EC%96%B4%20%ED%8A%B9%EC%A7%95.png" alt=""></p>
<h3 id="1-프로그래밍-언어의-구성-요소">1. 프로그래밍 언어의 구성 요소</h3>
<pre><code>ABC : 영어
1234 : 숫자
(){}[] : 괄화
&quot;&quot; : 따옴표
. : 점
; : 세미콜론</code></pre><blockquote>
<p>💡 다양한 언어가 존재하는 이유 : 
    기업들의 사업 분야 확장과 프로그래밍으로 보고자 하는 결과물이 매우 다양하며 다르기 때문이다.
   <strong>용도, 상황, 프로젝트</strong>의 규모에 따라 다양한 언어들이 등장한다. </p>
</blockquote>
<h3 id="1-프로그래밍-언어의-분류-기준">1. 프로그래밍 언어의 분류 기준</h3>
<ul>
<li><strong>객체 지향</strong> : 여러 관점에서 다양하게 표현될 수 있는 말. 그렇기 때문에 이해하기 힘듦.
단순하게 생각하면 프로그램의 방식이자 방법론임. <blockquote>
<p>📕 EX) 본인이 궂은 일을 담당하는 학교 선생님이라 가정한다. </p>
<pre><code> 전교생을 데리고 대청소를 해야하는 일을 맡았다.</code></pre><p>학교를 청소하는 것 : 작업
학생들 : 컴퓨터의 자원 
학생들에게 청소를 시키는 것 : 프로그래밍 
이걸 한 명씩 지시하기에는 너무나 벅찬 일 =&gt; 반복문을 이용하기로 한지만 여전히 힘듦.
전체 공지를 이용하기로 한다. 하지만 작업의 범위가 넓어진다면 이것도 힘들 것.
<strong>객체지향 프로그래밍</strong>을 이용하기로 한다.
게임처럼 각각의 class = 롤을 정의. 이것을 자원에게 class를 분배.
<strong>&gt;&gt;이렇게 데이터와 기능이 클래스로 &#39;캡슐화&#39;된 것이 &#39;객체&#39;라고한다.</strong>
객체의 특징은 <strong>은닉성</strong> 내부 구조는 prviate으로 감춰두고 외부에서 조작 할 수 있는 것만 public으로 둔다. (TV와 리모컨)
이를 통해 외부의 간섭으로부터 자유롭다. 더 나아가 <strong>&#39;interface&#39;</strong>로 청소를 지정하면 청소를 한번만 시작하면 알아서 모든 역할 분배와 작업들이 이루어진다. 또한 <strong>&#39;상속&#39;</strong>을 이용하여 교내 청소팀 -&gt; 교실청소팀, 화장실 청소팀 등 새끼를 만들어 교내 청소팀의 특성을 그대로 전달 할 수 있다.<strong>&#39;상속&#39;은 물려받는것 &#39;interface&#39;는 장착하는 특성이라고 할 수 있다. 
__&gt;&gt;끝없이 이러한 논리와 방법을 만들어 내는 것을 객체 지향이라고 한다.</strong></p>
</blockquote>
</li>
</ul>
<p>① 객체지향 프로그래밍 언어의 개념</p>
<ul>
<li>현실 세계의 현상을 컴퓨터상에 객체(Object)로 모델화함으로써, 컴퓨터를 자연스러운 형태를 사용하여 여러 가지 문제를 해결할 수 있는 언어이다.</li>
</ul>
<ul>
<li><p>절차적 언어에 비해 특히 유지보수성(Maintainalbility) 과 재사용성(Reusability) 이 좋다.</p>
</li>
<li><p>종류 : Ada, Smalltalk, C++, Java 등</p>
</li>
</ul>
<p>② 객체지향 언어의 기본 구성 요소</p>
<p>  객체(Object)</p>
<ul>
<li><p>데이터와 메소드로 구성된다</p>
</li>
<li><p>데이터(Data) : 객체가 가지고 있는 정보로서, 속성(Attribute)이라고도 한다</p>
</li>
<li><p>메소드(Method) : 객체가 메시지를 받아 실행해야 할 구체적인 연산을 정의한다</p>
<p>클래스 (Class)</p>
</li>
<li><p>코드작성의 기본 단위이며 객체들을 찍어낼 수 있는 설계도/템플릿 역할.</p>
<p>메시지 (message)</p>
</li>
<li><p>객체들 간의 상호작용을 위한 수단으로 사용되며, 메시지를 받은 객체는 메소드를 수행한다.</p>
</li>
</ul>
<p>③ 객체지향 언어의 주요 특징</p>
<ul>
<li><p>캡슐화 (Encapsulation) : 데이터와 메소드를 클래스 하나로 묶어, 객체 내부에서 필요로 하는 정보를 외부로부터 은닉시키고, 매소드를 통한 접근을 제공한다.</p>
</li>
<li><p>추상화 (Abstraction) : 자료 추상화는 불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단히 만드는 것이다.</p>
</li>
<li><p>상속 (Inheritance) : 이미 정의되어 있는 상위 클래스와 메소드를 비롯한 모든 속성을 하위 클래스가 물려받는 것이다.</p>
</li>
<li><p>다형성(Polimorphism) :다형성 개념이란 어떤 한 요소에 여러 개념을 넣어 놓는 것으로 일반적으로 오버라이딩(같은 이름의 메소드가 여러 클래스에서 다른 기능을 하는 것)이나 오버로딩(같은 이름의 메소드가 인자의 갯수나 자료형에 따라서 다른 기능을 하는 것)을 의미한다. 다형성 개념을 통해서 프로그램 안의 객체 간의 관계를 조직적으로 나타낼 수 있다.</p>
</li>
</ul>
<hr>
<ul>
<li><strong>컴퓨터와 인간 중 어디에 가까운가?</strong> <img src="https://images.velog.io/images/genie__rorok/post/e24d6a96-1914-43e1-a1b9-2c05fc0be699/image.png" alt=""> 컴퓨터는 인간과 다르게 변수의 자료형을 구분해줘야 한다. 1과 &#39;1&#39;을 다르게 인식한다. </li>
</ul>
<p>① 저급 언어 (Low-Level Language)</p>
<ul>
<li><p>기계 중심의 언어</p>
</li>
<li><p>실행 속도가 빠름</p>
</li>
<li><p>상이한 기계마다 다른 코드를 가진다</p>
</li>
</ul>
<p>기계어 (Machine Language) : 컴퓨터가 직접 이해할 수 있는 언어, 0과 1의 2진수 형태로 표현되며 수행시간이 빠름. 전문적인 지식이 없으면 프로그램 작성 및 이해가 어렵다, 기종마다 기계어가 다르므로 언어의 호환성이 없음. 프로그램 유지보수가 어렵다.</p>
<p>어셈블리어 (Assembly Language) : 기계어와 1:1로 대응되는 기호로 이루어진 언어, 기호 코드(Mnemonic Code)라고도 함. 기계어와 가장 유사하며, 기계어로 번역하기 위해서는 어셈블러(Assembler)가 필요함</p>
<p>② 고급 언어 (High-Level Language)</p>
<ul>
<li><p>사람 중심의 언어</p>
</li>
<li><p>실행을 위해서는 번역하는 과정이 필요함</p>
</li>
<li><p>상이한 기계에서 소스 수정 없이 실행이 가능함</p>
</li>
</ul>
<ul>
<li><p>포트란 (FORTRAN) : 과학 계산용 언어로서, 뛰어난 실행 효율성으로 성공한 언어</p>
</li>
<li><p>코볼 (COBOL) : 회사의 사무용 자료처리 언어로 개발되었다. 기계 독립적인 부분과 기계 종속적인 부분을 분리하는데 성공한 언어이다.</p>
</li>
</ul>
<ul>
<li><p>ALGOL : 알로리즘의 연구개발을 위한 목적으로 개발된 언어, 실무보다는 주로 교육용으로 사용되었다.</p>
</li>
<li><p>LISP : 리스트 처리용 언어, 인공지능 분야에서 주로 사용되었다.</p>
</li>
<li><p>APL : 고급 수학용 프로그래밍 언어</p>
</li>
<li><p>PL/1 : 과학, 공학 및 산업 응용 프로그램을 위해 개벌된 명령형 프로그래밍 언어</p>
</li>
<li><p>BASIC : 교육용으로 개발된 프로그래밍 언어</p>
</li>
<li><p>SNOBOL : 스트림 자료 활용이 가장 많은 언어, 문자열 대치, 복사, 치환 등과 같은 문자열의 조작을 편리하게 수행할 수 있도록 여러 가지 기능을 제공함</p>
</li>
</ul>
<ul>
<li><p>Pascal : 간결하면서도 강력한 언어로 손꼽히고 있다. 교육용 언어로는 뛰어나다는 평가를 받고 있다</p>
</li>
<li><p>PROLOG : 논리 기반의 비절차적 언어, 인공지능 분야에서 주로 사용되었다</p>
</li>
<li><p>Ada : 미 국방성의 주도로 개발된 고급 프로그램 작성 언어, 데이터 추출과 정보 은폐에 주안점을 두었고, 입출력 기능이 뛰어나서 대량 자료 처리에 적합함</p>
</li>
</ul>
<hr>
<h3 id="2-대중적으로-많이-쓰이는-프로그래밍-언어의-종류">2. 대중적으로 많이 쓰이는 프로그래밍 언어의 종류</h3>
<h4 id="1-c-언어">1. C 언어</h4>
<p>상당히 초기에 개발된 언어면서 동시에 고급언어임에도 어셈블리에 맞먹는 하드웨어 제어가 가능해서 혼자 &#39;중급언어&#39;라는 카테고리를 만들어 들어가는 경우도 있다.</p>
<p>C언어는 프로그램을 보다 간단하게 사용하고 설계할 수 있게 하는 운영체제의 공통언어로</p>
<p>짧고 간결하게 표시할 수 있어 다른 프로그래밍 언어들의 베이스가 되기도 합니다.</p>
<p>운영체제 개발을 위해 생겨나게된 것으로 간결한만큼 하드웨어를 효율적으로 통제할 수 있습니다.</p>
<p>이는 70년대에 만들어진 절차지향 언어이고 오늘날에는 전세계에서</p>
<p>가장 많이 쓰이고 있게 되었습니다.</p>
<p>​</p>
<p>절차지향은 명령어를 몇회 어떤 순위로 실행할지 판단하는 방식입니다. </p>
<p>C언어는 컴퓨터나 핸드폰에서 작용하는 프로그램을 개발할 때는 보통 쓰지 않고</p>
<p>대신 기계친화적이며 사양, 메모리가 PC나 스마트폰보다 낮은 전자제품에 필요한 소프트웨어를 만들때 이용됩니다. </p>
<p>C언어의 단점으로는 복잡, 불안정 그리고 기능이 많지 않다는 점 하지만 포토샵, 엑셀, 한글 등 대부분의 소프트웨어는 C로 만들어졌다. </p>
<h4 id="2-c-언어">2. C++ 언어</h4>
<p>C언어의 단점을 보완하고 바꾼 언어입니다.</p>
<p>+의 의미는 증가를 뜻하는것으로 C언어가 절차지향이라면 C++언어는 객체지향입니다.</p>
<p>컴퓨터와 같이 큰 응용프로그램을 만들 수 있는 언어입니다.
구글 크롬, 파이어폭스, 마소 워드, 엑셀, 파워포인트 등이 모두 C++로 개발된 것이다.
대형 게임들을 만들때도 사용되고 있습니다.</p>
<p>C++언어에서 더 발전된것이 C#입니다.</p>
<p>이것은 오히려 C언어와 비슷하기 보다는 자바와 더 비슷한 면이 많습니다.</p>
<p>이는 마이크로소프트가 만든 객체지향 언어이다.</p>
<h4 id="3-c-언어">3. C# 언어</h4>
<p> C++, 자바의 특징을 합쳐 고차원적으로 업그레이드 했다. </p>
<h4 id="4-objective-c-언어">4. OBJECTIVE-C 언어</h4>
<h4 id="5-php-언어">5. PHP 언어</h4>
<h4 id="6-javascript-언어">6. JavaScript 언어</h4>
<h4 id="7-java-언어">7. JAVA 언어</h4>
<p>자바는 객체지향 프로그래밍 언어(Object Oriented Programming)로 1991년 썬 마이크로 시스템즈에서 개발했으며 현재는 오라클에서 관리하고 있는 언어입니다.
개인용보다는 주로 산업계에서 많이 사용하던 자바는 안드로이드 폰의 등장으로 우리가 늘 접하는 스마트폰에서 돌아가는 다양한 앱을 개발하는 데에도 사용 되고 있습니다.
자바에는 Java API라 하여 자바 시스템 제어를 위한 명령어가 있습니다. 무료로 배포된 자바 개발 도구(JDK)와 풍부한 Java API를 활용해 강력한 기능의 자바 프로그램을 작성할 수 있습니다.</p>
<h4 id="8-ruby-언어">8. RUBY 언어</h4>
<h4 id="9-phython-언어">9. PHYTHON 언어</h4>
<p>여러가지 언어중 가장 쉽고 기초적인 컴퓨터프로그래밍 언어는 </p>
<p>파이썬이라는 언어라 할 수 있습니다. </p>
<p>파이썬은 문법이 간결하고 쉬우며 기본적이라서 프로그래밍 언어 입문때 </p>
<p>초보개발자들이 금방 배우고 사용할 수 있습니다. </p>
<p>이것은 웹사이트,서비스 개발, 데이터분석 등 다양하게 사용됩니다. </p>
<p>다만 단점이라 하면 다른언어보다 실행이 느리다는 것이 있습니다. 장점은 외부 라이브러리가 커서 확상시키기에 용이하다는 것입니다. </p>
<hr>
<h4 id="10-html">10. HTML:</h4>
<ul>
<li>HTML은 HyperText Markup Language(하이퍼텍스트)의 줄임말로 웹문서를 만들기 위해 필요한 언어이고 하이퍼텍스트를 작성하기 위해 만들어졌다.</li>
<li>하이퍼텍스트는 웹페이지에서 볼 수 있는 링크를 말한다.</li>
<li>이것은 프로그래밍 언어이기보다는 마크업 언어인데 마크업 언어는 화면에 어떻게 나타나야할지를 보이기위한 일련의 문자나 기호인 것이다.</li>
<li>프로그래밍 언어라 하지 않는 이유는 시간과 관련이 있다. 웹페이지를 묘사하는 언어이고 시간의 순서에 따라 쓰여지지 않기 때문이다. </li>
</ul>
<p><a href="https://jhnyang.tistory.com/83">https://jhnyang.tistory.com/83</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🌒 Pre) 웹개발 종합반_1]]></title>
            <link>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%981</link>
            <guid>https://velog.io/@genie__rorok/Pre-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%981</guid>
            <pubDate>Wed, 09 Jun 2021 06:42:34 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/4437bef8-e317-44f3-a7cc-5eba655e8f70/giphy.gif" alt=""></p>
<h4 id="웹개발-종합반-1주차-수업-자료">웹개발 종합반 1주차 수업 자료</h4>
<p>링크 : <a href="https://www.notion.so/1-59315708468149fc9cb2877ca0784f65">https://www.notion.so/1-59315708468149fc9cb2877ca0784f65</a></p>
<ul>
<li><p>HTML : 뼈대
문서 형태를 기반으로 함.<br>&lt;꺽쇠는 태그라고 함&gt;</p>
</li>
<li><p>CSS : 꾸미기</p>
</li>
<li><p>JavaScript : 움직이게 하는거 
유일하게 브라우저가 알아 들을 수 있는 언어</p>
</li>
<li><p>html 기본 문법 참고: <a href="https://blog.naver.com/so2eej/222327286087">https://blog.naver.com/so2eej/222327286087</a></p>
</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;스파르타코딩클럽 | HTML 기초&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;!-- 구역을 나누는 태그들 --&gt;
    &lt;div&gt;나는 구역을 나누죠&lt;/div&gt;
    &lt;p&gt;나는 문단이에요&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt; bullet point!1 &lt;/li&gt;
        &lt;li&gt; bullet point!2 &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- 구역 내 콘텐츠 태그들 --&gt;
    &lt;h1&gt;h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.&lt;/h1&gt;
    &lt;h2&gt;h2는 소제목입니다.&lt;/h2&gt;
    &lt;h3&gt;h3~h6도 각자의 역할이 있죠. 비중은 작지만..&lt;/h3&gt;
    &lt;hr&gt;
    span 태그입니다: 특정 &lt;span style=&quot;color:red&quot;&gt;글자&lt;/span&gt;를 꾸밀 때 써요
    &lt;hr&gt;
    a 태그입니다: &lt;a href=&quot;http://naver.com/&quot;&gt; 하이퍼링크 &lt;/a&gt;
    &lt;hr&gt;
    img 태그입니다: &lt;img src=&quot;https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png&quot; /&gt;
    &lt;hr&gt;
    input 태그입니다: &lt;input type=&quot;text&quot; /&gt;
    &lt;hr&gt;
    button 태그입니다: &lt;button&gt; 버튼입니다&lt;/button&gt;
    &lt;hr&gt;
    textarea 태그입니다: &lt;textarea&gt;나는 무엇일까요?&lt;/textarea&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<p>개발자 도구(f12)가 존재하는 이유 : 왔다갔다하는 번거로움을 줄이기 위해</p>
<ul>
<li>함수 (function) : 부르면 정해진 동작을 한다. 함수 속의 &#39;return&#39; 은 나를 변신시켜줘 라는 의미. 줄의 순서대로 이루어진다.
console.log() : 콘솔 창에 프린트 해준다. 
&amp;&amp; : and
|| : or
.length : list 길이 나옴</li>
</ul>
<p>even % 2 : 2로 나눈 나머지가 0입니다.
odd % 2 &quot; 2로 나눈 나머지가 1입니다. </p>
<p>++ : 하나씩 더해준다. \</p>
<p>list[] : 순서 중요
dict {} : 순서 중요 x
딕셔너리가 리스트 안에 들어 갈 수 있다. 
<img src="https://images.velog.io/images/genie__rorok/post/753ae446-32e5-4924-be2e-6165ecfe59e4/screenshot-blog.naver.com-2021.06.12-12_00_11.png" alt=""></p>
<p>list안에 dict가 여러개 들어가 있다? 전형적인 for문</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[👍 코딩 기본 용어 정리]]></title>
            <link>https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9-%EA%B8%B0%EB%B3%B8-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC</link>
            <guid>https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9-%EA%B8%B0%EB%B3%B8-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC</guid>
            <pubDate>Wed, 09 Jun 2021 05:43:51 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/3a933a5b-72de-4dfc-8568-14fcf97fe4ba/image.png" alt=""></p>
<h4 id="1-코딩이란">1. 코딩이란?</h4>
<ul>
<li>Code(코드; 컴퓨터가 알아들을 수 있는 언어) +ing( 하다) : <strong>컴퓨터에게 명령하는 것.</strong></li>
</ul>
<h4 id="2-코딩coding-vs-프로그래밍programming">2. 코딩(Coding) vs. 프로그래밍(Programming)</h4>
<ul>
<li>프로그래밍이 코딩보다 더 넓은 개념. </li>
<li>프로그래밍은 컴퓨터가 작업을 수행하기 위한 프로그램을 설계, 개발하는 전 과정을 일컫는다. 
반면, 코딩은 컴퓨터가 작업을 수행하기위한 프로그래밍 언어를 사용하여 명령어를 작성하는 프로세스를 일컫는다. </li>
<li><strong>결론적으로,</strong> 프로그래밍은 문제 식별, 분석, 코딩 및 테스트의 개념을 모두 포함하는 전과정이며, 코딩은 이러한 프로그래밍의 기본이 되는 컴퓨터 코드 작성 과정을 이야기한다. <blockquote>
<p>📕 EX) 코딩과 프로그래밍의 차이 ( 논리적인 구조를 통해 코드를 업그레이드)<img src="https://images.velog.io/images/genie__rorok/post/b1007ec7-3dab-493c-a227-a97d1b86d388/image.png" alt=""></p>
</blockquote>
</li>
</ul>
<h4 id="3-프로그래밍-언어-programming-language">3. 프로그래밍 언어 (Programming Language)</h4>
<ul>
<li><p>컴퓨터는 0 (off),1 (on) 밖에 인식하지 못한다. </p>
</li>
<li><p>우리가 원하는 동작을 컴퓨터가 알아들을 수 있는 언어인 <strong>&#39;기계어&#39;</strong>로 직접 작성하기에는 무리가 있다.</p>
</li>
<li><p>그렇기 때문에, 그러한 언어를 사람이 쓰기 좋은 형태로 가공하여 만든 것이 <strong>&#39;프로그래밍 언어(Programming Language)&#39;</strong>이다.</p>
<ul>
<li><strong>저급 언어</strong>: 기계어에 가까운 형태의 언어. ex) 어셈블리어</li>
<li><strong>고급 언어</strong>: 인간의 언어에 가까운 형태의 언어. ex) 파이썬</li>
<li>전세계의 다양한 언어가 있는 것과 같이 다양한 프로그래밍 언어들이 존재함. </li>
<li>그중에서도,  중국-중국어 / 한국-한국어처럼 특적 목적 및 영역을 위해 사용되는 언어들도 있다. ex) R (통계), SQL (데이터 처리), HTML </li>
</ul>
</li>
</ul>
<blockquote>
<p>💡 그렇다면 왜 아직도 저급 언어를 사용하는 걸까? </p>
</blockquote>
<ul>
<li>저급 언어라고 상대적으로 안좋은 언어는 아니다.
사용하기는 어렵지만, 상대적으로 컴퓨터 내부적으로 더 세부적인 조절이 가능하다.</li>
<li>고급 언어는 사람이 배우고 사용하기 좋지만 , 세부적인 조작은 불가능하며 실행 속도도 조금 느린 편이다. </li>
</ul>
<h4 id="4-프레임워크-framework">4. 프레임워크 (Framework)</h4>
<ul>
<li>비슷한 구조가 많이 있을텐데 처음부터 코드를 짜는 것은 비효율적이다. </li>
<li>이러한 문제를 해결하기 위함.</li>
<li><strong>자주쓰는 기능(도구)을 미리 만들어 놓고 모아놓아서 더 쉽게 활용할 수 있는 환경을 제공하는 것.</strong></li>
<li>호환 단어 : Library, API, SDK (세부적인 차이는 있음)</li>
<li>용도(앱, 웹, 게임 개발) 또는 특정 언어에 맞는 프레임워크가 정해져 있기도 함.  </li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[📁 Pj 1) 웹 개발 미니 프로젝트_0]]></title>
            <link>https://velog.io/@genie__rorok/%E3%85%87%E3%84%B9%E3%85%87%E3%84%B9</link>
            <guid>https://velog.io/@genie__rorok/%E3%85%87%E3%84%B9%E3%85%87%E3%84%B9</guid>
            <pubDate>Wed, 09 Jun 2021 04:59:41 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/cd675cb3-cc0f-4f6d-91e5-20c1cbbf8dac/giphy%20(2).gif" alt=""></p>
<h3 id="프로젝트-설명-링크-">프로젝트 설명 링크 :</h3>
<p><a href="https://www.notion.so/Chapter1-W1-e36800564b29415fbc11de7f9c5f441f">https://www.notion.so/Chapter1-W1-e36800564b29415fbc11de7f9c5f441f</a></p>
<h3 id="조-">조 :</h3>
<p>5조</p>
<h3 id="조원-">조원 :</h3>
<p>이호진, 김성경, 조예찬, 정민기</p>
<h3 id="프로젝트-기간-">프로젝트 기간 :</h3>
<p>21.06.07 ~ 21.06.12</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[👍 코딩을 공부하는 순서]]></title>
            <link>https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9%EC%9D%84-%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94-%EC%88%9C%EC%84%9C</link>
            <guid>https://velog.io/@genie__rorok/%EC%BD%94%EB%94%A9%EC%9D%84-%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94-%EC%88%9C%EC%84%9C</guid>
            <pubDate>Wed, 09 Jun 2021 04:55:28 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/b8998fd5-1f61-4195-b820-ded3d51f26c4/giphy.gif" alt=""></p>
<h4 id="1-프로그래밍-언어-공부부터-시작하는-것은-어려울-수-있다">1. 프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있다.</h4>
<h4 id="2-웹-web--인터넷-브라우저로-접속할-수-있는-모든-사이트">2. 웹 (Web) = 인터넷 브라우저로 접속할 수 있는 모든 사이트.</h4>
<p>웹으로 시작하는 것을 추천한다.</p>
<ul>
<li>장점1) 인터넷을 사용해보았다면 누구나 익숙하다.</li>
<li>장점2) 난이도가 상대적으로 낮다.</li>
<li>장점3) 개발에 필요한 두각 많다.</li>
<li>장점4) Pc, 스마트폰, 태블릿, TV 등등 다양한 기기에서 동작한다. </li>
</ul>
<h4 id="3-개발의-종류-2-가지">3. 개발의 종류 (2 가지)</h4>
<ul>
<li>Front-End(Client Side): 우리가 눈으로 보는 화면.</li>
<li>Back-End(Server Side): 화면에 보여줄 정보를 저장, 처리, 가공하는 부분.<blockquote>
<p>📕 EX) 로그인 하는 상황 -&gt; F:아이디, 패스워드 입력 -&gt; B:일치 여부 확인 -&gt; B: F에게 로그인 성공 화면 표시하라고 지시 -&gt; F: 로그인 성공 화면 표시</p>
</blockquote>
</li>
</ul>
<p>웹, 어플, 윈도우 어플리케이션 등 모두 동일하게 작용한다.</p>
<ul>
<li>Front-End를 먼저 공부 할 것을 추천. 
Why? 개발을 위한 사전지식이 적고 결과를 바로 볼 수 있기 때문이다. </li>
</ul>
<h4 id="4-웹-개발을-위해-필요한-지식">4. 웹 개발을 위해 필요한 지식</h4>
<ul>
<li>HTML : 홈페이지 제목, 로그인창 위치 등 기본적인 웹의 뼈대를 작성하는 언어.</li>
<li>CSS : HTML의 뼈대에 색을 칠하고 위치를 수정하는 작업을 진행하는 언어.</li>
<li>JavaScript (JS) :</li>
</ul>
<blockquote>
<p>💡 HTML, CSS는 마크업 언어이다. (마크업 언어 : 그냥 구조만 표시하기 위한 언어</p>
</blockquote>
<blockquote>
<p>📕 EX) 그림을 그리는 상황
HTML : ✏연필과 같음. 어떻게 그릴지 전체적인 밑그림을 그리는 역할 
CSS : 🎨물감과 같음. 화려하고 예쁘게 만드는 역할.
JavaScript : 🏃‍♀️플립북 같음. 앞서 만든 그림을 움직일 수 있게 만듦. </p>
</blockquote>
<ul>
<li>프론트엔드만 할 줄 알아도 API를 잘 쓰면 쓸만한 서비스를 만들 수 있음. </li>
<li>API : 미리 만들어 놓은 것으로 가져다 쓸 수 있는 기능. </li>
</ul>
<h4 id="5-back-end-개발">5. Back-End 개발</h4>
<ul>
<li>처음부터 하나의 언어에 너무 깊게 파고들 필요는 없다. </li>
<li>JavaScript, Ruby, Python 등 쉬운 언어를 이용해 가장 기본적인 4가지 개념만 공부하는게 좋다.
  1) <strong>변수</strong>
  2) <strong>조건문</strong>
  1) <strong>반복문</strong>
  1) <strong>함수</strong></li>
</ul>
<blockquote>
<p>📕 EX) 외국인과 대화를 하고자 하는 상황</p>
</blockquote>
<ul>
<li><p>언어의 어원, 문법처럼 언어적인면만 깊게 안다고 해서 대화를 할 수는 없음. </p>
</li>
<li><p>프로그래밍도 메모리 사용 방법 등을 안다고해서 프로그래밍을 할 수 있는건 아니다.</p>
</li>
<li><p>과거에는 Back-End는 매우 알아야 할 지식과 개념이 많았다.</p>
</li>
<li><p>💛 <strong>하지만,</strong> 현재는 <strong>&#39;<a href="https://zetawiki.com/wiki/%EC%9B%B9%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC">웹 프레임워크</a>&#39;</strong>가 그 역할을 해주고 있다. 
<strong>Frame(규칙, 틀, 법칙) + Work (목적, 소프트웨어, 업무)</strong>
대표적인 언어별 프레임워크는 아래와 같다.
  1) JAVA : Spring, Grails, Play
  2) Python : Django, Flask
  3) Ruby : Rails, Sinatra
  4) Node.js : React, AngularJS, Express.js, Meteor
  5) Go : Reveal, Martini, Gorilla
  6) PHP : Laravel, CakePHP, Symfony, Zend</p>
</li>
<li><p>추천 프레임워크: Ruby on Rails </p>
</li>
</ul>
<h4 id="👽-코딩-기본-지식에-참고하기-좋은-사이트">👽 코딩 기본 지식에 참고하기 좋은 사이트</h4>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Comparison_of_web_frameworks">프레임 워크 정리</a></li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[🌑 Pre) 웹개발 종합반_0]]></title>
            <link>https://velog.io/@genie__rorok/%ED%95%AD%ED%95%B499-2%EA%B8%B0-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-%EC%8B%9C%EC%9E%91</link>
            <guid>https://velog.io/@genie__rorok/%ED%95%AD%ED%95%B499-2%EA%B8%B0-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-%EC%8B%9C%EC%9E%91</guid>
            <pubDate>Tue, 08 Jun 2021 11:41:06 GMT</pubDate>
            <description><![CDATA[<p><img src="https://images.velog.io/images/genie__rorok/post/bf7b488c-571b-45f4-ba4d-bbe6eaad71ad/giphy%20(1).gif" alt=""></p>
<h4 id="1-사전-준비-웹개발-종합반-강의를-듣기-위한-설정">1. 사전 준비 웹개발 종합반 강의를 듣기 위한 설정</h4>
<p>링크 : <a href="https://www.notion.so/0-a6bde1dab4314f41850122586930c785">https://www.notion.so/0-a6bde1dab4314f41850122586930c785</a></p>
<h4 id="2-웹개발-종합반">2. 웹개발 종합반</h4>
<p>수업 자료 모음: <a href="https://www.notion.so/565aa5540e08496b9ed62beda35ed8da">https://www.notion.so/565aa5540e08496b9ed62beda35ed8da</a></p>
]]></description>
        </item>
    </channel>
</rss>