개발자가 된 핏짜

입학시험을 봤습니다. 생각보다 오래걸렸고 안배운 기능을 구현하는 것은 어려웠으나 어찌어찌 야매로 했습니다. 오늘은 입학시험이 있어서 모여서 하는 스터디가 없는 대신에 메타버스 zep에서 밍글파티(?)가 있을 예정이라고 합니다. 핵심 쏙쏙 Git 2주차 강의를 오늘 다 듣고 Sololearn Java 캡처한 것들 정리하고 자는 게 목표입니다. 내일은 7시 일어나야지. 새로 산 무선키보드가 생각보다 구려서 손가락이 아프네요.

입학시험 - 화성땅 주문하기 가격 붙이기

평당 500원이니까 size * 500 하면 되겠지라는 단순 결론에 이르기까지 3시간이나 걸렸습니다. 뭔가 멋지게 price를 정의해서 하는 방법은 없을까하고 정답 사이트의 html를 샅샅히 보았으나 정답 비스무리한 건 보이지가 않았습니다. ajax를 바꿔야하나 했는데 은행 창구는 계산하는 곳은 아닌 거 같았습니다. 나중에 해답을 보여주면 그 때는 창피할 수도 있겠으나 지금 제 실력에서는 그냥 500을 곱하는 게 최선이었습니다. 

입학시험 제출한 것 (언제까지 서버 열어놓을지는 모름)

input이 없는데 output이 어떻게 나오는 건가에 대해 고민하다가 결국에는 변수에 고정값을 곱하자로 결론이 났습니다. 온갖 블로그를 봤는데 머리만 더 아파지고 힌트도 안되더라고요. 입학시험이 이렇게 어려울리가 없는데 하면서 이러다 입학 못하는 거 아냐 했지만...결과는 내일 나옵니다.

핵심 쏙쏙 Git 2주차

Issue

• Github을 이용한 이슈관리
• About issues
• 프로젝트에서 issue(이슈) = 프로젝트에서 해결해야하는 문제
  • 버그(프로그램이 원하는 대로 동작하지 않는 것)를 신고 (Bug report, 버그 리포트)
  • 기능 추가 등의 프로젝트 개선 제안 (enhancement)
  • 위 문제들을 해결하기 위한 작업단위

Branch

• issue 는 내가 할 작업, 기능 추가, 버그 리포트 등 여러 방식으로 사용
• 협업을 하기 위해
  • issue 를 만들어 누가 작업할지 정함
  • 브랜치를 만들어 작업할 공간을 나눔
• 브랜치(branch)는 특정 commit 에서 갈라져나와 작업할 수 있음
  • 기능별로 이름을 만들어주어 브랜치에 작업
    • ex) feature/이슈번호_관리쉬운이름
    • feature 는 기능 개발하는 브랜치에 관행적으로 붙여주는 이름
• 체크아웃(checkout): 작업할 브랜치로 바꾸는 것; 체크아웃된 브랜치에만 commit이 반영됨

Merge

• https://docs.github.com/en/get-started/quickstart/github-flowhttps://ujuc.github.io/2015/12/16/git-flow-github-flow-gitlab-flow/
• https://ujuc.github.io/2015/12/16/git-flow-github-flow-gitlab-flow/
• https://techblog.woowahan.com/2553/
• https://git-scm.com/doc

그러나 컴퓨터 프로그래밍을 배울 때 처음부터 잘하지는 못한다. 능숙한 프로그래머가 되려면 능숙하게 '버그'를 찾아내고 수정하는 법을 익혀야 한다. 프로그래밍을 하면서 던져야할 질문은 이것이 맞느냐 틀리느냐가 아니라 버그를 수정할 수 있느냐 없느냐다. 이런 식의 지적 결과물을 바라보는 방식이 지식과 지식 습득을 대하는 좀 더 큰 문화에까지 보편화된다면 우리 모두 '틀리는 것'을 덜 두려워하게 될 것이다.
- 마인드스톰 mindstorm (시모어 패퍼트 지음.인사이트.이현경 옮김)

• 에러 안 내려고 시도하지 않는 거보다 해결하는 것을 배우자
• 하나의 파일을 여러 브랜치에서 수정하고 하나의 branch에 merge 하려고 할 때 merge conflict(병합 충돌) 가 발생
• 머지한 브랜치는 삭제하기

원격 repo와 branch

• tracking: 로컬 repo와 원격 repo의 특정 브랜치를 연결해주는 것
  • push와 pull 은 기본적으로 tracking(추적)되고 있는 브랜치를 기준으로 commit 내역을 반영

"No matter the circumstances you can always improve. You can always start improving with yourself. You can always start improving today."

오늘은 항해99 부트캠프의 둘쨋날입니다. 엄밀히 말하면 Pre-onboarding 기간 입니다. 이번주는 9시부터 시작하지 않고 3시부터 9시까지 학습합니다. 내일 입학 시험에 통과하지 못하면 수요일이 마지막 날이 될 수도 있습니다. 이제 무선키보드도 있고 노트북 받침대도 왔고 데스크 스탠드도 있고 거북목이 되지 않기 위해 어제는 등운동도 했습니다. 로지텍 mx mini for mac을 샀는데 생각보다 타자가 부드럽지은 않습니다. 손가락에 무리가 생기는 거 같기도 하지만 제 손톱이 좀 길어서 그런거같습니다. 손목 보호대랑 무선 마우스도 구매를 해야겠습니다. 개발자가 되기로 한지 2개월, 돈을 많~~~이 썼습니다.

어제부터 '혼자 공부하는 자바' 라는 책으로 스터디를 진행하고 있습니다. Sololearn도 레슨 64개중 40 레슨까지 진행했습니다. 자바 마스터가 되는 그날 까지 달리겠습니다. 오늘은 '혼자 공부하는 자바'의 챕터3을 끝내는 것이 학습 목표입니다.

핵심 쏙쏙 GIT이라는 강의를 지급 받았는데 오늘 스터디 시작 전에 몇개를 들었는데 GIT을 설치하고 Github 아이디를 만들었습니다. 유저네임을 뭘로할까 고민하다가 sooni2 라고 저희 집 강아지 이름을 따서 만들었습니다. 

Chapter 03-1 연산자와 연산식

• 연산자(Operator): 연산에 사용되는 표시나 기호 (ex. +,-,*,==)
• 연산자는 피연산자의 수에 따라 단항, 이항, 삼항 연산자로 구분됨
• 연산자의 종류: 
• 연산식은 반드시 하나의 값을 산출하며, 값 대신 연산식을 사용할 수 있음
• 비교 연산자와 논리 연산자의 산출타입은 boolean 타입이다.

연산의 방향과 우선순위

• &&보다 >,<의 우선순위가 높음
• 대부분의 연산자는 왼쪽에서 오른쪽 방향으로 연산을 수행함
• 단항 연산자 (++,--,~,!), 부호 연산자(+,-), 대입 연산자(=,+=,-+,...)는 오른쪽에서 왼쪽 방향으로 연산을 수행함
• 복잡한 연산식에는 괄호()를 사용해서 우선순위를 정함
•  

03-2 연산자의 종류

• 단항 연산자: 피연산자가 단 하나; 부호 연산자(+,-), 증감 연산자(++,--) 논리 부정 연산자(!)
• 부호 연산자(+,-): boolean 과 char 타입을 제외한 기본 타입에 사용가능
  • 정수 및 실수 리터럴 앞에 붙여 양수 및 음수를 표현
  • 정수 및 실수 타입 변수 앞에는 변수의 부호를 유지하거나 변경하기위해 사용
• 증감 연산자(++,--): 변수의 값을 1 증가(++) 또는 1 감소(--)시킴; boolean 제외 모든 기본 타입 피연산자에 사용가능
  • ++피연산자 -> 다른 연산을 수행하기 전에 피연산자의 값을 1 증가 시킴
  • 피연산자++ -> 다른 연산을 수행한 후에 피연산자의 값을 1 증가시킴
