Informatics

[Mysql] 1. XAMPP 설치하는 법(V 3.3.0)

Bill Gray — Mon, 28 Nov 2022 22:13:08 +0900

웹 서비스 운영에서 웹 서버는 필수적이다. 이때 웹 서버를 구동할 수 있게 도와주는 소프트웨어가 XAMPP이다. XAMPP는 Apache, MariaDB(Mysql), PHP, 그리고 Perl을 포함하고 있다.

먼저 xampp 다운로드 사이트로 이동하여 운영체제에 맞게 선택하면 된다.

설치 파일 다운로드가 완료되었다면, 설치 파일을 더블클릭하여 실행해 준다.

이때 아래와 같은 문구가 뜰 수도 있는데, 해석하자면 C:\Program Files에 XAMPP설치 시에는 UAC로 인해 XAMPP의 일부 기능이 작동하지 않을 수도 있으니, 다른 경로에 다운로드하라는 것이다. 확인을 눌러주면 된다.

Next를 누른다

이 강의에선 Mysql을 중점적으로 다룰것이나 FTP와 Tomcat은 다운로드를 해줘서 나쁠 것은 없으니 같이 다운로드하는 것을 추천한다. 원하는 것에만 체크 표시를 한 후에 Next를 눌러준다.

다운로드 경로를 설정해주면 되는데, 이때 아까 말한것처럼 C:\Program Files 경로에 설치하면 UAC로 인해 일부 기능이 정상 작동하지 않을 수도 있으니 C:\Program Files를 제외한 디렉터리를 지정해준 후 Next를 누른다.

언어 설정은 영어와 독일어 뿐이니 영어로 설정하고 Next를 누른다.

설치가 끝났다.

다음 시간에는 Xampp의 기본적인 사용법에 대해 알아보겠다.

[HTML]4. head 요소란? - title, style, link, meta, script

Bill Gray — Fri, 6 May 2022 12:37:39 +0900

1. <head> 태그란 무엇인가?

<head> 태그는 메타데이터의 컨테이너라고 생각하면 된다. 메타데이터란 한 데이터를 설명해주는 다른 데이터이다. 따라서 <head> 태그는 데이터의 데이터를 적는 곳이다. <head> 태그는 <html> 태그와 <body> 사이에 위치하며, 주로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타 정보를 정의하는데 쓰인다. 이러한 html의 메타 데이터는 사용자들의 화면에 보이지 않는다.

2. <title>

이름에서 알 수 있듯이, <title> 태그는 html 문서의 제목을 정의한다. 네이버를 예로 들자면, 아래와 같이 NAVER 라는 텍스트가 <title> 태그로 작성된 것이다.

네이버 사이트의 title

<title> 태그의

기본적인 사용법은 위와 같다. <title></title> 사이에 html 문서의 제목을 써주면 된다. 당연하지만 차이가 보이지는 않을 것이다. 위에서 말했듯이 헤드 요소들은 메타 데이터를 쓰는 곳이고 메타 데이터는 사용자의 눈에는 보이지 않는다. 하지만 제목 표시줄이나 페이지 탭에 html 문서의 이름이 표기가 되고 검색엔진 최적화(SEO)에 매우 큰 영향을 끼치기 때문에 검색 엔진 알고리즘에서 높은 순위에 페이지가 나오게 하기 위해서는 필수적으로 써야 한다.

2. <style>

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

3. <link>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
</body>
</html>

4. <meta>

<meta charset="UTF-8">
<meta name="description" content="HTML 강좌">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Bill Gay">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. <script>

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    console.log("ong");
  </script>
</head>
<body>
  <h1>ong</h1>  
</body>
</html>

하지만, css와 마찬가지로 자바스크립트의 내용이 길어질수록 html과 자바스크립트를 분리하는 것이 더 편리하고 보기 좋다. 그래서 이런 경우에는 아래와 같이 <script src = "js 파일 경로"></script>로 연결해주면 된다.

<script defer src = "./main.js"></script>
or
<script async src = "/js/main.js"></script>
or
<script src = "/js/main.js"></script>

위 3가지 방식은 비슷해 보이지만 미묘한 차이가 있다. 브라우저는 자바스크립트를 가져오고 HTML을 분석하기 때문에 자바스크립트로 HTML 요소를 다루기 위해서는 HTML 요소를 먼저 분석하고 자바스크립트를 가져와야 한다. defer를 사용하는 방식은 문서상의 순서대로 수행을 하는 것이다. async를 사용하면 동기 처리를 통한 병렬로 HTML분석이 이루어질 때도 스크립트를 불러온다. 마지막 방식은 그냥 script태그를 최하단에 위치시키는 것이지만 이 방식은 보기에도 좋지 않고 편리하지 않기 때문에 async 또는 defer 방식을 추천한다. 자세한 차이는 비동기/동기 처리 강좌 때 설명하겠다.

[유니티 강좌] 7.유니티의 충돌감지와 리지드바디

알 수 없는 사용자 — Sat, 2 Apr 2022 10:05:54 +0900

다시 돌아온 유니티 강좌! 오늘은 유니티의 충돌과 리지드바디에 대해서 배울겁니다.

설명을 하기 위해서 다시 유니티를 켜줍니다.

캡처도구 고쳐옴;;

하지만 저 예시오브젝트로 설명하기엔 좀 까다로우니깐 새로운 오브젝트를 하나 가져오겠습니다.

EYEBREAKER.png

0.00MB

좀 눈이 아프겠지만 의도한 겁니다. 이제 이걸 예시에 했던것 처럼 드래그해서 유니티 프로젝트 탭에 넣어줍니다. 그다음 예시와 같이

저렇게 EYEBREAKER을 클릭하셔서 인스펙터 창의 Filter Mode에 Bilinear옆에 역삼각형을 눌러서 Point(no filter)으로 바꿔줍니다. 그다음에

사진에서 보이는 빨간색 동그라미를 클릭 -> 파란색 오브젝트를 드래그해서 Scene뷰로 옮기시면 됩니다(드래그 과정에 You have not applied setting 이라는 문구가 뜨면 Apply 눌러주기!). Scene 뷰로 오브젝트를 보내면 하이어라키(Hierachy)에 EYEBREAKER 이라는 오브젝트가 하나 생깁니다. 이걸 클릭해 주시면 인스펙터 창에

파란색 동그라미가 컴포넌트라고 불린다

두가지 컴포넌트가 나옵니다. 여기서 Transform 컴포넌트의 Scale 항목을 50 50 1으로 해줍니다. 그러면 적당한 크기가 됩니다. 이상태에서 본문 들어갑니다, 하이어라키의 EYEBREAKER을 누르시고, 인스펙터 창의 Add Component를 클릭, Rigidbody 2D 를 검색후 클릭하시면 인스펙터에 Rigidbody 2D 컴포넌트가 들어갑니다.

Rigidbody는 음.... 여기 컵이 있다고 칩시다. 컵을 높이서 떨어트리면 떨어지겠죠, 하지만 유니티의 물체는 그렇지 않습니다. 왜냐하면 기본적인 물리법칙이 없거든요(공기저항, 중력, 질량 ,등등) 하지만 RIgidbody컴포넌트를 오브젝트에 추가시켜 주므로써 기본적인 물리법칙을 적용시켜주는 것입니다.

다시 유니티로 돌아와서, Rigidbody 2D를 추가시키신 뒤에, 실행을 눌러보시면 EYEBREAKER가 떨어집니다. 중력이 생겼거든요.

땅을 하나 불러와 볼까요?

GroundEx.png

0.00MB

EYEBREAKER과 똑같이 설정해 주시면 됩니다.그리고 Rigidbody 2D 컴포넌트에서 Constraints항목의 Freeze Position, Rotation 모오두 체크. 단, 스케일은 1000 100 1 추천!

Q: 음..그럼 이제 실행시키면 되는건가요?

예 안됩니다. 왜냐하면 우리는 기본물리학만 넣어줬지 충돌을 적용시키진 않았거든요 ㅎㅎ 다시 인스펙터에서 Add component에서 Box Collider 2D를 EYEBREAKER 오브젝트에 넣어줍니다. 그다음,GROUNDEX 오브젝트에도 똑같이 넣어줍니다.

여기서 잠깐만! Collider란 충돌 컴포넌트 입니다. 오브젝트와 오브젝트끼리 충돌했을때 서로 뚫고 지나가지 못하도록 충돌을 넣어준 것입니다. 보동 Rigidbody와 같이 씁니다.

그다음 실행시켜주시면 이제 쿵! 하고 부닥칩니다. 이렇게해서 리지드바디와 콜라이더를 배워봤는데요, 재밌죠? ㅎㅎ다음시간엔 움직임 파트 2를 써보도록 하겠습니다

[유니티 강좌] 6.움직이자!

알 수 없는 사용자 — Thu, 17 Mar 2022 17:46:02 +0900

오늘은 드디어 움직여 볼건데요,

저번에 설명할때 쓰였던 Move 스크립트로 들어가 줍니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Move : MonoBehaviour
{
    Rigidbody2D rigid;
    public float Movesp;

    Vector3 moove;
    // Start is called before the first frame update
    void Start()
    {
        rigid = gameObject.GetComponent<Rigidbody2D> ();
    }

    // Update is called once per frame
    void FixedUpdate()
    {
        PMove();
    }
    
    void PMove()
    {
         
        Vector3 movevelocity = Vector3.zero;

        if (Input.GetAxisRaw("Horizontal") < 0)
        {
            movevelocity = Vector3.left;
        }
        else if (Input.GetAxisRaw("Horizontal") > 0)
        {
            movevelocity = Vector3.right;
        }
        transform.position += movevelocity * Movesp * 4f *Time.deltaTime;
    }
}

예.... 길죠? 이렇게 써주심 됩니다. 이걸 복붙 해도 상관은 없습니다만 여러분의 실력을 늘릴려면 혼자 입력해 보면서 알아가는 것도 중요하다고 생각합니다. 설명을 좀 해보자면, Input.GetAxisRaw("Horizontal") 은 유니티 자체 내장 기능입니다. A와 D 를 비교해서 수평 이동이죠. 그래서 Horizontal 입니다. A가 눌리면 Horizontal은 음수가 되고, D 가 눌리면 양수가 됩니다. 이 값을 비교하여 벡터를 이용하면 수직 이동을 쉽게 할수 있죠.

이제 유니티로 돌아와서 스크립트를 끌어서 "예시"(빨간공)에 넣어줍니다.

근데 실행시켜보면 작동이 안됩니다. 왜 그럴까요? 일단 저희가 사용한 Movesp 가 0으로 설정되있기 때문이죠. 우리의 "예시"

오브젝트를 누르면 인스펙터 창에 여러가지가 뜨는데 밑으로 내리면 Move(Script)라고 써져있는 컴포넌트에 자세히 보시면 Movesp [0] (캡처도구가 고장나서ㅠㅠㅠ)가 있습니다. 이걸 50 정도로 바꿔주고 실행을 눌러주면 안됩니다. 리지드 바디가 없군요.... 다음시간엔? 맞습니다. 리지드 바디에 대해 써보겠습니다.

[유니티 강좌]5.스크립트의 구성을 알아보자!

알 수 없는 사용자 — Sun, 27 Feb 2022 15:42:16 +0900

오늘은 유니티를 작동시킬수 있는 핵심 부품인 스크립트(Script) 의 구성을 살펴보고 특징을 알아볼것 입니다. 먼저, 유니티를 켜줍니다. 우리가 저번시간에 만들어 뒀던 Move 스크립트를 더블 클릭을 통해 들어가 줍니다. 그러면 조금 있다가 비주얼 스튜디오 코드가 켜질텐데요,

이런 멋있는 화면이 나온다면 성공입니다. 다른것은 다 재껴두고 제일 윗 항에 보이는

using

으로 시작하는 것은 다른 라이브러리에서 가져온다 라는 것입니다. C#은 라이브러리 라는 기능들을 저장해 놓는 곳이 있는데 거기서 해당 부분의 기능을 쓰겠습니다~ 이런것입니다. 그다음으로 보이는 것은

public class Move : MonoBehavior

이것입니다. 설명 드리기 전에! public class [스크립트 이름] : MonoBehavior 에서 스크립트 이름이 NewScriptBehavior이나 다른것으로 설정되 있으시면 유니티에서의 스크립트 이름과 일치하게 적어주세요

만약 이름이 이것처럼 Move 일때, public class Move : MonoBehavior 으로 변경!

이것은 쉽게 말하자면 위치 입니다. 코드들이 있을 자리죠. 자! 다음에 보이는 것은 함수들 입니다! 엥? 함수는 수학에나 나오는것 아니냐고요? 함수는 영어로 Function입니다. 기능이죠. 함수 안에 있는것을 실행시키는 기능입니다. 제일 많이 쓰는것은 아무래도 아래 두 함수겠죠

void Start()
void Update()

Start() 함수는 코드가 첫번째로 시작될때 깨어나서 한번만 실행합니다.

하지만 Update() 함수는 매 프레임 마다 실행합니다.

그러면 이 둘중에 어떤 함수가 더 먼저 실행될까요? 맞습니다. Start()함수입니다.

그래서 보통 Start()함수에는 다른 오브젝트에서 함수를 가져오거나 함수를 실행시키는 코드가 들어가고,

Update 함수는 움직이는 코드나 반복이 필요한 코드가 들어가죠.

네! 이렇게 오늘은 유니티의 핵심부품 스크립트의 구성에 대해서 알아보았는데요, 다음시간엔 드디어 움직이는 코드를 작성해 보도록 합시다.

[유니티 강좌]4. 유니티 C# 스크립트의 연동

알 수 없는 사용자 — Sat, 26 Feb 2022 16:04:55 +0900

안녕하세요~ 오늘의 학습 목표는 저번 강좌때 설치했던 비주얼 스튜디오 코드와 유니티를 연동 밑 간단한 움직이는 코드를 작성해 보겠습니다. 일단 유니티를 켜줍시다.

저 Edit 을 누르시고,

밑에 보시면 Preferences -> External tools ->External Script Editor 을 Visual Studio Code로 바꿔주시면 되는데, 만약 이것이 없으시면 3강때 소개해 드렸던 확장팩을 모두 다운받으셨는지 확인 해보세요

빨간색으로 둘러진 아래 방향 화살표 누르시고 변경하심 됩니다.

연동 후에, Project 탭의 Asset 파일에서 우클릭 -> Create -> New Folder -> Scripts라고 이름 변경(이름 자유) -> Scripts 폴더에 들어간 후, Create -> C# Script 클릭 -> 그 스크립트 우클릭 후 Rename 클릭 -> Move라고 이름 변경 하셔서

네 이렇게 오늘은 유니티 스크립트 연동을 알아보았는데요, 다음 시간에는 유니티의 간단한 움직임 코드를 짜보겠습니다.

칼리 설치 하는법

알 수 없는 사용자 — Fri, 25 Feb 2022 22:34:17 +0900

안녕하세요, 오늘은 kali linux 를 까는 방법을 알아보도록 하겠습니다. 칼리는 리눅스 계열
운영 체제중에 하나 인데 보통 보안 테스팅을 위해 사용 합니다. 사람들이 일반적으로 말하는
모의 해킹입니다. 우선 칼리를 virtualbox 에 까는 방법을 알아 볼것 인데,
https://www.virtualbox.org/wiki/Downloads

Downloads – Oracle VM VirtualBox

