Jin'story

sudo vi /etc/environment 에서  전역변수로 설정된다.

export Key=Value 입력

적용하려면 재부팅해야한다.

- mypassword는 yml에서 환경변수로 읽어오지 못한다는 사실을 아는데 꼬박 6시간이 걸렸다...

my_password로 수정하였다 

AWS에서 과금되지 않도록 RDS생성시 설정하는 방법을 공유한다.

AWS RDS를 들어가서 데이터베이스 생성한다.

상세설정

1. 본인이 원하는 DB유형을 선택한다.

2. 프리티어로 만들것이기 때문에 프리티어를 선택한다.

3. 

• DB 인스턴스 식별자 : 현재 AWS 리전에서 AWS 계정이 소유하는 모든 DB 인스턴스에 대해 고유한 이름을 작성합니다.
• 자격 증명 설정 : 마스터 사용자의 아이디/비번을 작성합니다.

4. 사용 목적에 맞는 성능을 고려하여 인스턴스를 선택한다.

프리티어는 선택할것 없이 기본값을 고르고 넘어간다.

5. (필수!) 스토리지는 20으로 반드시 설정 ->  스토리지 자동 조정 활성화를 꺼준다.

- 스토리지 자동조정 기본값이 1000Gib로 되어있는데 이상태로 사용하면 요금폭탄을 맞을 수 있다. 

스토리지 자동 조정기능은 스토리지 용량을 동적으로 조정하는 기능이다.

프리티어

• -단일 AZ db.t2.micro 인스턴스에서 Amazon RDS의 750시간.
• 20GB의 범용 스토리지(SSD).
• 20GB의 자동 백업 스토리지 및 사용자가 시작한 모든 DB 스냅샷.

6. 연결설정 퍼블릭 액세스 예로 선택 -> VPC보안그룹은 설정한 것이 있다면 선택, 없다면 새로생성을 선택하여 아래의 글을 참고

보안규칙에 내 IP 추가하기

- 설정을 마쳐야 내 IP에서 접속할 수 있다.

https://kjsu1994.tistory.com/38 

7. 가용 영역

• 서울 Region에는 ap-northeast-2a, ap-northeast-2c 두 개의 가용영역(AZ)이 존재한다.

8. 보안그룹은 설정된 것이 있다면 선택하고 없다면 추후에 설정해준다.

9. 암호인증

10. 보존기간 0일로 설정한다.

이설정기간이 길게 되어있으면 한참후에 요금이 폭탄으로 청구될 수 있다고 함.

11. 혹시몰라 유지관리설정도 꺼줬다. (자율)

엔드포인트는 RDS접속 주소이고 기본 포트번호는 3306이다

패스워드는 RDS생성시 입력했던 패스워드를 사용한다.

yml 설정

spring:
  datasource:
    url: jdbc:mysql://[엔드포인트]:3306/[DB명]?serverTimezone=Asia/Seoul
    username: [마스터이름]
    password: [패스워드]
  jpa:
    hibernate:
      ddl-auto: create
    show-sql: true
    properties:
      hibernate:
        format_sql: true
        default_batch_fetch_size: 1000 # N+1문제 해결

scp 를 사용한 방법이 있지만 어찌된 이유인지 Permission denied (publickey) 에러가 발생하여 연결하지 못했고 툴을 사용하여 편하게 옮기는 방법을 공유한다.

1. 우선 파일질라 설치를 위해 아래 링크로 접속한다(내가 받은 버전 첨부)

.

https://filezilla-project.org/

클라이언트용으로 설치한다.

2. 왼쪽 상단의 버튼 클릭

3. 연결할 EC2 서버에 대한 정보들을 적는다

1. 새사이트에서 원하는 이름을 설정한다.

2. SFTP를 선택한다 ssh형식으로 연결된다.

3.

- 나는 EC2 탄력적 ip를 사용하여 연결하였으며 public 주소를 연결하여도 무방하다.

- 포트번호는 22(ssh)를 적는다.

4.

- 로그온 유형 :  키파일을 선택

- 사용자 : EC2 로그인시 사용자 이름 입력, 나는 ubuntu였다.

- 키파일 : EC2 접속을 위한 키페어를 등록한다.