• ++i 와 i = i +1의 연산 속도
  • ++i가 i=i+1 보다 연산 속도가 빠르다고 알려져 있으나 차이는 없음
    • i =i+1이 두번의 연산이 필요하지만 i++는 한번의 연산만 수행하기 때문에 생긴 오해이지만 바이트 코드는 동일하기 때문에 속도 차이 없음
• 논리 부정 연산자(!)
  • true를 false로 false를 true로 변경 -> boolean에서만 사용
    • 조건문과 제어문에서 조건식의 값을 부정하도록 해서 실행흐름을 제어할 때 주로 사용 
    • 두가지 상태(true/false)를 번갈아가면서 변경하는 토글(toggle)기능을 구현할 때도 사용
• 이항 연산자: 피연산자가 2개인 연산자; 산술, 문자열 결합, 비교, 논리, 대입 연산자 등이 있음
• 산술연산자의 특징: 피연산자들의 타입이 동일하지 않을 경우 규칙을 사용해서 피연산자들의 타입을 일치 시킨 후 연산을 수행함
  
  • 피연산자들이 byte, short, char 타입일 경우 모두 Int 타입으로 변환 후 연산을 수행
  • 피연산자들이 모두 정수타입이고 long타입이 포함되어 있을 경우, 모두 long 타입으로 변환 후 연산을 수행
  • 피연산자 중 실수 타입(float, double)이 있을 경우, 허용 범위가 큰 실수 타입으로 변환된 후, 연산을 수행
• 문자열 결합 연산자(+):문자열을 서로 결합하는 연산자
• 비교 연산자(<,<=,>,>=,==,!=): 흐름 제어문인 조건문(if), 반복문(for, while)에서 주로 이용되어 실행 흐름을 제어할 때 사용
• String 변수 비교
  • 대소비교 연산자 사용 불가, 동등 비교 연산자 사용 가능
  • String 변수 비교 시 equals() 메소드를 사용함
• 논리연산자: 논리곱(&&), 논리합, 배타적 논리합(^), 논리 부정(!) 연산을 수행-> boolean 타입만 사용가능
  • &&와 &의 산출 결과는 같지만 연산 과정이 다름
  • &&는 앞의 피연산자가 false라면 뒤의 피연산자를 평가하지 않고 바로 false라는 산출 결과를 냄; &은 두 피연산자를 모두 평가해서 산출결과를 냄 -> &&이 더 효율적으로 동작
    • 논리합||도 마찬가지
  • 논리 연산은 흐름 제어문인 조건문(If), 반복문(for, while) 등에서 주로 이용됨

• 대입연산자(=, +=,-=,*=,/=,%=): 오른쪽 피연산자의 값을 왼쪽 피연산자인 변수에 저장
  • 오른쪽 피연산자에는 리터럴 및 변수, 다른 연산식이 올 수 있음
  • 모든 연산자들 중에서 가장 낮은 연산 순위를 가짐; 제일 마지막에 수행됨
   

삼항 연산자 

• • ? 앞의 조건식에 따라 콜론(:) 앞뒤의 피연산자가 선택된다고 해서 조건 연산식이라고도 부름
  • if문으로 작성할 수 있지만, 한줄에 간단하게 작성 시 삼항 연산자를 사용하는 것이 더 효율적
  • (?:) 삼항 연산자: 3개의 피연산자를 필요로 하는 연산자

핵심 쏙쏙 Git 1주차

• Git과 github 설치
• 나의 첫 커밋!! - 실습 01
  • 김치요리법을 모으는 프로젝트를 Git을 사용해서 관리

• 버전관리: 프로젝트 상태가 변경되는 정보를 알고 있다는 것
• Git 은 commit 을 사용해서 버전이 달라지는 것을 관리함
• 컴퓨터에 있는 프로젝트를 Git 이 관리하는 프로젝트로 만들 수 있음 ->**git 초기화(git initialize)**한다고 표현
• 현재 프로젝트의 상태를 찰칵 📸 저장 = commit
  
  • 누가(author), 언제 commit 했는지의 정보와 프로젝트 변경 내용
  • 작업내역이 어떤 것인지 알아볼 수 있게 적는 메시지를 'commit 메시지'라고 함
• commit 에 반영할지 안할지는 파일 단위로 선택
• commit 에 반영할 파일을 선택 = add (혹은 staging, 스테이징)
• history: commit 한 기록

원격 repo와 로컬 repo

• repo(리포, repository 리포지토리의 약자):Git으로 관리되는 프로젝트
• 로컬 repo(local repository):내 컴퓨터에 저장되어있는 리포지토리
• 원격 repo(remote repository): Github 처럼 다른 곳에서 접속할 수 있는 공간에 저장되어있는 것
• Github은 원격 repo 가 저장되어있고 + 개발자 커뮤니티 기능을 하는 서비스
• Tracking, 트랙킹 / branch tracking: 로컬 repo 가 원격 repo 를 연결하는 것을 추적
  • 로컬 repo 만이 내가 어떤 원격 repo 와 연결되어있는지를 앎
  • 원격 repo 는 내가 어떤 로컬 repo 와 연결되어있는지 정보를 가지고 있지 않음
  • 언제나 로컬 repo 를 기준으로 동작을 이해하기
  •  commit을 자동으로 반영하지 않음; 내가 원하는 대로 어디 commit 까지만 반영할지를 수동으로 설정할 수 있게 해서 프로젝트를 더 잘 관리하기 위해서임 
    • commit 을 수동으로 반영
• push(푸쉬): 로컬 repo 의 commit 들을 원격 repo 에 반영하기
• pull(풀): 원격 repo 의 commit 들을 로컬 repo 에 반영하기
• clone(클론, 복제):원격 repo 를 내 컴퓨터에서도 사용할 수 있도록 가져오기; 초기 다운로드

😫Push가 안됩니다... 소스트리 git 인증 해결 방법

소스트리에서

설정 - 원격 - 추가로

새로 생성한 github 원격 repo 주소를 넣어서 등록을 했습니다.

push 버튼만 누르면 된다고 해서 했는데 계속 해서 에러가 떴습니다.

support for password authentication was removed on august 13 2021.

라는 말과 함께 push 창이 완료가 안됐습니다.

구글링해보니 토큰을 새로 발급받아 보라는 말이 있어서 기존의 토큰을 삭제하고 새로 발급받은 토큰으로 대체했습니다.

그래도 안되서😰 다시

'맥 소스트리 맥 소스트리 support for password authentication was removed on august 13 2021.'라는 검색어로 구글링해서 찾은 티스토리 블로그에서 다음과 같이 솔루션을 알려주셔서 해결했습니다.

원격에 입력되어 있는 git 경로에 'github.com~' 앞에 '토큰 값@'를 붙여넣어준다. 즉, git 경로가 'https://토큰 값@github.com~'이 되는 것이다. 그러면 자동으로 사용자명에 토큰 값이 입력된다. 그리고 확인 버튼을 클릭해 설정한 git 원격 토큰 정보를 저장한다.  출처:https://pamyferret.tistory.com/44

저의 첫 푸시는 생각보다 오래 걸렸지만 성공적으로 실행했습니다🤓

숙제할 때도 마찬가지로 URL에 토큰을 추가해서 입력했습니다.

혼자 공부하는 자바 Chapter 1 

오늘은 부트캠프 첫날입니다. 사전 스터디 할 때는 자바스크립트를 공부했는데 오늘부터 제가 선택한 언어인 JAVA를 배웁니다. Sololearn으로 레슨 64개 중 29개를 완료한 상태입니다. 부트캠프 시작 전에 완료할 생각이었는데 Getter 와 Setter 에서 막혔습니다. 이번주는 Sololearn의 Java 레슨을 다 끝내고 혼자 공부하는 자바 책 Chapter 5를 스케쥴에 맞춰 끝내는 것이 목표입니다. 

