그렇다면 셋업 파일을 다운로드 하고, 런치 하기 까지의 과정 중에 만나는 다양한 옵션과 항목의 내용이 무엇인지 가장 최신 git 기준으로 (24년 1월) 자세히 알아보고자 한다.

그래서 아래와 같은 64 비트 윈도우 파일을 설치의 과정에 대해서 알아보자.

이를 클릭하면 다운로드가 진행되고, 아래와 같은 64 bit 의 git 파일이 다운된 것을 볼 수 있다.

이를 더블클릭 해 실행하면, 본격적인 *git setup *안내가 진행된다.

information & copyright

이는 우리가 설치하려는 GNU의 저작권에 대한 라이선스의 내용과 복사, 배포, 수정권한에 대한 내용이다.

이에 대해서 동의하고 설치를 진행하고자 한다면 하단의 Next 버튼을 누르면 된다.

GNU General Public License(이하 GPL)은 1991년 6월에 제정된 버전 2로, 소프트웨어 특허 문제를 방지하기 위해 모든 특허가 모든 사용자에게 무료로 사용되거나 아예 라이선스가 없는 상태로 허가되어야 한다고 명시하고 있다. 이 외에도 프로그램의 배포에 관한 자세한 조건과 라이선스의 유지, 라이선스 위반에 대한 조항 등이 명시되어 있다.

select destination location

다음은 깃을 설치할 폴더 위치를 결정하는 곳이다. 만약 다른 곳에 설치를 원한다면 Browse... 버튼을 눌러 다른 곳을 탐색할 수 있다. 최소 320.9MB의 여유 용량이 있는 디스크가 필요하다.

select components

여러가지 다양한 컴포넌트 중에 어떤 컴포넌트를 설치하고 싶은지 묻고 있다. 체크 표시 항목은 기본 설정된 항목이다.
📌 첫 번째 Additional icons > On the Desktop은 데스크탑에 추가 git아이콘을 만들것인지를 묻는다.
📌 두 번째 windows explorer integration은 운영 체제의 파일 탐색기(Explorer)와 다른 프로그램 또는 기능을 통합하는 것을 의미한다. 폴더 선택 후 마우스 오른쪽 버튼 클릭 시 Git에 연결 시킬 수 있는 기능 제공한다.

그 하위의 open Git Bash here 옵션은 현재 탐색기 창의 경로에 해당하는 위치에서 Git Bash 셸을 열 수 있는 기능을 제공한다.

다른 하위의 옵션인 open Git GUI here은 현재 탐색기 창의 경로에 해당하는 위치에서 Git GUI(그래픽 사용자 인터페이스) 도구를 열 수 있는 기능을 제공한다.

Git GUI는 Git을 시각적으로 다룰 수 있게 해주는 그래픽 사용자 인터페이스 도구로, 코드의 변경 내용을 추적하고 변경 사항을 커밋하는 등의 Git 작업을 수행할 수 있도록 도와준다.
📌 세 번째 git LFS (large file support)는 말 그대로 대용량 파일의 지원을 의미한다.

git은 본래 작은 용량의 이진 파일 지원 중심으로 구성되어있다. 그런데 LFS 기능을 이용하면 영상파일 등 보다 대용량 파일을 업로드 할 수 있다. 공식 홈페이지에 따르면, LFS(Git Large File Storage)는 오디오 샘플, 비디오, 데이터 세트 및 그래픽과 같은 대용량 파일을 Git 내부의 텍스트 포인터로 대체하는 한편 파일 내용을 GitHub.com 또는 GitHub Enterprise와 같은 원격 서버에 저장한다. 상세 기능은 아래와 같다.

대용량 파일 관리: Git LFS는 대용량 파일을 따로 관리하고, 이 파일들에 대한 참조만을 Git 저장소에 저장합니다. 이를 통해 저장소 크기를 줄이고 Git의 성능을 향상시킬 수 있습니다.

속도 향상: Git LFS는 대용량 파일에 대한 변경 내용을 다룰 때 효율적으로 동작하므로, 큰 파일이 포함된 프로젝트의 작업 속도를 향상시킬 수 있습니다.

백업 용이성: Git LFS를 사용하면 대용량 파일이나 이진 파일을 따로 저장하고, 필요한 경우 이 파일들을 복원할 수 있습니다. 이는 파일 손상, 삭제 또는 재구성 시 백업과 복구에 도움을 줍니다.

확장성: Git LFS는 Git과 호환성이 있어 기존 Git 작업 흐름과 통합하기 용이합니다. Git 명령어와 함께 사용할 수 있어 사용자들이 기존의 Git 명령어를 그대로 사용하면서도 대용량 파일을 효과적으로 관리할 수 있습니다.

자세한 내용은 공식 홈페이지를 참고하길 바란다.
📌 네 번째 associate .git* configuration files with the default text editor은 Git 저장소의 설정 파일인 .gitconfig, .gitignore, .gitattributes 등과 같은 파일을 기본 텍스트 편집기와 연결하거나 연관시키는 작업을 맡는다.
📌 다섯 번째** associate .sh files to be run with bash** 는 리눅스나 유닉스 계열의 운영 체제에서 쉘 스크립트 파일인 .sh 확장자를 Bash 쉘에서 실행하도록 설정함을 의미한다.
📌 여섯 번째 check daily for git for windows updates 는 Git for Windows의 업데이트를 매일 확인하도록 만드는 것이다. Git for Windows는 주기적으로 업데이트가 되며, 새로운 버전에서는 보안 업데이트, 새로운 기능 추가, 버그 수정 등이 제공된다. 업데이트를 수동으로 확인하고 적용하는 대신, 매일 자동으로 확인하도록 설정할 수 있다.

하지만 개인적인 생각으로, 다른 프로젝트들을 진행함에 있어서 깃이 계속 업데이트 되는 것은 이에 맞추어 계속 다른 프로그램의 버전 또한 맞춰야 하기에 번거롭다고 생각된다. 때문에 기본 설정 항목에 이 항목이 체크되어있지 않은 것을 그대로 이어 설치하지 않는 것을 추천한다.
📌 일곱 번째 add a git bash profile to windows terminal 은 Windows Terminal에서 Git Bash 프로파일을 추가하는 것을 의미한다. 터미널 환경을 향상시켜 Git Bash를 더 쉽게 사용할 수 있게 한다.
📌 여덟 번재 scalar (git add-on to manage large-scale repositories) 은 Git의 대규모 저장소 관리를 개선하기 위한 확장 기능 중 하나로 대규모 저장소에서의 성능 및 작업 효율을 향상시키는 데 중점을 두었다. 상세 정보는 아래와 같다.

파일 시스템 메타데이터 캐시: Scalar는 대규모 저장소에서의 성능 향상을 위해 파일 시스템 메타데이터에 대한 캐싱을 수행합니다. 이를 통해 파일 및 디렉토리를 효과적으로 관리하고 Git 명령을 빠르게 수행할 수 있습니다.

병렬성 증가: Scalar는 병렬 처리를 통해 Git 명령의 처리 속도를 향상시킵니다. 특히 대규모 저장소에서 작업을 병렬로 처리함으로써 전반적인 성능을 향상시킬 수 있습니다.

가상 파일 시스템(Virtual File System): Scalar는 Git 저장소의 파일을 필요에 따라 가상으로 가져오고, 실제로 필요한 파일만 로컬에 복사하여 저장소의 크기를 줄이는 가상 파일 시스템을 제공합니다.

자동 업데이트: Scalar는 자동 업데이트 기능을 포함하여 새로운 기능이나 성능 향상을 포함하는 새로운 버전이 나올 때 손쉽게 업데이트할 수 있도록 지원합니다.

select start menu folder

프로그램의 단축경로 위치를 어디에 둘지 결정하는 단계이다. 기본 폴더는 Git이고, 원한다면 다른 경로를 찾을 수 있다.

choosing the default editor used by git

기본 편집기에 대해 설정하는 단계이다.

편집기의 종류는 아래의 이미지에 보이는 것을 비롯해 다양한데, 하나하나 그 특징에 대해서 간략히 알아보자면 아래와 같다.

📌 GNU Nano

기본적인 텍스트 편집 외에도, nano는 대화형 검색 및 바꾸기, 실행 취소/레도, 구문 색칠, 부드러운 스크롤, 자동 입력, 줄 바꿈 및 열 번호 이동, 기능 토글, 파일 잠금, 백업 파일 및 국제화 지원과 같은 많은 추가 기능을 지원한다. 유닉스 계열의 편집기로 편집기 화면은 아래와 같은 모습이다.

나노 이미지 출처

📌 Vim

어떤 종류의 텍스트라도 매우 효율적으로 만들고 변경할 수 있도록 만들어진 고도로 구성 가능한 텍스트 편집기이다. Vim은 대부분의 유닉스 시스템과 애플 OS X에 "vi"로 포함되어 있다. 다시말해, MacOs 같은 유닉스 계열 운영체제의 기본 텍스트 에디터이다. 하지만 git에서는 vim보다 가능한 최신 GUI로 바꾸어 설치할 것을 권장한다.

📌 Notepad++

여러 언어를 지원하는 무료 소스 코드 편집기 및 메모장이다. MS 윈도우 환경에서 실행되는 그 사용은 GNU General Public License에 의해 관리된다.

📌 Visual Studio Code

마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 다양한 설치 파일을 통해서 확장시킬 수 있다. 필자가 가장 추천하는 편집기 이다.

📌 Sublime Text

파이썬 API용으로 작성된 사유 크로스 플랫폼 소스 코드 편집기이다. 수많은 프로그래밍 언어와 마크업 언어를 네이티브로 지원하며 플러그인을 사용하여 사용자에 의해 기능을 확장할 수 있다.

📌 Atom

GitHub에서 만든 텍스트 에디터로, 다양한 프로그래밍 언어의 편집기로 사용할 수 있도록 고안된 도구이다. Sublime Text와 Textmate를 본땄다. 하지만 22년 12월 부로 Atom이라는 소프트웨어 및 Atom 프로젝트가 소속된 조직을 공식적으로 종료했으므로 새로운 프로젝트를 시작하는 단계라면 선택을 지양하기를 추천한다.

📌 VSCodium

VS Code의 무료이고 오픈 소스인 소프트웨어 바이너리이다. 기반이 VSCode이다.

📌 Notepad 윈도우 내장 문서 편집기 메모장을 의미한다.

Adjusting the name of the initial branch in new repositories

새 저장소의 첫 번째 브랜치 네임을 설정한다. 기본 설정 값은 첫 번째 라디오버튼인데 master로 진행함을 의미한다. 하지만 깃의 브랜치가 master의 오래된 이름에서 main으로 바꿀 것을 추진한지 몇년 째이며, 필자의 경우 master이름을 이용하다가 다른 최신 프로그램과 충돌을 겪은 적이 있으므로 두 번째 라디오버튼을 클릭할 것을 추천한다. 더 많은 이야기는 여기를 추천한다.

Adjusting your path environment

명령 프롬프트나 다른 커맨드 라인 도구에서 git 명령을 사용할 수 있도록 환경변수를 설정하는 부분이다.

Choosing the SSH executable

git에서 ssh를 사용해 작업할 때 git이 가지고 있는 openSSH를 사용할 것인지, 외부의 openSSH를 사용할 것인지를 결정한다.

SSH는 원격 서버와의 안전한 통신을 위해 사용되는 프로토콜로, 다양한 SSH 클라이언트가 있다.

choosing HTTPS transport backend

git에서 HTTPS로 작업할 때 OpenSSL리 가지고 있는 루트 인증서를 사용할 것인지, 아니면 window의 secure channel의 루트 인증서를 사용할 것인지 결정한다. 다만, 기업 등에서 git 레포 서버를 운영하고 있는 경우 두 번째를 선택해야 한다.

comfiguring the line ending conversions

레포지토리에서 체크아웃, 커밋 시 줄바꿈에 대한 옵션이다.

CRLF (Carriage Return Line Feed): CRLF는 줄바꿈을 표현하기 위해 Carriage Return (CR)와 Line Feed (LF) 두 문자를 사용하는 방식이다. CR은 현재 커서를 현재 라인의 처음으로 이동시키는 제어 문자이고, LF는 다음 라인으로 이동시키는 제어 문자이다.

LF (Line Feed): LF는 줄바꿈을 표현하기 위해 Line Feed (LF) 문자 하나만 사용하는 방식이다. 주로 Unix 및 Linux 운영 체제에서 텍스트 파일의 줄바꿈에 사용된다. Git 등의 버전 관리 시스템에서는 리눅스 계열의 스타일을 따르는 것이 일반적이다.

CRLF는 주로 Windows에서 사용되고, LF는 주로 Unix/Linux에서 사용된다.

configuring the terminal emulator to use with Git Bash

깃에서 사용할 콘솔을 선택하는데, minTTY을 사용할 것인지, 아니면 window의 표준 콘솔을 사용할 것인지 선택하는 과정이다.

MinTTY는 Windows 운영 체제에서 사용되는 터미널 에뮬레이터이다. MinTTY는 주로 Git Bash 및 Cygwin과 함께 사용되며, 터미널 환경을 제공하여 Unix/Linux 스타일의 명령어와 유틸리티를 Windows에서 사용할 수 있게 해준다.

choose the default behavior of 'git pull'

git pull 명령어는 원격 저장소에서 최신 변경 사항을 가져오고, 로컬 브랜치에 병합하는 데 사용된다.

Fast-forward: 가장 간단하면서 기본적인 방법이다. 로컬 브랜치가 원격 브랜치를 추월하게 되어 단순히 앞으로 이동하는 것을 의미한다. 이 경우에는 새로운 커밋이 생성되지 않고, 기존 커밋들이 그대로 유지된다.

Merge: 변경 사항을 가져온 후에 로컬 브랜치에 새로운 병합 커밋이 생성된다. 이 방법은 변경 이력을 그대로 보존하면서 병합을 수행한다.

Rebase: 변경 사항을 가져온 후에 로컬 브랜치의 커밋들을 변경하여, 원격 브랜치의 변경 사항이 로컬 브랜치의 최상단에 쌓이도록 만든다. 이 방법은 커밋 이력을 깔끔하게 유지할 수 있지만, 팀 내에서 공유되는 브랜치에 사용할 때 주의가 필요하다.

Only Ever Fast-Forward: 이 옵션은 원격 브랜치를 로컬 브랜치에 항상 fast-forward 방식으로만 병합하도록 설정하는 것이다. 이 경우 다른 방식의 병합은 허용되지 않는다.

choose a credential helper

git에 접속할 때 인증 보조 기능의 사용 여부를 선택하는 내용이다. 이를 설정해두면 2단계 인증의 번거로움을 덜어준다.

configuring extra options

추가 옵션에 대한 내용이다.