Download VirtualBox Here you will find links to VirtualBox binaries and its source code. VirtualBox binaries By downloading, you agree to the terms and conditions of the respective license. If you're looking for the latest VirtualBox 6.0 packages, see Virt

www.virtualbox.org

이 곳에서 자신의 운영 체제에 맞는 것을 선택 한 후, 다운로드 합니다. 그 후에 밑에 있는

Virtualbox 6.1.32 Oracle VM VirtualBox Extension Pack

을 깔아야 합니다. 그 다음에 https://www.kali.org/get-kali/#kali-virtual-machines

Get Kali | Kali Linux

Home of Kali Linux, an Advanced Penetration Testing Linux distribution used for Penetration Testing, Ethical Hacking and network security assessments.

www.kali.org

에서 virtualbox 를 다운로드 합니다. 이때 torrent 나 sum 파일을 다운로드 하지 안도록 합니다.
다운로드 한 후에는 파일을 더블 클릭 하여 엽니다. 그 다음에 시스템에서 하라는대로 설치 한 후에
칼리를 열면

다음과 같은 화면이 나옵니다. 아이디 비번 둘 다 kali 이므로 간단하게 입력 한 후 들어가면 이제
칼리를 사용 할수 있습니다. 그러면 다음 시간에는 링크 피싱에 대해 알아보도록 하겠습니다.

[HTML]3. Doctype(DTD)란?

Bill Gray — Fri, 25 Feb 2022 10:23:18 +0900

1. DTD란?

DTD(Document Type Definition)는 문서 형식을 정의하는 컴퓨터 용어로, SGML 계열의 마크업 언어에서 문서 형식을 정의하는 것이다. SGML을 비롯해 HTML, XHTML, XML 등에서 쓰인다.

2. Doctype이란?

Doctype 태그에 대해 설명하기 이전에 HTML의 버전에 대해 알고 있을 필요가 있다. 아래 표는 연도별 HTML의 버전을 보여준다. 아래 표를 보면 알 수 있듯이, HTML에는 다양한 버전이 있다. 각각의 문서 별로 문서의 형식 또한 다르다. 따라서 어떤 형식으로 문서가 작성되는지를 나타내 주는 태그가 DOCTYPE이다. HTML 4의 경우에는 메타태그가 다음과 같이 매우 길었다. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5부터는 <! DOCTYPE html>로 바뀜에 따라 매우 간단해졌다.

버전	HTML	HTML+	HTML 2.0	HTML 3.2	HTML 4.01	XHTML	HTML 5
연도	1991	1993	1995	1997	1999	2000	2012

[유니티 강좌]3.VsCode 설치

알 수 없는 사용자 — Thu, 24 Feb 2022 17:42:32 +0900

유니티 스크립트 대망의 첫번째 강좌입니다. 일단, 우리는 스크립트를 쓸 곳이 필요하겠죠? 우리는 마이크로 소프트가 개발한 Visual Studio Code 를 쓸 것입니다.

비주얼 스튜디오 코드는 가볍습니다!다른 비주얼 스튜디오들은 너무 무겁고 렉이 많이 걸립니다. 하지만 우리는 비주얼 스튜디오 코드만 이용해도 충분한 기능을 이용할수 있기 때문에 비주얼 스튜디오 코드 를 이용하는 것입니다.

https://code.visualstudio.com/ 이 사이트로 들어가 주시면 파란색 다운로드 버튼

이런 파란색 버튼을 눌러주시면 VSCodeUserSetup....exe 라는 파일이 다운받아질 텐데요. 실행시켜 줍니다. 참고로 이 파일은 마이크로소프트 비주얼 스튜디오 공식 사이트에서 다운로드 받은 파일이므로, 바이러스가 없으니 안심하고 실행하셔도 됩니다. 실행시켜 주시면 약관 같은게 나오는데 [동의합니다]를 누르고 쭉쭉 진행해 줍니다.

이런 화면에선 바탕화면에 바로가기 만들기를 선택해 주셔도 되고 딱히 상관은 없습니다. 저처럼 세팅해 주신다음, 다음으로 가시면 됩니다. 그다음 설치 버튼을 눌러주시면 설치가 시작되고 나서, 1분도 안돼서 설치가 완료 됩니다!

짜잔~

종료를 눌러 주시면 됩니다.

조금 있다가 비주얼 스튜디오 코드가 실행될 텐데요, 이것만 하면 끝~......이 아니겠죠? 왜냐하면 우리는 이 프로그램과 유니티를 연동을 시켜줘야지만 비주얼 스튜디오 코드에서 작성한 스크립트를 유니티로 불러올수 있기 때문이죠. 다음 작업들을 해주질 않으면 스크립트가 작동하지 않는답니다.

비주얼 스튜디오 코드에 들어오셔서 왼쪽 상단에 보시면 이런 아이콘들이 있습니다. 여기서

얘를 눌러줍니다. 이 아이콘은 확장팩을 추가할수 있는 아이콘인데요, 다음과 같은 확장팩들을 설치해야 합니다.

저 빨간색의로 동그라미 쳐진데에 각각
1. C#: 비주얼 스튜디오 코드에서 C# 이라는 언어를 사용할수 있게 해줌

2. Unity Code Snippets: 유니티의 각종 함수들을 예쁘게 꾸며줌

3. Debugger for Unity: 오류들을 지목해줌

4. Unity tools: 유니티의 기능들을 사용할수 있게 해줌

5(선택): Korean: 한국어 패치

이렇게 다운해 주시면 완성입니다. 그런데 갑자기 의문이 듭니다. 스크립트는 뭘까?

스크립트는 명령어 입니다. 유니티의 게임 오브젝트들 한테 명령을 내려서 이렇게 행동해라, 저렇게 행동해라, 를 결정해 주는 것입니다. 스크립트는 언어에 따라서 달라지는데요, 프로그래머들은 주로 C++, C#, Java, JS, 파이썬 이런 텍스트 코딩 언어를 사용합니다. 우리는 게임 개발을 할 것이기 때문에 C#으로 명령을 내립니다. 유니티는 C# 기반이고 C#으로 이루어진 스크립트(다른 언어도 지원하지만 너무 어려워짐)는 잘 못 받아드립니다. 따라서 우리 영어나 한국어로 say hello computer이라고 한다면 오류가 나고 말겁니다. 따라서 우리는 C#이란 언어를 공부하게 될 것입니다. 다음 시간엔 스크립트의 구성에 대해서 자세히 써보도록 하겠습니다

[Network] 프로토콜(protocol)이란?-정의, 요소, 기능

Bill Gray — Thu, 24 Feb 2022 16:41:52 +0900

1. 프로토콜의 정의

프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계이다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 한다.

2. 프로토콜의 요소

프로토콜의 요소는 크게 3가지로 볼 수 있다. 그중 첫 번째는 구문(syntex)으로, 데이터의 구조/포맷을 정의한다. 예를 들면 01001000101110101이라는 정보를 전송할 때, 0100는 주소를 나타내고 1000 부분은 데이터를 나타낸다고 정의하는 것이다. 프로토콜의 두 번째 요소는 의미(semantics)으로, 각 부분이 무엇을 의미하는지 알 수 있게 해주는 규칙을 포함한다. 이러한 규칙에는 오류, 동기, 흐름 제어가 있다. 예를 들어보자면, 0100는 4층으로 1000 부분은 물을 이라고 할 수 있다. 마지막 요소는 순서(Timing)로, 어느 데이터를 얼마나 빠르게 전송할지를 정의한다.

3. 프로토콜의 기능

프로토콜의 기능은 각각의 종류마다 차이가 있지만, 공통적으로 제공하는 기능들이 있다. 그 기능들은 주소 설정(Adressing), 순서 제어(Sequence Control), 데이터 단편화/재조합(Fragementation/Reassembly), 캡슐화(Encapsulation), 연결제어(Connection Control), 흐름 제어(Flow Control), 오류 제어(Error Control), 동기화(Synchronization), 다중화(Multiplexing), 전송 서비스로 총 10 가지 기능이 있다. 각각의 기능을 설명해보자면, 주소 설정 기능은 한 기기에서 다른 기기에 데이터를 전송할 때 상대의 주소를 알아야 하는데 이를 위해 프로토콜에는 각각의 전송 계층에 맞게 이를 지정해주는 기능이 있다. 프로토콜의 순서 제어 기능은 PDU(Protocol data unit)의 순서를 제어해주는 역할을 하며, TCP와 같은 연결 지향형에서만 쓰인다. 순서가 정해진 PDU를 보내면 송신 측에서 순서에 따라 데이터를 재구성한다.

데이터 단편화 및 재조합 기능은 대용량 파일을 보낼때 효율을 높이기 위함이다. 대용량 파일을 한 번에 보내는 건 불가능하다. 따라서 수신 측에서 파일을 단편화, 즉 효율적으로 전송이 가능하게 쪼갠다음 송신 측에서 해당 데이터를 재조합한다.

캡슐화 기능은 SDU(Service data unit)에다가 PCI(Protocol Control Unit)을 덧붙이는 것이다. SCU와 PCI에 대해서 짤막하게 설명해보자면, SDU는 실제 정보라고 생각하면 되고, PCI는 제어 정보라고 생각하면 된다. 그리고 그 두 개를 합친 것을 PDU라고 한다. PCI에는 발신지, 수신지 주소, 순서 번호 등과 같은 헤더 정보가 포함되어 있다.

연결 제어 기능은 말 그대로 두 시스템간의 데이터 교환 시에 연결을 설정하는 것이다. 이러한 방식을 TCP와 같은 연결 지향형 데이터 전송이라 하고 연결 설정을 안 하는 것을 UDP와 같은 비연결 지향형이라 한다.

흐음 제어 기능은 말 그대로 송신 개체로부터 오는 데이터의 양과 속도를 조절한다. 이를 통해 송-수신 특의 속도 차이 등으로 인한 정보의 유실을 방지한다.

오류 제어 기능은 위에서 말한 SDU 또는 PCI가 잘못되었으면 찾아내는 역할을 한다. 대표적인 방식으로는 Parrity bit, CRC(Cyclic Reduncy Check) 등이 있다.

동기화는 두 개체가 통신시에 동시에 정의된 인자 값을 공유하며 서로 호흡을 맞추는 것이고 다중화 기능은 하나의 통신 선로에서 여러 시스템을 동시에 통신할 수 있게 해주는 기법이다. 마지막으로 전송 서비스는 우선순위를 결정하고 보안 요구 등을 제어하는 역할을 한다.

[유니티 강좌]2. 게임 오브젝트

알 수 없는 사용자 — Wed, 23 Feb 2022 03:13:50 +0900

저번 시간에 우리는 유니티 에디터의 구성을 알아보았습니다. 오늘은 게임 오브젝트를 다뤄보겠습니다 게임 오브젝트는 게임 속의 모든 물체입니다. 우리는 이 오브젝트를 움직이게 할 수도 있고 돌릴 수도 있습니다. 하지만, 기본기부터 배워봅시다. 어서 유니티를 키세요. 유니티 에디터에서 하이어 라키 탭으로 마우스를 가져다 댄 후에, 우클릭을 해봅시다

이 창이 나오면 됩니다. 저기서 마우스를 움직여 2D Object 에다가 가져다 대면 Sprite 가 보일겁니다. 그 Sprite를 클릭하면 Scene창에 무언가 보이지 않는 물체가 생성이 되고 인스펙터에 뭐가 막 뜹니다. 오류 난 게 아닙니다. 이것은 스프라이트 안에 물체가 없기 때문이죠. 따라서 우리는 캐릭터나 물체를 만들 때 외부에서 가져올 수 있습니다.

예시.png

0.00MB

우리는 이 예시파일로 연습을 해보겠습니다. 먼저, 이 파일을 다운로드합니다. 그다음, 프로젝트 탭에서 우클릭 -> Create 클릭 -> Folder 클릭해주시고 이름은 Resources로 합니다. 그다음 다시 프로젝트 탭에서 아까 만든 Resources 파일로 들어간 후에, 예시 파일을 끌고 Resources로 집어넣어주시면 됩니다. 그러면

이런 형태가 됬을텐데, (화살표 부분을 눌러주면 2개로 펼쳐집니다) 두 번째 꺼를 Scene 화면으로 끄집어 내주기 전에! 첫번째 꺼를 클릭해 줍니다. 인스펙터에서

이 빨간색 선으로 둘려 쳐진 것을 No point로 바꿔줍니다. 바꿔주는 방법은 옆에 화살표를 클릭하고 No point를 클릭해 주면 됩니다. 이제, 두 번째 것을 Scene으로 꺼내 줍니다. 그러면 너무 작아서 잘 안보일 텐데, 마우스 휠을 돌리면 커집니다. 하여튼, 끌어다 놓으면 하이어 라키에도 예시가 생긴 것을 볼 수 있는데 이걸 클릭하면 인스펙터에 또 뭐가 뜹니다. 여기서 Transform 컴포넌트를 잘 보아야 합니다

이 부분이요. 여기서 Scale은 크기(숫자를 맘대로 바꿔보세요) Position 좌표 Rotation 회전 입니다. 하지만 이것들을 일일이 하는 건 너무 힘들죠, 그래서 저번 시간에 알려드린 왼쪽 상단 위에 File 밑에 보면 손바닥 있죠? 거기서 옆으로 천천히 보면

이렇게 있는데요, 이것들로 모양을 조절할수 있습니다! 스크립트의 힘을 조금만 빌린다면 마우스를 따라오게 할 수도 있고, 방향키로 움직이게 할 수도 있고, 점프하게 만들 수도 있습니다.

[유니티 강좌] 1. 유니티 에디터에 대해서 알아보자

알 수 없는 사용자 — Wed, 23 Feb 2022 03:10:39 +0900

우리는 저번 시간에 유니티 설치를 다루어 보았는데요, 오늘은 유니티를 시작하기 앞서 기본적인 유니티 에디터에 대한 지식을 쌓는 시간을 가져보도록 하겠습니다. 먼저, 저번 포스팅과 이어서, 프로젝트를 만드시면 (2D를 먼저 알려드릴 것이기 때문에 탬플릿은 무조건 2D로!)

이런 화면이 뜨실 텐데요, 이것이 바로 유니티 에디터입니다!

위 캡처에 빨간 숫자들
1: Hand tool Scene 화면을 이리저리 좌클릭 드래그로 움직일수 있습니다

2: Move tool Scene 화면에 있는 게임 오브젝트들을 움직일수 있습니다

3: Rotate tool Scene 화면에 있는 게임 오브젝트들을 회전 시킬수 있습니다

4: Scale tool Scene 화면에 있는 게임 오브젝트의 크기를 조정할수 있습니다

5: Rect tool 게임 오브젝트의 크기를 마음대로 조절할수 있습니다

6: 그냥 게임 오브젝트 움직이거나 돌리거나 크기를 마음대로 할 수 있는 툴

7: Custom tool 커스텀 툴을 추가할수 있는 툴

8: Scene 게임뷰에 표시할 항목을 조절하는 곳

9: Game 게임을 완성해서 출시했을 때 보이는 화면

10: Hierachy 계급 이라는 뜻이며 프로젝트에서 스프라이트를 직접 게임에 포함시키며 게임 오브젝트로 전환시키는 곳

11: Project 외부에서 가져온 파일 밑 스크립트, 프리 팹들을 저장하는 곳

12: Inspector 해당 오브젝트의 속성을 조절할 수 있는 곳