01-1 프로그래밍 언어와 자바

• 기계어: 이진법으로 이루어진 코드
• 소스파일(Source file): 프로그래밍 언어로 작성한 파일
• 컴파일(compile): 소스파일을 기계어로 번역하는 것
• Java: 1995년 Sun Microsystems에서 발표; 안드로이드폰 앱, 웹사이트 개발 핵심 언어로 사용; 모든 운영체제에서 실행 가능한 데스크톱 어플리케이션 개발에 사용
  • 오라클에서 라이선스 보유; JDK(Java Developement Kit:개발 실행 환경(JVM)과 컴파일러 등을 제공)를 배포
• Java의 특징
  • 모든 운영체제에서 실행 가능
  • 객체지향 프로그래밍: 객체를 만들고, 이 객체들을 서로 연결해서 더 큰 프로그램을 완성하는 기법
  • 메모리 자동 정리: RAM을 자동 관리; 코드 작성 집중 가능
  • 무료 라이브러리 풍부

자바 개발 도구 설치

• 자바 개발 도구(JDK: Java Development Kit) 설치 필요
  • Open JDK(무료)와 Oracle JDK(유료)가 있는데 LTS(Long term Support)를 위해서는 Oracle JDK 사용이 안정적
  • 나는 JAVA 11를 설치함
• JDK JAVA SE(Standard Edition) 표기
  • JAVA 11을 설치한다는 것은 JAVA SE 11 또는 JDK 11을 설치한다는 것과 동일한 의미
   
• 주 버전이 높은 것 보다는 버그를 지속적으로 수정해나가는 LTS 버전을 사용할것을 추천

환경 변수 설정

맥에서는 어떻게 하는 건지 책에 안나와 있음

검색해보니 terminal을 사용하라함 -> 스파르타 자바 강의를 보니 Window 설치는 환경 변수 내용이 들어있는데 Mac에는 없는 걸로 보아 상관없는듯

01-2 이클립스 개발 환경 구축

이클립스를 사용하지 않고 IntelliJ라는 툴을 사용하기 때문에 교양정도로 알고 지나가겠습니다....

이클립스

• 오픈소스 통합 개발 환경(IDE: Integrated Development Environment)
• IDE: 프로젝트 생성, 자동 코드 완성, 디버깅 등 여러 개발에 필요한 기능 통합 제공

01-3 자바 프로그램 개발 과정

1. .java 텍스트 파일 생성
2. 자바 언어로 코드 작성
3. 컴파일러 javac 명령어로 컴파일
4. 컴파일 성공하면 확장명이 .class인 바이트 코드 파일 생성
5. java 명령어로 바이트 코드를 완전한 기계어로 번역해서 실행

바이트 코드 파일과 자바 가상 기계

• 자바 프로그램은 바이트 코드(byte code) 파일(.class)로 구성
• 바이트 코드 파일은 운영체제에서 바로 실행할 수 없고, 자바 가상 기계(JVM: Java Virtual Machine)라는 번역기가 필요
• JVM 사용 이유: 바이트 코드 파일을 다양한 운영체제에서 수정하지 않고 사용 가능 -> 자바 언어 성공 요인
  • javac 명령어로 컴파일된 바이트 코드 파일은 JDK가 설치된 어떤 운영체제에서도 java 명령어로 동일하게 실행
  • 개발자는 운영체제와 상관없이 자바 프로그램을 개발 가능
• 모듈명: JDK 11 버전 이후부터는 명령 프롬프트와 같은 명령 라인에서 프로젝트를 실행할 때 필요; module-info.java 보고 확인 가능
  • module-info.java 라는 모듈을 만들라고 하는데 스킵하고 Hello.java 부터 실행함
• public static void main(String[] args) 를 자동 추가 설정하는 방법
  • 단축키: ctrl + J
  • psvm + enter
  • 자동 추가는 이클립스에서 제공하는 기능; intelliJ 템플릿 수정할 수 잇음
• sout 단축키 -> System.out.println();

명령 라인에서 컴파일하고 실행하기

명령 프롬프트 또는 터미널과 같은 명령 라인에서 javac와 java 명령어로 소스 파일을 직접 컴파일하고 실행하는 법

-> 명령 라인에서 프로젝트 컴파일 및 바이트 코드 파일 실행 방법

• 예시가 윈도우라 안되는 부분들은 구글링중.... -> 맥의 명령어가 훨씬 쉽다
• javac 명령어로 컴파일해서 바이트 코드 파일 생성하기
  • javac Hello.java --> Hello.class 파일(바이트 코드 파일) 생성됨
• tree 명령어
  • 맥 터미널에서 실행 위해서 Homebrew 프로그램 설치 https://brew.sh/index_ko -> tree 설치 brew install tree 입력
  • 설치가 안됨.....ㅠ -> 다시 하니까 됨~

• java 명령어로 바이트 코드 실행
  • JDK 8 이전 버전: java -cp bin sec03.exam01.Hello
  • JDK 11 이후 버전
    • javac -p [바이트 코드 파일 저장 위치] -m 모듈/패키지이름...클래스이름
    • java -p bin -m chap01/sec03.exam01.Hello
  • 근데 내 맥북프로에서는 JDK 8 이전 버전이 먹히고 11이후 버전은 안됨;;

프로그램 소스 분석

패키지 선언

클래스 선언

• {} 중괄호 블록의 앞부분인 public class Hello -> 클래스 선언
• public class: 공개 클래스; 클래스 이름은 소스 파일명과 동일(대소문자도 일치)
  • 클래스는 필드 또는 메소드를 포함하는 블록
  • 메소드: 어떤 일을 처리하는 실행문들을 모아 놓은 블록
  • javac 명령어로 컴파일 하면 클래스 이름에 .class가 붙어 바이트 코드 파일이 생성됨;
    • Hello.class -> Hello 클래스라고 부름
• java 명령어로 바이트 코드 파일 실행하려면 클래스 블록 내부에 main() 메소드 블록을 가지고 있어야 함
• {} 중괄호 블록의 앞부분, public static void main(String[] args) -> 메소드 선언부
  • main: 메소드 이름
  • java 명령어로 바이트 코드 실행 시 main() 메소드 찾아 블록 내부 먼저 실행
    • main() 메소드: 프로그램 실행 전입점 (entry point)

주석 사용하기

• 라인 주석 : // ...
• 범위 주석: /* ... */
• 도큐먼트 주석: /** ....*/  -> 주로 javadoc 명령어로 API 도큐먼트 생성할 때 사용
• 문자열 내부에는 주석 붙이기 불가능
• 주석을 많이 작성한다고 해서 바이트 코드 파일 크기가 커지는 것은 아님
• 주로 실행문에 사용

실행문과 세미콜론(;)

• 컴파일러는 ; 까지 실행문으로 해석하기 때문에 ; 를 붙여서 실행문이 끝났음을 표시해야함

Chapter 2 변수와 타입

02-1 변수

변수 선언

• 변수의 타입과 이름 결정
• 첫번째 글자는 문자 , '$', '_' 이어야 하고 숫자로 시작할수 없음
• 영어 대소문자 구분
• 첫 문자는 영어 소문자, 다른 단어 붙을 경우 첫문자 대문자 (관례)
• 문자 수 제한 없음
• 자바 예약어 사용 불가

값 저장

• 대입 연산자(=) 사용
  • 오른쪽 값을 왼쪽 변수에 저장한다는 의미

변수 사용

• 출력문이나 연산식 내부에서 변수에 저장된 값을 출력하거나 연산할 때 사용

변수 사용 범위

• 모든 변수는 {} 중괄호 블록 내에서 선언되고 사용됨
• 로컬 변수(local variable): 메소드블록 내에서 선언된 변수; 메소드 실행이 끝나면 메모리에서 자동으로 없어짐
• 메소드 블록 전체에서 사용하고 싶으면 메소드 블록 첫머리에 삽입
• 특정블록내부에서만 사용된다면 해당 블록 내 선언