5. 편하게 이동할 파일들을 업로드 또는 다운로드 하면 된다.

- 업로드 : 로컬 -> 서버

- 다운로드 : 서버 -> 로컬 

1. 빌드하여 배포파일 만들기

*로컬에서 빌드하여 배포파일 만들기

• Windows 터미널의 경우,

1
PS D:\codestates\project\section3-week4-build> .\gradlew bootJar

• Git Bash의 경우

1
2
MINGW64 /d/codestates/project/kdt/for-ese/section3-week4-build (main)
$ ./gradlew build

빌드가 정상적으로 종료되면 IntelliJ에서 빌드를 진행 할 때와 마찬가지로 build/libs 디렉토리에 Jar 파일 하나가 생성된다.

생성된 파일을 파일질라 or scp명령어를 통해 ec2로 옮긴다.

* EC2에서 빌드하여 배포파일 만들기

1. java 설치

$ sudo apt update

어느 정도 시간이 지나고 업데이트 과정이 끝나면 java를 설치

$ sudo apt install openjdk-11-jre-headless

아래와 같은 확인창이 나올경우 "Y"를 입력

Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  libasound2 libasound2-data libgraphite2-3 libharfbuzz0b
Suggested packages:
  libasound2-plugins alsa-utils libnss-mdns fonts-dejavu-extra fonts-ipafont-gothic fonts-ipafont-mincho fonts-wqy-microhei
  | fonts-wqy-zenhei fonts-indic
The following NEW packages will be installed:
  libasound2 libasound2-data libgraphite2-3 libharfbuzz0b openjdk-11-jre-headless
0 upgraded, 5 newly installed, 0 to remove and 70 not upgraded.
Need to get 37.9 MB of archives.
After this operation, 173 MB of additional disk space will be used.
Do you want to continue? [Y/n]

설치 과정이 마무리되면, java -version 명령어를 입력하여 java 라이브러리가 설치가 완료되었는지 확인

2. 깃에서 배포할 서버 클론받기

먼저 EC2상에서 SSH키를 깃허브 레파지토리에 등록해야한다.

등록방법은 이곳에서 확인할 수 있다.

SSH 등록을 마쳤다면 인스턴스 시작시 기본 경로가 아닌 홈 경로(~)로 이동하여 clone

ssm-user@ip-172-31-41-164:/var/snap/amazon-ssm-agent/1234 $ cd ~
ssm-user@ip-172-31-41-164:~$ git clone git@github.com.git
Cloning into 'git'...
Username for 'https://jinsu.com': jinsu
Password for 'https://jinsu@github.com:
...

클론 진행 여부에 대한 질문이 나올 경우 yes를 입력해 실습 코드를 클론하고 

ls명령어를 통해 클론받은 디렉터리명을 확인

cd명령어를 통해 해당 디렉터리로 이동

cd [클론받은 디렉터리명]

이후 빌드작업을 진행합니다.

./gradlew build

정상적으로 빌드가 완료되었으면 터미널에 ls명령어를 입력하면, build폴더를 확인할 수 있습니다.

2. EC2에서 서버 실행하기

로컬이나 EC2환경 둘중의 한가지 방식을 선택하여 jar형식의 배포파일을 EC2에 생성했다면

EC2에서 서버 실행 :  java -jar [파일명.jar] 

이방식을 사용하면 ctrl + c를 사용하거나 쉘을 닫으면 서버도 종료된다.

* 그렇기 때문에 사용할 방법은 백그라운드에서 서버 돌리기

1. nohup java -jar [파일명].jar &   

을 입력하면 백그라운드 상황에서 서버가 실행된다.

& 은 백그라운드로 돌아가게 해주고

nohup은 서버 구동 시 기본적으로 쌓이는 로그들을 파일로 만들어준다.

2. cat nohup.out 으로 쌓인 로그들을 볼 수 있다.

3. 종료를 위해서는 PID가 필요하다.

grep으로 걸러서 쓰자

ps -ef | grep '[원하는 단어]'

예를 들면 ps -ef | grep 'java' 

4. PID를 찾았으면

kill [PID 번호]

== kill -15 [PID 번호]

kill -9 는 강제 종료이니 -15로 일반 종료임을 알려주자. 

물론 kill이랑 똑같다. 