이것들이 기본적인 유니티 에디터라고 할 수 있겠습니다. 다음 시간엔 게임 오브젝트를 한번 다뤄보겠습니다.

[유니티 강좌]0. 유니티 설치

알 수 없는 사용자 — Tue, 22 Feb 2022 09:41:55 +0900

오늘은 유니티를 시작하기 앞서 유니티를 설치해 볼껀데요, 먼저 유니티 공식 사이트인 https://store.unity.com/kr#plans-individual 이 사이트에 들어가서 Personal 버전을 다운해 주시면 됩니다.

그러면 유니티 허브가 생기는데요. 허브는 유니티의 많은 버전을 다 설치 할수 없으니깐 허브에서 골라서 할수 있도록 만든 것 같은것입니다.

하여튼, 설치를 진행한 후에, 이런 화면이 뜨는 경우가 있는데, 엑세스 허용 눌러주시면 됩니다. 자 그러면 유니티 허브에 들어왔죠?

우측에 보시면 설치 탭이 있습니다. 저는 미리 에디터를 설치해두었지만 여러분은 에디터 설치를 해야겠죠. 에디터 설치를 눌러줍니다.

이렇게 나오는데요, 여기서 2019.4.35f1 버전을 다운받아야 합니다. 다운로드는 정말정말 오래걸립니다. 자신의 컴터가 사양이 매우 좋지 않는한 최소 한시간 이상입니다. 이렇게 에디터를 설치를 하고 나면 프로젝트 탭에 들어갑니다. 우측 상단에 보시면 "새 프로젝트" 라고 써져 있죠? 파란색 버튼이요. 이걸 눌러주시면

이런 화면이 뜨는데 우리는 먼저 2D 로 만들어 볼것이기 때문에 2D 를 클릭한후 프로젝트 생성을 눌러주면 됩니다.

네! 이렇게 유니티 설치를 해보았는데요! 다음시간엔 유니티 에디터에 대한 설명을 올리겠습니다!

[CSS]3. 복합, 자식, 하위, 인접 형제, 일반 형제 선택자

Bill Gray — Sat, 19 Feb 2022 16:30:52 +0900

1. 복합 선택자

지난 시간에는 전체, 태그, 클래스, id 선택자에 대해서 알아보았다. 또한 전체, 태그, 클래스, id 선택자들의 우선순위에 대해서도 알아보았다. 만약 아직 해당 선택자들을 아직 모른다면 "[CSS]2. 기본 문법 - 선택자의 종류와 우선순위" 글을 읽고 오길 바란다. 복합 선택자는 말 그대로 2개 이상의 선택자를 모두 만족하는 선택 자이다. 아래 예시를 보면 쉽게 이해가 될 것이다. 아래 코드를 설명해 보자면, p태그이면서 ong 클래스를 가리키고 있다. 복합 선택자를 사용하면서 주의해야 하는 점은 선택자를 붙여주어야 한다는 것이다. 이것이 의미하는 것이 무엇이냐면, 아래 예제에서 p. ong이 아닌 p.ong으로 표기해야 된다는 것이다. 만약 p. ong으로 표기하면 그것은 복합 선택자가 아닌 하위 선택자가 되기 때문이다.

p.ong {
	color: blue;
}

2. 자식 선택자

기본적인 자식 선택자의 사용법을 설명해 보자면, >를 이용하여 자식을 나타내주면 된다. 아래 예제를 보면 p태그의 자식인 ong 클래스를 가지고 있는 요소에게 파란색 글씨를 주라는 것이다. 또한 자식만 선택할 수 있는 것은 아니다. 자식의 자식도 가능하다. 자식 선택자를 반복적으로 사용하여 하위 선택자와 비슷하게 사용할 수도 있지만 매우 비효율 적이다. 예를 들면 p >. ong > ol > li을 이용하여 p 태그의 자식의 자식의 자식을 선택할 수도 있다.

//ex 1
p > .ong {
	color: blue;
}

//ex 2
p > .ong > ol > li {
	color: blue;
}

3. 하위 선택자

자식 선택자의 기본적인 구조는 복합 선택자와 매우 유사하다. 첫번째 예제에서 p. ong이 아닌 p. ong으로 표기하면 복합 선택자가 아닌 하위 선택자가 된다고 하였다. 또한 하위 선택자는 자식 선택자의 확장판이라고 생각하면 된다. 자식 선택자의 경우에는 바로 아래의 자식만 선택되지만 하위 선택자의 경우에는 자식의 자식의 자식도 선택이 가능하다. 물론 자식 선택자에서도 자식의 자식의 자식을 일일이 나타내 준다면 가능하지만, 하위 선택자는 할아버지 요소와 손자 요소만 있더라고 선택이 가능하다는 것이 특징이다. 아래 예제를 본다면 이해가 쉽게 될 것이다. 자식 선택자를 사용했을 때는 p >. ong > ol > li를 사용했지만 하위 선택자를 사용한다면 같은 요소를 p li 하나로 간단하게 선택이 가능하다.

p li {
	color: blue;
}

4. 인접 형제 선택자

인접 형제 선택자의 기본적인 구조는 아래와 같다.

선택자1 + 선택자1과 같은 부모를 가지고 있는 선택자2 {
	속성: 속성값
}

만약 두 요소가 같은 부모를 지니고 있다면 두 요소는 형제 요소라고 부른다. 인접 형제 선택자같은 경우에는 말 그대로 인접한 형제를 선택한다. 바로 선택자 1 바로 다음에 나오는 선택자 2를 선택한다. 아래 예제를 보면 이해가 될 것이다. 아래 예제에서는 h1바로 다음에 나오는 h2요소에게 빨간색 색을 준다고 하고 있다. 만약 h1바로 다음이 아닌 h1태그와 h2 사이에 다른 요소가 끼어있다면, 원하는 결과가 나오지 않는다. 첫 번째 문단에서는 h1태그 바로 다음에 h2태그가 나왔지만 그다음 문단에서는 h1다음에 p태그가 끼어있었기 때문에 h2 요소가 빨간색이 되지 않았다. 요약해보자면 선택자 1 바로 뒤에 오는 선택자 2 에만 적용이 된다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

5. 일반 형제 선택자

일반 형제 선택자의 기본적인 구조는 아래와 같다.

선택자1 ~ 선택자2 {
	속성: 속성값
}

일반 형제 선택자와 인접 형제 선택자의 차이점은 일반 형제 선택자는 첫번째 선택자와 두 번째 선택자 사이에 다른 태그가 있어도 선택이 되지만, 인접 형제 선택자는 그렇지 않다. 아래 예제를 보면 아까와 같이 h1태그와 h2 태그 사이에 p태그가 존재하지만 h2태그에 빨간색 속성이 적용되었다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

15 : c/c++ 강좌 "문자열 1"

알 수 없는 사용자 — Mon, 14 Feb 2022 11:02:40 +0900

안녕하세요. 오늘은 드디어 함수를 마치고 문자열에 들어가보도록 하겠습니다. 우선

문자열을 선언 하는 방법을 알아 보도록 하겠습니다. 우선 문자열은 char 이라는 방법으로

선언 합니다. 문자열은 char arr 이라는 방법으로 선언 합니다. 이렇게 되면

arr 이라는 문자 변수가 생성 됩니다. 이 문자를 입력 받는 것을 간단하게

코드를 만들어 보도록 하겠습니다.

#include <stdio.h>

int main()
{
    char arr;

    scanf("%c",&arr);

    printf("\n%c\n",arr);

}

이 코드는 문자를 입력 받은 다음에 그대로 출력 하는 코드 입니다.

문자이기 때문에 %c 서식문자를 사용 해서 입력 받습니다. 조금 헷갈리시는

분들은 지난번에 올린 c/c++ 언어 서식문자 글을 참고해 주세요. 또한

c/c++ 언어는 둘 다 ascii 코드만 입력 받을수 있습니다.

American Standard Code for Information Interchange

의 약자로 줄여서 ASCII 라고 부릅니다. 아스키 코드는 영어, 한국어, .. 등

여러가지 언어로 있습니다. 정확히 ascii 는 아니지만 여러 가지 언어로 존재 합니다.

그러면 바로 이어서 문자열을 보도록 하겠습니다. 문자열은 지난번에 배운

배열을 이용 해서 선언 하게 되는데, 문자와 비슷한 방법으로 char arr[10]

이라는 방법으로 선언 합니다. 이렇게 선언을 하면 scanf("%s"&arr); 을

이용해 입력 하고, 출력도 비슷한 방법으로 합니다. 이 경우에는 %s 서식문자를

사용 하는데, 10가지의 문자를 저장 할수 있는 문자열이기 때문에 %s (string)

을 사용 합니다.

또한 문자열을 여러 가지 형식으로 변환 해주는 함수도 stdio 라이브러리에

있습니다. isupper() islower() isaplha() isdigit() isalnum() toupper() tolower()

은 각각 대문자이면() 소문자이면() 알파벳이면() 숫자이면() 알파벳이나 숫자이면()

대문자로() 소문자로() 라는 것이 있습니다. 사용 방법은 괄호 안에다가

변수 이름을 넣으면 됩니다. toupper(arr); 와 같이 사용 합니다. 그러면 나머지는

문자열 2 에서 알아보도록 하겠습니다.

14 : c/c++ 강좌 "함수 3"

알 수 없는 사용자 — Mon, 14 Feb 2022 10:14:52 +0900

안녕하세요 오늘도 지난 시간에 이어 함수의 마지막 내용을 보도록 하겠습니다. 오늘은 함수를

특정 조건에서 리턴 하는 것을 알아보도록 하겠습니다. 리턴은 함수에서 나가는 것으로 쓰이는데요

메인 함수에서 return 0; 는 메인 함수에서 0을 리턴 하고 나간다는 의미 입니다. 이를 이용해서

함수를 특정 조건에서만 리턴 하게 하는 것을 만들수 있습니다. 예를 들어 hello world 를 여러번

출력 하는데 반복제어문을 사용 하지 않고 출력할수 있다는 의미 입니다. 이를 이용하면 코드의

전체적은 길이를 줄일수도 있고 그를 통해 코드의 전체적인 복잡성을 낮출수 있습니다. 그러면 바로

한번 해보도록 하겠습니다.

#include <stdio.h>

void test(int num)
{
    if(num < 1)
    {
        return;
    }

    test(num-1);
    printf("Hello World\n");
    
}

int main()
{
    test(10);
    return 0;
}

우선 이 코드를 보면 test 라는 함수가 있습니다. 그리고 메인 함수에서 num 에다가

10 을 넣어 줍니다. 그러면 1 보다 작은지 확인 하고 그렇지 않기 때문에 다음 코드를

실행 합니다. 그러면 10 을 9 로 바꾸어 주고 프린트를 합니다. 이렇게 되다가 만약에

1 번째를 출력 하고 0 이 되면 출력을 멈추고 리턴을 합니다. 이 경우에는 구체적인

리턴값이 필요하지 않기 때문에 그냥 return 0; 을 해줍니다. 이런 방식을 재귀함수라고

부릅니다 재귀함수는 자기 자신을 안에서 불러오는것이 일반적입니다. 자기 자신을

다시 사용 하기 때문에 recursive (재귀) 라는 말로 불립니다. 이렇게 되면 별도의

코드를 사용 하지 않고 자기 자신을 출력 하면 되기 때문에 비교적 깔끔하게

코드를 작성 할수 있습니다.

13 : c/c++ 강좌 "함수 2"

알 수 없는 사용자 — Fri, 11 Feb 2022 11:46:16 +0900

안녕하세요, 오늘은 지난 시간에 이어 함수에 대해 알아보도록 하겠습니다.

우선 오늘은 함수 이름 안에다가 변수를 넣는 것을 배워보겠습니다. 우선 지난

시간에는 간단하게 void test() 와 같이 함수를 선언 하는 방법을 배웠습니다.

하지만 이런 경우에는 직접적으로 변수의 값을 불러올수 없기 때문에 이번 시간에는

void test(int num1, int num2) 와 같이 함수를 선언 하는 방법과 이를 응용하는

방법을 알아보도록 하겠습니다. 우선 이는 메인 함수에서 전달받은 변수값의 이름을

원하는 대로 형식에 맞춰 지정한 후 그 값을 num1 , num2 에 저장 하는 것입니다.

또한 메인 함수에서 number1, number2 라는 값이 있었다고 하면 test 함수

안에서 num1, num2 값을 수정 할 시 메인 함수 안에 있는 number1, number2 라는

값 역시 수정됩니다. 그러면 이를 이용하여 한번 간단한 코드를 작성해보도록 하겠습니다.

#include <stdio.h>

void test(int num1, int num2)
{
    printf("%d %d",num1,num2);
}

int main()
{
    int number1, number2;

    scanf("%d %d",&number1,&number2);

    test(number1, number2);

    return 0;
}

이 코드를 한번 살펴 보면, number1, number2 는 main 함수에서 입력 받고 출력은

test 함수가 하게 되는데 만약에 2, 3 이 두 숫자를 입력 하면 num1, num2 의 값이

2, 3 으로 바뀌는 것을 볼수 있습니다. 이 역시 다른 변수 형식과 비슷 합니다.

그러면 다음 시간에는 함수의 마지막 내용에 대해 알아보도록 하겠습니다.

[Javascript]9. 호이스팅의 개념과 TDZ

Bill Gray — Wed, 9 Feb 2022 17:59:46 +0900

1. 호이 스팅이란?

호이 스팅의 간단한 개념부터 설명하자면, 호이 스팅이란 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이다. [Javascript]6. 함수 선언과 호출 강의에서 우리는 함수의 두 가지 선언 방식에 대해 배웠다. 하나는 선언식이고 다른 하나는 표현식이다. 아직 두 가지 선언식을 모른다면 [Javascript]6. 함수 선언과 호출 강의를 듣고 오길 바란다. 다시 본론으로 돌아가서, 호이 스팅은 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이라고 했다. 원래 자바스크립트의 코드는 위에서 아래로 읽힌다. 따라서 함수의 호출이 선언 부보다 앞에 있다면 아래 예와 같이 에러가 나는 것이 당연하다. ong 함수를 호출한 상태에서는 아직 ong함수 선언이 안되었기 때문이다. 두 번째 예시에서는 함수 표현식이 아닌 함수 선언식을 사용하여 함수를 선언하였다. 이때 에러가 나지 않는 이유는 호이 스팅이 발생했기 때문이다. 선언부가 상단으로 끌어올려져 에러가 안나는 것이다.

2. var, const, let의 호이 스팅과 TDZ

호이 스팅은 변수의 선언부와 초기화하는 부분을 분리하여 변수의 선언부를 최상단으로 끌어올린다. 따라서 변수의 초기화 부분은 호이 스팅이 되지 않는다. 아래 예제를 보면 이해가 쉽게 될 것이다. 변수의 선언 부인 var ong는 최상단으로 끌어올려졌지만, ong = 1 부분은 초기화 부분으로 호이 스팅 되지 않는다.

console.log(ong)
var ong = 1 // -> var ong, ong = 1 으로 분리