02-2 기본 타입 Primitive Type

정수 타입

• 리터럴(literal): 프로그래머에 의해 직접 입력된 값
• char 타입: 하나의 문자를 작은따옴표(')로 감싼것 = 문자 리터럴 -> 유니코드로 변환되어 저장됨
  • 유니코드로 변환되기 때문에 int 타입 정수에도 저장 가능 -> 유니코드 자체가 출력됨

스트링 타입

• 문자열: (")로 감싼 문자 
• String은 기본 타입이 아닌 클래스 타입임
• 이스케이프문자(Escape): 문자열 내부에 역슬래시(\)가 붙은 문자를 사용; 특정 문자를 포함시킬 수 있음
  • ex) \t -> 탭만큼 띄우기; \n -> 한 줄 내림

실수 타입

• float 타입 저장시, f 또는 F 붙여 컴파일러가 타입을 인지하게 함
• 자바는 실수 리터럴을 기본적으로 double 타입으로 인식함
• float은 소수점 7자리 이하, double은 소수점 15자리 (좀 더 정확한 데이터 저장이 가능)

논리 타입

• boolean 타입: true or false 로 저장

02-3 타입 변환

자동 타입 변환

• 자동으로 타입 변환이 일어나는 것; 허용 범위가 작은 타입이 허용 범위가 큰 타입으로 저장 될 때
  • byte < short < int < long < float < double
  • byte은 char 로 변환 불가 ; char은 음수가 없음

강제 타입 변환

• casting: 큰 허용 범위 타입을 작은 허용 범위 타입으로 강제로 나눠서 저장하는 것
• 작은 허용 범위 타입 = (작은 허용 범위 타입) 큰 허용 범위 타입

정수 연산에서의 자동 타입 변환

• 정수 타입 변수가 산술 연산식에서 피연산자로 사용되면 int 타입보다 작은 byte, short 타입의 변수는 int 타입으로 자동 타입 변환되서 연산 수행
• 타입 변환이 줄면 실행 성능 향상
• 두 피연산자 중 허용 범위가 큰 타입으로 변환되어 연산을 수행
• 정수 연산 실수 연산으로 변경하는 방법:

실수 연산에서의 자동 타입 변환

• 피연산자 중 하나가 double 타입이면 다른 피연산자도 double 타입으로 자동 타입 변환되서 연산을 수행 -> 연산결과 double 타입

문자열을 기본 타입으로 강제 타입 변환

기본 타입을 문자열로 변환

• String.valueOf(기본타입값);

02-4 변수와 시스템 입출력

모니터로 변수값 출력하기

• println(내용): 괄호 안의 내용을 출력하고 행을 바꿔라; ln = line
• print(내용): 괄호 안의 내용을 출력만 해라
• printf("형식문자열", 값1, 값2, ...): 괄호 안의 첫번 째 문자열 형식대로 내용(format string)을 출력해라 
  • 형식 문자열에 포함될 값이 2개 이상인 경우, 순번(argument_index$)을 알려준다

키보드에서 입력된 내용을 변수에 저장하기

• 키코드 읽는 법
  • keyCode = System.in.read();
    • 시스템이 가지고 있는 입력 장치에서 입력된 키코드를 읽어라
  • throw Exception: System.in.read() 
    • System.in.read()의 단점: 키코드를 하나씩 읽기 때문에 2개 이상의 키가 조합된 한글을 읽을 수 없음 -> Scanner로 보완
   
• Scanner scanner = new Scanner(System.in)
  • 시스템의 입력장치로부터 읽는 scanner를 생성해서 Scanner 변수 scanner에 저장
• String inputData = scanner.nextLine()
  • 읽은 문자열(enter키 이전까지 입력된 문자열을 읽음)을 String 변수 inputData에 저장
• boolean result = inputData. equals("비교문자열")
  • inputData가 비교문자열과 같으면 true, 다르면 false
  • 자바는 기본타입의 값이 동일한지 비교할 때에는 ==를 사용하고 문자열(String)이 동일한지 비교할 때는 equals() 메소드를 사용

튜터님의 미션! 터미널로만~ java 파일 만들고 실행하기

java를 IDE(IntelliJ)를 사용하지 않고 오직 터미널로만 코딩해서 실행하기

hong@Jinhongui-MacBookPro chap01 % java -version  //자바 버전 확인했음

openjdk version "11.0.16.1" 2022-07-19 LTS

OpenJDK Runtime Environment Zulu11.58+23-CA (build 11.0.16.1+1-LTS)

OpenJDK 64-Bit Server VM Zulu11.58+23-CA (build 11.0.16.1+1-LTS, mixed mode)

hong@Jinhongui-MacBookPro chap01 % touch Hello.java //① Hello라는 파일명의 자바 파일 생성

hong@Jinhongui-MacBookPro chap01 % vi Hello.java //②Hello라는 이름의 java 파일을 수정, i를 누르면 (insert 화면이 뜸)

// ③:wq 로 저장하고 esc로 수정모드에서 나오기

hong@Jinhongui-MacBookPro chap01 % javac Hello.java  //④컴파일러로 클래스 파일 변환

hong@Jinhongui-MacBookPro chap01 % java Hello //⑤자바 파일 실행

Hello java! //⑥yay!

• 크롬에서 console 여는 단축키: option + commd + J
• R E P L : Read Evaluate Print Loop

• NaN : Not a Number
  • a numeric value that represents sth that is not a number....
  • 0/0 --> NaN
  • 1+NaN --> NaN
•  const: 한번 정한 값을 바꿀수없음 constant variable임
• var: old way of making variables
• Boolean: True or False
• .trim(): space 부분 없애줌
• toLowerCase()
• toUpperCase()
• convention naming: 첫단어는 lowercase; ex) highScore
• indexOf() : The indexOf() method, given one argument: a substring to search for, searches the entire calling string, and returns the index of the first occurrence of the specified substring. Given a second argument: a number, the method returns the first occurrence of the specified substring at an index greater than or equal to the specified number.
• .slice(): 잘라서 새로운 string을 만듬
• .replace():
  • .replace('a', 'b') 맨 처음 a 문자만를 대체함
  • .replaceAll(): 모든 해당 문자를 대체함 -> 쓸수있는 브라우저는 제한적
• .repeat(n): n번 반복

String Template Literals

• template literals are strings that allow embedded expressions, which will be evaluated and then turned into a resulting string
  • `I counted ${3+4} sheep`
    • back-ticks `` 사용 (tab 키 윗키)
    • ${....} 

Undefined & Null

• Null: international absence of any value
  • must be assigned
  • value is explicitly nothing
• Undefined
  • Variables that do not have an assigned value

Math Object

• contains properties and methods for mathematical constants and functions
• Math.floor() : 올림
• Math.ceil(): 내림
• Math.random(): 랜덤 숫자를 생성
• random integers 생성하는 법

로켓 사이언스는 아니지만 소프트웨어 엔지니어가 되는 것도 어느정도의 수학적 이해력과 사고력을 필요로 합니다. 저는 아주 수학머리가 없는 것은 아니지만 그렇다고 뛰어나지도 않습니다. 다행히 머리가 나쁘지는 않은 것 같습니다. 자꾸 반복해서 연습하고 보다보면 나아질 거라는 희망을 가지고 오늘도 열심히 프로그래밍을 공부합니다. 자바스트립트 언어를 끝내고 오늘부터는 Java로 넘어갑니다. 

Dom & Dome Tree

• Dom 구조는 tree 구조로 설명할수 있음
• html elements는 tree의 nodes임
• 같은 레벨에 있으며 siblings 위는 parents 아래 레벨은 child
  • 아래 예시: html의 child는 head, body; head의 child는 title; title은 parent 하나, no children;

The document Object