이렇게 하면 프로세스가 죽는다.

스프링 부트에서 AWS에 연동하여 S3버켓에 파일 업로드를 하기위해 찾아보았다.

블로그 글들을 보며 사용자를 생성하였는데 AWS가 조금 변경되었는지 엑세스키가 생성이 되지 않았다.

엑스키를 직접 생성해 주어야 하는것 같다

방법은 다음과 같다

사용자를 생성하면 우측에 엑세스키가 활성화 되지 않는다고 뜬다.(본인은 이미 만들어서 엑세스키 활성화되어있음)

1. 보안 자격증명 -> 엑세스키 만들기 클릭

2. 엑세스키 모범사례 및 대안에서 로컬 코드 선택

3. 태그는 선택적으로 사용. 비워둔채로 엑세스키 만들기 눌러도 된다.

4. 생성된 엑세스 키와 시크릿 키를 잘 기억하고 저장해둔다 .

5. 최초 화면처럼 엑세스키가 생성된것을 확인할 수 있다.

진행사항 :  API명세서 수정, AWS계정 생성 및 테스트서버 배포

그동안 딱히 새로운 오류가 없어 작성하지 않았다 

AWS계정 생성하고 인스턴스를 직접 생성하는건 처음이라 며칠동안 삽질하고 정리한다.

* AWS계정 생성 및 서버 배포방법 정리

1. 프리티어 계정으로 생성

2. EC2 인스턴스 생성

- Ubuntu 선택 / micro 선택 / 인증서는 PPK키를 받아야 putty를 통해 접속할 때 용이하다.

- IAM을 생성 / 권한정책 및 신뢰관계는 다음과 같이 설정 및 수정한다

- 생성된 EC2인스턴스 우클릭 -> 보안 -> IAM 역할수정 -> 생성된 IAM 연결

- 보안 -> 인바운드 규칙 아래와 같이 추가

- 탄력적 IP는 생성 후 즉시 EC2인스턴스에 연결해야 요금이 부과되지 않는다. 나는 몇분동안 연결안된채로 놔두었더니 아주 조금의 요금이 부과되었음! 

3. 인스턴스 실행 -> putty접속

- 발급받은 ppk인증서는 connection->SSH->Auth-> credentials에서 다음과같이 불러오고 할당받은 퍼블릭Ipv4또는 탄력적 Ip주소를 기입한다 (SSH 포트번호는22)

* EC2 인스턴스 접속 후 개발 환경 구축

- Putty SSH통신을 통해 접속하고 아이디를 입력하여(보통ID는 Ubuntu) 로그인한 뒤 다음의 설정을 마친다

패키지 매니저가 관리하는 패키지의 정보를 최신 상태로 업데이트하기 위해서 아래 명령어를 터미널에 입력한다.

$ sudo apt update

어느 정도 시간이 지나고 업데이트 과정이 끝나면 java를 설치해야 한다.

$ sudo apt install openjdk-11-jre-headless

아래와 같은 확인창이 나올경우 "Y"를 입력한다

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
  libasound2 libasound2-data libgraphite2-3 libharfbuzz0b
Suggested packages:
  libasound2-plugins alsa-utils libnss-mdns fonts-dejavu-extra fonts-ipafont-gothic fonts-ipafont-mincho fonts-wqy-microhei
  | fonts-wqy-zenhei fonts-indic
The following NEW packages will be installed:
  libasound2 libasound2-data libgraphite2-3 libharfbuzz0b openjdk-11-jre-headless
0 upgraded, 5 newly installed, 0 to remove and 70 not upgraded.
Need to get 37.9 MB of archives.
After this operation, 173 MB of additional disk space will be used.
Do you want to continue? [Y/n]

설치 과정이 마무리되면, java -version 명령어를 입력하여 java 라이브러리가 설치가 완료되었는지 확인합니다. 명령어를 입력했는데 오류가 난다면 java 설치 과정이 정상적으로 마무리되지 않은 것입니다.

다음으로 AWS CLI를 설치합니다.

$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
$ sudo apt install unzip
$ unzip awscliv2.zip
$ sudo ./aws/install

aws --version 명령어를 통해 AWS CLI의 설치 여부를 확인.

$ aws --version