또한 선언 방식에 따라서도 차이가 있다. 변수의 선언 방식에는 var, const, let이 있다. var는 아까 말했듯 초기화 부분은 호이스팅되지 않기 때문에 아래 예제의 경우에는 undefined를 출력한다. 반면에, const와 let은 아래 예제의 경우에 Uncaught ReferenceError: ong is not defined를 출력한다. var 선언 방식과 const/let 선언 방식에 차이가 있는 이유는 var 선언 방식의 경우에는 선언과 초기화가 동시에 이루어지지만 const와 let방식은 선언과 초기화가 나누어져 이루어진다. 이때 선언과 초기화 사이를 TDZ(Temporal dead zone)이라 한다. 만약 해당 코드가 나오기 이전에 사용을 하려고 시도하면 TDZ에서 ReferenceError를 출력한다. 아래 예제에서는 let과 const의 변수 초기화가 이루어지기 이전에 사용을 하려 해서 TDZ에서 ReferenceError을 출력한 것이다.

//ex) var
console.log(ong)
var ong = 1

//ex) const
console.log(ong)
const ong = 1

//ex) let
console.log(ong)
let ong = 1

12 : c/c++ 강좌 "함수 1"

알 수 없는 사용자 — Tue, 8 Feb 2022 12:02:29 +0900

안녕하세요 오늘은 함수에 대해 알아보도록 하겠습니다. 우선 우리가 알고 있는 함수중

하나로는 int main() 이라는 메인 함수가 있습니다. 메인 함수는 우리가 일반적으로 모든 코드를

작성 하는데 사용 하였습니다. 하지만 코드가 길어질수록 여러번 불러와야 하는 상황이 생길수도

있습니다. 이런 경우에 코드를 복사해서 붙여 넣으면 코드가 비효율적으로 작성 됩니다. 우선

함수를 선언 하는 방법은 void test() 이런 식으로 선언 할수 있습니다. 한번 간단한 코드를 만들어

보도록 하겠습니다.

#include <stdio.h>

void test()
{
    printf("Hello");
}

int main()
{
    test();
    return 0;
}

이 코드를 한번 살펴보면, test 라는 함수를 하나 선언 했습니다. 그 이후에 메인

함수에서 test 라는 함수를 test() 를 이용해 불러온 후 그 안에 있는 코드를 불러올수

있는 방식입니다.

[Javascript]8. 즉시 실행 함수의 사용법과 주의사항

Bill Gray — Mon, 7 Feb 2022 17:07:17 +0900

1. 즉시 실행 함수란?

즉시 실행 함수, IIFE(Immediately-involked-function)는 말 그대로 즉시 실행되는 함수이다. 즉시 실행 함수는 주로 함수를 선언하자마자 바로 호출을 할 때 사용된다. 아래 예를 보면 이해가 될 것이다. 아래 코드를 분석해 보자면 변수 a에 1이라는 수를 넣어주었고 x를 매개변수로 가지는 ong 함수를 호출하였다. ong 함수가 호출되면 문서에 매개변수 x에 1을 더한 값을 쓴다. 함수를 호출할때 매개변수 x에 a, 즉 1을 넣었기 때문에 2가 나온다. 이런 경우에는 선언이 되자마자 호출이 되었기 때문에 주로 이런 상황에서 즉시 실행 함수를 사용하는 것이 좋다.

const a = 1
function ong(x){
  document.write(x + 1)
}

ong(a)

2. 즉시 실행 함수 사용법

위에서 우린 즉시 실행 함수가 어떤 상황에서 쓰이는지 배웠다. 위의 코드를 즉시 실행 함수로 바꾸면 다음과 같다. 즉시 실행 함수는 두 가지가 있다. 한 가지는 (function (){})()형태 이고 다른 형태는 (function (){}())이다. 해당 과정을 자세하게 설명 해보자면 소괄호 안에 익명 함수를 선언하고 중괄호가 끝나는 부분에 소괄호를 적거나 소괄호 안에 익명 함수를 선언하고 익명 함수가 끝나는 부분에 소괄호 한쌍을 적는 방법이 있다.

const a = 1;

//ex1: (function{})()

(function (){
  document.write(a + 1)
})();


//ex2: (function{}())

(function (){
  document.write(a + 1)
}());

2-1. 즉시 실행 함수 사용시에 주의 해야하는것

C나 C++을 다뤄본 사람이라면 세미콜론(;)에 익숙할 것이다. 세미콜론은 한 코드 문장이 끝날때마다 사용된다. 자바스크립트는 그런 규율이 매우 자유로운 언어에 속하기 때문에 대부분의 경우에는 생략해도 된다. 하지만 즉시 실행 함수 사용 시에는 전 문장에서 세미콜론을 이용하여 해당 문장이 끝났다고 말을 해줘야 한다. 그렇지 않으면 아래와 같이 에러가 난다.

꼭 세미콜론을 사용하도록 하자

[Javascript]7. 기본적인 화살표 함수의 사용법

Bill Gray — Mon, 7 Feb 2022 14:54:57 +0900

1. 화살표 함수란?

화살표 함수(Arrow Function)는 기존의 함수에서의 function을 생략하고 그 대신에 화살표(=>)를 이용하여 더 직관적으로 코드를 볼 수 있도록 해주고 축약시킬 수 있도록 해준다. 하지만 화살표 함수를 모든 상황에서 축약이 가능한 것은 아니다.

2. 화살표 함수의 기본적인 구조

화살표 함수는 기본적으로 다음과 같은 구조로 이루어져있다.

const 함수명 = (매개변수1, 매개변수2) => {
	코드
}

//example
const ong = (x, y) => {
	return x + y
}

만약 위의 예시처럼 return 뒤에 단순 실행문만 있다면 아래와 같이 중괄호와 return 삭제가 가능하다. 하지만 만약 return만 있는것이 아닌 console.log와 같은 코드가 있다면 아래의 방식으로 단축하는 것이 불가능하다.

//example
const ong = (x, y) => x + y

또한, 만약 지금과 같이 매개변수가 x, y 두개가 아니라 한개만 있다면 괄호도 생략이 가능하다.

//매개변수가 하나인 경우

const ong = x => x + 1

11 : c/c++ 강좌 "배열 2"

알 수 없는 사용자 — Mon, 7 Feb 2022 11:04:52 +0900

오늘은 지난 시간에 이어 배열을 알아보도록 하겠습니다. 우선 배열에 초기 값을 넣는 법을

간단하게 한번 보겠습니다. 우선 배열을 초기화 하는 방법은 int arr[5] = {0}; 입니다.

이런 식으로 하면 0번째 1번째 ... 4번째 까지 모든 값이 0으로 초기화 됩니다.

이런 식으로 값을 초기화 하면 출력시 이상한 값이 나올 일이 없습니다. 이와 마찬가지로

0 외의 다른 숫자를 넣어도 배열의 선언 개수보다 적으면 차례대로 대입이 되기 때문에

나머지 값 역시 초기값이 들어갑니다. 그리고 만약에 배열을 arr[5] = {1,2,3,4,5} 이런 식으로

하면 배열에 값이 순차적으로 대입 됩니다. 그리고 오늘의 가장 중요한 내용중 하나인

while 문을 이용 해서 배열의 값을 입력받는 방법을 알아 보도록 하겠습니다. 우선 간단하게

코드를 작성 해 보겠습니다.

#include <stdio.h>

int main()
{
    int arr[10] = {0};
    int i,num;

    while(1)
    {
        scanf("%d", &num);
        if(num == 0) break;
        arr[num % 10]++;
    }

    for(int i=0;i<10;i++)
    {
        if(arr[i]>0)
        {
            printf("%d : %d\n",i,arr[i]);
        }
    }

    return 0;
}

한번 이 코드를 살펴 보겠습니다. 우선 10 자리 까지 입력 받을수 있는 배열을

생성 했습니다. 그리고 그 배열을 0으로 초기화 한 후, while 문을 이용해서

입력을 받았습니다. while 문에서 0이 입력 될 시 break; 를 걸어 주어

1 2 3 4 5 ... 하다가 0이 입력 되면 출력 단계로 넘어 갑니다. for 문으로

출력을 담당 하게 했는데 for 문에서는 지난 시간에 배운 내용을 응용 해서

결과값을 출력 합니다.

[Javascript]6. 함수 선언과 호출

Bill Gray — Thu, 3 Feb 2022 16:00:23 +0900

함수란 무엇인가

함수란 하나의 목적을 위해서 독립적으로 설계된 코드의 집합이라고 할 수 있다. 함수를 호출하면 함수 안의 코드들이 순차적으로 실행된다. 자바스크립트에서 함수는 일반함수, 익명함수, 중첩함수, 콜백함수, 로드함수, 화살표함수, 즉시 실행함수 등이 있다. 기본적인 함수의 형태는 다음과 같다.

function 함수명(매개변수1, 매개변수2){
	동작
}

함수 선언 방식

기본적으로 함수 선언 방식에는 함수 선언식과 표현식으로 크게 두가지가 있다. 함수 선언식은 다른 언어에서 볼수 있는 흔한 함수의 형태이고, 함수 표현식은 변수에다가 익명 함수를 넣는 방식이다. 이 두가지 방식은 나중에 호이스팅을 다룰때 차이점이 나타나게 되는데, 아직은 몰라도 된다.

1. 함수 선언식

function 함수명(매개변수1, 매개변수2){
	동작
}

2. 함수 표현식

const 함수명 = function(매개변수1, 매개변수2){
	동작
}

함수를 호출 하는 법

위에서 우리는 함수를 선언하는 방식에 대해서 알아보았다. 함수를 선언했다면 호출하는 방법도 알아야한다. 기본적인 함수를 호출하는 방법은 다음과 같다. 아래와 같이 함수명을 적고 괄호 안에 인수를 넣어주면 된다. 만약 매개변수 값이 충족되지 않으면 에러가 난다. 다음 시간에는 화살표 함수에 대해 알아보겠다

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

[CSS]2. 기본 문법 - 선택자의 종류와 우선순위

Bill Gray — Mon, 31 Jan 2022 15:07:37 +0900

1. 기본 문법

CSS의 기본적인 문법은 다음과 같다. HTML강의를 들었던 분들은 h1태그가 무엇을 의미하는지 알 것이다. h1태그를 모르는 사람들을 위해 이 태그가 무엇인지 간단하게 설명하고 가자면, h1 태그는 주로 제목을 나타낼 때 쓰인다. 아래 코드를 분석해보자면 중괄호 앞의 h1은 선택자, 중괄호의 시작부터 끝부분 까지를 선언 부라고 한다. color와 font-size와 같이 :의 왼쪽 부분에 위치하는 것은 속성 명, :의 우측에 위치한 것은 속성 값이라고 하며 이 두 개를 하나의 속성이라고 부른다. 또한 속성끼리는 아래와 같이 ;로 구분해줘야 한다.

h1{color: yellow; font-size: 5px}
선택자{속성명: 속성값; 속성명: 속성값}

2. 전체 선택자

위의 코드에서 선택자에 해당하는 부분은 h1이다. 선택자를 간단하게 설명하자면 말 그대로 꾸밀 요소를 지정하는 것이라고 생각하면 된다. 선택자는 총 7개가 있다. 선택자 중 가장 넓은 범위를 가지고 있는 선택자가 바로 전체 선택 자이다. 전체 선택자는 다음과 같이 *을 사용한다. 전체 선택자는 HTML 문서의 전체 태그에 CSS 속성을 지정한다. 그래서 주로 웹을 본격적으로 만들기 전에 웹을 초기화한다는 식으로 margin이나 padding값을 설정해주곤 합니다.

*{color: yellow; font-size: 5px}

3. 태그 선택자

태그 선택자는 말 그대로 태그를 선택하는 선택자이다. 아래 예제와 같이 CSS속성이 적용될 특정 태그를 CSS속성 앞에다가 적어주면 된다.

h1{color: yellow; font-size: 5px}

4. 클래스 선택자

클래스 선택자는 말 그대로 클래스를 선택하는 선택자이다. 아래 예제와 같이 CSS속성이 적용될 특정 클래스를. 을 적은 후에 속성 앞에다가 적어주면 된다. 또한 HTML 강의를 들었다면 클래스가 두 개 이상일 수 있다는 것을 알고 있을 것이다. 만약 클래스에 대한 속성이 아래 예제와 같이 두 개라면, 두 개의 클래스의 속성이 적용이 된다. 따라서 아래와 같이 a, b클래스가 한 요소에 대해 속성을 적용했다면 마지막으로 실행되는 빨간색이 나오게 된다.

See the Pen css-class by junjason-dev (@junjason-dev) on CodePen.

5. id 선택자

id 선택자는 말 그대로 id를 선택하는 선택 자이다. 아래 예제와 같이 CSS속성이 적용될 특정 id앞에 #을 붙인 후에 CSS속성 앞에다가 적어주면 된다.

#id{color: red; font-size: 5px;}

5-1. id와 클래스의 차이

HTML을 어느 정도 알고 있는 사람이라면 id와 class의 차이를 알고 있겠지만, 모르는 사람들을 위해 설명하자면, class는 한 페이지 내에서 여러 번 사용이 가능하지만, id는 한 페이지 내에서 한 번만 사용이 가능하다.

6. 선택자의 우선순위

지금까지 우린 총 4가지의 선택자에 대해서 배웠다. 만약 한 개의 요소에 두 개의 선택자가 있다면 어떤 것이 우선시가 될까? 이를 위해 선택자들은 우선순위를 계산하는 점수가 있다. 점수가 높을수록 더 우선시되는 것이다. 따라서 만약 한 요소에 대해 클래스 선택자와 id선택자가 적용되어 있다면, 100>10 이므로 id선택자의 속성이 적용된다. 또 한 가지 알아야 하는 것은 만약 점수가 같다면 마지막으로 선언된 것의 속성이 적용된다.

	전체 선택자(*)	태그 선택자	클래스 선택자(.)	id 선택자(#)	!important
점수	0	1	10	100	10000

마지막 열을 보면! important라는 것이 있다. important는 말 그대로 모든 곳에서 최우선으로 되도록 만들어준다. 아래 코드에서 원래 대로라면 id선택자는 10점, 태그 선택자는 1점 이므로 id 선택자의 속성인 빨간색이 되는 것이 정상이지만,! important를 태그 선택자의 color 속성에 줌으로써 10001점이 되어 우선순위가 바뀌게 된 것이다.! important는 남발할 시에 나중에 우선순위에 혼동을 생길 수 있으니 되도록이면 안 쓰는 것을 추천한다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

이번 시간에는 전체, 태그, 클래스, 그리고 id 선택자에 대해서 알아보았다. 선택자는 이것들을 제외하고도 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자, 가상 선택자 등등 다양한 선택자들이 있다. 다음 시간에는 이러한 선택자들을 알아보도록 하자.

[CSS]1. CSS란 무엇인가?-CSS의 필요성

Bill Gray — Sun, 30 Jan 2022 15:47:10 +0900

1. CSS란 무엇인가?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)로, CSS의 사전적 정의는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)이다. 이를 쉽게 설명하자면 우리가 잘 알고있는 마크업 언어중에 한 종류인 HTML을 예로 들어보자면, HTML을 꾸며준다라고 생각하면 편하다.

2. CSS의 필요성

위에서 말했듯이 CSS는 HTML을 꾸며주는 역할을 한다. 꾸며주는 역할을 한다고 하면 굳이 필요할까? 라는 의문을 가지고 있는 사람도 있을것이다. CSS의 필요성을 위해서 내가 만든 사이트를 비교하면서 보여주겠다. 왼쪽은 내가 HTML, CSS 그리고 간단한 Javascript를 이용해서 만든 사이트이다. 그리고 오른쪽은 HTML 헤더에서 CSS 파일을 뺀 결과물이다. 이제 두 사이트의 차이가 보인다. 누가 보더라도 오른쪽 사이트 보다는 왼쪽 사이트가 좋아보인다. CSS가 없는 사이트는 거리를 발가벗고 돌아다니는 것과 같다 생각하면된다.