Working with DOM

• element.childNodes: child nodes의 array를 return
• element.firstChild: element의 첫번째 child node를 return
• element.lastChild: element의 마지막 child node를 return
• element.hasChildNodes: element가 child node가 있으면 return 없으면 false
• element.nextSibling: 같은 tree level의 다음 node를 return
• element.previousSibling: 같은 tree level의 이전 node를 return
• element.parentNode: element의 parent node를 return

CSS properties

• dashes(-) property name에 사용 안됨
  • ex) background-color -> backgroundColor

Removing & Replacing Elements

• .removeChild(node): element를 지우기위해서(remove) 쓰는 method
• .replaceChild(newNode, oldNode): oldNode를 newNode로 대체(replace)

Animations

• setInterval() : 타이머를 만들고 정의된 interval(in milliseconds)로 반복함

Event handlers

• onload: page에 들어갈때
• onunload: page에서 나갈때
• window.onload: 전체 페이지가 로드 된 후 코드를 실행
• onchange: textbox에 주로 사용됨; textbox안의 text가 변경 될 때 실행

Event Listeners

• addEventListener(): 기존 event handler에 덮어쓰지 않고 새로운 event handler를 추가함
  • addEventListner(이벤트핸들러, function, boolean value(optional) 

Event Propagation

• bubbling: 가장 안쪽 element 먼저 실행하고 바깥쪽 element는 나중에 실행 (거품은 위로 올라간다)
• capturing: 가장 바깥쪽 element 먼저 실행하고 안쪽의 element를 나중에 실행
• Capturing goes down the DOM
• Bubbling goes up the DOM

Image Slider

• "Next" 와 "Prev" button을 이용해서 이미지를 변경
• onclick="prev()" -> function prev() 를 실행
• onclick="next()" -> function next() 를 실행
• num variable은 현재 이미지를 보여줌
  
  • onclick 하면 array의 이미지를 function(prev or next)에 따라 보여줌

Form Validation

• required: input field를 필수 입력
• onsubmit: 제출하면 valildate 해서 실행 아니면 false를 return

for loop

• for...in loop은 array위에 반복 되면 안됨
• for...in loop은 반복되는 objects에 반복되는 loop을 생성함
• 반복되는 variable은 string이고 숫자가 아님
• variable를 더하면 string concatenation이 실행되지 덧셈이 아님
• for...of loop은 string 포함한 object 반복에 사용

ES6 =>

• => 로 function을 축약해서 입력할 수 있음

ES6 SyntaxError

• 이중 property names로 object를 생성할 때 마지막 property가 같은 이름의 이전 property를 덮어씀
• duplicate property names는 String mode 사용시 ES5에서는 SyntaxError를 발생시킴; ES6에서는 제한 없음

ES6 .CharAt, .slice

• CharAt(n): n번째의 문자를 읽어줌 (0부터 시작하는거 알쥬?)
• slice(n): n번째를 잘라서 새로운 object를 만듬 (0부터 시작하는거 알쥬?)
  • Example3: param.slice(1) -> param 의 1번째 (0부터 셈) 여기서는 'size'의 s를 없앰

Object.assign() in ES6

Class Methods in ES6

Inheritance in ES6

ES6 Map

ES6 Set

• Set objects는 unique values에 사용 (반복 x)
• new Set([iterable])이 Set object를 생성함; [interable]은 array 또는 반복 가능한 objects
• add(value): Set에 new element를 추가
• delete(value): Set에 해당 value를 제거
• has(value): set에 해당 value가 있으면 true, 없으면 false를 return
• clear(): clear the set
• values(): set의 interator of values를 return
• Promise
  • new Promise(function(resolve, reject){....}
  • resolve for success, reject for failure
  • .then method : 두 methods를 input으로 사용

generator function

• function* -> generator function (or gen function)
  • 비동기 프로그래밍에 서용

JavaScript Course Certificate

Sololearn의 JavaScript 코스 완강하고 수료증을 받았습니다. 마지막에 ES6가 좀 괴롭히긴 했지만 어찌어찌 끝까지 공부를 마쳤습니다.

아직도 익숙하다고는 할 수 없지만 걸음마를 뗀 기분입니다. 다음 언어는 Java를 배울겁니다. 

첫번째 토이프로젝트 이름은 '수진님이 보고 계셔' 입니다. 유데미에서 배운 것과 스파르타 웹개발 종합반에서 배운 것들을 종합하여 동생을 위한 팬명록을 만드려고 합니다. 기존에 언니를 위해서 만들어 준 것을 보고 동생이 원해서 더 업그레이드 버전으로 만들기로 했습니다. 반응형 웹사이트를 만들겁니다. 

1. 와이어프레임 작업하기

• 프로필과 프로필 사진
• 수진이의 한마디와 사진
• 친구들의 응원 붙이기
• 보고 있어 -> 계셔 

더보기

2. 디자인 수정 요청이 들어오다

• 같이 앉아서 열심히 원하는 거 다 넣어줬더니 다시 돌아와서 갤러리 기능을 넣어달라고 합니다. 사진이 슬라이더를 통해 나타나는 것을 구현해 보기로 했습니다. 
• 원하는 사진 2장을 보내라고 했더니 9장을 보내왔습니다. 다 귀여우니까 넣어달랍니다.
• 아예 요소 배치를 다 바꾸고 새로 정했습니다.

Bootstrap Carousel

갤러리 기능을 위해 Bootstrap 웹사이트 가서 Carousel 메뉴에서 퍼왔습니다.

가장 난감했던 점은 사진이 한쪽으로 쏠리고 크기 조절을 못했었던 거였습니다

결국 id 값을 붙여서 묶어서 조절했습니다.

어찌 중간으로 오긴 했는데 윈도우를 줄였을 시 오른쪽 마진이 더 큰 현상이 나타났습니다.

다 center로 설정했는데 어찌 이럴수 있는걸까요... 

Index.HTML

대부분 웹개발 종합반에서 만들었던 팬명록에서 가져왔고 부트스트랩을 이용해서 css 요소를 넣었습니다.

어려웠고 다시 돌아와서 고쳐야 하는 부분은 사진입니다.

사진 크기 조절이 쉽게 되지 않았습니다. 특히 고래사진 크기를 키우고 싶은데 잘 안됩니다....

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <!-- Google Font -->

    <link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Custom CSS -->


    <title>수진이 팬명록</title>
    <style>a {
        color: white;
        text-decoration: underline
    }

    #dog:hover {
        color: #ffc8dd
    }

    #mx:hover {
        color: #03045e
    }

    #mara:hover {
        color: red;
    }

    img {
        width: 30%;
        margin: calc(10% / 6);
        flex-direction: row;
    }

    body {
        background: #023e8a;
        font-family: 'Yeon Sung', cursive;
    }

    #propic {
        justify-content: center;
    }

    header {
        margin-top: 30px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        margin-top: 40px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;

    }

    .headingGroup > p {
        color: white;
        font-size: 1.2em;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


    .headingGroup > img {
        width: 50%;
        height: 50%;
    }

    #tem {
        color: white;
        font-size: 1.2em;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;

    }

    #carousel {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;

    }
   .carousel-item {
       max-width: 900px;
       width: 100%;
       height: 100%;
       align-items: center;
       justify-content: center;
       margin: auto;
   }

    .quote p {
        font-weight: 100;
        font-size: 1.125rem;
        line-height: 2.0;
    }

    .mypost {
        width: 95%;
        max-width: 500px;
        margin: 30px auto 20px auto;
        box-shadow: 0px 0px 3px 0px black;
        padding: 20px;
        background-color: white;
    }

    .mypost > button {
        margin-top: 15px;
    }

    .mycards {
        width: 95%;
        max-width: 500px;
        margin: auto;
        color: #2b2d42;
    }

    .mycards > .card {
        margin-top: 10px;
        margin-bottom: 10px;
        color: black;
    }

    </style>
    <script>
        $(document).ready(function () {
            set_temp()
            show_comment()
        });

        function set_temp() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: "POST",
                url: "/sujin",
                data: {'name_give': name, 'comment_give': comment},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

        function show_comment() {
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/sujin",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`
                        $('#comment-list').append(temp_html)
                    }
                }
            });
        }
    </script>