aws-cli/2.1.39 Python/3.8.8 Darwin/20.4.0 exe/x86_64 prompt/off
# 이런식의 문구가 보인다면 설치가 성공적으로 마무리된 것입니다.

다음으로 EC2 인스턴스에 CodeDeploy Agent를 설치합니다. 아래 명령어를 차례대로 입력

$ sudo apt update
$ sudo apt install ruby-full                # [Y / n] 선택시 Y 입력
$ sudo apt install wget
$ cd /home/ubuntu
$ sudo wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
$ sudo chmod +x ./install
$ sudo ./install auto > /tmp/logfile

위의 마지막 명령어 실행 후 다음의 이미지와 같은 에러가 발생하는 경우엔 관련 로그를 지운 뒤 다시 설치.

삭제 로그 파일

• /tmp/codedeploy-agent.update.log
• /tmp/logfile

  

설치가 완료되면 다음 명령어를 이용해 서비스가 실행중인지 확인

$ sudo service codedeploy-agent status

* 파이프라인 생성

1. CodePipeline 검색 후 접속

2. 배포 ->EC2/온프레미스로 애플리케이션 생성  

3. 파이프라인 생성 깃헙과 연결하였다.

연결되어 배포된 파이프라인 이다.

- Source 오류 : Github연결 혹은 애플리케이션 생성시 발생한 오류일 확률이 높다

- Build 오류 : 작성한 코드에 관련한 오류들 / 로컬환경에서 정상적으로 작동한다면 scripts혹은 yml파일 설정들에 있는 경로들이 문제일 확률이 매우 높다

- Deploy 오류 : 생성된 EC2와 연결과정에서 오류일 확률이 높다

참고할 설정파일들 올려둠

# CORS
자바 스크립트 -> 웹페이지 -> 서버에 응답요청해도되는지? -> 해도된다 ok신호 -> 응답요청 -> 응답 -> 자바스크립트에 데이터 전송

# HTTP messages 
- HTTP의 특징 : 무상태성 -> HTTP로 클라-서버 통신과정에서 서로의 상태를 확인하지 않음
- 응답 / 요청 두가지의 유형 존재

* 구조
- start line : 항상 첫줄에 위치하며 요청이나 응답상태를 나태냄
- Http headers : 요청을 지정하거나 메세지에 포함된 본문을 설명하는 헤더 집단
- empty line : 헤더 / 본문 사이에 위치(구분)
- body : 요청/응답 과 관련된 데이터나 문서를 포함, 유형에 따라 선택적으로 사용

* 요청 Requests {
Start Line // 3요소
1. 수행할 작업(GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명하는 HTTP method를 나타냄
2. 요청 대상(일반적으로 URL이나 URI) 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성
origin 형식 : ?와 쿼리 문자열이 붙는 절대 경로 
absolute 형식 : 완전한 URL 형식으로, 프록시에 연결하는 경우 대부분 GET method와 함께 사용
authority 형식 : 도메인 이름과 포트 번호로 이루어진 URL의 authority component 
asterisk 형식 : OPTIONS 와 함께 별표() 하나로 서버 전체를 표현
3. HTTP 버전에 따라 HTTP message의 구조가 달라짐. 따라서 start line에 HTTP 버전을 함께 입력

Headers : 요청의 Headers는 기본 구조를 따르며 헤더 이름(대소문자 구분이 없는 문자열), 콜론( : ), 값을 입력
- General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더
- Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더를 의미. 
User-Agent, Accept-Type, Accept-Language과 같은 헤더는 요청을 보다 구체화. Referer처럼 컨텍스트를 제공하거나 If-None과 같이 조건에 따라 제약을 추가 가능
-  Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함

Body 
- 모든요청에 Body가 필요하지 않으며  GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않음
- POST나 PUT과 같은 일부 요청은 데이터를 업데이트하기 위해 사용 
- body의 종류 : 
Single-resource bodies(단일-리소스 본문) : 헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 파일로 구성
Multiple-resource bodies(다중-리소스 본문) : 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보를 지님. 보통 HTML form과 관련
}

* 응답 Response {
Status line : 응답의 첫줄
1. 현재 프로토콜의 버전(HTTP/1.1)
2. 상태 코드 - 요청의 결과를 나타냄 (200, 302, 404 등)
3. 상태 텍스트 - 상태 코드에 대한 설명
- 예시) HTTP/1.1 404 Not Found.

Headers
- General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더
- Response headers : 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더로, Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공
- Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더

Body
- bodyd의 종류
Single-resource bodies(단일-리소스 본문) :
길이가 알려진 단일-리소스 본문은 두 개의 헤더(Content-Type, Content-Length)로 정의. 길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 chunked 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩
Multiple-resource bodies(다중-리소스 본문) : 서로 다른 정보를 담고 있는 body
}