3. 이 강의에서 다룰 내용

앞으로 이 강의는 CSS의 기초적인 문법을 다룰 것이다. CSS의 기초적인 문법을 다룬 후에는 HTML과 연계하여 한 온전한 사이트를 만들어 나가는 과정을 다룰 것이다.

[Network] DNS 란?-DNS의 필요성과 도메인 해석의 단계

Bill Gray — Mon, 24 Jan 2022 18:23:28 +0900

DNS의 필요성

이번 시간에 알아볼 것은 DNS이다. DNS가 무엇인지 먼저 설명하기 이전에, 지난 강의를 되돌아보자. 지난 시간에 우리는 ip주소에 대하여 알아 보았다. 지난 강의를 되돌아보자면, ipv4는 10진수로 표기하며 32비트이고 ipv6는 16진수로 표기하며 128비트이다. 우리가 자주 사용하는 네이버를 예로 들면, 네이버의 ipv4 주소는 223.130.195.200이다. 우리가가 네이버에 접속할때마다 223.130.195.200 라는 긴 숫자를 항상 외워둘 수는 없다. DNS란 Domain Name System(도메인 네임 시스템)의 약어로, 도메인 네임 시스템은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. 네이버로 예를 들자면 223.130.195.200 대신 www.naver.com을 입력하면 DNS가 이를 223.130.195.200로 변환을 해주는 것이다. 그리고 이 과정을 도메인 해석이라 한다.

도메인 해석의 단계

도메인 해석을 더 자세하게 설명하자면 입력받은 도메인을 운영체제가 ip로 변환하는 과정이다. 도메인 해석이 이루어지는 과정은 윈도우와 같은 경우에는 hosts 파일에서 도메인을 검색하고 만약 없을시 공유기에 쿼리를 보낸다. 공유기에서는 다른 지역 네트워크 내의 사용자가 쿼리를 보낸 기록이 있을 수도 있으니 자신의 캐시를 검색해본다. 만약 공유기에도 없다면 ISP에서 찾아본다. ISP의 경우에는 사용자들의 요청이 엄청 많이 오기 때문에 캐시에 해당 도메인이 있을 가능성이 매우 높다. 한 사용자가 요청을 보낸적이 있으면 캐시에 TTL이 0이 되기 전까지 캐시에 남아있는다. 만약 이곳에서도 못 찾는다면 ISP가 클라이언트가 되어 서버들에게 요청을 보내게된다. 그럼 그 서버들도 캐시를 점검하는 조회를 계속해서 하다보면 결국에는 해당 도메인과 매칭되는 ip주소를 찾을 수 있을것이다. 도메인 해석의 단계를 단면적으로 볼 수 있는것은 유튜브와 같이 여러분이 자주 방문하는 사이트와 처음 방문하는 사이트에 도메인을 입력하고 방문해보는 것이다.

[Network] 서브넷 마스크와 ip주소의 클래스

Bill Gray — Sat, 22 Jan 2022 18:00:32 +0900

IP주소의 구조

지난 시간에 ip 주소란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이고 ipv4와 ipv6가 있다는 것까지 다뤘다. 아직 IP주소가 무엇인지 정확히 모르면 네트워크-ip주소와 포트 글을 보고오길 바란다. IP주소는 지난 강의에서 다뤘듯 32자리로 구성되어 있으며 8자리마다 .으로 구별되어있다. IP주소는 네트워크 부분과 호스트 부분으로 나뉘고 어떻게 나뉘냐에 따라서 클래스가 분류된다. 이때 서브넷 마스크의 개념이 나온다. 서브넷 마스크는 어디서 어디까지가 네트워크 주소 부분이고 어느 부분이 호스트 부분인지 알려준다.

서브넷 마스크를 이용하여 네트워크 주소와 호스트 주소로 나누기

위에서 서브넷 마스크는 ip주소를 네트워크 부분과 호스트 부분으로 나눠주는 역할을 한다고 하였다. 서브넷마스크를 이용하여 네트워크 주소와 호스트 주소를 구별하는 방법은 간단하다. 서브넷 마스크와 ip주소를 and 연산을 하면 구별할 수가 있다. 아래 예시를 살펴보자. 아래 예시에서 서브넷 마스크는 255.255.255.0이고 ip주소는 192.169.1.3이다. 일단 서브넷 마스크와 ip주소를 2진수로 바꿔준 후에 서브넷 마스크와 ip 주소의 각각의 비트값이 둘다 1일시 비트값은 1이된다. 이 경우에는 네트워크 주소가 192.168.3이 나오고 호스트 주소는 이를 제외한 .3이 된다. 이를 표기하는 방법은 ip주소 뒤에 네트워크 주소가 차지하는 비트를 / 뒤에 적어주면 된다.

ex) 서브넷 마스크: 255.255.255.0 -> 11111111.11111111.11111111.00000000

ip주소: 192.168.1.3 -> 11000000.10101000.00000001.00000011

네트워크 주소: 11000000.10101000.00000001 -> 192.168.1

호스트 주소: .3

표기법: 192.168.1.3/24

IP주소의 클래스와 클래스 별 범위

넷마스크에 대해 알아봤으니 이젠 IP주소의 클래스에 대해서 알아볼 차례다. IP 주소의 클래스는 A, B, C, D, E 총 5개가 있다. A클래스는 ip주소의 8번째 비트까지가 네트워크 주소를 나타내고 B클래스는 16번째 비트까지, C 클래스는 24번째 비트까지이다. 각각의 네트워크 클래스를 구분짓는 방법은 다음과 같다. 시작 주소가 0일 시에 A 클래스, 시작 주소가 10일시에는 B 클래스, 시작 주소가 110일 시에는 C 클래스, 시작 주소가 1110일 시에는 D 클래스 이다. 각각의 범위를 살펴보자면 A 클래스는 0~127번, B 클래스는 128 ~ 191번, C 클래스는 192 ~ 223번, D 클래스는 224 ~ 239번이다. E 클래스는 테스팅을 위한 대역으로 사용되지 않는다. 이번에는 한번 여러분이 이해를 하였는지 알아보기 위해 간단한 문제를 내겠다. 아래 문제를 풀고 답을 댓글에 남겨주세요

문제: 192.168.1.3/8 의 서브넷마스크/ip주소/네트워크주소/호스트 주소/ip클래스를 구하세요.

10 : c/c++ 강좌 "배열 1"

알 수 없는 사용자 — Fri, 21 Jan 2022 13:35:23 +0900

안녕하세요, 오늘은 배열에 대해 알아보도록 하겠습니다. 우선 배열은 여러가지 변수를 한 변수 안에

저장하게 해주는 기능 이라고 생각 하면 간단 합니다. 하지만 이렇게 계속 변수를 선언 하면 매우

비효율 적이고 선언을 하면 할수록 프로그램이 복잡 해진다. 그렇기 때문에 사람들은 배열 이라는 기능을

사용 하는데, 배열은 프로그램을 아주 효율적으로 만들어 줍니다. 우선 간단히 배열의 사용 방법에 대해

알아 보자면 arr[10] 이런 식으로 사용 합니다. 우선 arr 은 변수의 이름 이고 10 은 배열이 저장 할수 있는

변수의 개수 입니다. [] 대괄호 안에다가 배열의 개수를 적어야 합니다. c 언어에서 꼭 지켜야 하는 문법중

하나 입니다. 그러면 간단하게 입력을 받는 프로그램을 작성해보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int arr[3];

    scanf("%d%d%d",&arr[0],&arr[1],&arr[2]);
    printf("%d %d %d",arr[0],arr[1],arr[2]);

    return 0;

}

우선 잠깐 이 코드를 살펴보도록 하면 arr 이라는 변수를 배열 형식으로 만들어서 3개의 값을 저장할수

있게 만들었습니다. c 언어에서 숫자는 0부터 시작 하기 때문에 0, 1, 2 이런 식으로 3가지가 됩니다.

그래서 arr[0] , arr[1] , arr[2] 이렇게 3개의 값에 각각 변수가 하나씩 저장 됩니다. 그 다음에 같은 원리로

출력을 하게 됩니다. 하지만 이런 식으로 코드를 작성 하면 배열의 저장 값이 1000 같이 사람이 일일히 치기는

상대적으로 어렵습니다. 그러면 지난번에 배운 반복제어문을 이용해 값을 받을수 있습니다.

#include <stdio.h>

int main()
{
    int arr[10];

    for(int i=0;i<10;i++)
    {
        scanf("%d",&arr[i]);
    }

    for(int j=0;j<10;j++)
    {
        printf("%d",arr[j]);
    }
    return 0;
}

1000 으로 하면 직접 테스트를 하기 어렵기 때문에 간단하게 10 으로 하여서 반복문을 만들어 보았습니다.

이런 식으로 for 문을 이용 하여 0, 1, 2, 3, 4, ... ,10 의 값을 순차적으로 받아 배열에 저장 하는 것 입니다.

9 : c/c++ 강좌 "반복제어문 3"

알 수 없는 사용자 — Wed, 19 Jan 2022 10:29:24 +0900

오늘은 지난 시간에 이어 반복제어문의 응용에 대해 알아보도록 하겠습니다. 우선 지난 시간에는

간단한 반복제어문의 사용 방법에 대해 알아보았습니다. 오늘은 우선 반복제어문의 다른 사용 방법에

대해 알아보도록 하겠습니다. 우선 for 문에서 조건식이 없는 반복문을 선언 할수 있습니다.

for(int i = 1; ; i++){} 이런 식으로 선언을 하면 무한반복문을 선언 한것입니다. 이 반복문은 while(1)

으로 나타낼수 있습니다. 이 두 반복제어문 모두 다 무한반복문이기 때문에 break; 코드를 선언하기 전까지는

무한으로 실행 됩니다. 이번에는 N중 반복제어분에 대해 알아보도록 하겠습니다. 우선 간단하게

***

모양을 출력 하는 코드를 만들어 보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int num;

    scanf("%d",&num);

    for(int i=1;i<=num;i++)
    {
        for(int j = 1;j <= i; j++)
        {
            printf("*");
        }
        printf("\n");
    }
}

한번 코드를 살펴 보겠습니다. 우선 num 이라는 변수를 통해 숫자를 입력 받고 그 변수 까지만 i 를 증가 시킵니다.

i 가 1일때 j 도 1만큼 되고 i 가 2일 때도 같습니다. i 는 행 j 는 열 입니다. * 을 i와 j 의 조건에 맞게 출력한 후

줄 바꿈을 하고 다시 처음으로 돌아가서 i, j 의 값을 증가 시키고 반복 작업을 하는 원리 입니다. 이번에는 증감식이

감소하는 경우를 알아 보겠습니다. 증감식의 감소 역시 여러 가지 경우에 사용 하는데 기본적으로 큰 값 -> 작은 값

으로 이동 합니다. 이 역시 * 을 출력 하는 코드로 만들어 보겠습니다.

#include <stdio.h>

int main()
{
    int num;

    scanf("%d",&num);

    for(int i=num;i>=1;i--)
    {
        for(int j = i;j >= 1; j--)
        {
            printf("*");
        }
        printf("\n");
    }
}

이렇게 간단하게 코드를 작성 할수 있습니다. 이 경우에는 3을 num 값으로 입력 할 시 이렇게 출력 됩니다.

* * *

* *

이렇게 간단하게 증감식의 감소, 증가의 차이점을 알아볼수 있습니다. 말 그대로 증가는 값이 증가되고 감소는

값이 감소된다고 생각 하면 간단합니다. 구체화된 코드를 작성 할때는 while 문 보다 for 문을 사용 합니다.

다음으로는 간단하게 한번

***

****

*****

이런 식으로 코드를 출력 하는 프로그램을 만들어 보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int num;

    scanf("%d",&num);

    
    for(int i=1;i<=num;i++)
    {
        for(int j=1;j<=num - i;j++)
        {
            printf(" ");
        }

        for(int j=1;j <= i * 2 - 1;j++)
        {
            printf("*");
        }
        printf("\n");   
    }
    return 0;
}

자 이렇게 코드를 작성 할수 있는데 잠시 아까와 다른 점을 살펴 보겠습니다. 우선 이번에는 공백을

출력 하여 * 별 앞에 공백을 넣어 주었습니다. 이는 다른 for 문을 이용 해서 처리 하였습니다. 우선

공백은 num - i 라고 되어 있는데 이렇게 되는 이유는 만약에 4가 입력 되었다고 하면 초기 i 의 값은 1 이기

때문에 공백을 3칸 주어야 합니다. 왜냐하면 * 모양을 1식 증가하여 출력 되기 때문에 정해져 있는 값에서

i 만큼 빼주어 공백의 개수를 줄인다고 생각 하면 됩니다. 그 다음에는 * 별 개수가 1 , 3 , 5 , 7 과 같이

홀수 개수로 증가 하기 때문에 2 * i - 1 이라는 수식을 세운 후 그 식을 코드로 변경 했다고 하면

이해하기 간단 합니다. 그러면 오늘은 여기까지 하고 다음 시간에는 구조체에 대해 알아보도록 하겠습니다

공지

알 수 없는 사용자 — Tue, 18 Jan 2022 04:46:32 +0900

저희 블로그에 방문 하여 주셔서 감사 합니다. 저희 블로그에는 여러 가지 코딩 언어의 기초적인

사용 방법과 문제 풀이 등을 집중적으로 다룰 예정입니다. 구독과 하트 꼭 눌러 주시고 부족한

점은 방명록이다 댓글로 남겨 주시면 감사 하겠습니다. c/c++ 은 제가 담당 하고 네트워크나

웹에 관련된 내용은 제 형이 담당하게 되었습니다. 저희 블로그에서 알아 가는 점이 많으면

좋겠습니다. 코딩이 어려우신 분들도 쉽게 이해하실수 있도록 간결하고 쉽게 내용이 설명

되어 있습니다. 필요하신 내용이나 궁금한 내용 역시 댓글이나 방명록에 남겨 주세요.

최대한 성심 성의껏 답해드리도록 하겠습니다. 읽어주시느라 감사합니다.

(광고도 많이 봐주세요ㅠㅠ 그래야지 수익이 들어와요)

공지

알 수 없는 사용자 — Tue, 18 Jan 2022 04:36:36 +0900

저희 블로그에 방문 하여 주셔서 매우 감사 합니다. 저희 블로그에는 여러 가지 코딩 언어의 기초적인

사용 방법과 문제 풀이, 게임 개발, 웹 구축 등을 집중적으로 다룰 예정입니다. 구독과 공감 꼭 눌러 주시고 부족한

점은 방명록에다 댓글로 남겨 주시면 감사 하겠습니다. 게임 개발은 민준홍이 담당 하고 네트워크나

웹에 관련된 내용은 제 형이 담당하게 되었습니다. 저희 블로그에서 알아 가는 점이 많으면

좋겠습니다. 코딩이 어려우신 분들도 쉽게 이해하실수 있도록 간결하고 쉽게 내용이 설명

되어 있습니다. 필요하신 내용이나 궁금한 내용 역시 댓글이나 방명록에 남겨 주세요.

최대한 성심 성의껏 답해드리도록 하겠습니다.

5. [Javascript] 반복문-for, while, break, continue

Bill Gray — Mon, 17 Jan 2022 17:38:29 +0900