</head>


<body>


<section class="container-fluid px-0">
    <div class="row align-items-center">

        <div class="col-lg-6">
            <div id="headingGroup" class="text-white text-center d-lg-block mt-5">
                <img class="img-fluid"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkH9bD%2FbtrPEo5Bc0h%2F9uUNc4il44jXabyvEBgpJk%2Fimg.jpg"
                     alt="">
            </div>

        </div>
        <div class="col-lg-4">
            <div class="text-white text-center d-lg-block mt-5">
                <h1>"오늘도 열심히 놀아라"</h1>
                <h5>수진님의 한말씀</h5>
            </div>

        </div>
        <div class="col-lg-2"></div>
    </div>

</section>
<section class="container-fluid px-0">
    <div class="row align-items-center">
        <div class="row justify-content-center">
            <div class="col-lg-6 m-5 ">
                <hr>
            </div>
        </div>
    </div>
</section>

<header class="title">
    <h1>
        수진님이 보고 계셔🐋
    </h1>

</header>
<p id="tem">현재기온 : <span id="temp">36</span>도</p>
<section class="container px-0">
    <div class="align-items-center">
        <div class="row justify-content-flex-end">
            <div id="HG" class="text-white text-center mt-5">
                <img class="img-fluid"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FccbkC1%2FbtrPDsnaMYX%2FEjkbMmkALPaD6ZFY1KeWO0%2Fimg.jpg">
            </div>
        </div>
    </div>
</section>

<section class="container-fluid px-0">
    <div class="row align-items-center">
        <div class="row justify-content-flex-end">
            <div id="headingGroup" class="text-white text-center d-lg-block mt-5">
                <p>
                <h3>이름: 이수진</h3>
                나이: 비밀<br>
                키: 198<br>
                몸무게: 비밀 <br>
                사는곳: 서울 <br>
                직업: 대학생 및 알바생 <br>
                취미: 누워서 배그하기 <br>
                좋아하는 음식: <a id="mara"
                            href="https://map.naver.com/v5/search/%EA%B0%95%EB%82%A8%20%EC%A4%91%EA%B2%BD%EB%A7%88%EB%9D%BC%ED%83%95/place/1761717994?placePath=%3Fentry=pll%26from=nx%26fromNxList=true&c=14139655.9420416,4509207.8155029,15,0,0,0,dh">마라샹궈</a>
                <br>
                좋아하는 아이돌: <a id="mx" href="http://www.monstax-e.com/">몬스타엑스</a> <br>
                강아지이름: <a id="dog" href="https://www.instagram.com/modu_sooni">이멍순</a>
                </p>
            </div>
        </div>
    </div>
</section>

<section id="carousel" class="container-fluid">
    <div class="row align-items-center">
    <div class="row justify-content-flex-start mx-10">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                        aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
                        aria-label="Slide 5"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
                        aria-label="Slide 6"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
                        aria-label="Slide 7"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7"
                        aria-label="Slide 8"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8"
                        aria-label="Slide 9"></button>
            </div>

            <div class="carousel-inner row align-items-center">
                <div class="carousel-item active">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcE9CnF%2FbtrPFdPy4Ew%2FMXvB979V09VBST3xipoWM0%2Fimg.jpg"
                         class="col-lg-4 justify-content-center" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdg66aN%2FbtrPEoxoiOi%2Fp7yGW4w64IGymUAulE0pT0%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkX53v%2FbtrPFXS42oW%2Fv2k1ERdK0XUivZXar3kUMk%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fboxg5B%2FbtrPDruAvwn%2FoDxGsj27MgLxs7wlTHyKi0%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv2EDf%2FbtrPB1QJvZx%2FZgu9HpiWGQ3XdmAJHtqm8K%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyKAca%2FbtrPGeUKtbs%2FD06PuKCxdB53l7jOAEdPwk%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdtof8F%2FbtrPFzrlyf4%2FhYKmXd1902Af37K9oEtnCk%2Fimg.jpg"
                         class="col-lg-4" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOBYzr%2FbtrPDebeayR%2F2nxfHjcKU7OByYCQzqc7H0%2Fimg.jpg"
                         class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyaaVd%2FbtrPEjpdK4D%2Fy6lOZQxZLxHggHBG3HWjrK%2Fimg.jpg"
                         class="d-block w-100" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    </div>
    </section>


<section class="bigpics row align-items-center content">
    <div class="col-12 col-lg-12 pics mb-5 mb-md-0">

        <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcE9CnF%2FbtrPFdPy4Ew%2FMXvB979V09VBST3xipoWM0%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdg66aN%2FbtrPEoxoiOi%2Fp7yGW4w64IGymUAulE0pT0%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkX53v%2FbtrPFXS42oW%2Fv2k1ERdK0XUivZXar3kUMk%2Fimg.jpg">

        <!-- Giuseppe Milo -->
        <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fboxg5B%2FbtrPDruAvwn%2FoDxGsj27MgLxs7wlTHyKi0%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv2EDf%2FbtrPB1QJvZx%2FZgu9HpiWGQ3XdmAJHtqm8K%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyKAca%2FbtrPGeUKtbs%2FD06PuKCxdB53l7jOAEdPwk%2Fimg.jpg">

        <!-- GörlitzPhotography -->
        <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdtof8F%2FbtrPFzrlyf4%2FhYKmXd1902Af37K9oEtnCk%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOBYzr%2FbtrPDebeayR%2F2nxfHjcKU7OByYCQzqc7H0%2Fimg.jpg"><img
            src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyaaVd%2FbtrPEjpdK4D%2Fy6lOZQxZLxHggHBG3HWjrK%2Fimg.jpg">
    </div>
</section>

<div class="mypost">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                      style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="mycards" id="comment-list">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
</div>


</body>

</html>

3. 서버 배포 및 도메인 연결하기