# API 
- 클라이언트 <--> 서버간의 통신 프로토콜
- 웹 애플리케이션 아키텍쳐에서는 HTTP 프로토콜을 사용, 주고받는 메세지는 HTTP message라고 부름
- 서버가 클라이언트에게 리소스를 활용할 수 있도록 인터페이스를 제공하는것을 API라고함 // 메뉴판과 같음


* HTTP API 디자인
- HTTP API는 그저 리소스를 달라는 GET요청이 아닌 사용자관리 API는 사용자 추가요청(CREATE), 삭제요청(DELETE) 가능
- CRUD 각각의 행동과 일치하는 HTTP메서드의 종류가 존재
- GET조회 / POST추가 / PUT(PATCH)갱신 / DELETE삭제가 있음

#프론트엔드

서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어  

서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어서버 – 클라이언트 : 2티어 아키텍쳐 / 클라이언트 – 서버 – DB : 3티어 아키텍쳐

HTML : 웹페이지의 구조 // 10.24

<> 태그의 집합, html->head(title)->body(h1, div(span))

<p> 하나의 문단 표현 / <section> 하나의 구역 표현

<img src = “파일주소”>/<a href = “인터넷주소” target=네이버</a>

<div> 태그 한줄을 차지 / <span> 컨텐츠 크기만큼 차지

<ul><li> 내용(리스트로 표시) / <ol> 넘버링 리스트

<input type= “text” (텍스트 박스) placeholder=“type here”(박스 안의 글)>

<input type= “radio” (체크박스) name=“그룹1”> 옵션1 <- name 같은이름 = 같은그룹

<textarea>줄바꿈 되는 입력폼

<button>로그인</button>

attribute name(속성의 이름) / attribute value(속성의 값) 으로 분류됨

CSS : 웹페이지 스타일(디자인)

<link rel:“stylesheet” href=“파일명“ /> <link>는 HTML 파일과 다른 파일을 연결하는 목적으로 사용

셀렉터 : id 한가지 요소(# 사용) / class 여러 요소(. 사용)

font-family : 폰트설정 ”“붙여 사용

굵기: font-weight

밑줄, 가로줄: text-decoration / letter-spacing / line-height

text-align : 가로정렬

- Flexbox : 부모를 조정해서 자식들을 한번에 변경할 수 있음

- 진한노랑(자식)/옅은노랑(부모) - 항상 부모요소에게 말을 걸어 자식요소를 조정한다.

x, y축은 고정적이지 않음 / 경우에 따라서 두 개가 바뀔 수 있음

flex-direction : row / column <- 축이 바뀐다

justify-content(가로축) : flex-start / align-items(세로축) : flex-end

정렬 방향 : row -> / column 아래 / row-reverse <- / column-reverse 위

ex) ul li

JavaScript : 상호작용

#CLI 명령어

pwd: 현재 위치를 확인하는 명령어

mkdir: 새로운 폴더를 생성하는 명령어

ls: 폴더나 파일의 목록을 출력하는 명령어

open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어

cd: 폴더에 진입하는 명령어

touch: 새로운 파일을 생성하는 명령어

cat: 파일의 내용을 터미널에 출력하는 명령어

rm: 폴더나 파일을 삭제하는 명령어

mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어

cp: 폴더나 파일을 복사하는 명령어 // 폴더복사 시 반드시 r 포함

sudo: 관리자 권한을 이해할 수 있다.

목록에 .zshrc가 있으면 nano .zshrc를 입력하여 편집창을 엽니다. // 환경변수 영구편집

- 목록에 .bashrc가 있으면 nano .bashrc를 입력하여 편집창을 엽니다.

nano /etc/profile을 입력하여 입력창을 엽니다.

- 참고로, 이 명령어