1. 반복문의 목적

반복문의 구조에 대해서 설명하기 이전에, 간단하게 반복문이 왜 쓰이고 어느 상황에 쓰이는지 설명해주겠다. 반복문이란 말 그대로 특정 행위를 반복적으로 행하는 것이다. 반복문은 특정 코드를 여러번 실행 할때 쓰인다. 만약 "ong"을 한번만 출력할 것이라면 모르겠지만 아래와 같이 "ong"을 10번 출력하기 위해서 같은 코드를 10번이나 입력하는 것은 매우 비효율적이다. 반복문은 이런 비효율적인 부분을 for문 또는 while문을 통해 효율적인 부분으로 바꿀수 있다.

console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");
console.log("ong");

for(int i = 0; i < 10; i++){
	console.log("ong");
}

2. for문의 구조

for문은 위의 코드로 볼 수 있듯이 3가지 파트로 구분할 수가 있으며, 각각의 파트는;로 구분되어 있다. 첫번째 파트는 조건이 반복될 수의 초기값을 입력한다. 주로 이곳에 int i = 0; 또는 i = 0을 사용한다. 두번째 파트는 첫번째 파트에서 설정한 숫자의 범위이다. 만약 첫번째 파트에서 설정한 숫자가 이 범위를 부합하지 않는다면 for문을 멈춘다. 마지막 파트는 루프를 한번 반복할 때마다 첫번째 파트에서 설정한 숫자가 얼마나 증가할지를 알려준다. 위의 코드를 분석해 보자면 이 루프는 i의 초기값을 0으로 설정하고 매 루프마다 i가 1씩 증가하다가 만약 i 값이 10을 초과한다면 for 문을 멈추는 구조이다. 즉 console.log("ong")을 10번 실행한다.

3. while/do while문의 구조

while문의 구조는 매우 간단하다. while 옆의 괄호에 조건을 적고, 만약 그 조건이 거짓이 될 시에 while문을 중단한다. 아래 코드에서는 a의 값을 0으로 선언하고 while옆의 조건에 a가 10이하일때 docoment.write("ong")을 실행하고 a에 1을 더하라고 되어있다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

이제 do while문을 살펴보자. do while문은 while문과 매우 유사하게 생겼다. 단지 조건이 실행 코드 뒤로 이동했을 뿐이다. 아래 예제를 분석해보자. while문과 똑같이 먼저 a에 0이라는 값을 대입해준다. 이제부터 while문과의 차이점이 들어난다. while문은 조건을 확인한 후에 동작을 실행했지만 do while문은 그 반대로 동작을 실행하고 그 다음에 조건을 확인한다.

See the Pen do while by junjason-dev (@junjason-dev) on CodePen.

4. break와 continue 사용법

이전 강의를 보신 분이라면 break를 이미 알고있을수도 있다. break는 지난 switch 강의에서 한번 설명한 적이 있다. 반복문에서의 break 역할은 switch 에서와 비슷하게 해당 반복문을 나오는 것이다. continue는 반복문과 유사하지만 조금 다르다. break는 해당 for문을 탈출해버리지만 continue는 해당 루프만 나온다. 이게 무슨뜻이냐면 만약 i가 10까지 반복되는 for 반복문이 있다고 가정할때 i값이 4일때 break를 만난다면 바로 for문을 나오지만 continue는 i 값이 5인 루프로 간다. 다음 수업에는 변수의 유효 범위에 대해 설명하겠다.

8 : c/c++ 강좌 "반복제어문 2"

알 수 없는 사용자 — Mon, 17 Jan 2022 15:15:48 +0900

오늘 알아볼 반복제어문은 for 문입니다. 지난 시간에 배운 while 문과는 조금 다른 반복 제어문입니다. 하지만 while 문과는 다른 점이 있는데 알아보도록 하겠습니다. 우선 for 문의 구조를 알아 보도록 하겠습니다 for 문의 구조는 for(초기식, 조건식, 증감식){} 과 같이 되어 있습니다. 주로 초기식 안에 i 라는 변수를 넣고조건식에는 i<(어떤 숫자) 증감식에는 i++ 등과 같이 넣습니다. 특수한 조건에 다른 경우를 사용 하는 경우도 많은데이것이 기본적인 원리 입니다. 우선 초기식, 조건식, 증감식을 설명 해드리도록 하겠습니다. 우선 초기식을 보자면초기식은 for 문에서 처음에 한번만 실행되는 식입니다. 초기식은 말 그대로 변수의 초기값을 정해주는 식 입니다. 이번에는 조건식을 살펴 보도록 하겠습니다. 조건식이 참이면 for 문 내의 문장을 실행 하고 거짓이면for 문을 끝내고 함수를 벗어 납니다. 증감식이 실행 될때와 코드를 처음 실행할때 마다 증감식을 컴퓨터가 검사 합니다. 마지막으로 증감식은 for 문의 실행문장이 처리될때마다 실행 되면서 초기식의 변수의 값을증감식의 조건에 맞게 처리 합니다. 그러면 한번 간단한 코드를 작성해보도록 하겠습니다.

#include <stdio.h>

int main()
{
    for(int i=0;i<5;i++)
    {
        printf("Hello World!\n");
    }
    return 0;
}

한번 이 코드를 분석해보도록 하겠습니다. 우선 for 문 안에서 i 라는 변수를 생성 했습니다. for 문 외에서 변수를 이어서 사용

하실꺼면 따로 선언하는게 일반적이기는 하지만 현재는 그렇지 않기 때문에 for 문 안에다가 선언을 했습니다. 그 다음에

조건식을 살펴 보겠습니다 i<5 라고 되어 있는데요 이것의 의미는 i 가 5 미만일때 까지만 {} 중괄호 안의 코드를 실행

한다는 의미 입니다. 그 다음에 증감식을 보면 i++ 라고 되어 있는데요 한마디로 코드가 한번 실행 될때마다 i 를 1 씩

증가 시킨다고 생각 하면 됩니다. i 가 1 증가 할때마다 코드가 실행이 되고 다시 맨 처음으로 돌아가서 조건문과 초기식을

검토 하는 방식으로 진행 된다고 생각 하시면 됩니다. 이 코드를 while 문으로 변경 할수 있는데요, 그래도 결과는 똑같이

나오게 됩니다. 한번 식을 while 문으로 변경 하게 되면 다음 식같이 됩니다.

#include <stdio.h>

int main()
{   
    int i=0;

    while(i<5)
    {
        i++;
        printf("Hello World!\n");
    }
    return 0;
}

그러면 다음번에는 반복제어문의 응용을 보도록 하겠습니다

7 : c/c++ 강좌 "반복제어문 1"

알 수 없는 사용자 — Mon, 17 Jan 2022 12:48:09 +0900

반복제어문은 여러 종류가 있습니다. while 문과 for 문이 대표적인 반복제어문입니다. while 문은 if 문과

비슷하게 () 괄호 안의 조건이 참이여야지 {} 중괄호 안의 코드를 실행을 합니다 하지만 다른 점이 있는데

while 문은 if 문과 같이 한번만 실행 하는것이 아니라 {} 중괄호 안의 조건을 조건이 거짓이 될때까지 끊임없이

실행 하는 함수 입니다. 또, 수동적으로 while 문 안에서 나가는 코드는 break 라는 코드로 break; 이렇게 사용 합니다

if 문과 합쳐서 while 문 안에서 if 문이 참이라는 결과를 갖게 되면 break 할수 있습니다. break 문과

while 문 , if 문을 이용해서 간단한 코드를 한번 작성해 보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int a=0;

    while(a<100)
    {
        a++;
        printf("a\n");

        if(a == 90)
        {
            break;
        }
    }
    return 0;
}

이 경우에는 a < 100 인 경우에만 코드가 실행 되도록 하였습니다. 간단하게 코드를 살펴 보자면 a 는 후치 증가 연산자로

a 씩 증가 시키고 있고 a 라는 문자를 바로 다음에 프린트 하였습니다. if 문을 간단하게 살펴 보자면 만약에 a 값이 90

이 되면 코드를 break 합니다. 결과적으로는 a 는 절때 99 를 도달 하지 않았지만 만약에 if 문을 없애면 이렇게 됩니다.

#include <stdio.h>

int main()
{
    int a=0;

    while(a<100)
    {
        a++;
        printf("a\n");

    /*    
        if(a == 90)
        {
            break;
        }
    */
    }
    return 0;
}

이렇게 하면 a 값이 99 를 찍고 while 문이 직접 자신을 break 하는 것을 확인 하실수 있습니다. 또한 while 문 조건 안에

1 이라는 숫자를 넣으면은 무한 반복문이 됩니다. 이 경우에는 break 문이 없을시에는 조건이 없기 때문에 저절로 while

문이 break 되지 않습니다. 또한 continue 라는 코드가 있습니다. continue 는 말 그대로 지속 한다는 의미로 break

문과 반대되는 역할을 합니다. continue 문은 그 이후의 코드를 실행 하지 않고 while 문의 맨 처음으로 다시 돌아가서

처음부터 다시 코드를 실행 한다는 의미 입니다. 이 역시 간단한 코드를 한번 만들어 보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int a=0;

    while(1)
    {

        scanf("%d",&a);     
        printf("Hello World!\n"); 

        if(a == 1)
        {
            continue;
        }
        
        else 
        {
            break;
        }
        
    }
    return 0;
}

이 코드 역시 살펴보도록 하겠습니다. 보시면 a 라는 10진 정수가 선언되어 있고, while 문 안에서 a 를 스캔을 하고 있습니다.그 직후에 Hello World! 를 출력 하고 a 의 값을 확인하게 되는데, a 가 1이여야지만 코드의 처음으로 다시 돌아가고

만약에 a 가 1 이 아닐시에는 while 문을 break 하게 됩니다. 그러면 다음 시간에는 for 문에 대해 알아보도록 하겠습니다.

[Javascript]4. switch 조건문-구조와 if문과의 차이점

Bill Gray — Mon, 17 Jan 2022 12:18:52 +0900

1. switch문과 if문의 차이

switch문의 구조에 대해 설명하기 이전에 switch문과 if문의 차이점에 대해 설명하자면, if문은 if를 만날때마다 조건문을 만족하는지 인트럭션이 필요하지만 switch문은 처음 입력값을 확인하는 인터럭션만 필요하고 조건을 확인할 때는 인터럭션이 필요하지 않다. 인터럭션이 무엇인지 간단하게 설명하자면 CPU가 명령을 수행하기 위해서 메모리 상에서 명령어를 읽어오는 과정이다. 즉 인터럭션이 적을수록 좋은것이다. switch문은 조건이 많아져도 인터럭션이 늘어나지 않으므로 조건이 많은 경우에는 switch문을 사용하는 것이 if문을 사용하는 것보다 더 좋다고 할 수 있다.

2. switch문의 구조

switch문의 기본적인 구조는 아래와 같다. 대부분의 switch문은 하나 이상의 case문으로 이루어지며, 필수는 아니지만 default문도 사용이 된다. switch문의 default는 if문의 else와 같은 개념이라고 생각하면 된다. switch문의 괄호 안에는 아래와 같이 비교 대상을 넣고 case 옆에는 비교 대상의 조건을 쓴다. 조건뒤에는 조건이 참일시 실행될 코드를 적는다. 일반적으로 실행할 코드가 끝나면 break를 적는데 만약 break를 쓰지 않는다면 첫번째 조건을 행하고 switch문을 나가지 않고 다음 조건을 실행한다. 아래 코드를 분석해 보자면 a값은 4이고 a가 1이면 "a = 1"을 출력하고 switch문을 탈출, a가 2라면 "a = 2"를 출력 후 탈출, a가 3이면 "a = 3"을 출력하고 탈출한다. 그리고 a 값이 1, 2, 3 모두 아닐시에는 default를 통해 "not 1, 2, 3"을 출력하고 switch문을 탈출한다. 다음 시간에는 반복문에 대해서 알아보겠다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

[Network] - ip 주소와 포트

Bill Gray — Mon, 17 Jan 2022 01:28:14 +0900

1. IP 주소란?

ip 주소란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. IP 주소는 두가지가 있는데 ipv4와 ipv6가 있다. ipv4는총 32비트(4바이트)로 구성되어 있으며 아래와 같이 8비트(1바이트) 마다 . 으로 나뉘어져 있다. 그리고 아래 주소는 2진수로 이루어져 있는 ipv4인데 이것을 10진수로 변환하면 우리가 일반적으로 알고있는 10진수의 ip 주소가 나오게 된다.

ex) 11000000.10101000.00000001.00100001 => 192.168.1.33

ipv6는 ipv4의 주소 부족을 위해 만들어졌다. ipv6는 128bit로 이루어져있으며 주소 표기가 아래와 같이 16진수로 이루어져있다. 또한 주소의 구성은 16bit씩 8개의 필드로 이루어져있다.

ex) 2000:1034:ab:2000:3:15:115:20

2. 포트란?

포트란 인터넷 프로토콜 스위트에서 포트는 운영 체제 통신의 종단점이다. 이 용어는 하드웨어 장치에도 사용되지만, 소프트웨어에서는 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위이다. 포트번호는 0~65536의 범위를 가진다(잘 알려진 포트 리스트).포트와 ip 주소를 쉽게 설명하자면 ip는 컴퓨터를 찾을때 필요한 주소이고 포트 번호는 해당 컴퓨터 안의 프로그램을 찾기 위해 필요한 것이다.

다음 시간에는 넷마스크에 대해 알아보겠다.

6 : c/c++ 강좌 "선택제어문"

알 수 없는 사용자 — Mon, 17 Jan 2022 01:25:16 +0900

if 문은 선택제어문중 하나 입니다. () 괄호 안의 조건이 참이면 {} 중괄호 안의 코드를 실행 하고

만약 () 괄호 안의 조건이 참이 아닌 경우에는 {} 중괄호 안의 코드를 실행 하지 않는 함수 입니다.

() 괄호 안에는 여러 조건을 넣을수 있습니다. 만약 a 라는 변수가 선언 되어 있다고 가정 하면

if(a>0){} 라고 간단하게 조건문을 만들수 있습니다. 이런 경우에 중괄호 안에 어떤 코드가 들어가

있다고 가정을 해보면 a 가 0 보다 클때만 {} 중괄호 안의 코드가 실행 됩니다. 한번 간단하게

입력문과 조합 해서 a>0 보다 클때만 중괄호 안의 코드가 실행 되는 코드를 작성 해보겠습니다.

#include <stdio.h>

int main()
{
    int a = 0;
    int b = 0;
    int c = 0;
    
    scanf("%d",&a);
    
    if(a>0)
    {
    	a = b + c;
    }
    
    return 0;
}

이렇게 간단한 코드를 작성 해보았는데 이 코드를 간단하게 설명 하자면 만약에 a > 0 이라는 조건이 참이면

a 안에다가 b + c 의 값을 대입 하는 것 입니다. 또한 a , b , c 값에 다 0 을 대입 해준 이유는 맨 처음에

변수를 선언 하면 그 변수 안에 랜덤한 값이 들어가있습니다. 만약에 변수를 선언한 직후에 디버깅을 해보면 변수의 형식에 따라 랜덤한 값이 들어가있는것을 보실수 있습니다. 그렇기 때문이 입력이 되지 않는 이상변수를 초기화 하는 습관은 아주 중요합니다. 그리고 선택제어문 안에 다른 선택제어문을 넣을수도 있습니다. 한번 4개의 변수를 선언 하여 입력문을 같이 응용하여 이중 선택제어문을 이용한 코드를 만들어보도록 하겠습니다.