• AWS에서 새로운 인스턴스를 설정하고 새 IP 주소를 받았습니다. 
• Gabia에서 동생이 원했던 도메인 이름을 넣어서 새로 구입했습니다.
• FileZilla를 통해 리눅스에 접속해 필요한 프로그램들 (pip 및 python packages (flask, dnspython, pymongo, certifi)을 설치했습니다.
• 인바운드 규칙을 수정했습니다.
  
  • 80포트: HTTP 접속을 위한 기본포트
  • 5000포트: flask 기본포트
  • 27017포트: DB 접속 포트
  • 22포트: SSH
• Gabia의 도메인 DNS 관리에 들어가 새로운 IP 주소를 연결합니다.
• nohup python app.py & 을 실행해서 로컬 컴퓨터가 꺼져도 리눅스는 돌아가게 설정했습니다.

4. 완성하기

아래는 완성된 웹사이트를 캡쳐하였습니다.

언제까지 서버를 열어놓을지는 모르겠지만 웹사이트 주소는 jinwoongwife.shop 입니다.

5. 느낀점

• 한 6시간 정도 걸렸습니다. 
• 기존에 있던 코드를 가져와서 내 필요에 맞게 수정하는 작업이었습니다.
• 유데미 강의는 vscode를 사용하고 스파르타 웹개발종합반은 pycharm을 사용하는데 개인적으로 vscode가 더 나은 거 같습니다....아직 둘다 익숙하지 않아서 일까요;;
• 사진이나 아이템 배치랑 사이즈 조절하는 법에 대해서 좀 안일하게 생각했는데 다시 한번 강의 복습을 해봐야겠습니다.

오늘 드디어 사전스터디의 토이프로젝트를 기획하는 미팅을 가졌습니다. 각자 아이디어를 공유하고 무슨 기능을 넣을까를 고민하는 시간이었습니다. 결론부터 말하자면, 결론이 안나서 각자 아이디어를 구체화해서 내일 오전에 공유하기로 했습니다. 큰 틀은 만들었는데 얼마나 디테일하게 많이 구현해야 할지는 못정했습니다. 와이어프레임을 만드는 Basalmiq이라는 툴을 알게 되어서 내일 오전 미팅 대비하여 간단히 만들어 보았습니다. 

웹개발 종합반 내용을 바탕으로 한 아이디어 입니다.

1. 토이프로젝트: 맛집 공유하자🙆‍♀️

• 한줄 요약: 맛집 정보와 후기를 한눈에!
• 상세설명: 맛집 정보를 등록하고 후기를 쓸 수 있고 가고 싶은 곳을 저장하고 갔다 온 곳을 체크할 수 있는 웹사이트

2. 페이지 별 와이어프레임

로그인 페이지

• 로그인 페이지
• SNS (카카오톡, 네이버) 로그인 가능하다면 구현?

메인 페이지: 맛집 공유하기

• 스파르타피디아처럼 네이버 지도에서 장소 url 입력, 맛 별점 선택, 분위기 별점 선택, 상황 선택, 코멘트 남기기
• .append(temp_html) 를 사용해 밑에 붙이기
• '내 맛집에 추가하기'로 '내 맛집 리스트'에 추가하기

상세페이지

• 식당 정보 상세페이지
• 최초 등록자의 후기가 나옴
• 아래에 추가 후기를 이미지와 함께 등록할 수 있음

내 맛집 리스트

• 내가 추가한 맛집들을 볼 수 있는 페이지
• 리뷰 보기를 통해 상세 페이지로 이동
• 식당정보: 식당 이름, 음식종류, 위치(ㅇㅇ시 ㅇㅇ구) 
• 체크박스에 갔다온 곳 표시하기

가능할지는 모르겠지만 제가 할 수 있다고 생각하는 범위의 프로젝트를 구상해봤습니다. 여기서 웹개발종합반에서 안배운거라면 로그인 페이지 만들기와 이미지 업로드, 개인만 볼 수 있는 페이지 만들기 정도가 있습니다.

네이버 지도에서 식당 정보를 크롤링 하는 건 Beautifulsoup을 사용해서 해봤는데 가능했습니다. 

전에 포스팅에서도 자주 언급했지만 Sololearn이라는 모바일 학습앱을 다운받아서 JavaScript를 배우는 중입니다. Duolingo라는 앱을 아시나요? 언어를 배우는 앱인에 전세계적으로 수억명의 이용자가 있을정도로 유명한 앱입니다. 저는 Duolingo로 프랑스어랑 스페인어를 배우려고 '시도'했었던 경험이 있습니다. Sololearn도 학습하는 방법은 비슷합니다. 각 단계별로 레슨이 있고 레슨의 테스트를 통과해야 다음 레슨이 열리고 포인트도 쌓입니다. 각 문제마다 다른 사용자들이 남긴 코멘트도 볼 수 있어서 다른 사람들은 어떤식으로 같은 문제를 풀었는지 볼 수 있고 의견공유도 가능해서 좋습니다. 저같은 초보자가 언어를 배우기에 좋은 앱입니다.

sololearn이라는 카테고리를 만든 이유는 sololearn으로 공부하다가 test나 quiz에서 막히는 부분이나 기억하고 싶은 부분을 기록하고 싶어서 입니다. 늦게 시작한 만큼 더 빨리 배워야 한다는 생각이 들어서 진도를 쭉쭉 나가고는 있지만 복습은 필요하니까요. 지금은 JavaScript를 배우고 있지만 제 목표는 얼른 이번주까지 마무리하고 Java로 넘어가는 겁니다. 대학교 동기중에 Java를 배우다가 포기했다는 친구썰로는 도저히 못하겠다고 하던데 저는 아직 접해본적이 없어서 매우 궁금합니다. 

JavaScript 

The Console

• JavaScript는 웹 브라우저를 운영하는 프로그래밍언어이다.
• 대부분의 웹사이트는 JavaScript를 사용한다
• 문제가 생겼을 때는 console를 이용하여 에러를 찾는다

Assignment Operators

• operators를 사용해서 value를 지정한다. 

Comparison Operators

• 같은 data type일 때만 사용함

The For Loop

• for (i=1; i<=; i++) {}
• i =1 -> loop은 var i=1에서 시작한다
• i<=5 -> loop이 실행되는 조건을 정의한다
• i++ -> 코드가 실행될 때마다 value가 증가(++)한다

Prompt

• prompt( )
• prompt box가 팝업하면 input 입력 후 "OK" 또는 "Cancel"을 선택할 수 있음 
• 박스가 닫힐 때까지 다른 부분에 엑세스를 할 수 없음

Creating Objects

Methods

• Methods는 object를 정의하는 function임
• 아래 예시 참조;
• this keyword를 레퍼런스로 사용해서 현재 object를 사용
• this 키워드를 사용해서 ChangeName이라는 method를 정의함
• this.ChangeName = function(name) {this.name =name;}
• this.name은 object(여기서는 person)의 name을 말함
• this.name을 function(name)으로 바꾼다는 정의임
• var 이름을 다르게 했으면 더 이해가 되는 예시가 될 듯.  

Combining Arrays

• concat()
• arrays를 합쳐서 새로운 array를 만드는 method
• new-array = array1.concat(array2)

Array Properties & Methods 문제 

• 한번에 문제 이해 못하고 풀이도 잘 못해서 기록합니다.
• Q) 각 게임 레벨마다 포인트를 받는다. 프로그램은 통과한 레벨들 갯수와 각 레벨마다 받은 포인트들을 array로 기록한다. 모든 포인트들의 합을 계산해서 console에 output을 나타내라. 
• 해야하는 것은 array에서 points만 빼서 합을 구하기
• sample array가 [3,1,4,8] 이면 3은 레벨을 나타냄. 3을 빼고 1,4,8의 합을 output으로 나타내야함
• .reduce() function을 쓰는 것이 해답으로 나옴
  • The arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator. -> array에서 하나의 value를 빼고 실행하는 함수
  • array.reduce(accumulator, currentnumber) return a+b
  • accumulator는 여기서 fuction(a,b){return a+b}
  • 0이 current number
  • callback함수의 반환값을 누적함
  • 그러니까 여기서는 레벨값을 없애고 나머지를 더하기 위해 사용
• elem 은 element 줄임말이었음
• points[count]를 elem이라고 정의함
• var elem = parseInt(readLine(), 10);
  • Once <elem> had been read, it will be assigned as element in array <points>, and is stored at index <count>. points[count] = elem;
  • ->Sololearn 홈페이지 discuss에서 찾음; elem을 읽으면 points array에 할당이 되고 count에 index로 저장이됨
  •  https://www.sololearn.com/Discuss/2898009/javascript-39-2-practice-array-properties-methods
• 처음에 var sum=0 는 init value를 정해주는 것임. initial (최초의) 
• points arrays는 비어있음 그래서 points를 var elem 정의함

• 위의 이미지는 앱에서 보여준 해답이고 다른 방법으로는 for loop을 사용함; for 를 그나마 사용해봐서 그런지 이게 더 직관적으로 다가옴
• for (count=0; count<levels; count++){sum = sum+points[count]}
• count는 0에서 시작; levels보다 작을때 실행됨; count value는 증가함 {sum은 sum과 points array의 count를 더한 값임}

The Math Object

Date, time, setInterval, innerHTML

• innerHTML: HTML 안의 요소를 설정하거나 불러옴
• setinterval (function, 시간 ms) -> 1000ms 가 1초; 1초마다 해당 function 반복함)
• 1일 = 86,400,000 ms
• JavaScript는 월을 0 to 11 으로 셈