Enable file system caching: 이 옵션을 활성화하면 파일 시스템 캐싱이 가능해진다. 즉, 특정 작업에 필요한 파일 시스템 데이터가 대량으로 읽혀져서 메모리에 캐시된다. 특히 대규모 저장소에서 작업할 때 적절하다.

Enable symbolic links: 이 옵션을 활성화하면 심볼릭 링크 사용이 허용된다. 다만, 이 옵션을 활성화하려면 시스템에서 "SeCreateSymbolicLink" 권한이 필요하다. 이미 존재하는 저장소에는 영향을 주지 않는다. 심볼릭 링크를 사용할 수 있다.

configuring experimental options

git bash창에서 node, python 등의 네이티브 콘솔 프로그램 실행에 대한 옵션과 git 명령어에서 built-in file system watcher를 사용할지 여부를 선택한다.

installing

마침내, 완료

그리고 마침내 설치 완료이다.

Facade 패턴은 단순한 창구를 만든다.

Facade는 건물의 정면, 즉 현관을 의미한다.

큰 프로그램의 많은 클래스를 적절히 제어해 창구에 요청하는 방식으로 만든다. 복잡히 얽혀서 너저분한 세부 내용을 정리해서 높은 수준의 인터페이스(API)를 제공한다.

인터페이스 수를 줄여 외부와의 결합을 느슨하게 만든다. 이 때문에 패키지(클래스 집합)를 부품으로 가져와 사용할 수 있다.

이 패턴의 역할은 크게 세 개로 나뉘는데 Facade, Client, 그 외 시스템을 구성하는 여러 역 이다.

예제로는 임의 txt파일로 이루어진 데이터베이스 정보를 가져와 HTML 파일을 작성해주는 프로그램이다.

사용하는 클래스는 4가지인데, Database, HtmlWriter, PageMaker, Main 이렇게 구성되어있다.

자세한 내용은 아래의 교재에서 제공하는 사이트를 참고해 예제를 확인하기 바란다. https://www.youngin.com/reader/pds/pds.asp

문제 1 : PageMaker 클래스만 pagemaker 패키지 밖에서 이용할 수 있게 하고 싶다. Database 와 HtmlWriter 클래스를 pagemaker 패키지 밖에서 이용할 수 없게 하려 한다.

가존에 public class Database, public class HtmlWriter 두 개로 이루어진 클래스의 내용을 class Database, class HtmlWriter 으로 수정한다.

디폴트 값은 같은 패키지에서만 이용할 수 있음을 의미하고 public은 모든 클래스에서 이용할 수 있음을 의미하기 때문이다.

문제 2 : 데이터 파일 maildata.txt 에 포함된 사용자의 이메일 주소 링크 페이지를 만드는 makeLinkPage 메소드를 PageMaker 클래스에 추가한다.

Main 클래스의 수정은 아래와 같다.

import pagemaker.PageMaker;

public class Main {
    public static void main(String[] args) {
        PageMaker.makeLinkPage("linkpage.html");
    }
}