#include <stdio.h>

int main()
{
    int a = 0;
    int b = 0;
    int c = 0;

    scanf("%d%d",&a,&b);

    if(a>0)
    {
        if(b<0)
        {
            a = b + c;
        }
    }
    return 0;
}

이번에는 선택제어문에서 else 문과 else if 문을 사용하는 방법을 알아보도록 하겠습니다. else 문과 else if 문은

둘 다 if 문 다음에 옵니다. 기본적으로 순서를 나열 해 보면은 1. if 2. else if 3. else 문 입니다. 선택연산자에서 마지막은

꼭 else 문을 써야 합니다. 만약에 3가지의 경우를 비교 하는 코드를 작성 해 보도록 하면 다음과 같이 됩니다.

#include <stdio.h>

int main()
{
    int a = 0;

    scanf("%d",&a);

    if(a>0)
    {
        a = 5;
    }

    else if(a<0)
    {
        a = 6;
    }

    else
    {
        a = 7;
    }

    return 0;
}

이 코드를 간단하게 설명 해보면 우선 a 라는 변수의 값을 입력 받습니다. 우선 if 문을 살펴 보자면 만약에

a > 0 일때는 a 라는 변수에 5 를 대입 합니다. else if 문에서는 만약에 입력받은 a < 0 일시에는 a 에 6 을

대입 하고, 만약에 위 조건이 둘 다 성립하지 않은 else 의 경우에서는 즉, a = 0 인 경우에는 a 의 값에다가 7 을 대입 한다는 의미 입니다. 꼭 복습 해보시길 바랍니다.

5 : c/c++ 강좌 "연산자"

알 수 없는 사용자 — Sun, 16 Jan 2022 18:36:48 +0900

c/c++ 에서 받는 입력값을 이용하여 연을 할수 있습니다. 우리가 일상 생활에서 자주 사용하는

사칙 연산 말고도 sin, cos, tan 등과 같은 삼각 함수와 다른 연산자들이 포함되어 있는 라이브러리도

있습니다. 우선 코딩에서 가장 중요한 여러가지 연산자를 알아보도록 하겠습니다. 우선 간단하게

대입연산자라는 것을 살펴 보면은, a = b + c 의 식에서 수학적으로는 a 와 b+c 가 같다는 의미 이지만

c/c++ 에서는 b + c 의 값을 a 안에다가 대입 한다는 의미 입니다. 한마디로 코딩에서는 a = 1+2 라는

문장의 의미는 a 안에다가 1+2 즉 3 을 대입 한다는 의미 입니다. 고로 만약 a = 3; 이라고 선언이 되었을때

printf("%d",a); 라고 코드를 작성 하면 출력 되는것은 %d 이고 그 자리에 a 가 대입 되어서나오는데

a 역시 3이라고 선언을 했기 때문에 3이 출력 되는것입니다. 만약에 a 는 b 와 같다는 의미를 나타내기 위해서는

a == b 를 사용 해야 합니다. '==' 기호는 c/c++ 언어에서 양 변의 변수가 같다는 의미를 나타내고 있습니다

다음은 산술 연산자 입니다. 우선 산술 연산자를 표로 나타내어 보도록 하겠습니다.

+  :  덧셈  :  a = b+c  :  b + c 를 a 에 대입 한다
-   :  뺄셈  :  a = b-c   :  b-c 의 값을 a에 대입 한다
*   :  곱셈 :  a = b*c   : b*c 의 값을 a 에 대입 한다  
/   :   나눗셈  :  a=b/c  :  b/c 의 값을 a 에 대입 한다
% :  나머지 :   a=b%c   :  b/c 의 나머지를 a 에 대입 한다

10진 정수의 연산에서 나눗셈을 사용 할 시 소수점 아래는 출력하지 않습니다

% 연산자는 10진 정수의 계산에서만 사용 됩니다. 실수는 소수점까지 출력 하기 때문입니다.

%는 문자의 형을 나타내기 위해 사용 하기 때문에 주의를 갖고 사용 해야 합니다.

다음으로는 다른 종류의 사용 하는 연산자들을 알아 보도록 하겠습니다.

+=   :   a+=b  :   a+b 를 a 에 대입
-=   :   a-=b  :   a-b 를 a 에 대입
+=   :   a*=b  :   a*b 를 a 에 대입
+=   :   a/=b  :   a/b 를 a 에 대입
%=   :   a%=b  :   a%b 를 a 에 대입

비교 연산자

a == b : a 와 b 는 같다
a = b : a 에 b 대입
a != b :  a는 b 와 같지 않다
a <= b : a 는 b 이하  
a >= b : a 는 b 이상
a < b : a 는 b 미만
a > b : a 는 b 초과

후치 & 전치 연산자

a++   :  작업을 끝낸 후 a 값을 1 증가
++a   :  a 의 값을 1 증가 후 작업 실시
a--    :  작업을 끝내고 a 의 값 1 감소
--a    :  a 의 값 1 감소 후 작업 실시

논리 연산자

a && b : a , b 둘다 참이여야지 성립 (and)
a || b : a, b 둘중 하나라도 참이여야지 성림 (or)
!a , !b : a가 참이 아니다 , b 가 참이 아니다 (not)

이중에서 !a 와 같은 것은 값을 참이면 거짓 거짓이면 참으로 바꿉니다.

위의 연산자들은 나중에 갈수록 많이 사용되게 됩니다. 꼭 익혀 두시길 바랍니다.

[Javascript]3. 조건문-if/else

Bill Gray — Sun, 16 Jan 2022 11:06:30 +0900

1. 조건문이란?

조건문이란 말 그대로 조건을 가진 문장이다. 조건문은 조건이 참일시 중괄호 안의 명령이 참일시 명령을 수행하며 if문과 switch 문이 대표적이다.

2. 문법

조건문의 기본적인 형태는 다음과 같다. 아래 코드는 기초적인 if문을 보여주고 있다. a == b라는 조건문이 참일시에 document.write("a = b")를 수행하고, 조건문 a + 1 == b가 참일시 document.write("a + 1= b")를 수행하고 조건문1과 조건문2가 모두 거짓일 시에는 document.write("?")을 수행한다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

조건문에서 거짓으로 취급하는 값은 다음과 같다. (참고로 NaN은 not a number 으로 숫자가 아니라는 것이다. 즉 표현이 불가능한 수이다.)

3. 조건문의 연산자

조건문에는 ===, !==, ==, !=, <, >, <=, >= 연산자가 쓰인다. 각각의 뜻을 알아보자면, ===는 완벽한 일치로, 두 데이터의 타입까지 고려하고 !==는 그 반대이다. ==는 ===과 같지만 데이터의 타입을 고려하지 않아서 '1'과 1 을 구별하지 못한다. !=는 ==의 반대로 두 데이터가 같지 않을시 참이다. <과 >는 한값이 다른 값보다 큰지 작은지, <=와 >=는 한 값이 다른 값보다 크거나 같은지, 작거나 큰지 비교한다.

3.1 삼항연산자

위에서도 설명했지만 ==는 데이터의 타입을 고려하지 않는다. 그래서 1과 '1'을 동일시한다. ===는 타입까지 고려하여 1과 '1'을 구분할 수가 있다. 아래의 코드를 보면 ==는 1과 '1'을 구별하지 못하는 반면에 ===는 1과 '1'을 구별한다는 것을 알 수 있다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

다음 수업에는 조건문 switch 문에 대해 알아보겠다

돈버는 날씨앱 하루날씨!

상담 신청하기

[HTML]2. 태그 구조와 블록요소/인라인 요소

Bill Gray — Sun, 16 Jan 2022 08:52:59 +0900

HTML 태그의 구조

HTML 태그의 가장 기본적인 형태는 위 사진과 같다. 대부분의 태그는 여는 태그와 닫는 태그로 이루어져 있으며, 여는 태그는 <>, 닫는 태그는 </>로 구성되어있다. 다만 img 삽입태그와 같이 일부 태그는 닫는 태그가 존재하지 않는다. 닫는 태그와 여는 태그를 통틀어 요소라 부른다.

블록 요소와 인라인 요소

HTML의 태그들은 블록 요소와 인라인 요소로 분류된다. 아래 글은 mdn에서 정의하는 블록 요소와 인라인 요소의 정의입니다.

블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소입니다. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿉니다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있습니다. 블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없습니다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있습니다.
인라인 요소(Inline elements)는 항상 블록 레벨 요소내에 포함되어 있습니다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있습니다. 인라인 요소는 새로운 줄(Line)을 만들지 않습니다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 됩니다. 예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 <a> , 텍스트(Text)를 강조하는 요소인 <em>,<strong> 등이 있습니다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

위 코드에서 알 수 있듯이, p 태그와 같은 블록 요소는 사용 가능한 넓이를 최대한 이용하고, span 태그와 같은 인라인 요소는 그 반대로 사용 가능한 넓이를 최소한으로 사용한. 그 외의 특징은 블록 요소는 수직으로 쌓이며 margin, padding값을 조절할 수가 있고, 인라인 요소는 수평으로 쌓이며 크기 지정이 불가능하다.

참고문헌: https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

4 : c/c++ 강좌 "변수"

알 수 없는 사용자 — Sun, 16 Jan 2022 04:20:58 +0900

변수에는 여러가지 종류가 있습니다. 우선 정수형 변수, 실수형 변수 , 문자형 변수 등이 있습니다.

우선 이 3가지 변수를 설명 하자면 정수형 변수는 int 를 선언문으로 사용 하고 실수형 변수는

float 와 double 문자형 변수는 char 입니다 여러 변수의 특징을 살펴 보면

선언문 : int

메모리 크기 : 4byte

사용범위& 특징 : -2147483648 ~ +2147483647 (10진 정수만 저장 가능)

선언문 : float

메모리 크기 : 4byte

사용범위& 특징 : 유효자리 약 6자리 & 범위 3.4E-38 ~ 3.4E+38

선언문 : double

메모리 크기 : 8byte

사용범위& 특징 : 유효자리 약 15자리 & 범위 1.7E-308 ~ 1.7E+308

선언문 : char

메모리 크기 : 1byte

사용범위& 특징 : 한개의 문자만 저장 가능

변수를 선언할때의 주의점 :

변수의 맨 처음은 숫자를 사용 할수 없습니다 예를 들어 6num 이런 식으로는 선언이 불가능합니다.

또한 변수의 이름에는 알파벳과 _ 문자만 사용 하여 만들수 있습니다. 그 외의 특수문자를 사용 하면 오류가 납니다.

또한 대문자와 소문자도 구분하여 사용 해야 합니다. 그리고 stdio.h 라이브러리 안에 있는 함수나 여러 기능들은 변수 이름으로 사용할수 없습니다. **변수의 이름은 사용자의 용도에 맞게 설정 해야지 쉽게 알아볼수 있습니다**.

[Javascript]1. 데이터의 종류, 연산자, 변수 선언 방법

Bill Gray — Sun, 16 Jan 2022 04:02:25 +0900

데이터의 종류

자바스크립트의 데이터는 기본 타입과 참조 타입이 있다. 기본 타입으로는 숫자, 문자열, 불린, undefined, null, symbol이 있다. 참조타입으로는 객체, 배열, 함수 그리고 정규 표현식이 있다.

여기서 의문이 생깁니다. a 는 null 인데 왜 문자열 형이라고 출력 되는걸까요? 이것은 그냥 초기 버급니다. 수정하면 파장이 클까봐 그냥 두는 것입니다. 또다른 의문은 객체 데이터를 보면 배열 데이터의 자료형이 객체 데이터라고 나온다는 것이다. 이것은 typeof가 객체데이터와 배열 데이터를 구분하지 못하기 때문에 생기는 일이다.

연산자

자바스크립트의 연산자는 다항연산자, 산순연산자, 시프트 연산자, 관계연산자, 논리연산자, 조건 연산자, 대입연산자가 있다. 아래 표는 연산자 간의 우선 순위를 보여준다.

변수 선언 방법

자바스크립트에는 변수를 선언하는 방법이 3가지가 있다. 첫번째 방법인 var는 되도록이면 쓰지 않는것이 좋다. 지금은 var로 선언해도 괜찮지만 var는 전역 호출이기 때문에 나중에 클래스 개념이 나올때 var 형을 쓴다면 상상도 못한곳에서 영향을 줄 수도 있다. 그래서 let과 const가 주로 쓰인다. 두 선언 방식의 차이를 설명하자면 let은 나중에 재할당이 가능하고 const는 재할당이 불가능하다.

위 사진처럼 let으로 선언했다면 마지막으로 할당한 값이 출력되지만, const로 선언했다면 에러가 난다.

다음 수업에는 조건문에 대해서 배워보겠다.

3 : c/c++ 강좌 "입력"

알 수 없는 사용자 — Sun, 16 Jan 2022 03:38:03 +0900

c/c++ 강좌에서 입력을 하는 방법을 알아 보도록 하겠습니다. 입력을 할때는 필연적으로

서식 문자를 사용 해야 하기 때문에 지난 시간에 서식 문자에 대해 알아 보았습니다. 입력을 할때는 scanf(""); 라는 함수를 사용 합니다 입력 서식문자 다음에는& 앰퍼샌드 마크를 넣어서 입력 값이라고 정의를 해줘야 합니다. 한번 10진 정수를 입력 받아보면

#include <stdio.h>

int main()
{        
	int num;
	scanf("%d",&num);
    return 0;
}

와 같이 정리가 가능 합니다. 이 코드 상황에서 %d 라는 서식 문자 안에다가 num 이라는 숫자를 할당을 하여 입력을 하는 것입니다. 보이는 것과 같이 입력시에는& 마크를 꼭 삽입 해야지 입력값이라고 컴퓨터가 인식 합니다. 그렇지 않을시에는 컴퓨터가 인식 하지 못하여서오류가 나고 코드가 실행이 되지 않습니다

또한 입력을 받을 시에는 변수를 생성 하여 서식 문자가 받은 값을 그 변수에다가 저장 해줘야 합니다.변수를 생성 하는 방법은 여러 가지 가 있습니다. 변수에도 종류가 많은데 몇가지를 나열 해보면int , float , char 와 같은 기본적인 것들이 있습니다. 2강에서도 잠시 설명을 했는데 int : 10진 정수 float : 실수 char : 문자 라고 정의되는데 이 외에도 여러가지 형식이 있습니다. 지금은 우선 이 3가지를 대표적으로 알아두면됩니다. 나머지 변수 형식은 나중에 필요할때 가서 설명을 해드리겠습니다.

지난번에 설명한 서식 문자와 서로 맞춰서 대표적인 3가지의 입력 형식을 써보겠습니다.

//10진 정수

#include <stdio.h>

int main()
{
    int num;
    scanf("%d",&num);
    return 0;
}

//실수

#include <stdio.h>

int main()
{
    float num;
    scanf("%f",&num);
    return 0;
}

//문자

#include <stdio.h>

int main()
{
    char ch;
    scanf("%c",&ch);
    return 0;
}

2 : c/c++ 강좌 "서식문자"

알 수 없는 사용자 — Sun, 16 Jan 2022 02:52:00 +0900

c/c++ 에서는 서식문자 라는게 존재 합니다.

%d : 10진 정수 (digit)

%f : 실수 (float)

%lf : 실수 (double)