Sololearn이라는 학습앱을 강력 추천합니다. (광고 아님) 초보자에게 기본지식을 쉽게 학습할 수 있고 연습할 수 있게 해줍니다. 함께 배우는 유저들의 다양한 의견들과 코드를 보면서 이렇게도 할 수 있구나를 배웁니다. 아직 헷갈리는 부분이나 이해가 안되는 부분이 많이 있긴 하지만 첫 술에 배부를 수는 없겠지요. 

지난 섹션동안 배운 모든 것들을 활용해서 반응형 웹사이트 1 page를 만들었습니다. 여러가지 bootstrap 기능과 css를 활용해서 그럴듯한 모습입니다. 다양하게 활용하는 방법을 알려줘서 좋았습니다. 다음에 동생이 원하는 웹사이트를 이런식으로 만들어 봐야겠습니다. 

css

body {
    background: #f5d9d5;
    font-family: "Nunito", sans-serif;
}

h2 {
    color: #ea1c2c;
    font-weight: 100;
    font-size: 2.5rem;
}

#mainNavbar {
    font-size: 1.5rem;
    font-weight: 100;
}

#mainNavbar .nav-link {
    color: white;
}

#mainNavbar .nav-link:hover {
    color: #ea1c2c;
}

#mainNavbar .navbar-brand {
    color: #ea1c2c;
}

#headingGroup span {
    color: #ea1c2c;
}

#headingGroup h1 {
    font-weight: 100;
    font-size: 4rem;
}

.blurb p {
    color: #f498b8;
    font-weight: 100;
    font-size: 1.125rem;
    line-height: 2.0;
}

.content {
    margin-top: 100px;
    margin-bottom: 100px;
}

.navbar.scrolled {
    background: rgb(222, 192, 222);
    transition: background 500ms;
}

@media (max-width: 1200px) {
    #headingGroup h1 {
        font-weight: 100;
        font-size: 3rem;
    }

html

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Museum of Candy</title>
</head>

<body>
  <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
    <a href="#" class="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="navbar-nav">
          <a href="" class="nav-link">HOME</a>
        </li>
        <li class="navbar-nav">
          <a href="" class="nav-link">ABOUT</a>
        </li>
        <li class="navbar-nav">
          <a href="" class="nav-link">TICKETS</a>
        </li>
      </ul>
    </div>
  </nav>

  <section class="container-fluid px-0">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
          <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        </div>

      </div>
      <div class="col-lg-6">
        <img class="img-fluid" src="imgs/hand2.png" alt="">
      </div>
    </div>

  </section>

  <section class="container-fluid px-0">
    <div class="row align-items-center content">
      <div class="col-md-6 order-2 order-md-1">
        <img src="imgs/milk.png" alt="" class="img-fluid">

      </div>
      <div class="col-md-6 text-center order-1 order-md-2">
        <div class="row justify-content-center">
          <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
            <h2>MUSEUM OF CANDY</h2>
            <img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nobis eaque blanditiis
              odio
              consequuntur neque? Tempore quibusdam, nemo, necessitatibus ex repellendus error eos ab nesciunt eaque vel
              qui
              sed quod!</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row align-items-center content">

      <div class="col-md-6 text-center">
        <div class="row justify-content-center">
          <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
            <h2>MUSEUM OF CANDY</h2>
            <img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nobis eaque blanditiis
              odio
              consequuntur neque? Tempore quibusdam, nemo, necessitatibus ex repellendus error eos ab nesciunt eaque vel
              qui
              sed quod!</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img src="imgs/gumball.png" alt="" class="img-fluid">

      </div>
    </div>

    <div class="row align-items-center content">
      <div class="col-md-6 order-2 order-md-1">
        <img src="imgs/sprinkles.png" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 text-center order-1 order-md-2">
        <div class="row justify-content-center">
          <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
            <h2>MUSEUM OF CANDY</h2>
            <img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nobis eaque blanditiis
              odio
              consequuntur neque? Tempore quibusdam, nemo, necessitatibus ex repellendus error eos ab nesciunt eaque vel
              qui
              sed quod!</p>
          </div>
        </div>
      </div>

  </section>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script>
    $(function () {
      $(document).scroll(function () {
        var $nav = $("#mainNavbar");
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height())
      })
    })
  </script>

</body>

</html>

드디어 부트스트랩이 나왔습니다. css 지식으로 충만해지고 있는데 아직 프론트 엔드가 되고 싶은지는 모르겠습니다. 서버 쪽을 해봐야 알 것 같아요. 유데미 웹개발자 부트캠프 강의는 2022년 최신 버전이라고 알고 있는데 bootstrap은 4.5 version 이 나옵니다. 스파르타 웹개발 종합반에는 5.0 ver을 씁니다. (2022.10.25 기준) 방금 확인했는데 Bootstrap 5.2ver이 최신인 것으로 확인됩니다. 

일단 수업을 맞춰서 들어야 하니까 4.5 ver으로 다운받았습니다. 아래 강의 관련 질문에 보니까 앞에는 4. ver 쓰다가 뒤에 강의에는 5.ver가 나온다고 하네요. 

개발을 잘하게 될지는 아직까지는 미지수이지만 컴퓨터로 혼자 일 하는 것은 적성에 맞는 것 같습니다.

세상에 없는 무언가를 만드는 것도 어느정도 창의력을 요하는 일이라 재미있습니다.

CS 강의를 유튜브로 들으니 알고리즘이 여기저기 유명한 프로그래머들과 교수들의 강의를 추천해주는데 재밌습니다.

이제 알아 들을 수 있는 용어가 늘어서 그런 거 같기도 합니다. 

인상 깊었던 댓글은 Computer Science 라는 학문이 창시된 지 얼마 안 됐기 때문에 초기 이론, 언어 등의 창시자들을 아직까지 인터뷰할 수 있고 그 시대를 함께 살아간다는 거였습니다. 

마치 워런버핏이 근 30년 넘는 동안 발행된 거의 모든 투자 책에 언급되는데 아직도 살아서 주주총회 하는 것과 같은 느낌입니다.

Bootstrap은 스파르타 웹개발 종합반 강의 들으면서 많이 익숙해서 새로운 지식이라면

처음에 부트스트랩을 사용하려면 <head>에 link 태그를 넣어야 한다는 점입니다.

https://getbootstrap.com/docs/5.2/getting-started/introduction/

위의 사이트에 친절하게 어떻게 해야 bootstrap을 사용할 수 있는지 나옵니다.

버전 별로 조금씩 다른 점이 있으니 원하는 버전을 선택해서 (저는 그냥 url에 버전 숫자 바꿔서 찾았습니다.) 세팅하면 됩니다.

유데미 web developer bootcamp section 12 Bootstrap 강의는 친절하게 메뉴 하나하나 설명해주면서 어떻게 쓰면 되는지 알려줍니다.

Bootstrap을 기억하고 타이핑을 해되지만 대게 복붙을 해서 쓰는데 이런식으로 쓸 수도 있다 정도로 모든 요소들을 설명해줍니다.

• Bootstrap의 grid system의 row는 항상 12 units 가 최대 (e.g. 50% 하고 싶으면 'col-6' 그냥 col 만 있으면 evenly spaced)
• bg-'색깔'
• "col-6-md" -> 중간에 왔을 때 column으로 바뀌어서 stack이 됨
• "col-6-md col-xl-3" ->중간에 왔을 때 1 column으로 바뀌어서 stack이 됨 -> 가장 큰화면일때 4개 유닛으로 나뉘어짐(3/12씩)
•  <img class="img-fluid" src="" alt=""> :이 태그 넣고 위에 처럼 'col-xl-4' 같이 넣어주면 윈도우 크기에 따라 이미지 크기변경
• Navbar

저는 2배속으로 계속 듣고 있습니다. 

외울필요는 없어보이지만 한번 들어놓으면 나중에 찾을 때 편리할 듯 합니다.