그리고 makeLinkPage 메소드는 try-catch문으로 구성할 수 있는데, txt 파일의 데이터를 value와 key 값으로 받아들여서 mailto 라는 메소드의 인수로 각각 넣는다.

    public static void makeLinkPage(String filename) {
        try {
            HtmlWriter writer = new HtmlWriter(new FileWriter(filename));
            writer.title("Link page");
            Properties mailprop = Database.getProperties("maildata");
            for (String mailaddr: mailprop.stringPropertyNames()) {
                String username = mailprop.getProperty(mailaddr, "(unknown)");
                writer.mailto(mailaddr, username);
            }
            writer.close();
            System.out.println(filename + " is created.");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

덧붙이자면, 기존의 makeWelcomPage의 메소드는 아래와 같다.

    public static void makeWelcomePage(String mailaddr, String filename) {
        try {
            Properties mailprop = Database.getProperties("maildata");
            String username = mailprop.getProperty(mailaddr);
            HtmlWriter writer = new HtmlWriter(new FileWriter(filename));
            writer.title(username + "'s web page");
            writer.paragraph("Welcome to " + username + "'s web page!");
            writer.paragraph("Nice to meet you!");
            writer.mailto(mailaddr, username);
            writer.close();
            System.out.println(filename + " is created for " + mailaddr + " (" + username + ")");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

mailto 메소드는 HtmlWriter 내부에 있는 내용으로서 아래와 같다. 수정된 건 없다.

public void mailto(String mailaddr, String username) throws IOException {
    link("mailto: " + mailaddr, usernamr);
}

문제 3 : 예제 프로그램의 HtmlWriter 클래스에서는 많은 문자열이 있다. 여러줄의 문자열 리터럴을 읽기 쉽게 하는 텍스트 블록이 있다. """ """ 사이에 내용을 작성하면 달라질까?

기존의 내용은 아래와 같다.

        writer.write("<!DOCTYPE html>");
        writer.write("<html>");
        writer.write("<head>");
        writer.write("<title>" + title + "</title>");
        writer.write("</head>");
        writer.write("<body>");
        writer.write("\n");
        writer.write("<h1>" + title + "</h1>");
        writer.write("\n");

수정하고자 하는 내용은 아래와 같다.

 String title = "Welcome!";
        String message = "Hello, world!";
        String html = """
        <!DOCTYPE html>
        <html>
            <head>
                <title>%s</title>
            </head>
            <body>
                <h1 style="text-align: center">%s</h1>
            </body>
        </html>
        """.formatted(title, message);
        System.out.print(html);
    }

결과는 달라지지 않는다.

%s 등과 같은 제어문자열을 사용하면 title, message 내용을 포함할 수 있다.

--

Chain of Responsibility 패턴은 여러 객체를 사슬처럼 연쇄적으로 묶고, 객체 사슬을 차례대로 돌면서 원하는 객체를 결정하는 패턴이다.

책임을 떠넘기는 구조이다. 요청을 해당 사람이 해결할 수 있으면 하고, 못하면 다음 사람으로 넘기는 구조이다.

이 패턴의 구조는 크게 3개로 나뉜다. Hander - 처리자 : 요구를 처리하는 인터페이스를 정의 ConcreteHandler - 구체적 처리자 : 요구를 구체적으로 처리한다. Client - 요구자 : 첫 번째 구체적 처리자에게 요구를 한다.

교재의 예제는 난수를 발행시키고, 지정 번호 미만의 문제를 해결하거나 홀수 번호 문제만 해결하는 등 특정 조건일 경우만 해결하는 클래스를 생성해 여러 클래스로 넘기는 구조로 이루어진다.

교재는 Main을 포함해서 7개의 클래스로 이루어져 있다. 그런데 4개의 클래스는 비슷한 맥락이다.

Trouble, Support, NoSupport, LimitSupport, OddSupport, SpecialSupport, Main 이렇게 구성된다.

그중 NoSupport, LimitSupport, OddSupport, SpecialSupport 이 4가지는 모두 Support로부터 상속받는다.

자세한 내용은 아래의 교재에서 제공하는 사이트를 참고해 예제를 확인하기 바란다. https://www.youngin.com/reader/pds/pds.asp

문제 1 : GUI 앱 상에는 버튼, 텍스트 상자, 체크방스 등 컴포넌트가 있다. 이 컴포넌트를 클릭했을 때 발생하는 이벤트를 어떻게 떠넘기나. next는 어디에 등장하나.

부모 컴포넌트가 next가 되는 경우가 많다. next는 그 다음 대상자를 의미한다. 컴포넌트로 전달된 이벤트는 해당 컴포넌트가 처리하지 않을 때 순차적으로 부모 컴포넌트로 전달된다.

문제 2 : 예제 프로그램의 support에서 support 메소드는 public 이지만, resolve 메소드는 protected 이다. 클래스 설계자가 이와 같이 구분한 의도는 무엇인가.

public은 여러 클래스에서 이용 가능 한 것을 의미한다. protected는 해당 패키지 및 하위 클래스에서 접근 가능한 것을 의미한다.

resolve 메소드는 support 클래스 내부에 생성된 메소드인데, 다른 클래스가 트러블 해결을 의뢰할 때는 resolve가 아닌 support 메소드를 사용하길 바란다는 의도다.

support 클래스와 관계 없는 클래스에서 resolve를 호출해 사용하지 못하게 막기 위함이다.

또한 resolve 메소드의 이름 등을 변환할 때 수정할 대상이 많이져 번거로워지기 때문이다.

문제 3 : 예제 프로그램의 support 메소드를 재귀적으로 호출하는 대신 루프로 전개 해라.

기존의 support 메소드는 아래와 같다.

public void support (Trouble trouble) {
    if ( resolve(trouble)) {
        done(trouble);
    } else if ( next != null) {
        next.support(trouble);
    } else {
        fail(trouble);
    }
}

for 문의 반복 조건을 true로 둠으로서 - 루프를 통해서 이를 전개할 수 있다.

pubilc void Support(Trouble troublee){
  for (Support obj = this; true; obj = obj.next) {
      if (obj.resolve(trouble)) {        // 만약 문제를 해결할 수 있다면
          obj.done(troble);            // 해당 Solve클래스로 해결했음을 출력하는 done 메소드를 부르고
          break;                        // 빠져나온다.
      } else if (obj.next == null) {    // 만약 다음 Solve 메소드가 없다면.
          obj.fail(trouble);            // 해결되지 않다는 문구를 출력한다.
          break;                        // 그리고 빠져나온다. 
      }
  }
}

*Decorator * 패턴은 중심이 되는 객체에 점점 장식을 더해가는 패턴이다.

교재는 예제로 특정 문자열의 길이만큼 장식문자 (+, -)를 붙여 출력하는 프로그램을 만든다.

총 사용하는 클래스는 6개로, Display, StringDisplay, Border, SideBorder, FullBorder, Main이다.

동작을 실행시키는 Main 클래스를 제외하고, 추상클래스인 Display 클래스를 부모로 두고, 이를 StringDisplay와 Border가 상속받는 구조이다.

SideBorder 와 FullBorder 는 Border 클래스를 상속받는 자식클래스이다.

Display 클래스에서는 세 개의 추상메소드를 선언하고 show() 메소드를 선언해 모든 행을 표시하도록 한다. 선언하는 추상메소드 세 개는 getColumns, getRows, getRowText 이다.

자세한 내용은 아래의 교재에서 제공하는 사이트를 참고해 예제를 확인하기 바란다. https://www.youngin.com/reader/pds/pds.asp

문제 1 : 예제 프로그램에 추가하는 형태로 위아래 장식 문자가 붙는 UpDownBorder 클래스를 만들어 보라

만들어야 하는 결과는 아래와 같다.

Hello, world.
-------------
Hello, world.
-------------
*-------------*
*Hello, world.*
*-------------*
+-----------------+
|/////////////////|
||===============||
||*Hello, world.*||
||===============||
|/////////////////|
+-----------------+

이를 위해서 수정할 점은 문저 Main 클래스이다. 새로 생성할 클래스의 이름이 UpDownBorder이고, - 기호가 추가된 모양이므로, FullBorder를 제외한다. 사용하고 싶은 StringDisplay, UpDownDisplay, SidrBorder, FullBorder 에 따라서 아래와 같이 수정한다.

public class Main {
    public static void main(String[] args) {
        Display b1 = new StringDisplay("Hello, world.");
        Display b2 = new UpDownBorder(b1, '-');
        Display b3 = new SideBorder(b2, '*');
        b1.show();
        b2.show();
        b3.show();
        Display b4 =
                    new FullBorder(
                        new UpDownBorder(
                            new SideBorder(
                                new UpDownBorder(
                                    new SideBorder(
                                        new StringDisplay("Hello, world."),
                                        '*'
                                    ),
                                    '='
                                ),
                                '|'
                            ),
                            '/'
                        )
                    );
        b4.show();
    }
}

그리고 새로 만든 UpDownDisplay는 FullBorder와 유사한 모양이되, 장식문자를 지칭하는 것을 생성한다.

    private char borderChar;  // 장식 문자 

    // 내용물이 될 Display와 장식 문자를 지정
    public UpDownBorder(Display display, char ch) {
        super(display);
        this.borderChar = ch;
    }

    ...

또한 getRowText부분을 수정해 row가 0일때 또는 row가 getRows() -1 일 때에 해당할 경우의 리턴값과 그렇지 않을 때의 리턴값을 수정해 준다.

...

@Override
    public String getRowText(int row) {
        if (row == 0 || row == getRows() -1) {                                                 // 상단 테두리
            return makeLine(borderChar, getColumns());
        } else {                                                    
            return display.getRowText(row - 1) ;
        }
    }

    ...

문제 2 : ConcreteComponent 역으로 여러 문자열을 표시하는 MultiStringDisplay 클래스를 만들어보라

완성해야하는 결과는 아래와 같다.

Hi!
Good morning.
Good night!
#Hi!          #
#Good morning.#
#Good night!  #
+-------------+
|Hi!          |
|Good morning.|
|Good night!  |
+-------------+

기존의 클래스에 새로은 클래스를 추가해주는데, 이름은 MultiStringDisplay이다. 출력결과를 보면 space와 데코레이견 기호를 같이 추가해주었다는 것을 알 수 있다.

이를 위해서 기존의 Main 클래스를 수정한다.

public class Main {
    public static void main(String[] args) {
        MultiStringDisplay md = new MultiStringDisplay();

        md.add("Hi!");
        md.add("Good mording.");
        md.add("Good night!");
        md.show();

        Display d1 = new SideBorder(md, '#');
        d1.show();

        Display d2 = new FullBorder(md);
        d2.show();
    }
}

그리고 MultiStringDisplay 클래스를 수정해주는데, 문자열을 저장하기 위해 리스트와 최대 문자 수를 저장할 변수를 새로 생성한다.

    private List<String> body = new ArrayList<>();

    private int columns = 0;

각 문자열을 추가받아 최대 문자 수를 갱신하는 add 메소드를 생성하며, 기존의 FullBorder 클래스 처럼 getColumns, getRows, getRowText 를 추가해준다.

    @Override
    public int getColumns() {
        // 문자 수는 내용물 양쪽에 좌우 장식 문자만큼 더한 것
        return columns;
    }

    @Override
    public int getRows() {
        // 행수는 내용물의 행수에 상하 장식 문자만큼 더한 것
        return body.size();
    }

    @Override
    public String getRowText(int row) {
        return body.get(row);
    }

또한 표시 문자열 오른쪽 끝에 채울 공백을 필요에 따라서 늘려야 하므로 메소드 하나를 추가해준다. 이름은 updatePadding() 이다.

 public void updatePadding() {
        for (int row = 0; row < body.size(); row++) {
            String line = body.get(row);
            int padding = columns - line.length();
            if (padding > 0) {
                body.set(row, line + spaces(padding));
            }
        }
    }

그리고 공백을 만드는 함수를 space라고 하며 count를 인수로 가진다.

    private String spaces(int count) {
        StringBuilder spaces = new StringBuilder();
        for (int i = 0; i < count; i++) {
            spaces.append(" ");
        }
        return spaces.toString();
    }

JAVA 언어로 배우는 디자인패턴 입문 책의 교재 및 예제 풀이를 정리해보려 한다.

Builder 패턴이란?

그 이름에서 알 수 있듯 구조를 가진 인스턴스를 구축해나가는 패턴이다.

교재의 예제는 이 패턴을 이용해서 문서(html)파일을 작성하는 프로그램을 보여준다.

문서 파일의 구조는 타이틀, 문자열, 항목을 포함하는 구조로 이루어져 있다.

클래스는 총 5개로, Builder, Director, TextBuilder, HTMLBuilder, Main으로 구성되어있다.

자세한 내용은 아래의 교재에서 제공하는 사이트를 참고해 예제를 확인하기 바란다. https://www.youngin.com/reader/pds/pds.asp

문제 1 : 예제 프로그램의 Builder 클래스를 인터페이스로 변경하고 그에 맞춰 다른 클래스를 수정하라

먼저 클래스로 선언한 부분을 인터페이스로 바꿔준다.

//Builder.java

//public abstract class Builder { 
public interface Builder{

다음으로 builder 클래스를 기존에 상속(extends)받았던 TextBuilder, HTMLBuilder 두 가지를 implements로 수정해준다.

HTMLBuilder.java

//public  class HTMLBuilder extends Builder
public class HTMLBuilder implements Builder

그리고

TextBuilder.java

//public  class TextBuilder extends Builder
public class TextBuilder implements Builder

문제 2 : 예제 프로그램의 Director 클래스이 construct 메소드를 수정해 다른 문서를 만들어보자. 이 때 TextBuilder 클래스나 HTMLBuilder 클래스를 수정할 필요가 전혀 없다.

Director.java 파일 내부에 makeTitle, makeString, makeItems 의 각 " " 안의 내용을 내 임의로 수정해주면 된다.

문제 3 : 예제 프로그램의 Builder 클래스의 하위 클래스로서 ConcreteBuilderd 역할을 할 수 있는 클래스를 작성하세요. 텍스트, HTML 파일 이외에 소재는 자유

해설에서는 기존의 HTMLBuilder.java, TextBuilder.java 파일을 삭제하고 다른 GUI를 생성해 ConcreteBuildered 역할을 수행하게 하고자 한다.

해당 클래스의 이름은 FrameBuilder 이라고 하자. 또한 Builder를 상속받기 때문에 makeTitle, makeString, makeItems 메서드를 이용한다.

추가된 점은 GUI를 구성할 것이기 때문에, 아래의 코드처럼 JFrame과 해당 프레임 안에 들어갈 박스버튼을 선언해주어야 한다.

private JFrame frame = new JFrame(); 
private Box box = new Box(BoxLayout.Y_AXIS);

그리고 각각의 makeTitle, makeString, makeItems 내부에는 프레임 혹은 라벨을 붙여준다.
거기에 더하여 windowListenter에 대한 설정이 필요하므로 close 메소드에 이를 추가한다.

    @Override
    public void close() {
        frame.getContentPane().add(box);
        frame.pack();
        frame.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }

import javax.swing.JFrame;

public class Main {
    public static void main(String[] args) {
        FrameBuilder framebuilder = new FrameBuilder();
        Director director = new Director(framebuilder);
        director.construct();
        JFrame frame = framebuilder.getFrameResult();
        frame.setVisible(true);
    }
}

문제 4 : TextBuilder 클래스에서 문서를 구축해 가는 필드 sb가 String 클래스가 아니라 StringBuilder 클래스로 되어있는 이유는 무엇인가. String을 사용하면 무슨 문제가 일어나나

TextBuilder에서 사용된 StringBuilder()는 어떤 것이냐면, 아래와 같다.

public StringBuilder() Constructs a string builder with no characters in it and an initial capacity of 16 characters.

이어서 String()은 어떤 것이냐면, 아래와 같다.

java.lang.String The String class represents character strings. All string literals in Java programs, such as "abc", are implemented as instances of this class.

그래서 String으로 사용하되 조금의 수정을 가미하면 아무 문제가 없다.

기존의 아래와 같은 코드를

public class TextBuilder extends Builder {
    private StringBuilder sb = new StringBuilder();

    @Override
    public void makeTitle(String title) {
        sb.append("==============================\n");
        sb.append("[");
        sb.append(title);
        sb.append("]\n\n");
    }
    ...

아래와 같이 수정해준다.

public class TextBuilder extends Builder {
    private String text = "";

    @Override
    public void makeTitle(String title) {
        text += "==============================\n";
        text += "[" + title + "]\n";
        text += "\n";
    }

변수를 sb에서 text로 바꿨다는 점과 .append()를 +=으로 바꿨다는 점에서 차이를 가진다.

테킷스쿨에는 멋쟁이사자처럼 [대학11기] 파이썬 Django 실습 강의가 있습니다. 멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다. 이번에 리뷰하려는 것은 ✨챕터 5 : 백엔드의 필수: CRUD 개발하기 ✨ 입니다.

① 웹 개발의 필수: CRUD란?

create, read, update, delete의 약자로, 소프트웨어가 가지는 기본적인 데이터 처리 기능이다. 웹 서비스의 기반이 되는 개념이다.

추가, 조회, 수정, 삭제로 한글로 부른다. 상황에 따라 고려해야 할 점들이 각각 다르다

삭제는 soft/hard 두 가지가 있다. 삭제했다고 정리하고 실제 완전히 삭제하지 않는 것을 soft delete이라고 한다.

클라이언트는 입력을 주로 하며, 서버에게 요청한다. 서버는 검증 및 연상을 주로 하며, 데이터베이스에게 요청한다. 데이터베이스는 처리(crud)를 하고, 다시 서버에게 이를 전송한다.

서버가 없어도 클라이언트와 데이터베이스 만 있어도 작동은 되지만, 서버가 있어야 보안을 강화하는 효과 등이 있다.

데이터베이스로의 데이터 요청과 응답이 기본적인 crud의 흐름이다.

② Create로 데이터 생성하기 (1)

데이터의 특정 테이블의 생성을 create이라고 한다.

create의 흐름 : 폼 요청 -> 폼 응답 -> 데이터 생성 요청 -> 데이터베이스의 데이터 응답

*사용자에게 입력받는 데이터 *시스템에서 생성하는 데이터 두 가지로 구성되어있다.

인증권한; 로그인이 필요하거나 관리지만 생성할 수 있게 한다 데이터 유효성; 클라이언트가 입력한 데이터가 유효한지 검증한다. (나이, 전화번호, 숫자만 들어오도록 만든다 등)

③ Create로 데이터 생성하기 (2)

이전까지 작업하던 파일에 들어가서

페이지 소스를 확인하면, 새로고침을 했을 때 네트워크에 다양한 경로로 내용을 가져온다는 것을 확인할 수 있다.

여기에서 {% ~~ %} 내용을 입력하면, 하드코딩 없이도 변경된 url 주소를 불러올 수 있다. 예를 들어서,

{% url 'posts:post-create' %} 

을 입력하면, 설령 경로가 create가 아니더라도 이름이 post-create에 해당하는 내용으로 url이 연결된다.

만약 기존 파일에서, 내가 파일을 브라우져로 가져오면 이를 받아들이는 프로그램을 만들과자 한다면, views.py와 post_form.html 파일을 수정하면 된다.

// posts > views.py
def post_create_view(request):
    if request.method == "GET":
        return render(request, 'posts/post_form.html/')
    else:
        image = request.FILES.get('image')
        content = request.POST.get('content')
        print(image)
        print(content)
        Post.objects.create(
            image=image,
            content=content,
        )
        return redirect('index')

post_create_view 는 내가 앞에서 view로 선언을 해두었기 때문에 꼭 return 값이 있어야 한다.

만약 post_form.html 을 수정하고자 한다면,

// post_form.html

{% extends 'base.html' %}
    {% block title %} POST 입력 {% endblock %}
{% block content %}

    <h1>POST 입력 화면</h1>
    <form action="{% url 'posts:post-create' %}" method="POST" enctype="multipart/form-data"> {% csrf_token %}
        <div>
            <label for="id_image">이미지</label>
            <input type="file" name="image" accept="image/*" id="id_image">
        </div>
        <div>
            <label for="id_content">내용</label>
            <textarea name="content" id="id_content" cols="30" rows="10"></textarea>
        </div>
        <div>
            <input type="submit">

        </div>
    </form>


{% endblock %}

사진을 넣으면, admin에서 해당 변경 내용을 확인할 수 있다.

settings 에 아래 코드를 추가하고

// config > settings.py


MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'

config 와 동등한 위치에서 media 폴더를 생성한다. 이제 이미지를 업로드하면 여기에 저장될 것이다..

④ Read로 데이터 조회하기 (1)

장고 디버그 툴바를 여기에서 다운받아 사용할 수 있다.

https://django-debug-toolbar.readthedocs.io/en/latest/installation.html

화면 우측에 생긴 바를 통해서 sql 등을 확인할 수 있다.

조금 디테일을 살려서 문서를 수정해보자.

여러 포스트를 모아서 리스트 모양으로 보고 싶다면 post_list_view 함수를 수정해주어야 한다.

def index(request):
    post_list = Post.objects.all().order_by('-created_at')

만약 여러 포스트를 최신순으로 정렬하고 싶다면,

def index(request):
    post_list = Post.objects.all().order_by('-created_at')

뒤에 order_by를 추가해준다.

그리고 리스트를 조회할 때 댓글에 대해서 알고싶다면post_card.html 파일에서 수정하면 되는데,

이미지가 있을 때, 이를 보이게 하고싶다면 card__body 부분에 아래의 코드를 추가해주면 된다.

        <div>
            {% if post.image  %}
                <img class="card__image" src="{{ post.image.url }}" alt=""/>
            {% else %}
                <img class="card__image" src="http://via.placeholder.com/600x600" alt=""/>
            {% endif %}

        </div>

댓글에 대한 내용은 아래의 코드를 추가해주면 된다.

 <div>
                <p class="">댓글 {{ post.comment_set.all.count }}개 {% if not detail %}모두 보기{% endif %}</p>
                <ul class="card__comment-group">
                    {% if not detail %}
                        {% for comment in post.comment_set.all %}
                            <li><p><span class="card__user-name">{{ comment.writer }}</span>{{ comment.content }}</p>
                            </li>
                        {% empty %}
                            <li><p>댓글 없음</p></li>
                        {% endfor %}
                    {% else %}
                        {% for comment in post.comment_set.all|slice:":2" %}
                            <li><p><span class="card__user-name">{{ comment.writer }}</span>{{ comment.content }}</p>
                            </li>
                        {% empty %}
                            <li><p>댓글 없음</p></li>
                        {% endfor %}
                    {% endif %}
                </ul>
            </div>
            <span class="card__created-at">{{ post.created_at|date:"Y년 m월 d일" }}</span>

작성자를 나타내는지의 유무와, 댓글이 없을 경우에는 '댓글 없음'을 출력하고 있다면 그 내용을 불러와 출력한다. 또한 시간을 제외한 날짜만 출력하기 위해서 맨 마지막 태그를 추가했다!

⑤ Read로 데이터 조회하기 (2)

포스트에서 게시물 글의 '더보기'를 누르면 상세내용이 나오게 만들고 싶다면, 기존의 post_card.html 파일에서 아래 코드를 추가해준다.

  <a href="/posts/{{post.id}}">더보기</a>

저 코드에 있는 post.id는 index.html 파일에서 for 문을 돌리면서 그 내부에 post_card.html 파일을 불러왔기 때문에 가능하다.

만약 더 편하게 url을 불러오고 싶다면 urls.py 에 가서, post_detail_view에 이름을 추가해주면 된다.

      path('<int:id>', post_detail_view, name='post-detail'),

그리고 post_card도 수정하면 된다.

  {% if not detail %}
                    <a href="{%  url 'posts:post-detail' post.id %}">더보기</a>
                {% endif %}

⑥ Update로 데이터 수정하기 (1)

기존에 작성한 게시물의 글 혹은 사진을 수정하고 싶다면, view.py 파일과 post_form.html 파일을 수정하면 된다.

// views.py


def post_update_view(request, id):
    post = Post.objects.get(id=id)
    if request.method == 'GET':
        context = { 'post':post }
        return render(request, 'posts/post_form.html/', context)
    elif request.method == 'POST':
        pass

if 문을 통해서 더 구체적인 코드를 작성할 수 있다.

// post_form.html


      <div>
            <label for="id_image">이미지</label>
            {% if post.image %}
                <p>현재 : <a href="{{post.image.url }}">{{ post.image.name }}</a></p>
                <p>변경 : </p>
            {% else %}
            {% endif %}
            <input type="file" name="image" accept="image/*" id="id_image">
        </div>
        <div>
            <label for="id_content">내용</label>
            <textarea name="content" id="id_content" cols="30" rows="10">{% if post %} {{ post.content }} {% endif %}
            </textarea>
        </div>

⑦ Update로 데이터 수정하기 (2)

기존에 파일을 수정하면서 이미지를 바꿀 수 있는데, 이 과정에서 기존 파일은 삭제되고 새 파일이 저장되어야 한다. 이를 위해서 views.py 파일을 수정한다.

  // posts >  views.py

def post_update_view(request, id):

    # post = Post.objects.get(id=id)
    post = get_object_or_404(Post, id=id)


    if request.method == 'GET':
        context = { 'post':post }
        return render(request, 'posts/post_form.html/', context)
    elif request.method == 'POST':
        new_image = request.FILES.get('image')
        content = request.POST.get('content')
        print(new_image)
        print(content)

        if new_image:
            post.image.delete()
            post.image = new_image

        post.content = content
        post.save()
        return redirect('posts:post-detail', post.id )

더 안전한 코드 유지를 위해서

  post = Post.objects.get(id=id)

대신에

    post = get_object_or_404(Post, id=id)

이를 이용할 수 있다.

⑧ Delete로 데이터 삭제하기 (1)

delete에 두 가지 종류의 삭제가 있는데, 소프트가 아닌 하드 딜리트, 즉 완전 삭제로 파일을 삭제하기 위한 코드를 이번 8과 9에서 살펴보자.

먼저 쉬운 url 연결을 위해서 urls.py에서 post_delete_view에 이름을 붙여주자

    path('<int:id>/delete/', post_delete_view, name='post-delete'),     

그리고 views.py 에서도 수정을 더해주는데, 만약 포스트를 찾지 못하면 404 에러 화면을 띄우도록 하며, 포스트가 있다면 해당 html파일로 연결하는 if 문과 return 문을 작성한다.

def post_delete_view(request, id):
    post = get_object_or_404(Post, id=id)

    if request.method == 'GET':
        context = { 'post': post }
        return render(request, 'posts/post_confirm_delete.html', context)  

    return render(request, 'posts/post_confirm_delete.html/')

삭제하기 버튼은 일단 임의로 수정하기 버튼 옆에 만들어 준다.

// templates > post_card.html

    <!-- 수정하기 버튼  -->
        {% if request.user == post.writer  %}
        <a href="{% url 'posts:post-update' post.id %}"> 수정하기 </a>
        <a href="{% url 'posts:post-delete' post.id %}"> 삭제하기 </a>
        {% endif %}

가장 중요한 post_confirm_delete.html 파일은 아래와 같다.

// templates > posts > post_confirm_delete.html

  {% extends 'base.html' %}
    {% block title %} POST 삭제 {% endblock %}
{% block content %}

    <h1>POST 삭제 화면</h1>

    <form action="" method="POST">
        {% csrf_token %}
        <p>한 번 삭제된 데이터는 복구가 불가능 합니다. </p>
        <p>그래도 삭제 하시겠습니까? ID : {{ post.id }} </p> <br/> <br/>

        <a href="{% url 'index' %}">돌아가기</a>
        <input type="submit" value="삭제하기">

    </form>
    <br/>
    {% include 'mixin/posts/post_card.html' with detail=True %}

{% endblock %}

실행하면 화면은 아래와 같이 나온다.

⑨ Delete로 데이터 삭제하기 (2)

위의 코드에 이어서, 정말로 삭제를 하도록 만들기 위해서는 views.py에 post.delete()코드를 작성하는 것이 핵심이다.

// posts > views.py

  def post_delete_view(request, id):
    post = get_object_or_404(Post, id=id)

    if request.method == 'GET':
        context = { 'post': post }
        return render(request, 'posts/post_confirm_delete.html', context)  
    else:
        post.delete()
        return redirect('index')

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

①Views를 만드는 2가지 방법

MTV 디자인 패턴 Model : 데이터 관리, 데이터베이스와 연결 및 실행 Template : 데이터 출력, 사용자에게 표현 방식 정의 View : 컨트롤러, 비즈니스 로직을 처리

장고 실행 흐름은 아래와 같다.

웹 브라우저 -> url.py -> view -> Model -> View -> Template -> View -> 웹 브라우저

Views 만드는 두 가지 방법으로 FBV, CBV가 있다. 전자는 함수형이고 후자는 클래스형으로 불린다. 전자인 FBV는 구현이 간단하고, 읽기 쉬우며 직관적인 코드로 구성되어있다는 점에서 장점이 있다. 반면 코드의 확장과 재사용이 어렵고, 조건부 분기를 통한 HTTP 메서드 처리가 어렵다.

후자인 CBV는 코드의 확장과 재사용이 용이하며, 다중상속과 Mixin이 가능하다. 내장 class based view 사용 가능하다. 단점은 읽기 어렵고, 복잡하다. 또한 데코레이션 사용 시 함수를 재정의해야 한다는 점에서 FBV와 다르다.

두 가지 방법 중 상황에 따라서 더 적합한 방식을 사용해 개발을 진행하면 된다.

② Function Based View 알아보고 작성하기 (1)

기존의 config > urls.py 파일에서 하나의 url 을 추가하고자 한다. 이를 위해서 posts> views.py 파일 또한 수정을 해주어야 한다.

// config > urls.pu

urlpatterns = [
 path('url/', url_view)
]

// posts > views.py
from django.http import HttpResponse

def url_view(request):
    return HttpResponse('<h1>장고 실습 중</h1>')

그런데 위의 경우에서 HttpResponse 대신에 JsonResponse를 이용할 수 있다. 코드를 수정하면 다음과 같다.

// posts > views.py
from django.http import HttpResponse, JsonResponse

def url_view(request):
    data = {'code' : '001', 'msg' : 'OK'}
    return JsonResponse(data)

전자의 경우의 경우, 페이지 소스코드를 보면 h1이 그대로 보이는 반면, 후자의 경우에는 그대로 {'code' : '001', 'msg' : 'OK'} 가 출력되는 걸 볼 수 있다.

작성한 url을 받는 방법은 아래와 같다.

// posts > views.py

def url_parameter_view(request):
    return HttpResponse()

또한 url도 추가해 준다.

// config > urls.py

urlpatterns = [
    path('admin/', 'admin.site.urls),
     path('url/', url_view)
    path('url/<str:username>/', url_parameter_view),

]

이렇게 설정하면, 브라우저 실제 창에서 '기본 포트 넘버'/url/ 위의 상황에서 아무 문자열을 입력하면, 해당 내용의 텍스트가 적힌 페이지가 창에서 보인다. 또한 아래의 코드를 views파일에 추가하면 콘솔 창에서 key와 value로 입력한 내용이 보인다.

// posts > views.py

def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(username)
    print(request.GET)
    return HttpResponse(username)

③ Function Based View 알아보고 작성하기 (2)

지금 상황에서 views코드와 url코드는 아래와 같다. import문은 생략한다.

// posts > views.py


def url_view(request):
    print('url_view()')
    data = {'code': '001', 'msg': 'OK'}
    return HttpResponse('<h1>url_view</h1>')
    # return JsonResponse(data)

def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(username)
    print(request.GET)
    return HttpResponse(username)

// config > urls.py

urlpatterns = [
    path('admin/', 'admin.site.urls),
     path('url/', url_view)
    path('url/<str:username>/', url_parameter_view),

]

더 직관적으로 콘솔창에서 key와 value를 보기 위해서는 views코드를 아래와 같이 수정하면 된다.

// posts > views.py

def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(f'username: {username}')
    print(f'request.GET: {request.GET}')
    return HttpResponse(username)

만약 문자열이 아닌 숫자를 입력하고 싶다면, url파일을 아래와 같이 수정한다.

// config > urls.py

urlpatterns = [
    path('admin/', 'admin.site.urls),
     path('url/', url_view)
    path('url/<int:username>/', url_parameter_view),

]

str을 int로 수정한 것이다.

또다른 함수를 만들어 기존 파일에 추가해 보자먄

// posts > views.py


def url_view(request):
    print('url_view()')
    data = {'code': '001', 'msg': 'OK'}
    return HttpResponse('<h1>url_view</h1>')
    # return JsonResponse(data)


def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(f'username: {username}')
    print(f'request.GET: {request.GET}')
    return HttpResponse(username)


def function_view(request):
    print(f'request.method: {request.method}')
    print(f'request.GET: {request.GET}')
    print(f'request.POST: {request.POST}')
    return render(request, 'view.html'

그리고 posts 폴더 내부에 templates 폴더를 새로 생성해 view.html 파일을 임의로 만들어준다. (반드시 templates 으로 폴더 이름이 동일해야 한다.

//posts > templates > view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/fbv/">새로고침</a><br>

    <form action="" method="GET">
        <input type="text" name="var">
        <input type="submit" value="GET 제출">
    </form>

    <form action="" method="POST"> {% csrf_token %}
        <input type="text" name="var">
        <input type="submit" value="POST 제출">
    </form>

</body>
</html>

또한 urls 에도 추가한다.

// config > urls.py

urlpatterns = [
    path('admin/', 'admin.site.urls),
     path('url/', url_view)
    path('url/<int:username>/', url_parameter_view),
    path('fbv/', funtion_view)
]

실행시키면 아래와 같은 결과가 나온다.

(해당 강의 내용 참고)

데이터를 입력받는 세 가지 방법을 지금 배워본 것이다. 다시 정리하면, 첫 번째는 urls.py에서 views에 적힌 함수를 받아오는 것 (url_view ) 두 번째는 브라우져 창에서 key=value형태로 데이터를 전달 받는 것 ( url_parameter_view ) 세 번재는 폼을 만드는 것이다. (funstion_view)

세개 모두 함수형으로 구성했다.

if로 function_view를 분기처리 하면 아래와 같다.

// posts > views.py


def url_view(request):
    print('url_view()')
    data = {'code': '001', 'msg': 'OK'}
    return HttpResponse('<h1>url_view</h1>')
    # return JsonResponse(data)


def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(f'username: {username}')
    print(f'request.GET: {request.GET}')
    return HttpResponse(username)


def function_view(request):
    print(f'request.method: {request.method}')
    if request.method == 'GET':
        print(f'request.GET: {request.GET}')
    elif request.method == 'POST':
        print(f'request.POST: {request.POST}')
    return render(request, 'view.html')

④ Class Based View 알아보고 작성하기

먼저 views 파일 안에서 class 뷰 를 설정하면 아래와 같다.

// posts > views.py


def url_view(request):
    print('url_view()')
    data = {'code': '001', 'msg': 'OK'}
    return HttpResponse('<h1>url_view</h1>')
    # return JsonResponse(data)


def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(f'username: {username}')
    print(f'request.GET: {request.GET}')
    return HttpResponse(username)


def function_view(request):
    print(f'request.method: {request.method}')
    if request.method == 'GET':
        print(f'request.GET: {request.GET}')
    elif request.method == 'POST':
        print(f'request.POST: {request.POST}')
    return render(request, 'view.html')

class class_view(ListView):
    model = Post
    template_name = 'cbv_view.html'

그리고 templates 폴더 내부에 cvb_view.html 파일 하나를 만들어준다.

// posts >templates > cbb_view.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% for object in object_list %}
        {{ object }}
    {% endfor %}
</body>
</html>

또한 url도 추가해준다.

// config > urls.py

urlpatterns = [
    path('admin/', 'admin.site.urls),
     path('url/', url_view)
    path('url/<int:username>/', url_parameter_view),
    path('fbv/', funtion_view),

    path('cbv/', c;ass_view.as_view()),
]

만약, 방금 만든 클래스 기반 뷰를 함수형으로 만들면 아래와 같다.

def funtion_list_view(request):
    object_list = Post.objects.all().order_by('-id')
    return render(request, 'cbv_view.html', {'object_list': object_list})

url도 아래와 같이 추가한다.

    path('fbv/list/', funtion_list_view),

그리고 templates 내부에 posts 폴더를 만들어서 post_list.html 을 만들어 활동 할 수 있다.

⑤ Django Templates Engine 알아보기 (1)

클라이언(브라우저)가 서버의 view에서 요청을 보내고, 서버의 template을 실행시키고 view는 template를 http언어로 번역해서 브라우로 보낸다.

중요한 점은 template은 서버에서 실행한다는 점이다.

template 태그로 여러가지가 있는데 그 예시로 block(자식 템플릿으로 재정의), extends, include(템플릿을 로드), for, if, url 등이 있다.

템플렛 상속은 pyton 상속과 같은 의미인데, 자식에서 작성한 html이 부모의 html 내용으로 들어간다. header, footer 등의 중복 요소를 줄여 반복성을 줄인다.

template 필터로는 date, default, center, truncatechars, intcomma 등이 있다. {{ value|필터명:"형식" }} 으로 구성되어있다.

⑥ Django Templates Engine 알아보기 (2)

기존에 posts 즉 앱 단위에서 templates 폴더를 만들어서 작성했다면, 이제는 config 즉 더 큰 프로젝트 단위체서 템플렛을 설정해 보고자 한다.

이를 위해서는 settings 파일을 수정해주어야 한다.

//config > settings.py

...
TEMPLATES = [
'DIRS': [BASE_DIR / 'templates'],
]
...

그리고 config와 동등한 위치에 templates 폴더를 만들고, 그 내부에 posts 폴더를 또 만든다.

그 내부에 4개의 html 파일을 만들어주는데 그 코드는 전부 동일해도 괜찮다. post_list, post_detail, post_form, post_confirm_delete 이 네 가지 이다.

이어서 views 파일에도 아래의 코드를 추가해준다.

그리고 posts 파일 내에 urls.py 파일을 만드는데 아래와 같은 코드를 작성한다.

이렇게 만든 걸 config 내의 urls.py 파일에 가져와야 한다.

혹시 헷갈릴까봐, 수정한 코드 전문을 첨부한다.

// posts > views.py

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from django.views.generic.list import ListView
from .models import Post



# 6강 내용
def index(request):
    return render(request, 'index.html')

def post_list_view(request):
    return render(request, 'posts/post_list.html/')

def post_create_view(request):
    return render(request, 'posts/post_form.html/')

def post_detail_view(request, id):
    return render(request, 'posts/post_detail.html/')

def post_update_view(request, id):
    return render(request, 'posts/post_form.html/')

def post_delete_view(request, id):
    return render(request, 'posts/post_confirm_delete.html/')




# 함수를 실행하는  방법
def url_view(request):
    print('url_view()')
    data = {'code': '001', 'msg': 'OK'}
    return HttpResponse('<h1>url_view</h1>')
    # return JsonResponse(data)


# 받는 방법
def url_parameter_view(request, username):
    print('url_parameter_view()')
    print(f'username: {username}')
    print(f'request.GET: {request.GET}')
    return HttpResponse(username)

def function_view(request):
    print(f'request.method: {request.method}')
    if request.method == 'GET':
        print(f'request.GET: {request.GET}')
    elif request.method == 'POST':
        print(f'request.POST: {request.POST}')
    return render(request, 'view.html')


#  클래스 기반 뷰 
class class_view(ListView):
    model = Post
    ordering = ['-id']
    # template_name = 'cbv_view.html'


def funtion_list_view(request):
    object_list = Post.objects.all().order_by('-id')
    return render(request, 'cbv_view.html', {'object_list': object_list})

// config > urls.py

from django.contrib import admin
from django.urls import include, path
from posts.views import index, url_view, url_parameter_view, function_view, class_view, funtion_list_view

urlpatterns = [
    path('admin/', admin.site.urls),
    path('url/', url_view),
    path('url/<str:username>/', url_parameter_view),
    path('fbv/', function_view),

    path('fbv/list/', funtion_list_view),
    path('cbv/', class_view.as_view(), name='cbv'),

    path('', index, name='index'),
    path('posts/', include('posts.urls', namespace='posts')),
]

// posts > urls,.py

from django.urls import path
from .views import post_list_view, post_create_view,post_detail_view, post_update_view, post_delete_view

app_name = 'posts'

urlpatterns = [
    path('', post_list_view, name='post-list'),
    path('new/', post_create_view),
    path('<int:id>', post_detail_view),
    path('<int:id>/edit/', post_update_view),
    path('<int:id>/delete/', post_delete_view),
]

⑦ Django Templates Engine 알아보기 (3)

템플렛의 상속에 대해서 알아본다.

html 코드를 작성할 때, 다 똑같이 작성하는 중복되는 부분을 삭제하고자 한다.

config와 동등한 위치에 생성한 templates에 새로운 파일 base.html 파일을 만든다.

block은 상속받은 내용을 어디에 적을지 정의한다.

// templates > base.html


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} | 라이언그램 </title>
</head>
<body>
    <div>
        {% block content %}
        {% endblock %} 
    </div>
</body>
</html>

그리고 index.html 파일은 아래와 같이 작성된다.

// templates > index.html

{% extends 'base.html' %}
    {% block title %} 인덱스  {% endblock %}
{% block content %}

    <h1>인덱스 화면</h1>
    <ul>
        <li><a href="{% url 'posts:post-list' %}">게시글 목록</a></li>
    </ul>

{% endblock %}

다른 나머지 post_list, post_detail, post_form, post_confirm_delete 도 수정해준다.

⑧ Django Templates를 작성하며 인스타그램 꾸미기 (1)

각 화면의 구조화와 이루어져야 하고, 각각에 들어가는 내용이 구조화 되어야 한다.

인스타그램 화면을 보면, 크개 상단의 카드뉴스 형태화 하단의 나브바로 구성됨을 확인할 수 있다.

이를 본따 index.html 을 아래와 같이 수정할 수 있다.

// templates > index.html

{% extends 'base.html' %}
    {% block title %} 인덱스  {% endblock %}
{% block content %}

<main>
    <div class="card-list">
        <p>추후 수정 </p>
    </div>
    <div>
        <nav class="bottom-menu-group">
            <ul>
                <li>홈</li>
                <li>검색</li>
                <li>글쓰기</li>
                <li>좋아요</li>
                <li>프로필</li>
            </ul>
        </nav>
    </div>
</main>

{% endblock %}

그리고 settings.py 를 수정해준다.

// settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

이어서 config와 동등한 위치에 static 이란 이름의 폴더를 생성한다.

그리고 base.html을 비롯한 모든 파일에 아래의 코드를 입력한다.

{% load static %}

더불어 넣고 싶은 이미지가 있다면, 이는 static 폴더 안에 icons 폴더를 만들어서 여기에 넣으면 된다.

이 부분은 기존에 작성된 여러 파일과 조각을 합치는 것에 가깝다. 각각에 작성된 css 파일을 가져와 적용하는 방법 등에 집중해서 보면 좋겠다.

내가 원하는 css 파일을 작성하며 실습하는 것도 좋은 방법이라 생각된다.

지금까지의 실습은 위와 같다.

⑨ Django Templates를 작성하며 인스타그램 꾸미기 (2)

완성한 실습은 위와 같다.

더 많은 강의 후기 및 요약 정보는 : https://blog.naver.com/jimin201396

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 7 : Python Beginner - 자료구조 *✨ 입니다.

① 리스트 - 리스트의 정의 및 선언

리스트란 [] 대괄호를 통해 그 값을 넣을 수 있고, 0부터 시작한다는 특징을 가진다.

코드를 통해서 이에 대한 예시를 알아보고자 한다.

mbti = ['INFP', 'ENFP', 'ESTJ', 'INTP']

print(mbti)    
print(mbti[0])




>>> ['INFP', 'ENFP', 'ESTJ', 'INTP']
>>> INFP

[0]은 0번을 의미하고, 이를 출력하면 0 번째 측, 첫 번째 자리에 있는 데이터가 출력된다.

그 외에도 새로운 값을 특정 위치에 넣어 추가할 수 있다.

mbti = ['INFP', 'ENFP', 'ESTJ', 'INTP']


mbti[0] = 'infj'        # 새로운 값을 넣어서 만들기 

print(mbti)
print(mbti[0])




>>> ['infj', 'ENFP', 'ESTJ', 'INTP']
>>> infj

리스트에는 숫자가 올 수도, 문자열이 올 수도, 둘 다 올 수도 있다.

my_list = [123, 'apple']

print(my_list)



>>> [123, 'apple']

② 리스트 - 리스트 데이터 접근 및 조작

colors = ['red', 'blue', 'green']

대표 배열 한 개를 위와 같이 설정할 때, 이에 대해서 수정, 추가, 제거 등을 할 수 있다.

먼저 특정 위치에 수정한 사례는 아래와 같다.

colors[2] = 'black'
print(colors)



>>>  ['red', 'blue', 'black']

다음으로 마지막 순서에 추가한 사례를 살펴보면,

colors.append('purple')
print(colors)



>>> ['red', 'blue', 'black', 'purple']

그 외에도 원하는 위치에 추가할 수도 있다.

colors.insert(1, 'yellow')
print(colors)



>>> ['red', 'yellow', 'blue', 'black', 'purple']

제거하는 방법으로는 두 가지가 있는데, 먼저 지워도 다시 사용할 수 없는 경우다.

del colors[0]
print(colors)


>>> ['yellow', 'blue', 'black', 'purple']

또다른 제거 방법으로 다시 반환하는 경우다.

colors.pop(0)
print(colors)



>>> ['blue', 'black', 'purple']

이것의 특징은 바로 삭제하는 것이 아니라, 반환이 가능하다는 점으로, 아래를 통해서 자세히 살펴볼 수 있다.

color = colors.pop(0)
print(colors)
print(color)



>>> ['black', 'purple']
>>> 'blue'

그 외에 제거할 때, 특정 데이터 자체를 입력해 제거하는 방법이 있다.

colors.remove('black')
print(colors)


>>> ['purple']

③ 리스트 - 리스트 정렬

colors = ['blue', 'red', 'gray', 'black', 'yellow', 'orange']

colors 리스트가 위와 같을 때, 다양한 방법으로 정렬하고, 길이-갯수를 측정할 수 있다.

정렬하는 방법으로 여러가지가 있다.

# 정렬 - 원본데이터 변경
colors.sort()
print(colors) 



>>> ['black', 'blue', 'gray', 'orange', 'red', 'yellow']

sort를 이용하되, 역순으로 정렬할 수 있다.

# 역순정렬
colors.sort(reverse=True)
print(colors) 



>>> ['yellow', 'red', 'orange', 'gray', 'blue', 'black']

전열 결과를 다음과 같이 표현해 출려할 수 있다.

# 정렬 2
sorted(colors) # 최초의 초기화 데이터 를 변형시키지 않음. 
print(colors)

print(sorted(colors))



>>> ['yellow', 'red', 'orange', 'gray', 'blue', 'black']
>>> ['black', 'blue', 'gray', 'orange', 'red', 'yellow']

요소의 갯수 또한 출력할 수 있다.

# 길이 - 요소의 갯수
print(len(colors))

print(colors[7])
print(colors[-1]) # 마지막 원소를 출력하고 싶다면



>>> 6
>>> black
>>> black

④ 리스트 - 리스트 슬라이싱 및 복사

colors = ['blue', 'red', 'gray', 'black', 'yellow', 'orange']

colors 리스트가 위와 같을 때, 원하는 부분만 출력할 수 있다.

print(colors[1:5])
print(colors[:5])
print(colors[0:])
print(colors[:]) # 전체를 의미한다. 
print(colors[-1:])  



>>> ['red', 'orange', 'gray', 'blue']
>>> ['yellow', 'red', 'orange', 'gray', 'blue']
>>> ['yellow', 'red', 'orange', 'gray', 'blue', 'black']
>>> ['yellow', 'red', 'orange', 'gray', 'blue', 'black']
>>> ['black']

또한 리스트 전체를 새로운 변수에 넣어 표현할 수 있다.

colors_2 = colors[:] 


print(colors_2)



>>> ['yellow', 'red', 'orange', 'gray', 'blue', 'black']

이러한 구조가 colors_2 = color 와 다른 것은, 최초의 할당 메모리가 동일하다는 것이다. 후자는 최초와 분리되어서 출력되지 않는다. 때문에 colors_2를 변형하면, color 또한 변형된다.

⑤ 리스트 - 리스트와 흐름 제어

scores = [88, 100, 96, 43, 65, 78]

scores를 위와 같은 리스트라 가정하자. 이를 for 문을 통해서 리스트 내 랜덤 데이터를 뽑아 원하는 조건만족 여부에 따른 출력값도 아래와 같이 확인할 수 있다. 아래의 경우 조건은 리스트 내 임의의 값이 80 이상인지의 여부이다.

 scores.sort(reverse=True)
 print(scores)

 for score in scores:
     if score >= 80:
         print(scores)
     else:
         print("fail")



>>> [100, 96, 88, 78, 65, 43]
>>> [100, 96, 88, 78, 65, 43]
>>> [100, 96, 88, 78, 65, 43]
>>> [100, 96, 88, 78, 65, 43]
>>> fail
>>> fail
>>> fail

⑥ 리스트 - 리스트 최댓값/최솟값/총합

scores = [88, 100, 96, 43, 65, 78]

scores를 위와 같은 리스트라 가정하자.

이 때 최댓값은 아래와 같은 코드로 알 수 있다.

max_val = max(scores)

최솟값은 아래와 같다.

min_val = min(scores)

리스트 내 총 합을 구하는 코드는 아래와 같다.

sum_val = sum(scores)

sum_values = 0

for score in scores:
    sum_values = 0
    for score in scores:
        sum_values = sum_values + score
print(sum_values)       # 합을 구하기 



>>> 470

평균 또한 구할 수 있는데, 위의 코드에서 구한 합을 갯수로 나누면 된다.

avg_val = sum(scores) / len(scores)
print(avg_val)


>>> 78.333333333

⑦ 튜플

튜플과 리스트는 유사해 보이지만, 튜플은 각각의 요소를 변경할 수 없다는 리스트와의 차이점을 가진다.

tup = (1, 20, 40)

임의의 튜플을 위와 같이 설정할때, 출력하면 다음과 같다.

print(tup)



>>> (100, 20, 200)

특정한 값을 재할당하면 오류가 발생한다.

tup[0] =100             # 오류

위의 코드가 그 예시이다.

하지만 전체를 새로 정의해 바꾸면 괜찮다.

tup = (100, 20, 200)        
print(tup)


>>> (100, 20, 200)  

⑧ 튜플 - 튜플/리스트 변환

tup = (1, 20, 40)

tup을 위와 같이 선언할 때, for문을 통해서 이를 출력할 수 있다.

for x in tup:
    print(x)        # 순서대로 출려된다. 

>>> 1
    20
    40

튜플을 리스트로 변환할 수 있다.

list_1 = list(tup)
print(list_1)

#리스트로 변환 2
list_2 = [x for x in tup]
print(list_2)

#리스트 변환 3
list_3=[]

for x in tup:
    list_3.append(x)

print(list_3)




>>> [1, 20, 40]
>>> [1, 20, 40]
>>> [1, 20, 40]

⑨ 딕셔너리 - 딕셔너리 정의 및 선언

아래와 같이 딕셔너리를 선언할 수 있다. 이는 key값과 value값으로 구분되어있다.

student = {
    "student_no": "20230401", 
    "major": "English",
    "grade": 1
}

print(student["student_no"])



>>> 20230401

딕셔너리 내 데이터 수정은 다음과 같다.

student["student_no"] = "20230101"

print(student)
print(student["student_no"])



>>> {'student_no': '20230101', 'major': 'English', 'grade': 1}
>>> 20230101

⑩ 딕셔너리 - 딕셔너리 데이터 조작

student = {
    "student_no": "20230401", 
    "major": "English",
    "grade": 1
}

위와 같이 딕셔너리를 선언할 때, 추가는 다음과 같다.

student["gpa"] = 4.5
print(student)



>>> {'student_no': '20230101', 'major': 'English', 'grade': 1, 'gpa': 4.5}

수정은 다음과 같다.

student["gpa"] = 4.3
print(student)



>>> {'student_no': '20230101', 'major': 'English', 'grade': 1, 'gpa': 4.3}

삭제는 다음과 같다.

del student["gpa"]
print(student)



>>> {'student_no': '20230101', 'major': 'English', 'grade': 1}

⑪ 딕셔너리 - 딕셔너리 함수

student = {
    "student_no": "20230401", 
    "major": "English",
    "grade": 1
}

위와 같이 딕셔너리를 선언할 때,

데이터에 접근하는 방법은 아래와 같다.

print(student.get("grade"))



>>> 1

만약 없는 데이터에 접근한다면 이와 같은 결과가 나온다.

print(student.get("gpa"))      



>>> None

만약 데이터가 없을 경우 출력할 문구가 있다면, 이와 같이 입력한다.

print(student.get("gpa", "해당 키-값이 없습니다~"))    



>>> 해당 키-값이 없습니다~

딕셔너리의 키를 반환하고 싶다면,

print(student.keys()) 



>>>dict_keys(['student_no', 'major', 'grade'])

딕셔너리의 키를 리스트로 반환한다면,

print(list(student.keys()))



>>> ['student_no', 'major', 'grade']

딕서녀리의 값을 반환한다면,

print(student.values()) 



>>> dict_values(['20230101', 'English', 1])

⑫ 딕셔너리 - 딕셔너리와 반복문

tech = {
    "HTML" : "Advanced",
    "JavaScript": "Intermediate",
    "Python": "Expert",
    "Go": "Novice"
}

임의의 딕셔너리 tech를 위와 같이 선언할 때, key와 value 를 함께 짝지어 출력하면 다음과 같다.

for key, value in tech.items():
    print(f'{key} - {value}')




>>> HTML - Advanced
    JavaScript - Intermediate
    Python - Expert
    Go - Novice

key값만 출력하고 싶다면,

for i in tech:
    print(i)

>>> HTML
JavaScript
Python
Go

value만 출력하고 싶다면,

for value in tech.values():
    print(value)



>>> Advanced
    Intermediate
    Expert
    Novice

⑬ 딕셔너리 - 중첩

딕셔너리 두 개를 다음과 같이 선언한다.

student_1 ={
    "student_no": "1",
    "gpa": "4.3"
}

student_2 ={
    "student_no": "2",
    "gpa": "3.8"
}

그리고 하나의 변수에 두개의 딕셔너리를 리스트로 담는다.

students = [student_1, student_2]

반복문을 통해서 두 개의 리스트에 해당하는 특정 정보를 가져오면 다음과 같다.

for student_ in students:
    print(student_['student_no'])



>>> 1
    2

for student_ in students:
    student['graduated'] = False
    print(student_)




>>> {'student_no': '1', 'gpa': '4.3'}
    {'student_no': '2', 'gpa': '3.8'}

또다른 딕셔너리 student_a를 아래와 같이 정의한다

student_a = {
    "subjects": ["회계원리", "중국어회화"]
}

프린트를 통해서 만든 딕셔너리를 불러오면 아래와 같이 출력된다.

print(student_a["subjects"]) 


>>> ['회계원리', '중국어회화']

이를 불러와 특정 정보를 출력하면 아래와 같다.

subjects_list = student_a["subjects"]

for subject in subjects_list:
    print(subject)



>>> 회계원리
    중국어회화

다른 딕셔너리 student_b를 아래와 같이 정의한다.

studnet_b = {
    "scholarship": {
        "name": "국가장학금",
        "amount": "1000000"
    }
}

그 정보를 출력하면 아래와 같다.

print(studnet_b)


>>>{'scholarship': {'name': '국가장학금', 'amount': '1000000'}}

이에 대해서 키 값만 출력하거나, value만 출력하거나. value를 출력하면 아래와 같다.

for key in studnet_b.keys():
    print(key)

for value in studnet_b.values():
    for value_2 in value.values():
        print(value_2)


>>> scholarship
>>> 국가장학금
>>> 1000000

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 9 : 실습 - 콘솔 회원가입 프로그램 만들기 *✨ 입니다.

① 실습1 회원가입프로그램(1)

지금까지 배운 내용을 토대로, 간단한 회원가입 프로그램을 만들어봅니다. if, while 등이 함께 섞인 복잡한 구조입니다.

print('===============================')
print('회원가입')
print('===============================')

register = False

while not register:
    print('회원가입을 진행하시겠습니까? \n Y:진행       N:취소')
    register_input = input('>>      ') 
    register_input = register_input.lower()

    if register_input == 'y':
        register = True
        print('===============================')
        print('회원가입이 진행됩니다.')
        print('===============================')

    elif register_input == 'n':
        print('===============================')
        print('회원가입이 취소됩니다.')
        print('===============================')

    else:
        print('입력값을 재고해주세요')

사용자의 입력에 따라서 3개의 응답 중 하나가 나옵니다. 지금 상황으로는 break가 없기 때문에, while문을 빠져나오지 않고 계속 반복합니다.

② 회원가입프로그램 (2)

위의 내용에 계속 이어서 작성을 진행하는데, 이번에는 배열을 이용합니다.

users = []

while True:

    user = {}
    username = input('ID: ')

    while True:
        password = input("PW: ")
        password_confirm = input('PW 확인: ')
        if password == password_confirm:
            break # if 문 탈출
        else:
            print('패스워드가 일치하지 않습니다. ')

    name = input('이름: ')

    while True: 
        birth_date = input('생년월일(6자리): ')
        if len(birth_date) == 6:
            break
        else:
            print('생년월일 입력값이 올바르지 않습니다.')

    email = input('이메일: ')

특이점은 사용자의 생년월일이 만약 6자리가 아니라면 생년월일 입력문을 반복해 출력한다는 점 입니다.

③ 실습 2 회원가입프로그램(3)

이를 통해 완성할 수 있습니다. 입력한 정보를 모아서 회원가입에 성공했다는 문구를 출력합니다.

    user['username'] = username
    user['password'] = password
    user['name'] = name
    user['birth_date'] = birth_date
    user['email'] = email


    users.append(user)
    print(users)

    print("----------------------------")
    print(f" {user['name']}   님, 가입을 환영합니다!")
    print("----------------------------")

    print('회원가입을 추가로 진행하시겠습니까? \n y:진행    n:취소')
    register_another_input = input('>>> ')
    register_another_input = register_another_input.lower()

    if register_another_input == 'y':
        pass
    elif register_another_input == 'n':
        exit()

이상으로 회원가입에 대한 간단한 프로그램입니다.!

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 8 : Python Next Level - 함수, 모듈 *✨ 입니다.

① 함수 (1)

function 함수는 매개변수와 인자로 이루어진 것으로, 여러 프로그램에 걸쳐서 사용할 수 있어 효율적이다.

혼동하기 쉬운 매개변수와 인자의 구분은 아래와 같은데, 예시를 통해서 자세히 살펴보자

매개변수(파라미터) ; 함수 정의에 쓰인 것 인자 (인수) ; 함수 실행시 들어간 값

먼저 파라미터의 예시는 다음과 같다

def print_name(name):      #함수 선언, name은 파라미터
    print(f'이름은 {name}입니다')     


# "김**", "김멋사" 는 인자(인수)이다.
print_name("김**") 
print_name("김멋사") 



>>> 이름은 김**입니다
>>> 이름은 김멋사입니다

다음으로 인자의 예시는 다음과 같다

def print_ex_string():
    print('예시 문자열 입니다. ')

print_ex_string()       # 만든 함수 콜   




>>> 예시 문자열입니다. 

그 외에도 여러개의 인자를 넣을 수 있는데, 예시는 아래와 같다.

def print_name_age(name, age):      #함수 선언, name은 파라미터
    print(f'이름은 {name}이고, 나이는 {age}살 입니다')


print_name_age("김멋사", "33")
# print_name_age() # 인자가 없으면 오류난다. 





>>> 이름은 김지민이고, 나이는 33살입니다. 

② 함수 (2)

함수를 응용한 또다른 예시를 살펴보자. 기본값을 함수에 내장시켜두면, 출력시 인자가 없을 때 이를 불러온다. 인자가 있다면, 작성된 인자를 우선한다.

만약 인자의 변수명에 대입을 한다면, 인자의 구성 순서가 바뀌어도 괜찮다.

def order_coffee(qty, option='hot'):
    print(f'{qty}잔 / {option}')

order_coffee(3, 'iced')     # 다른 겂
order_coffee(3)             # 기본 값 출력
order_coffee(option='iced', qty=5)      # 각각 선언을 한다면 순서 바꿔도 괜찮다.




>>> 3잔 / iced
>>> 3잔 / hot
>>> 5잔 / iced

③ 함수 (3)

함수 안에 if 문을 넣어 구성할 수 있다.

그리고 return 문을 주어 선언하고자 하는 데이터를 정해주어야 한다.

def get_id(email):

    if email.endswith('@test.com'):
        email_id = email.removesuffix('@test.com')
        print(email_id)
        return email_id         # 반한하고자 하는 데이터를 정해주어야 함
    else:
        print('처리할 수 없는 이메일 주소입니다.')

user_id = get_id('user@duksung.com')
print(user_id)
user_id = get_id('user@test.com')
print(user_id)




>>> 처리할 수 없는 이메일 주소입니다.    
>>> None
>>> user
>>> user

④ 함수 - 모듈

만든 함수를 다른 파일에 작성해도, 여러 파일에서 해당 함수를 불러와 사용할 수 있다.

파일 두 개가 있다 가정해보자. 첫 번째 파일은 id_getter.py이며, 여기에서 사용할 함수를 정의한다. 두 번째 파일은 ex01.py이며, 여기에서 함수를 불러와 사용한다.

# id_getter.py

def get_id(email):

    if email.endswith('@test.com'):
        email_id = email.removesuffix('@test.com')
        print(email_id)
        return email_id         # 반한하고자 하는 데이터를 정해주어야 함
    else:
        print('처리할 수 없는 이메일 주소입니다.')

만든 함수를 사용할 ex01.py 파일은 아래와 같으며, 실행하면 다음과 같은 결과가 나온다.

# ex01.py

from id_getter import get_id
user_id = get_id('user@test.com')
print(user_id)



>>> user
>>> user

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 6 : Python Beginner - 조건문과 반복문 *✨ 입니다.

① 조건문 (1)

if 문은 대표적인 조건문이다. if 다음에 오는 것이 true이면 그 아랫줄을 실행한다.

else는 if 의 조건에 해당하는 것을 제외하는 경우에 대해서 실행할 명령어를 알려준다.

if True:        # 콜론이 기준이 된다.
    print("True")       # 들여쓰기를 해야한다
else:
    print("False")


if 4>3:
    print("a")
else:
    print("b")



>>> True
>>> a

변수를 포함해 사용자의 입력에 따라 결과가 달라지는 if 문은 아래와 같다.

#입력값을 int로 처리 
value = input("값을 입력해주세요: ")

 if int(value) > 10:      # 문자열로 출력되기에 숫자로 변환해야함
     print("a")
 else:
     print("b")



>>> 값을 입력해주세요:  11
>>> a 

다른 사례로, 숫자가 아닌 문자열로 이를 작성할 수 있다.

value = input("값을 입력해주세요: ")

value = value.upper()

if value == "INFP":
    print("INFP")    
else:
    print("nothing")


>>> 값을 입력해주세요: infp
>>> INFP

② 조건문(2)

elif 를 통해서 조금 변형된 조건문을 만들 수 있다.

day = input("요일을 입력해주세요(0~6): ")
if day == "0":
    print("휴무")
elif day == "6":
    print("단축영업")
elif day == "1":
    print("연장영업")
elif day == "3":
    print("암튼 휴일로 해")
else:
    print("정상영업")



>>> 요일을 입력해주세요(0~6): 1
>>> 연장영업

③ 반복문(1) loops

for 문을 통해서 반복문을 작성할 수 있다.

변수 두 개를 설정해 특정 범위를 조건으로 가질 때 반복하는 if 문을 살펴보자.

i = 0

for i in range(1, 101):   #1   부터 100 번까지 반복
    print(i)


>>> 1
>>> 2
...
>>> 99
>>> 100

변수 두 개를 통해서 1 씩 추가된 값을 출력하는 결과를 살펴보자

i = 0
sum = 0

for i in  range(1, 101):
    sum = sum + i

print(sum)  # 1 부터 100 까지 더한 값



>>> 5050

④ 반복문(2) while

while 문 또한 반복문이다. 이를 통해 무한반복과, 조건을 만족할 경우만 반복하는 경우 두 가지를 표현할 수 있다.

먼저 무한반복은 아래와 같다. 'while' 이후 값이 true 라면 다음 줄에 오는 명령을 반복하는 것이다.

 while True:
     print("while loop")

>>> True
>>> True
>>> True
>>> True
>>> True
>>> True
...

다음으로 조건에 의한 반복문이다. 변수를 초깃값과 함께 선언해주고, 이 변수에 1 씩 더하되, 100보다 작을 때 까지만 반복해 print선언과 덧셈을 반복한다.

progress = 0

while progress < 100:
    progress = progress + 1
    print(f"{progress}% completed")



>>> 1% completed
>>> 2% completed
...
>>> 99% completed
>>> 100% completed

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 5 : Python Beginner - 변수와 자료형 *✨ 입니다.

① 변수와 자료형 - 변수 선언

VSCODE를 편집기로 이용해서, 실습을 진행한다.

.py 확장자로 작성한 파일을 실행하면, 터미널에서 해당 결과가 출력된 것을 확인할 수 있다.

변수 : 데이터가 담기는 공간

코드를 통해 실습을 진행할 수 있다.

print("안녕하세요 :)")



출력결과>>> _안녕하세요 :)_

만약 터미널에서 한글이 깨진다면! 'code runner' 이라는 확장 프로그램 설치 후, 해당 프로그램의 설정에 들어가 'run in terminer' 에 체크표시를 해주면 된다!

변수를 이용해보자.

변수는 데이터를 변경해서 할당 할 수 있는 공간

print("안녕하세요 :)")
#  greeting 이라는 변수 선언
#  이 변수에 문자열 값을 할당
greeting = "안녕하세요 :)"

print(greeting)

>>> _안녕하세요 :)_

그렇다면, 만약 중간에 변수 값이 바뀐다면 어떨까?

greeting = "반갑습니다 :)"
print(greeting)

>>> 반갑습니다 :)

변수는, 데이터가 변할 수 있는, 데이터를 언제든 담고 꺼낼 수 있는 공간이다.

② 변수와 자료형 - 변수 선언 시 주의 사항

함수 혹은 변수를 선언하는데 각각의 언어는 규칙이 있다. 관습적인 것과 프로그램 상 정해진 규칙이 있다. 이를 명명규칙이라 부른다. 여기에 여섯 개의 주의사항이 있다.

*첫 번째 *: 변수 사이 공백 허용 X

gree ting = "안녕하세요"

>>> error!

두 번째 : 변수 사이는 _(언더스코어) 이용

my_greeting = "안녕하세요"

세 번째 : 변수를 선언하기 위한 문자열은 숫자/특수문자로 시작 불가

greeting_1 = "안녕"
1_greeting = "hihi"      >>> error
!_greeting = "hello"     >>> error

*네 번째 *: 예약어 (프로그램에 이미 내부적으로 저장된 함수.)는 변수로 선언 불가

print = "안녕하시오"

print(print)        >>> error

다섯 번째 : 가급적 소문자 사용

여섯 번째 : 오타 주의

③ 변수와 자료형 - 문자열 (1)

문자열 string = 문자의 나열

city = "seoul"      # Seoul, SEOUL, SEouL 
print(city)



>>> seoul

대문자로 출력하고 싶다면 upper() 이용한다

city.upper()
print(city.upper())

city = city.upper()
print(city)         # 대문자로 변형된 데이터가 대입되어 출력



>>> SEOUL
>>> SEOUL

소문자로 출력하고 싶다면 lower() 이용한다

city.lower()
print(city.lower())

city = city.lower()
print(city)         # 소문자로 변경된 데이터가 데입되어 출력


>>> seoul
>>> seoul

공백을 제거하고 싶다면 rstrip(), lstrip() 을 통해서 우측과 좌측 공백을 제거한다.

occupation = "      developer       " # 공백 하나하나 문자다
print(occupation)

occupation.rstrip()
print(occupation.rstrip()) # 우측 공백 제거

occupation.lstrip()
print(occupation.lstrip()) # 좌측 공백 제거 



>>>      developer       
>>>      developer
>>>developer      

문자열의 개행과 탭의 구분은 각각 \n, \t 이다. 그냥 엔터 친다고 해결 안된다.

print("INFP ENFP INTP ESTJ")
 print("INFP    
       ENFP 
       INTP 
       ESTJ")
print("INFP\nENFP\nINTP\nESTJ")  #개행
print("INFP\tENFP\tINTP\tESTJ")  # tab



>>> NFP ENFP INTP ESTJ
>>> error
>>> INFP
    ENFP
    INTP
    ESTJ
>>> INFP    ENFP    INTP    ESTJ

④ 변수와 자료형 - 문자열 (2)

removeprefix() 를 통해서 기존 변수에 할당된 데이터 값의 일부를 삭제할 수 있다.

score = "점수:90"
print(score.removeprefix("점수:"))


score_2 = "75점"
print(score_2.removesuffix("점")) 



>>> 90
>>> 75

replace() 를 이용해서 기존 변수에 할당된 데이터 값의 일부를 다른 값으로 교체할 수 있다.

city ="서울 중구"
print(city)
print(city.replace("서울", "서울시"))



>>> 서울 중구 
>>> 서울시 중구 

⑤ 변수와 자료형 - 문자열 (3)

데이터가 여러개이고, 그 중 일부만 골라서 출력해야하는 상황에서는 모든 데이터를 print값 안에 적은 것 - 하드코딩 - 이 힘든 경우가 있다.

이러한 상황에서 쓸 수 있는 것은 바로 print() 문 안에 f 를 넣어, 변수도 변수의 데이터값으로 출력할 수 있는 구조이다. 아래 예시를 통해 살펴보자.

si_1 = "용인"
gu_1 = "기흥"
address_1 = f"{si_1}시  {gu_1}구"

si_2 = "서울"
gu_2 = "종로"


print(address_1)
print(f"{si_1}시  {gu_1}구")  #(시의이름)시 (구의이름)구
print("용인시  기흥구")
print(f"{si_2}시  {gu_2}구")  #(시의이름)시 (구의이름)구



>>> 용인시  기흥구
>>> 용인시  기흥구
>>> 용인시  기흥구
>>> 서울시  종로구

⑥ 변수와 자료형 - 숫자 (1)

숫자의 사칙연산은 파이썬에서 +, -, *, / 으로 표현할 수 있다. 그 밖에 제곱승이나 괄호로 연산 순서를 결정할 수 있으며, //, % 등의 기호도 있다.

a = 2
b = 3

print(a + b)
print(a - b)
print(a * b)
print(a / b)        # 몫 아님

print(a ** b)       # 제곱승

print((a+b) * b)

print(a // b)       # 몫
print(a % b)        # 나머지



>>> 5
>>> -1
>>> 6
>>> 0.6666666666666666

>>> 8
>>> 15

>>> 0
>>> 2

실수(float)와 실수 간의 연산과 정수와 실수 간의 연산에 대해서 알아보자

x = 0.6
y = 0.3
z = 1

print("실수와 실수의 연산 -> 실수로 나타난다")
print(x + y)
print(x - y)
print(x * y)
print(x / y)

print("실수와 정수의 연산 -> 실수로 나타난다")
print(x + z)
print(x - z)
print(x * z)
print(x / z)



>>> 실수와 실수의 연산 -> 실수로 나타난다
>>> 0.8999999999999999
>>> 0.3
>>> 0.18
>>> 2.0

>>> 실수와 정수의 연산 -> 실수로 나타난다
>>> 1.6
>>> -0.4
>>> 0.6
>>> 0.6

실수와 연산하는 수는 그 결과가 모두 실수이다.

⑦ 변수와 자료형 - 숫자 (2)

숫자의 세 번째 자리마다 언더스코어를 넣어 표기할 수 있다. 출력값에서 _ 는 생략된다.

price = 123_900_000_000  
print(price)            


>>> 123900000000

상수 contants는 다른 데이터가 덮어쓰기를 하면 마지막 대입값이 출력되므로 주의해야 한다.

PI = 3.141592       # 다른 데이터 덮어쓰기 하면 X

PI = 1.23           # 이런식으로 작성 X

print(PI) 



>>> 1.23

⑧ 변수와 자료형 - 숫자 (3)

문자열-숫자간 변환에 대해서 알아보자면, 문자열과 숫자를 컴퓨터는 동일한 값으로 생각하지 않는다.

a = 100
b = "100"
# 위의 두 값을 컴퓨터는 동일한 100으로 인식하지 않는다. 
c = "0.456"

a = str(a)  # 숫자를 문자열로
b = int(b)  # 문자열을 숫자로 
c = float(c) # 숫자로 . 데이터가 동일한지 비교할 때 유용하다.



>>> 100
>>> 100
>>> 0.456

⑨ 변수와 자료형 - 논리형(부울)

논리형 데이터 bool, boolean에 대해서 알아보자. 그 결과는 두 가지로, True, False인데 꼭 대문자로 시작한다.

print(3>2)
print(3==3)
print(3==3.0)
print(3 is 3.0)    # 데이터형 구분. 정수와 실수라서 False 결과 나옴


>>> True
>>> True
>>> True
>>> False

⑩ 변수와 자료형 - 명령 프롬프트

명령프롬포트 prompt를 만들어 콘솔창에서 간단히 사용자의 데이터를 수집할 수 있다.

input("설치를 계속 진행하시겠습니까? (y/n):     ") 


>>> 설치를 계속 진행하시겠습니까? (y/n): 

사용자의 데이터 받기, 할당하기, 출력하기 3단계를 아래의 예시를 통해 확인할 수 있다.

text = input("출력할 텍스트를 입력해보세요:     ")
print(text)



>>> 출력할 텍스트를 입력해보세요:    **집가고싶어요**
>>> **집가고싶어요**

⑪ 변수와 자료형 - 주석

주석 comments의 종류는 두 가지가 있다. 첫 번째로 한 줄 주석인데, 이는 # 기호를 문장 맨 앞에 붙여 사용한다.

#주석입니다

두 번째는 여러줄 주석인데, """ 와 """ 사이에 내용을 적어 주석을 표현한다.

"""
여러줄 주석입니다. 
여러줄 주석입니다. 
여러줄 주석입니다. 
print("test")

"""



>>>

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 3 : Python 개발 환경 세팅 *✨ 입니다.

① python 버전

파이썬은 https://www.python.org/ 에서 다운받을 수 있다.

최신 버전을 다운받는 것이 좋은데, 너무 최신은 최적화 등에 버그가 있을 수 있으므로 이전 버전 등의 다운을 추천한다고 한다.

② python 가상 환경 및 pipenv 활용

cmd, cmder, powershell 등의 터미널에서 가상환경을 설정할 수 있다.

pip는 공구상자같은 느낌이고, pipenv는 그 속에 들어있는 드라이버이다. pip의 설치가 선행되어야 한다.

pip를 설치하고, 최신버전으로 업그레이드 등을 하기 위해 아래의 코드를 작성한다.

pip install --upgrade pip

혹시 pip가 이미 설치되어있다면, pipenv가 있는지 확인하기 위해서

pip list

이를 입력한다.

만약 없다면, pipenv를 설치해준다.

pip install pipenv

이후, 프로젝트 실습을 진행할 디렉토리의 위치에서 가상환경을 실행할텐데, 이를 위해서 python 버전을 알고있어야 한다.

python--version

해당 디렉토리 위치로 이동한 후, pyhton이 실행되지 않은 상태에서

pipenv --python 3.x

마지막에 자신의 파이썬 버전을 넣어서 실행한다.

혹은

pipenv install python-dotenv

이를 통해 실행한다.

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 2 : python의 등장과 발전 *✨ 입니다.

① python의 등장

2000년대로 오며, 3.x 버전으로 바뀐다.

완전 다른 언어처럼 작용될 정도로 이전 버전과 호환에 충돌이 잦았고, 3.x버전이 최근 많이 사용된다. (일부 api 제외 - 맥 등)

flack, 등 다양한 api 공개

python, sdkitlearn, keras 등 통계나 데이터분석, 인공지능 등에서 필수적인 분야로 환영받고 있다.

② python 언어의 특징

인터프리터 언어이다.

java의 경우, 소스코드를 컴파일러가 바이트코드로 변환 후, jvm 에서 실행 - 빌드/컴파일 과정이 필수로 필요하다.

python의 경우 별도의 이진수 등으로 변환하는 과정이 필요하지 않다. 파이썬 인터프리터만 있으면 실행결과를 볼 수 있다.

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]백엔드 파이썬 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨*챕터 1 : Intro Python 시작하기 *✨ 입니다.

앞으로 진행될 내용에 대해 간단히 설명했는데요, 이는 아래와 같습니다.

python

python 을 토대로 django rest framework를 통한 api만들기

만약 해당 강의내용에 대한 이해가 부족하다면 따로 또 시간을 들여서라도 복습을 하고 넘어가길 추천한다고 합니다.

테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 11 : 웹페이지 구성하기✨ 입니다.

① 레이아웃 개요

• nav

• header

• section

  • article

• footer

② header 작성

vscode를 편집기로 작성을 시작한다. !느낌표 + enter을 통해 자동으로 html파일 기본 구성 작성을 마칠 수 있다. 그밖에 googlefont, fontawsome을 사용하기 위한 추가 코드들 header부분에 작성해 준비를 마쳐 준다.

필자의 경우 선택한 폰트 등이 강의와 조금 달라 아래와 같은 코드로 작성했다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃</title>
    <link rel="stylesheet" href="./stylesheet.css">

    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@500&display=swap" rel="stylesheet">
    <!-- fontawesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>

③ body - nav 작성

이와 같은 이미지를 만들기 위해서 html파일의 네비게이션 영역과 css 파일의 코드를 수정했다.

먼저 html 파일의 코드는 아래와 같다.

<body>
    <nav>
        <div class="container">
            <h1 class="nav-logo"><a href="./index.html"><i class="fas fa-star">Layout</i></a></h1>
            <div class="nav-menu">
                <ul class="nav-btn">
                    <li><a href="./index.html">홈</a></li>
                    <li><a href="#">소개</a></li>
                    <li><a href="https://techit.education/">Techit</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

그리고 css 코드는 아래와 같다.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Sunflower', sans-serif;
}

a:link, a:visited {
    text-decoration: none;
    color: black;
}

.container {
    width: 960px;
    margin: 0 auto;
}

nav {
    height: 80px;
    background-color: rosybrown;
    line-height: 80px;
}

nav::after {        //layout과 '홈' 내용 그 사이에 공간을 만들어 고정시키기
    content: "";
    display: block;
    clear: both;
}

.nav-logo {
    font-size: 50px;
    float: left;
    margin: 0;
}

.nav-menu {
    float: right;
}

.nav-btn {
    list-style-type: none;
    margin: 0;
}

ul.nav-btn > li {
    float: left;
    margin-left: 20px;
    font-size: 25px;
    margin-top: 10px;
}

④ body - header 작성

위와 같은 결과를 만들기 위해서 네비게이션바에 이어서 헤더 부분을 수정했다. 아래는 수정한 html 코드이다.

  <header class="hd">
        <div class="container">
            <h2 class="hd-title">POSSIVILITY TO REALITY!</h2>
            <p class="hd-content">여러분을 응원합니다!</p>
        </div>
  </header>

아래는 수정한 css 파일이다.

/* 헤더 */
.hd {
    position: relative;
    height: 600px;
    text-align: center;
}

.hd-title {
    font-size: 80px;
    margin-top: 0;
    margin-bottom: 30px;
    padding-top: 200px;
}

.hd-content {
    font-size: 25px;
}

.hd::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8; /* 불투명도 */      
    background-image: url(./test5.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hd .container {
    position: relative;
}

opacity 값을 수정해 배경에 불투명도를 덧씌운다는 점이 특징이다.

⑤ body - section 작성

세 개로 구분된 섹션 부분을 작성하기 위해 수정한 코드이다. 아래는 완성하고자 하는 이미지이다.

이는 수정한 html 코드이다.

    <section class="sec">
        <div class="container">
            <article class="artc">
                <div class="card-img">
                    <img src="./test1.jpg" alt="이미지1">
                </div>
                <p>이미지1</p>
            </article>

            <article class="artc">
                <div class="card-img">
                    <img src="./test2.jpg" alt="이미지2">
                </div>
                <p>이미지2</p>
            </article>

            <article class="artc">
                <div class="card-img">
                    <img src="./test3.jpg" alt="이미지3">
                </div>
                <p>이미지3</p>
            </article>
        </div>
    </section>

아래는 수정한 css 코드이다.

/* section */

.sec {
    text-align: center;
    padding: 100px 0;
    background-color: peachpuff;
}

.sec article {
    float: left;
    width: 300px;
    margin-right: 30px;
}

.sec article:last-child {
    margin-right: 0;
}

.sec article img {
    width: 100%;
    height: auto;
}

.card-img {
    overflow: hidden;
    height: 300px;
    width: 300px;
}

.sec::after {
    content: "";
    display: block;
    clear: both;
}

위의 이미지는 가로 세로를 300px로 만들어 자른 것이다. 그런데 원본 이미지의 크기가 300px이 안될 경우, 첨부한 사진과 같이 비어있는 부분이 생기기도 한다.

⑥ body - footer 작성

특히 마지막 부분에 주목해서 본다면, footer 부분을 수정해 작성했다.

html 부분에 추가한 코드는 아래와 같다.

    <footer class="ft">
        <div class="container">
            <p>&copy; 2023 JIMIN. ALL RIGHT RESERVED. </p>
        </div>
    </footer>

css 부분에 추가한 코드는 아래와 같다.

 /* footer */
.ft {
    padding: 15px;
    text-align: center;
    background-color: palevioletred;
}

하나하나 내가 작성한 코드가 바로바로 반영되어 시각적으로 보이는 것이 재미있고, 흥미롭다.

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 10 : CSS 외부 리소스 적용해보기✨ 입니다.

① Google Fonts

html과 css 파일을 통해서 폰트 및 스타일을 설정할 수 있다. 아래와 같은 코드로 기본 예시 사례를 설정할 수 있다.

구글폰트에서는 다양한 폰트를 제공한다.

이와 같이 원하는 폰트를 찾아서, To embed a font, copy the code into the of your html 하위의 내용을 복사해 각각 html파일과 css 파일에 넣어 원하는 폰트를 사용할 수 있다. 아래는 사용 사례이다.

② Fonts Awsome

폰트어썸에서 여러 아이콘을 가져와 이용할 수 있다.

위의 그림은 애플과 링크드인 아이콘을 가져온 예시이다. 색상도 변경할 수 있다.

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 9 : CSS Next Level✨ 입니다.

① Float

Float :

자식요소가 부모요소로부터 떠오르다. margin을 없애버리다.

div는 블록 요소를 잘 가지고 있는 태그다.

부모요소 하위에 자식태그를 생성하면, 자식요소의 width값 자체가 바뀌는 것이 아니라, 부모 요소의 width 값만큼 margin이 생긴다.

float1 속성을 부여하게 되면, 가지고 있던 부모의 width 값 만큼의 마진값이 사라진다. 분홍색 박스를 보면, 우측의 값이 사라지고, 하단에 있던 것이 float1 아래 하위로 들어와 겹쳐저 다른 층으로 온다.

따라서 겹쳐지지 않도록 하기 위해서는, float1, float2 둘 다 float 속성을 부여해 층을 동일하게 해주면 된다. 만약 좌측이 아니라 우측에 배치하고싶다면, 해당 속성도 바꾸어주면 된다.

② Clear

조금 전에 관찰한 분홍색 박스와 파란색 박스 두 개를 볼 때, 분홍색 박스 하나에만 float를 설정하면 그 아래로 파란색 박스가 겹쳐지는 문제점이 있었다.

이를 해결하기 위해서, 모든 요소에 float를 설정하는 것 말고도, 아래의 파란색 박스에 clear 속성을 부여하는 방법이 있다.

이를 이용하면 그대로 자신의 위치를 효과를 가진다.

주의할 점은, 파란색 요소와 빨간색 요소가 둘 다 위치(right, left)가 같아야 한다는 점이다.

Clearfix :

clear 속성으로 layout을 바로잡는 속성이다. 콘텐츠가 범람하는 부분에 이를 적용하면, layout을 조정해 조절할 수 있다.

작성 방법은 아래와 같다.

(범람을 막고싶은 요소)::after {
    content: "";
    display: block;
    clear: both;
}    

③ Flex

가로 및 세로 배치 방법에 대해서 많은 고민이 있었는데, 이를 해결하기 위해서 flexbox라는 해결책이 나왔다.

flex container :

{display:flex;}가 선언된 부모 요소이다. 이를 적용하면, 모든 자식요소에 float가 적용된 효과를 받을 수 있다.

❕ 만약, 자식요소가 여러개이고, 각 요소가 동일한 간격을 가지게 하고싶다면,

{justify-content: space-between;}

위와 같은 코드를 작성하면 된다.

④ Position

static :

모든 요소가 가지는 디폴트 값이다. 생성된 일반적인 위치를 의미한다.

relative :

원래 위치를 기준으로 얼마만큼 위치를 이동시킬 것인지를 의미한다. left, right, top, bottom 등으로 px 단위로 나타낼 수 있다.

absolute :

position이 static이 아닌 가장 가까운 부모를 기준으로 한다. body를 기준으로 위치를 움직이므로, margin 등에 영향을 받지 않는다. 하지만 부모요소를 1순위로 보고, 이를 기준으로 위치만 변경된다.

fixed :

브라우저 창을 기준으로 고정된 위치를 의미한다. position을 fixed로 두고, bottom, right 등의 값을 정해두면 해당 위치에 고정되어있다.

sticky :

스크롤로 특정 위치에 도달하면 보이는 것을 의미한다. 이후 더이상 스크롤에 의해 움직이지 않는다.

⑤ Grid

grid :

열이 12개이고 행이 무한한 바둑판을 css에서 의미한다. 페이지에서의 가이드라인이다. 정렬된 구조에서 오는 안정감을 제공한다.

container :

grid system이 적용될 영역이다.

row :

행, 가로부분이다. float 된 column이다.

column :

열, 세로부분이다. 요소의 위치 결정에서 실질적인 역할을 수행한다.

guttuer :

row와 column 사이의 간격을 의미한다. 한 column 양 옆의 마진이 gutter을 구분한다.

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396

테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 8 : CSS Beginner✨ 입니다.

① CSS 적용

css파일을 html파일에 연결하는 과정이 필요하다.

헤드 태그 안에 link 태그로 작성해주는 과정이다.

<link rel="stylesheet" href="css 파일의 위치">

파일의 위치 ./ ➡ 같은 해당 파일과 같은 위치에 있을 때를 의미한다. ../ ➡ 해당 파일의 상위에 있음을 의미한다.

② CSS 구성 (1)

box-sizing :

박스에 적용된 사이즈의 기준 정하기이다.

브라우저에서 자동으로 설정해 띄워준다.

content-box :

요소 사이즈에 패딩과 테두리를 포함하지 않는다. 처음 계획했던 값보다 박스 값이 커지는 현상이 발생한다. 실제로 보여지는 길이에는 패딩이 포함되기 때문이다.

border-box :

요소 사이즈에 패딩과 테두리의 길이와 높이를 포함한다. 사용자가 설정한 값이 박스와 패딩값을 포함한 값으로 인식한다. 패딩사이즈로 인해 외곡되는 현상을 방지할 수 있다.

③ CSS 구성 (2)

규칙 rule :

선택자부터 속성, 값 까지 모두 합친 하나의 블록을 의미한다.

선택자 selector :

어떤 html 요소에 스타일을 적용할 지 선택한다. 부여하는 속성의 주체값-태그-를 의미한다.

속성 property :

스타일을 부여할 항목을 의미한다.

값 :

속성에 해당되는 특성의 값을 의미한다. px일 수도, color일수도 있다.

선언 declaration :

속성과 값을 합한 부분이다.

❔ 어떤 요소에 스타일링을 적용할까?

아래는 예시를 위해 작성된 html 코드이다.

<h1>모두를 위한 코딩 강의 - 테킷</h1>
<div>
    <p class="student">피눈물나는 코딩</p>
    <h2 class="student">멋쟁이사자처름 스쿨</h2>
    <h2 class="original">오리지널 클래스</h2>j
</div>

이를 바탕으로 css 파일의 코드를 작성할 수 있다.

* universal :

모든 요소 전체를 의미한다. 가급적 사용하지 않는다.

여러 종류의 태그에 적용

h2, p {
...
}

이와 같이 선택자 부분에 여러 태그를 작성할 수 있다.

특정 클래스에 해당되는 요소에 적용

.student {
...
}

특정 태그하위의 class 에 해당 css를 적용한다. 태그가 달라도 괜찮다.

h2.student {
...
}

특정 태그 하위에 여러 class 중 특정 class에 대해서만 css를 적용할 수 있다.

특정 아이디에 해당되는 요소에 적용

#original {
...
}

특정 아이디일 경우에는 #를 이용해서 활용한다.

#

id 를 나타낼 때 사용한다

.

class 를 나타낼 때 사용한다

부모 요소 내 특정 자식요소

div p {
...
}

div 라는 태그 내 자식요소인 p 태그를 의미할 때는 스페이스를 이용한다.

주석

/* ... */

④ CSS 특성

동일 태그 규칙이 중복 작성 ➡ 마지막에 작성된 규칙 적용

부모 태그 규칙 적용 ➡ 자식 요소에 동일 규칙 적용

부모 태그 규칙과 자식 요소에 다른 규칙 적용 ➡ 자식 요소의 규칙으로 적용

html 파일 자체에 스타일요소에 규칙을 줄 수 있다.

하지만 추후 유지보수 과정에서 힘들어지기때문에, css 파일에서 변화를 주는 것을 추천한다.

⑤ Box Model

디스플레이 속성으로 inline, block, inline-block 등이 있다.

inline

자기 자신의 영역 만큼만 콘텐츠에 변화를 준다. 한 줄에 이어서 표시된다. 좌우의 마진이나 패딩값은 설정 가능하나, 상하의 경우에는 변화가 불가능하다.

<a> <img> <span>

block

자기 자긴의 부모만큼의 넓이를 가진다. 개별요소마다 줄을 바꾼다. width와 height로 요소의 크기를 조절할 수 있다. 내용과 별개로 자신의 영역을 가진다.

block 가지지만, inline 가지지 못하는 것

• width, height (상하 padding은 레이아웃에 적용x
• margin, padding (inline은 좌우만 적용)

inline-block

inline과 block의 절충안이다. 두 가지의 특징을 모두 가진다. 줄을 바꾸지 않는다 width, height를 가지고 margin과 padding 또한 가진다.

box-model

margin

상하좌우 각각 스페이스값으로 분리해 다른 값을 적용할 수도 있고, 전체에 동일한 값으로 견화를 줄 수 있다.

margin: 상 우 하 좌 ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

위 와 같은 순서로, 윗쪽부터 시계방향으로 이동해 값을 설정할 수 있다.

border

하나의 속성에 두께, 유형, 색상을 적용할 수 있다.

border: 두께 유형 색상;
border-width: ;
border-type: ;
border-color: ;

padding

하나의 속성에 위쪽부터 시계방향으로 이동해 값을 부여한다.

padding: 상 우 하 좌 ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

⑥ Box sizing

박스에 적용된 사이즈의 기준을 정하는 방법

② CSS 구성 (1) 과 동일한 내용이다

⑦ CSS 단위

px

스크린을 구성하는 작은 점인 pixcel을 기준이다.

%

부모요소를 기준으로 크기를 결정한다.

em/rem

폰트 크기에 비례해서 크기를 결정한다. 상위요소에 em 혹은 rem 값을 곱해서 결정한다.

em

부모요소의 폰트 크기를 기준으로

rem

루트 요소-html의 폰트 크기를 기준으로

vw/vh

내가 보고있는 브라우저 영역을 가득채워 만든다. 스크롤로 하단의 컨텐츠로 이동한다.

vw

각 디바이스별 화면의 너비/높이를 기준으로 %를 차지하도록

⑧ 이미지 다루기

코드에 이미지를 담는 코드는 아래와 같다.

  <div>
    <img
         src="이미지 경로"
         alf="이미가 정상적으로 보이지 않을 경우 보일 문구"
     >
  </div>

이미지의 크기 등을 css 파일에서 조정할 수 있다.

• 이미지가 화면 크기에서 벗어나지 않도록 하고싶다면 :

      img {
          max-width: 100%;
      }

• 이미지를 부모요소 영역의 가운대로 확대/축소 하고싶다면 :

      img {
          objec-fit: cover;
      }

• 이미지의 비율을 지키면서 부모요소 영역의 가운대로 확대/축소 하고싶다면 :

      img {
          objec-fit: contain;
      }

• 이미지의 비율을 유지하지 않고 부모요소 크기에 맞춰 변경해 채우고 싶다면 :

      img {
          objec-fit: fill;
      }
  

---

# ⑨ Overflow

* scroll을 속성값으로 주어 웹 페이지에 가로/세로로 스크롤을 제공할 수 있다.
scroll-x로 가로부분만 보이도록, scroll-y로 세로 부분만 보이도록 만들 수 있다.

* auto 로 브라우저가 자체 스크린 크기에 맞춰서 알아서 스크롤을 보이도록 만들 수 있다.


---
# ⑩ 폰트 꾸미기

### color: ;
16진수의 숫자로 조합해 #000000 등으로 내타낸다

### font-size: 10px;
px 단위로 나타낼 수 있다.

### font-style: ;
italic 으로 기울임을 나타낼 수 있다.

### font-weight: ;
100~900 으로 100 단위로 thin 부터 black 으로 폰트의 두께를 바꿀 수 있다.

### text-decoration: ;
밑줄을 제거하고 싶다면 none 값을 부여하면 된다.
> #### a:link { color: ;} 
클릭한 적 없는 링크를 표현할 수 있다.

> #### a:visited { color: black; } 
클릭해 방문한 적있는 링크를 표현할 수 있다.






---
# ⑪ 테두리 꾸미기

border 속성에 두께, 스타일, 색상 값을 부여해 테두리를 꾸밀 수 있다.

> border-radius
특정 각도로 둥글게 깎을 수 있다.


---
# ⑫ 배경 이미지 설정 

### background-color
배경 색상을 블록 전체에 부여한다.

### background-image: url(이미지 경로);
기본값은 바둑판식 채우기이다.
> background-repeat: no-repeat;
단일 이미지를 꽉 채우고 싶다면 

> background-size
>>: contain;
이미지가 온전히 표시되는 것이 우선된다면
>>: cover;
요소의 배경을 모두 덮고 싶다면

> background-position: center;
이미지를 가운데 배치시키고 싶다면


❕ 이미지를 레이아웃에 맞는 해상도로 크롭해서 사용하는 것이 제일 좋다




---
# ⑬ 요소 정렬하기 

###  요소를 위로 맞추되 가운데 정렬

    margin: 0 auto;

부모 block요소의 width를 기준으로 자동 margin 계산 (단, 부모가 width 요소값이 존재해야 한다.)


### 이미지 및 텍스트의 인라인 요소를 블록 요소 내 가운데 정렬

    text-align: center;

부모 요소가 block이고 자식 요소가 inline이다.







---
더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396 

테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.

멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.

이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 6 : HTML Beginner✨ 입니다.

① HTML 구성

HyperTextg Markup Language, 즉 다른 페이지로 이동하는 링크를 제공할 수 있을 뿐 아니라 텍스트에 제목, 내용 등을 구분하는 역할-태그를 통해 텍스트에 생명을 불어넣는 역할을 한다.

Mark UP :

마크업 작업을 통해 태그를 넣어 문장의 의미나 쓰임을 결정해준다.

<p class\>멋쟁이사자처럼 입니다 :) </p>

태그와 내용으로 구성되어있습니다.

여기에 아래와 같이 속성이름="속성값"을 추가해 수정할 수 있습니다.

<p class="memo">멋쟁이사자처럼 입니다 :) </p>

주석 :

작성되어있는 코드이지만, 실제 프로그래밍에는 포함되지 않는 코드

Boilerpalte :

반복적인 코드 등의 구성을 의미한다.

② HTML

html 문서에 대한 설정 정보 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="URF-8"> //인코딩 방식
  <meta http-eqiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 기기마다 다른 브라우저 크기 조정
  <title>Title</title> // 브라우저의 탭 제목
</head>
<body>

</body>
</html>

head :

웹 문서의 인코딩 설정 값이나 외부에서 가져오는 값 자체에 대한 정보

③ 블록 요소와 인라인 요소

Block Element :

태그 자체에서 면을 차지하는 요소이다.

  <h1> <h2> <div>   

Inline Element :

선을 나누는 요소이다.

 <a> <span>

④ HTML

<body> :

실제 브라우저에서 보이는 내용에 해당한다.

브라우저에서 제목 등을 의미하는 헤딩태그는 아래와 같이 표시한다.

 <heading> 

그 예시로는 아래와 같은 태그가 있지만, 글씨를 키우려는 목적으로 사용하지 않는다. 이와 같은 목적이라면 css를 조정해야 한다.

   <h1>대제목        
   <h2>소제목        
   <h3>
   <h4>

<p> :

paragraph 는 하나의 문단으로 구성해 글을 나타낼 때 필요하다.

<br> :

줄바꿈을 할 때 태그 사이에 넣어 작성한다.

list :

순서를 매기는 태그로 <ol>, 리스트를 만드는 태그로 <li>, <ul> 태그가 있다.

<a> :

하이퍼텍스트 테그로, url을 넣어 원하는 곳으로 보낼 수 있다. 다른 요소와 함께 쓰이는 경우가 많다.

     <a href="연결할 링크" target="_blank">프론트엔드 스쿨</a> 

위와 같은 문장을 통해, 프론트엔드 스쿨이라는 부분을 누르면 해당 링크로 새 페이지에서 열 수 있다.

<span> :

class 속성을 통해서 css나 js에 쓰일 이름을 더해줄 때 사용된다. 단독보다 다른 속성과 함께 쓰인다.

⑤ HTML 실습

본격적인 실습에 앞서서, VSCODE을 편집기로 사용해 index.html 파일을 만들어준다.

TIP! 추가 파일을 잘 다운로드 했다면, '!' 느낌표 + enter 으로 기본적인 html 구조가 자동으로 작성된다.

코드는 아래와 같이 작성해준다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>멋쟁이사자처럼</title>
</head>

<body>
    <!-- 표제 -->
    <h1>모두를 위한 코딩 강의 - 테킷</h1>

    <div>
        <!-- 부제 -->
        <h2>멋쟁이사자처럼 스쿨</h2>

        <p>멋쟁이사자처럼 스쿨이 <br />여러분을 환영합니다.</p>

        <!-- <p>임금님 귀는 당나귀 귀!</p> -->

        <ol>
            <li>
                <a href="https://techit.education/school/kdt-frontend-6th">
                    프론트엔드 스쿨
                </a>
            </li>
            <li>
                <a href="https://techit.education/school/kdt-backend-6th" target="_blank">
                    백엔드 스쿨
                </a>
            </li>
            <li>
                <a href="#"> 블록체인 스쿨 </a>
            </li>
        </ol>
    </div>
</body>

</html>

TIP! 주석 처리는 crl+/ 으로 추가와 삭제가 가능하다. 마우스 커서가 있는 한 줄 자체가 될 수 있다.

TIP! 마우스 우클릭 후 '문서 서식' 혹은 'format' 기능으로 문서 들여쓰기를 수정할 수 있다.

실행 결과는 아래와 같다!

더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396