%c : 문자 (character)

%s : 문자열(string)

각각 이렇게 해당이 되는데 이것이 기본적인 4가지의 서식 문자의 종류입니다. 오늘은 이 서식 문자를 활용 하여 출력 하는 것을 해볼껀데 각 서식 문자에 문자 , 10진 정수 , 실수 , 문자열 등을 할당 하여 출력 하는것을 해볼 것입니다.

1 : printf("%d",3);

2 : printf("%lf",3.14);

3 : printf("%c",'A');

4 : printf("%s","Hello");

1 : %d 안에 3 이라는 숫자를 할당 했다 3은 10진 정수다

2 : 3.14 는 실수이기 때문에 %f 를 사용 했다

3 : %c 에는 문자를 한개만 입력할수 있기 때문에 A 를 입력 했다

4 : Hello 는 문자열이기 때문에 %s 를 사용 했다

이런식으로 간단하게 정리가 됩니다. 문자나 문자열인 경우에는 ' ' 쿼테이션 마크를 사용

해서 문자라고 지정을 해줘야 오류가 나지 않고 잘 출력이 됩니다. 10진 정수나 실수일 경우에는

사용 하지 않아야 합니다.

다음 시간에는 입력을 배워볼 것이다

소스 코드 :

//A 라는 문자를 출력 하는 코드입니다

#include <stdio.h> 

int main()
{
    printf("%c",'A');	
    return 0;
}

//Hello World! 를 출력 하는 코드입니다

#include <stdio.h>

int main()
{
    printf("%s","Hello World!");
    return 0;
}

//3을 출력 하는 코드입니다

#include <stdio.h> 

int main()
{
    printf("%d",3);
    return 0;
}

//3.141592를 출력하는 코드입니다

#include <stdio.h> 

int main()
{
    printf("%lf",3.141592);
    return 0;
}

[Javascript]Javascript 튜토리얼-자바스크립트의 특징과 장점

Bill Gray — Sun, 16 Jan 2022 02:34:37 +0900

1. 자바스크립트의 특징

자바스크립트의 특징중 하나는 camel case를 쓴다는 것이다. camel case란 파일, 변수 또는 함수의 이름을 띄어쓰기를 안쓰고 표기하기 위해 말 그대로 낙타처럼 짓는것이다. ex)this is boring -> thisIsBoring

자바스크립트의 또 다른 특징은, 대부분의 프로그래밍 언어가 그렇듯이 zero-based numbering 체계이다. 즉 숫자를 셀때, 0부터 시작한다.

2. 자바스크립트의 필요성

자바스크립트는 웹 개발의 3대 요소(HTML, CSS, JS)라고 불릴만큼 웹과 관련이 많다. HTML과 CSS만으로는 물체가 움직이는것을 구현하는데에 무리가 있다. 물론 hover과 같은 CSS 태그로 애니메이션을 구현할 수는 있지만, CSS만으로 애니메이션을 구현하는 데에는 무리가 있다. JS는 이런 점을 극복해준다. 게다가 node.js는 백엔드에서도 쓰여 js는 웹 개발자라면 거의 필수라고 할 수있다. 현재 존재하는 웹 중에서 95%가 자바스크립트를 사용중이다. 무엇보다 자바스크립트는 배우는게 무지 쉽다. 그럼 다음 수업부터 본격적으로 시작해보자.

[Network]1. 네트워크 시작하기-OSI 7 layer, TCP/IP

Bill Gray — Sun, 16 Jan 2022 02:01:23 +0900

1. 네트워크란?

네트워크(Network)란, Net과 Work의 합성어이다. 따라서 말뜻그대로 해석하자면, ‘일하는 그물’ 정도가 될 것이다. ‘그물처럼 서로 엮여서 일하는 것’이란 의미가 되는 셈이다. 이것을 통신에 접목시켜보면, 각종 통신 장비들이 서로 연결되어 데이터를 교환하며, 일하는 통신망이라 할 수 있겠다.

2. 프로토콜이란?

컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약이다.

프로토콜에는 구문, 의미, 순서가 포함되어 있어야한다. 구문은 전송되는 데이터의 어느 부분이 어떤 정보를 포함하고 있는지를 나타낸다. 의미는 전송되는 데이터의 각 부분이 무엇을 뜻하는지 알 수 있게 미리 정해둔 규칙을 의미한다. 순서는 네트워크 통신에서 두 가지 역할을 한다. 하나는 '어떤 데이터를 보낼까?' 이고 다른 하나는 '얼마나 빠르게 보낼까?' 이다.

3. OSI 7계층

OSI 7 계층이란 네트워크 통신의 과정을 위의 사진처럼 7단계로 나눈것이다. 네트워크 통신의 과정을 위와 같이 나눈 이유는 네트워크 계층화를 통해 네트워크의 추가, 변경, 유지 보수 등의 문제를 쉽게 해결할 수 있기 때문이다.

OSI 7 계층을 간단히 살펴보자면, 1층인 물리 계층은 시스템 간의 연결선으로 실제 장치를 연결하는데 필요한 전기적 세부 사항을 정의한다. 1계층의 대표적인 장치는 허브와 리피터가 있다.

2계층은 네트워크를 구성하는 개체들 사이에 데이터를 전달하고, 물리 계층의 오류를 찾고 수정하는데 필요한 기능적/절차적 수단을 제공한다.

3계층은 여러 노드(장치, 데이터 지점)을 거칠때마다 경로를 찾아주는 역할을 한다. 라우팅, 흐름제어, 단편화, 오류제어를 수행한다.

4계층은 전송계층으로, 사용자들이 신뢰성있는 데이터를 주고받을 수 있도록하여 상의 계층이 유효성과 효율성을 고려하지 않아도 되게 해준다.

5계층은 세션 계층으로 TCP/IP 세션을 만들고 없애는 책임을 진다.

6계층은 표현계층으로 시스템에서 사용되는 코드 간의 번역을 담당한다. 또한 데이터의 압축과 암호화 기능을 수행하여 전송되는 데이터의 용량을 줄이고 중간에 유출되더라도 원문을 이해할 수 없게 만든다.

7계층은 응용계층으로 사용자나 프로그램 사이에 데이터의 교환을 가능하게 만든다.

4. TCP/IP

TCP/IP 4계층은 위 사진과 같이 맵핑된다. TCP/IP 4계층은 OSI 7계층의 세션 계층, 표현 계층, 응용 계층에 해당된다.

c/c++ 코드 에디터 & 컴파일러 다운로드

알 수 없는 사용자 — Sun, 16 Jan 2022 01:43:11 +0900

코드를 컴파일 하거나 에디팅 하려면 에디터와 컴파일러가 필요하다.

사람들이 많이 쓰는 vsc (visual studio code) 가 있다

vsc 는 아래 링크에서 다운 할수 있는데 윈도우즈나 맥북 둘중 자신의 os 에 맞는 것을 다운 하면 된다.

https://code.visualstudio.com

c/c++ 을 코딩 하기 위해서는 c/c++ 인텔리센스를 깔아야 한다.

vsc 내에서 확장 프로그램 탭에 들어간 후 c/c++ 를 검색 한다

이 확장 프로그램은 c/c++ 인텔리센스와 디버깅 등 여러가지 기능들을 사용 하게 해준다. 맥북 기준으로는 이렇게 하면 다 끝난 것이고

코드를 짠 다음에 command + shift + b 를 이용하여 빌드 할수 있다

다음은 윈도우즈의 경우이다.

윈도우즈는 mingw 64x 를 다운로드 한 다음에 file explorer c 드라이브 안에 program files 에 mingw 루트 파일과 실행 파일이 있는 mingw 폴더가 있을 것이다. 그 안에 들어간 후 bin 이라는 폴더에 들어가서 경로를 복사한 후 file explorer 에 들어가서 컴퓨터 탭에 들어가면 드라이브가 있는 탭이 나올 것이다 우클릭 후 속성을 누르고 고급 설정에 들어간 후 environment variables (환경 변수(설정)) 에 들어가서 path 라는 것을 클릭 후 new 버튼을 눌러 새로 만들기를 한다. 그 다음에 아까 복사한 mingw 경로를 붙여 넣고 확인을 누른다.

그 후 vsc 에서 code runner 이라는 확장 프로그램을 깔고 vsc:files:preferences: settings 탭에 들어가서 run in terminal 을 검색한 후 code runner - run in terminal 을 활성화 시켜주면 완성이다.

mingw : https://www.mingw-w64.org/downloads/

1 : c/c++ 강좌 "출력"

알 수 없는 사용자 — Sun, 16 Jan 2022 01:15:02 +0900

우선 c 에서 가장 중요한 요소중 하나인 출력을 배워 보도록 하겠습니다

c 에서는 printf(""); 라는 함수를 이용 하여 출력을 합니다.

만약에 Hello World! 라는 텍스트를 출력하기 위해서는

printf("Hello World!");

를 사용 하게 됩니다. 이 경우에는 터미털이나 cmd 에 Hello World! 라고 출력 됩니다

그리고 코딩에서 가장 중요한 헤더 파일이라는게 있습니다. 스탠다드 라이브러리라고 부르기도

하는데 기본적으로 <stdio.h> 나 , <math.h> 등이 있습니다. 이런 라이브러리중에

<stdio.h> 는 c 에서 가장 중요한 헤더 파일입니다. 세상 모든 코드에서 포함되어 있다고 보면

됩니다 이 파일이 없으면 코드 실행 자체부터 안됩니다. #include <stdio.h> 를 사용해서

넣습니다. 또한 int main() {} 이라는 메인 함수가 있는데 이 함수는 꼭 선언해야 합니다.

그리고 c/c++ 코딩 에서는 {} 중괄호 안에 있는 코드는 실행되는 코드라고 보면 됩니다.

그리고 메인 함수에서 모든 작업을 처리 한 다음에는 return 0; 을 이용해 리턴값을 0으로

반환 해주면 됩니다 또한 ' ; ' 세미콜론은 마침표 같은 것이라고 보면 됩니다.

코드가 끝난 다음에는 꼭 작성 해야 합니다.

또한 코딩에서는 \n 이라는게 있는데 이것은 줄 바꿈 입니다.

컴퓨터에서 Enter 키랑 똑같은 역할을 하게 됩니다.

printf("Hello World!\n");

이렇게 하면 줄을 하나 건너뛰게 됩니다. 다른 문장을 넣어보도록 하겠습니다.

printf("Hello World!\n Welcome!");

이렇게 하였을때 터미널이나 cmd 에

Hello World!

Welcome!

이렇게 출력 됩니다.

또한 코드를 조금 더 깔끔하게 하기 위해 Hello World! 와 Welcome! 을 분리 할수도 있습니다.

printf("Hello World!\n");
printf("Welcome!");

printf(""); 함수를 두개로 분리 해도 \n 은 써야 됩니다. 컴퓨터는 공백을 건너 뛰기 때문입니다.

소스 코드 :

#include <stdio.h>

int main()
{
    printf("Hello World!");
    return 0;
}

#include <stdio.h>

int main()
{
    printf("Hello World!\n");
    printf("Welcome!");
    return 0;
}

[HTML]1. HTML 시작하기-개발 환경(VSC)셋팅

Bill Gray — Sun, 16 Jan 2022 00:42:51 +0900

HTML이란?
개발환경 셋팅
기본적인 태그

HTML이란?

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

개발환경(VSC) 셋팅

먼저 https://code.visualstudio.com/download 이곳으로 이동하여 자신의 컴퓨터에 맞는 것을 다운로드 해주세요.

다운로드가 완료되셨으면 파일을 열어주세요. 라이선스 계약에 동의해주시면 됩니다.

저는 편의를 위해서 첫번째와 두번째 항목에 체크를 하였습니다.

설치를 눌러주세요.

완료되었습니다.

기본적인 태그

h 태그

h 태그는 1부터 6까지 있습니다. h 뒤에 붙는 숫자가 작을 수록 글자의 크기가 커집니다. h1 태그는 주로 제목에 사용되고 2,3,4,5,6 순으로 중요도가 낮아집니다.

예) <h1>a</h1><h2>a</h2>.......<h6>a</h>

p 태그

p 태그는 주로 본문을 나타낼 때 쓰입니다. 처음 HTML을 접했다면 아직 머리속에 개념이 그려지지 않을테니 일단 p 태그는 문단, 본문 내용을 적는 곳이다. 라고 알아두면 좋습니다. h 태그를 제목으로 쓰고 p 태그 안에 본문을 채워넣는 형태라고 생각하면 됩니다

참고문헌

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements

Informatics

[Mysql] 1. XAMPP 설치하는 법(V 3.3.0)

[HTML]4. head 요소란? - title, style, link, meta, script

목차

1. <head> 태그란 무엇인가?

2. <title>

2. <style>

3. <link>

4. <meta>

5. <script>

[유니티 강좌] 7.유니티의 충돌감지와 리지드바디

[유니티 강좌] 6.움직이자!

[유니티 강좌]5.스크립트의 구성을 알아보자!

[유니티 강좌]4. 유니티 C# 스크립트의 연동

칼리 설치 하는법

Virtualbox 6.1.32 Oracle VM VirtualBox Extension Pack

[HTML]3. Doctype(DTD)란?

목차

1. DTD란?

2. Doctype이란?

[유니티 강좌]3.VsCode 설치

[Network] 프로토콜(protocol)이란?-정의, 요소, 기능

목차

1. 프로토콜의 정의

2. 프로토콜의 요소

3. 프로토콜의 기능

[유니티 강좌]2. 게임 오브젝트

[유니티 강좌] 1. 유니티 에디터에 대해서 알아보자

[유니티 강좌]0. 유니티 설치

[CSS]3. 복합, 자식, 하위, 인접 형제, 일반 형제 선택자

목차

1. 복합 선택자

2. 자식 선택자

3. 하위 선택자

4. 인접 형제 선택자

5. 일반 형제 선택자

15 : c/c++ 강좌 "문자열 1"

14 : c/c++ 강좌 "함수 3"

13 : c/c++ 강좌 "함수 2"

[Javascript]9. 호이스팅의 개념과 TDZ

목차

1. 호이 스팅이란?

2. var, const, let의 호이 스팅과 TDZ

12 : c/c++ 강좌 "함수 1"

[Javascript]8. 즉시 실행 함수의 사용법과 주의사항

목차

1. 즉시 실행 함수란?

2. 즉시 실행 함수 사용법

2-1. 즉시 실행 함수 사용시에 주의 해야하는것

[Javascript]7. 기본적인 화살표 함수의 사용법

목차

1. 화살표 함수란?

2. 화살표 함수의 기본적인 구조

11 : c/c++ 강좌 "배열 2"

[Javascript]6. 함수 선언과 호출

목차

함수란 무엇인가

함수 선언 방식

함수를 호출 하는 법

[CSS]2. 기본 문법 - 선택자의 종류와 우선순위

목차

1. 기본 문법

2. 전체 선택자

3. 태그 선택자

4. 클래스 선택자

5. id 선택자

5-1. id와 클래스의 차이

6. 선택자의 우선순위

[CSS]1. CSS란 무엇인가?-CSS의 필요성

목차

1. CSS란 무엇인가?

2. CSS의 필요성

3. 이 강의에서 다룰 내용

[Network] DNS 란?-DNS의 필요성과 도메인 해석의 단계

목차

DNS의 필요성

도메인 해석의 단계

[Network] 서브넷 마스크와 ip주소의 클래스

목차

IP주소의 구조