검색 15일차까지
변수
선언 : let 변수이름
선언인수 var, let, const
var은 아래에 재선언 가능
let, const는 재선언하면 2번 선언했다고 에러
const는 상수화 시켜서 재할당 안됨
선언시
let a=3;
let b=3; 가능,
let a=3, b=3; 가능.
나머지 불가능
타입
숫자, 문자열, Boolean, undefined, 함수
문자열은 '' 그리고 "" 둘 다 써도됨,
``를 사용시에는 중간에 ${} 넣어주면 문자열 중간에 넣기 가능
ex) alert( `Hello, ${name}!` ); // Hello, John!
`` 백틱은 줄바꿈에서도 사용가능
NaN(Not a Number)은 숫자가 아닌 상태, NaN === NaN는 false임
함수
함수 선언식
function 함수이름(매개변수){
}
함수 표현식
const 변수이름 = function (매개변수){
}
화살표 함수
const 변수이름 = (매개변수) =>{
}
표현식과 화살표함수는 ;써도 됨
선언식은 호이스팅이 되고 표현식은 안됨 호이스팅 : 함수 안에 선언된 모든 변수들을 끌어올려서 해당 함수의 유효 범위(스코프) 최상단에 선언하는 것
조건문
if(조건){
}
else if(조건){
}
else{
}
===는 자료형까지 참이여야함
&& : and, || : or, ! : not
3항연산자 : 조건 ? 참일 경우 실행 : 거짓일 경우 실행
ex) c = a > b ? 1 : 0; a가 크면 c에 1 아니면 0
if() 안에 0을 제외한 숫자, 그리고 문자가 있으면 true
문자열
문자열을 ``로 묶으면 안에 ${변수}로 변수를 넣을 수 있다.
str.length : 문자열 길이
str.indexOf ('str', num) : 해당하는 str가 num번쨰로 (0이 처음) 나오는 (num 생략시 처음) 위치, 없으면 -1 반환
str.lastIndexOf('str') : 해당하는 str이 뒤에서부터 처음 나오는 위치 (이 위치의 반환은 앞에서부터 정상적으로 0부터 시작)
str.includes('str') : str이 있는지 Bollean값으로 반환
str.split('') : 괄호 안에 있는것을 기준으로 배열으로 나눠줌
str.join('') : 배열을 문자열로 변환 괄호안 생략하면 ,
str.slice(start, end) // slice는 배열에서도 쓸 수 있음
str.substring(start, end) : 둘다 start에서부터 end직전까지의 인덱스 값을 가진 문자들을 반환
slice를 더 많이 씀, slice가 더 세밀하게 지정가능 ex) 음수면 substring은 0취급이지만 slice는 음수로해서 계산 ,substring은 문자열만, start와 end자리를 바꾸면 substring은 똑같이 나오고 slice는 빈배열
str.toLowerCase() : str을 소문자로, str.toUpperCase(); : str을 대문자로
Math함수
ceil : 올림
floor : 내림
round : 반올림
abs : 절대값
pow : 제곱 (**도 제곱)
%는 나머지
parseInt를 사용시 'd1' 은 NaN '1d'는 1이 나오지만 Number을 사용시엔 둘다 NaN이 나옴
반복문
for문
for(초기값 ; 조건 ; 증감){
}
while문
while(조건){
}
일반적으로 for문은 반복횟수를 알때 while은 모를때
for문은 변수를 초기화 시키므로 이미 변수가 초기화됐다면 while을 쓰는게 직관적
무한루프식은 while(true)로 쉽게 가능
for in, for of, foreach // for in은 객체에서, for of는 배열과 문자열, foreach는 배열에서만
--for of--
nums = [1, 2, 3];
for(let i of nums){
console.log(i);
}
결과
1
2
3
--for in--
oo= { a : 1, b :2}
for (let key in oo){
console.log(key) // a b
console.log(oo[key] // 1 2
)
--foreach--
let arr= [1, 2, 3];
arr.forEach(function(element) {
console.log(element);
});
let arr = [1,2,3];
arr.forEach(element => console.log(element));
HTML // 참조하기 좋은곳 : https://yunbinni.tistory.com/63
HTML : 웹페이지 구조 담당 Structure
CSS : 디자인 요소 시각적 Presentationd
JS : 단순 한 웹페이지를 상호작용 Interaction
HTML : 웹페이지 구조 담당
HTML은 tag들의 집합
tag는 <>로 묶인것
HTML의 속성(attribute)는 두가지로 구성되는데 속성의 이름과 속성의 값
ex)<p class="paragraph"> This is a paragraph. </p> 에서 속성이름은 class, 콘텐츠는 This is a paragraph
구조
tree구조 html가장 상위 그 아래 head나 body같은거 그 아래또 자식노드
<!DCOTYPE html>. : html의 버전을 선언 html5부터 이걸로 통일됨
<html lang="ko"> : html 선언한국어
----------------------------이렇게 두개는 맨위에 그리고 html안에 <head>와 <body>가있음
html : 가장 큰 태그
head : 본문이 아닌거 title이나 meta태그 같은거
<head>
<meta charset="UTF-8">
<title>페이지 이름</title> // 위 쪽 메인탭의 이름
</head>
<body> // 본문
<h1>제목</h1> //숫자가 커질 수 록 크기가 작아짐
<strong>진한글씨</strong>
<div> 내용 </div> //전체적인 틀 짤때
<span> 내용 </span> //div는 박스형태 span는 줄 형태, span은 다른 span을 연달아 써도 이어써짐. 나눠써도 한줄
<section> 구역 구분 </section> //웹 페이지에서 큰 의미 단위가 될 수 있는 것들 묶어서 하나의 구역 구분 대체로 div보다 이게 나음
<p> 문단내용 </p>
<br> //줄 바꿈
<img src="~.jpg"> //이미지 삽입 /width, height, alt(깨졌을 떄), title(마우스 가져다 댔을떄) /가로나 세로 하나만 지정하면 비율에 맞게
<a href="주소">글자</a>// 링크/ targer="_blank"(새탭에서 열기)
<li>내용</li> //가장 기본적인 리스트
<ul>내용</ul> //li 상위에 있는 리스트를 묶어 주는 리스트
<ol>내용</ol> //ul과 같지만 번호가 앞에 붙음
input
input의 타입 : text, password, search, url, checkbox, radio, number 등 많음
ex) <input type = 'text' placeholder='안녕'>
requred : input 필수로 작성해야함
maxlength='15' : 글자수 최대 15
이런것들은 브라우저 자체기능인데 이것을 쓰려면 input을 form안에 넣어야함
<input type="checkbox">할 말
<input type="checkbox" checked>할 말. //기본설정이 체크상태
라디오버튼
<input type="radio" name="choice" value="a">a. //name으로 하나의 그룹으로 묶어줘야함
''
''
체크박스는 중복 체크 되지만 라디오버튼은 그 중 한개 선택
텍스트 에어리어
<textarea></textarea>
이건 줄바꿈이 됨
버튼
<button>이름</button>
# : html의 id속성 부여 // id는 문서내 하나의 요소에만 부여 가능
<h1 id=’hi’> ~~~~<h1>
. : html의 class속성
<li class=’menu>~~~</li>
자바 스크립트 실행을 위해
<script src="~~.js"></script>
css불러오기 위해
<link rel="stylesheet" href="이름.css" />
CSS
css를 불러 올떄
body 태그내부의 맨 마지막 줄, </body>. 왜냐하면 구조를 다 잡고나서 기능을 붙여줘야하니까 (따로 검색)
css기능 넣는 3가지 방법
1. css불러오기
2. html 같은 줄에서 선언하기
3. html 바로 다음줄에 style로 선언. 이것도 검색
색상// 속성 color
color : #000000// 글자 색상
background-color #~~~~~~// 배경색상
border-color : #~~~~~~// 테두리 색상
폰트//속성 font
font-style : 기울기 등 스타일// nomal : 기본, italic : 기울기
font-weight : 글 두께// 100~900 사이
font-variant : 글꼴 변형 (소문자->대문자)
font-size : 글 크기
letter-spacing : 자간
line-height : 행간
text-decoration : 밑줄 등 // underline : 밑줄, line-though : 가운데 줄
font-family : 글꼴
글꼴/// 속성 font-family
font-family: "a", "b";// a글꼴이 없으면 b글꼴 사용
크기// 속성 font-size
font-size: 24px
절대 단위 : px, pt
상대 단위 : %, em, rem, ch, vw, vh
1.환경에 영향 안받는 절대 크기. 인쇄같은곳에 써먹음 px
2. 일반적인 경우 rem. 브라우저의 기본크기 1rem
3. 반응형 웹. 디바이스의 너비에 따라 유동적. 디바이스 크기는 px로 정함
4. 화면 너비나 높이에 따른 상대적 크기 : vw, vh. ex)100vw
정렬
text-align// left, right, center, justify
박스
blcok : 줄바꿈이 되고 크기 지정 가능 // ex) <div>, <p>
inline : 줄바꿈, 크기 지정 불가능. // ex) <span>
inline box에 display : inline-block; 을 추가하면 자체 크기를 가짐
inline-block : 줄바꿈 안되지만 크기 지정 가능
하나의 박스를 구성하는 요소 범위 큰 순서대로
margin
border
padding
content
margin : 10px 20px 30px 40px; // 바깥여백 위 오른쪽 아래 왼쪽 순
boreder : 1px solid red ;// 테투리 / 각 영역이 차지하는 크기 파악 용이
padding : margin과 동일 // 안쪽 여백
박스를 벗어나는 컨텐츠는 overflow : auto 같은 속성을 부여하면 스크롤이 생김
---------------------------------
content-box, border-box // 박스 너비 편하게 잡기
<div id = "out"> 안에 <div = "in">이 있을때
#out {
width : 300px;
padding 10px
border : 2px solid red;
}
#inner{
width : 300px;
padding 10px
border : 2px solid red;
}
이면 out의 너비는 324px (300+10+10+2+2) in의 너비는 324(300px의 100%인 300+10+10+2)
그런데 이런식이면 박스 크기 계산하기 복잡하니까 css에
*{box-sizing : border-box;} //*은 모든 요소를 선택하는 셀렉터 html문서 전체에 적용됨
를 넣으면 여백과 테두리를 포함한 크기로 계산이 되더 편함
즉, content-box는 content의 너비가 기준이라 padding, border의 너비를 따로 계산해야함
border-box는 모든걸 포함한것을 너비로 잡음
-----------------------------
글자 바꾸기
ex) document.querySelector(".클래스 이름").textContent="어쩌고"; 이러면 어쩌고로 바뀜
----------------------------
화면 크기에 따라 이미지 크기 바꾸기
body {
width: 100%;
height : 100vh;
background-image: url('./data/bono.jpeg'); // background만 해도됨 -image는 이미지 여러개 중복해서 가능함
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
------------------------
css flexbox를 이용해서 절대크기 안줘도 부모영역 안에 빈자리 없이 정렬시키기
부모에 display: flex;
자식에 flex: 1; //선언하면 됨
justify-content: space-evenly; 빈곳있어도 정렬 같음.
align-items: center; //위 아래 정렬 같음
justify-content: flex-start;/* 이 줄과 아래 줄 검색*/
align-items: center;
css를 불러 올떄
body 태그내부의 맨 마지막 줄, </body>. 왜냐하면 구조를 다 잡고나서 기능을 붙여줘야하니까 (따로 검색)
css 호출 : <link rel="stylesheet" href="index.css" />
js를 불러 올떄
js 호출 : <script src='index.js'></script>
css기능 넣는 3가지 방법
1. css불러오기
2. html 같은 줄에서 선언하기
3. html 바로 다음줄에 style로 선언. 이것도 검색
셀렉터
h1{} : 일반적인 셀렉터
*{} : 전체 셀렉터
section, h1{} : tag 셀렉터
#only{} : id 셀렉터
.only{} : class 셀렉터
--attribute 셀렉터--
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
-------------------------
header h1{} : 후손 셀렉터
header > p{} : 자식 셀렉터
section + p{} : 인접 형제 셀렉터
section ~p{} : 형제 셀렉터 (모두)
--가상 클래스--
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }
---------------------
--요소 상태 셀렉터--
input:checked + span { }
input:enabled + span { }
input:disabled + span { }
----------------------------
--부정 셀렉터--
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
---------------------------
--정합성 확인 셀렉터--
input[type="text"]:valid { }
input[type="text"]:invalid { }
후손(하위) 셀렉터 : 자신과 그 아래 또 그 아래 모두
자식 셀렉터 : 자신의 자식만
*{} : 모든 엘리먼트 선택 // html싹다 선택
, 는 다중선택 // h1, h2{} 하면 둘다 선택
#laber.center : id가 laber이면서 class가 center인 것 선택 // 이땐 , 필요없음
#laber .center : id가 laber인 엘리먼트의 후손(하위)중 class가 center인 엘리먼트 선택
p > b : p의 자식 엘리먼트 b 선택 // ex) header > p : header의 자식 엘리먼트 p 선택
p + b : p와 인접한 형제 엘리먼트 b 선택
p ~ b : p와 인접한 형제 엘리먼트 b 모두 선택
p[b] : p 엘리먼트 중에서 b속성을 갖는 모든 엘리먼트
p[id=’b’] : p엘리먼트 중에서 id가 b인 속성을 갖는 모든 엘리먼트
p[class=’b’] : p엘리먼트중에서 class가 b인 속성을 갖는 모든 엘리먼트 // p중에서임 a하위에 b 클래스 있어도 해당 안됨
p:first-child : p의 엘리먼트 중에서 첫 번째 자식 엘리먼트 선택 // 첫 번째라는건 자식여부가 아
닌 그냥 첫줄 말하는거
ul > li : last-child : ul의 자식 엘리먼트 중 마지막 자식 엘리먼트가 li인것
ul > li : nth-child(3) : 3번째
section > p : nth-last-child(2n+1) : section의 자식 엘리먼트 p가 뒤에서부터 홀수인것
p : first-of-type : p의 형제 엘리먼트중 처음으로 나오는 p //first-child랑 다르게 첫 번째 자식 엘
엘리먼트가 아닌 처음 등장하는 p
p : nth-of-type(2) : 2번쨰의 p
p : not(#only) : p엘리먼트 중 id가 only인 것을 제외하고 모두
ul > li : last-child : ul의 자식 엘리먼트 중에서 마지막 자식 엘리먼트가 li인 것 선택
기본적인 레이아웃을 제거하는 코드
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
flexbox
부모박스에 display : flex를 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 방법
기본적으로 display : flex가 적용된 부모박스의 자식 요소는 왼쪽부터 차례로
flexbox는 박스가 수직으로 분할되는게 기본값
flex-direction : row : 기본값 수직분할, column : 수평분할
grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
자식요소에 flex속성을 추가하지 않으면 flex : 0 1 auto; 라는 기본값 적용 // 박스 크기가 다르면 flex : 1; 와 약간 다름 하나는 콘탠츠가 더 크게 약간 더 크고 하나는 완전히 박스 크기 같음
flex : <grow> <shrink> <basis> // 이 순서임
grow : 자식 박스들의 grow를 다 더하고 그 비율대로 크기 할당
ex) 자식 박스3개의 grow를 각각 2, 1, 1로 하면 처음 박스의 크기가 전체의 50%
shink : 비율만큼 작아짐 width, flex-basis속성에 따른 비율을 쓸 때 씀 일반적으론 예측 힘듦
basis : 박스 크기 지정 grow가 0일때만 적용
--참고--
wudth와 flex-basis를 동시에 적용하면 flex-basis가 우선
콘텐츠가 많아 자식 박스가 넘치면 width가 정확한 크기 보장x
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width대신 max-width를 사용 가능
flex-direction이 기본상태 즉 row일 때 main axis : 가로축, cross axis : 세로축
justify-content : main axis를 기준으로 정렬
부모 박스에 justify-content를 적용하면 자식 박스를 수평으로 정렬
flex-start : 처음
flex-end : 끝
center : 중앙
space-between : 양끝
align-items : cross axis를 기준으로 정렬
부모 박스에 align-items속성을 적용하면 자식 박스를 수직으로 정렬
flex-start
flex-end
center
stretch
justify-content: space-evenly; 빈곳있어도 정렬 같음.
align-items: center; //위 아래 정렬 같음
justify-content: flex-start;/* 이 줄과 아래 줄 검색*/
align-items: center;
CLI, nano, npm, Node.js, nvm
CLI(Command-line interface) : cmd나 터미널같은거 열어서 명령어로 컴퓨터 제어
GUI(Graphical user interface) : 편리하게 아이콘같은거로 나타낸거 ex) 파일 이동을 드래그 앤 드롭으로 할 수 있음
nano : 텍스트 에디터의 종류
npm(Node Package Manager) : 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자
일종의 앱스토어 같은 모듈 스토어 mac의 패키지 매니저가 brew이듯 node.js의 패키지 매니저
Node.js : 런타임 환경
nvm(Node Version Manager) : 버전 매니저. 다양한 node version을 쉽게 옮겨다닐 수 있게 해줌
Javascript : 프로그래밍 언어 js자체적으로는 브라우저에서만 동작하며 document를 다룸
node : 브라우저 밖의 자바스크립트 런타임 데스크탑에서 동작하며 js언어로 서버개발이 가능하도록 해주는 환경
프롬프트(prompt) : CLI명령줄 대기모드 // 글자가 입력되는 공간
“.”은 현재 폴더, “..”는 상위 폴더
pwd : 현재 위치
open . : 현재 위치를 GUI로 실행
mkdir 이름 : 폴더 생성 // 폴더 이름에 띄어쓰기 하려면 ‘\ ‘ 이렇게가 1칸 띄우기
2칸 띄우려면 ‘\ \ ‘ 이렇게 그냥 띄우면 폴더가 2개 생김
ls : 현 위치의 리스트 // -a : all, -l : 포멧 표현 포멧중 d로 시작은 폴더 -는 파일
cd 폴더이름: 폴더 진입 // 그냥 cd만 쓰면 /Users/choiimanseon 으로감. cd / 는 루트폴더
touch 이름.확장자 : 파일 생성
rm 폴더나파일이름 : 삭제 // 옵션 r : recursive 폴더 지울 때 사용, f : force 질문 안받기
mv 파일 폴더/ : 파일을 폴더로 이동
mv 전이름 후이름 : 파일이나 폴더의 이름 변경
cp 원본파일이름 복사할파일이름 : 파일을 복붙
cat : 파일의 내용을 출력
man -ls 명령어들 뭐 있는지 보기
code . : vscode 열기
homebrew 설치전에 xcode Command Line Tools 먼저 설치해야함
xcode-select --install
https://brew.sh/ homebrew 사이트 들어가서 설치
brew update: 패키지의 업데이트 여부 확인
brew outdated: 업데이트 필요한 파일 조회
brew upgrade: 프로그램 업그레이드
brew info: 프로그램의 정보 확인
brew install: 프로그램 설치
brew list: 설치된 프로그램 목록 보기
brew uninstall: 프로그램 삭제
https://github.com/nvm-sh/nvm nvm 설치 // wget로 시작하는거로
nvm --version : nvm 버전 확인
nvm install 15 : 15버전의 node.js설치 // m1은 적어도 15이상 설치해야함
nvm ls : nvm을 통해 설치한 node version들이 나옴
nvm install 버전번호 : 특정 버전의 node설치
nvm use 버전번호 : 그 버전 사용
nvm alias default v17 : 17버전으로 고정
/bin/bash -c "$(curl -fsSL https://codestates-content.s3.ap-northeast-2.amazonaws.com/npm-registry/registry.sh)" //최초1회 해야함 그래야지 과제제출 가능
cat ~/.npmrc // 이것을 썼을때 아래처럼 나오면 성공적 설치
//npm.pkg.github.com/:_authToken=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 @codestates-cc:registry=https://npm.pkg.github.com/
남이 만들어 놓은 모듈을 node.js에서 npm모듈이라고 부름
이 정보를 담은게 package.json 이건 실제 실행 모듈이 아닌 카탈로그 같은거
Package.json에서
script : CLI에서 사용가능한 명령어들 실행시키기
dependency : 이 프로젝트가 실행될 때 필요한 모듈들
devDependency : 개발할 때 필요한 모듈들(ex. Eslint(개발자가 보기 편하게), mocha(테스크 케이스 작성에 쓰임), chai(이것도 테스트 케이스))
npm install은 항상 폴더마다 해야함
npm run submit : 과제 제출
npx codestates-submission ls : 제출했는지 확인
git
git : 개발자의 코드를 효율적으로 관리하기 위해(소스 코드를 기록, 관리하고 추적하기 위해) 개발 된 분산형 버전 관리 시스템
github : git repository를 관리할 수 있는 클라우드 기반 서비스
commit : 백업 복사본(스냅샷)을 하나 하나 만들어주는 작업
repository : git으로 관리되는 폴더 // local repository는 나만의 remote repository는 공유 남들이 볼 수 있음
fork : remote repository를 내 원격 저장소로 가져오는거
clone : 내 원격저장소의것을 내 컴퓨터로 가져오는거
push : local repo에 기록해 놓은 commit을 remote repo로 업로드 하는거
pull request : 내가 제안한 코드 변경사항에 대해 반영 여부 요청
pull : remote repo에서 변경 사항이 있을 때 local repo로 가져오는 것
brew install git : git 설치
git --version : 버전확인
git config --global user.name "나의 사용자 이름" // 처음 등록
git config --global user.email "내 이메일 주소" // 처음 등록
git config --list : 현재 나의 설정값들
git config --global core.editor nano : 기본 텍스트 에디터 vi인데 nano로 바꾸기
SSH(Secure shell) : 보안이 강화된 shell접속
ssh-keygen : ~/.shh./ 에 id_rsa(비공개키)와 id_rsa.pub(공개키)를 생성. 두 파일은 ssh키 페어
cat ~/.ssh/id_rsa.pub : id_rsa.pub의 내용이 출력되면 공개키를 복사
git 홈페이지 세팅에서 등록
git clone <레파지토리 주소> : 원격 repo를 내 로컬에 이용할 수 있게 복사
git restore 파일이름 : commit 되지 않은 local repository의 변경사항 취소
git add 파일이름 : 내 local의 untracked file을 git의 관리 하인 staging area로 추가
git add. : staging area에 모든 파일 한번에 추가
commit 하기위해서는 git 관리하에 있는 영역으로 옮겨야함 이게 staging area
git commit -m ‘내용’ : commit메시지 작성
git reset HEAD^ : local commit중 최근거 삭제
git push origin branch : 내 local repository의 commit 기록들을 remote repository로 업로드
git push origin master : remote에 있는 origin의 master branch에 local repo의 변경 사항을 업로드
git log : 현재까지 commit된 내역들 (이 터미널창 종료는 q)
git diff : 변경사항 보는거
git init : 내 컴퓨터의 디렉토리를 git의 관리하에 들어가게 / 기존 프로젝트를 git repository
로 변환하거나 새로운 repository를 초기화하는 데 사용가능 -> local repo 생성
git remote add : local repo와 remote repo 연결
git remote add origin <repository 주소> : 내꺼 연결
git remote add 상대방 repo이름 <repository 주소> : 상대방꺼 연결
git remote -v : 현재의 lacal repo와 연결된 모든 remte repo확인
git pull pair master : 이 명령어로 페어의 remote repo의 작업내용/ 받아옴 자동으로 병합됨
git pull <shortname> <branch> : remote repo의 해당 branch내용을 local repo로 가져옴
자동 병합되다 보니까 페어와 내가 같은 줄 수정하면 충돌일어남 터미널에 merge conflict가 발생해서 automatic merge 실패했다고 뜸
git status : 이거로 뭐가 충돌했는지 알 수 있음
충돌한 파일 열어서 직접 수정해야함
accept current change는 내가 수정한 내용으로 파일에 반영
accept incoming change는 remote repo의 내용으로 파일에 반영
accept both changes는 모두 반영
수정을 마치면 merge commit을 생성해 주기 위해서 파일을 staging area로 추가해야함
push는 내꺼에 pull은 상대방꺼에
merge commit은 자동으로 commit메시지 생성 (git commit 만 쓰면됨)
두 개의 영역Committed, modified, staged
untracked area : git이 관리 하고 있지 않는 영역
tracked area : git이 관리하고 있는 영역
tracked area의 3가지 상태
unmodified(committed) : 기존에 commit했던 파일을 수정하지 않은 상태
modified : 기존에 commit했던 파일을 수정한 상태
staged : commit이 가능한 상태 (수정한 파일을 commit 하기 위해서는 staged area에
add 하는 작업이 필요
Changes to be committed라고 적혀 있는 초록색 파일은 staged 상태의 파일,
Changeds not staged for commit이라고 적혀 있는 빨간색 파일은 Modified 상태의 파일
서로 공유하기
1. 원본 파일을 각자가 fork한다
2. git clone <Repo url> 으로 컴퓨터에 클론을 만든다 (본인 페이지에서 / url은 https나 ssh같은거 복사하는거
3. git remote add <내가 지을 상대방 이름> <상대방의 fork url> / 상대방 repo와 연결
git remote -v : 이걸로 뭐랑 연결됐느지 확인
4. git add <파일이름> : 파일을 staging area로 올림 / git add. : 이건 싹다 올림
git commit -m '쓸말' : 커밋남기기
5. git push origin master : 나의 repository에 올리기 / master, branch는 폴더 이름 같은거
6. git pull <내가 지었던 상대방 이름> master : 상대방꺼 가져오기
zip파일을 받는 것은 git의 관리를 받지 않으므로 터미널 명령어로 git을 관리하자
zip을 받고 git init해도 다름 (clone하면 변경점도 다 다운됨)
master : 브렌치 이름
origin : 리모트 이름
origin이라는 이름으로 master 브렌치에 푸쉬한다
삭제는 push하기전에만 가능 로컬에 있을떄
git reset –hard : hard는 파일까지 삭제 soft는 변경 기록 삭제
clone은 모든거 복사해오고 pull은 최신 레포만 가져옴
배열
et arr = [1,2,3] // [] 안에 ,로 나눠서 배열 선언
요소(element) : 배열의 하나의 값
index : 배열의 순서
배열에 문자열을 넣을 수 있음
index를 벗어나면 undefined
let numbers = [[13, 30], [73, 8], [44, 17]]; // 처럼 배열안에 배열도 가능
console.table() : 표 형식으로 보임
arr.length : 배열 길이
Array.isArray() : 배열이면 true // typeof로 보면 object가 나옴 그래서 구분 안됨
arr.unshift(element) : 원본 바꿈. 맨 앞에 element 추가
arr.push(element) : 원본 바꿈. 배열 마지막에 element추가 (배열 길이가 늘어남)
arr.shift() : 원본 바꿈. 맨 앞에꺼 뺌
arr.pop() : 원본 바꿈. 마지막 배열 자체를 삭제
arr.splice(a, b, c, d) : 원본 바꿈. a에서부터 b만큼 제거후 c와 d 추가 // 추가만 하고 싶으면 b에 0 넣으면 됨
arr.reverse() : 원본 바꿈. 배열 반전
위에 6개의 메서드는 함수 자체를 변경시킴
let a=[1,2]; 에서 뒤에 2를 빼고싶다면
a.pop();
return a;
이렇게 해야함 a.pop()를 리턴하면 삭제되는 값이 출력됨
그리고
a=[1,2];
b=a;
b.pop();
를 하면 a와 b 둘다 [1]이 됨 a를 유지하고 b만 삭제하려면 2번쨰 줄에서 b=a.slice()를 해야함
arr.slice(start,end) : start이상 end미만 출력 // .slice()는 전체출력 복사할 때 사용
arr.join() : 괄호 안 내용으로 배열을 묶어 하나의 문자열로 / 생략하면 ,
배열 요소 포함 여부 확인
arr.indexOf(element) : element가 있는 index나옴, 없으면 -1
그래서 arr.indexOf(element) !== -1; 이 트루면 포함된거로 쓸 수 있고
이렇게 함수를 만들어 써도 되지만
function haselement(arr, element){
return arr.indexOf(element) !== -1;
}
이미 메소드가 있음
.includes(element) : 있으면 트루 // 하지만 includes는 index번호를 알 수 없으며 브라우저 호환성이 안좋아서 indexOf를 쓰는게 좋음
concat : array1.concat(array2) : array1+array2 // 두개의 배열을 합침 길이3과 2 면 5됨
arr.every( function ) : 배열의 모든 요소가 true면 true 아니면 false
arr.some( function ) : 배열의 요소중 하나라도 true면 true
arr.forEach( function(value) ) : 배열의 각 요소별로 함수 실행
arr.sort : 원본바꿈. 원소를 문자열로 취급해 사전적 정렬 ex) 1, 10, 11, 2, 30, 4
arr.sort(function(a, b) { // 오름차순
return a - b;
}) // return b - a; 하면 내림차순
arr.toString() : 문자열로 바꿈
arr.valueOf() : // 설명이 다 다름 해보니까 달라지는거 없는거 같음
arr.find() // filter와 유사하나 filter은 만족하는 배열이지만 find는 만족하는 값 하나만 반환
arr.findIndex() // 마찬가지로 만족하는 하나의 값의 인덱스
객체
배열은 순서가 있고 객체는 순서가 없음
객체는 키와 값쌍으로 이루어짐
let user = {
firstName: ‘choi’,
lastName: ‘manseon’
}
객체의 값 사용 방법 2가지 있음
1번. Dot notation // 키값을 문자열로 생성
user.firstName; // ’choi’
2번. Bracket notation
user[‘firstName’]; // ‘choi’
dot nocation이 보기는 편하지만 키 값이 동적으로 변할땐 bracket notation이 좋음
delete : 앞에 delete 붙이면 삭제됨 ex) delete user.fristName // 브라켓도 마찬가지
in : ‘firstName’ in user // true false로 해당 키가 있는지 확인 가능
Object.keys(a) : key를 배열로 보여줌
Object.keys(a).length : key의 갯수 //keys를 써줘야함
Object.entries(obj) : 객체를 배열로
obj = {a : 1, b : 2}; 라면
for(key in obj){
console.log(key); // a b
console.log(obj[key]); // 1 2 //여기서 key는 그냥 변수 다른거 해도됨
}
원시 자료형, 참조 자료형
primitive type data(원시 타입 데이터) : number, boolean, null, undefined, string, bigint, symbol
고정된 곳에 저장
feference type data(참조 타입 데이터) : array, object, function
고정된 곳은 주소값만 저장, heap이라는 공간에 동적(사이즈가 바뀜)으로 저장됨
이전에 궁금해 했던, 배열에서 b=a 하고 b에 pop()을 하는등의 변경시에 a또한 바뀌는 이유가 참조 타입 데이터라서 주소값을 받아오기 때문이다 또한 b[0]=10을 해도 a[0]이 10이 되지만 b=10처럼 재할당을 해주면 a와 b는 달라진다
scope(스코프)
scope : 변수의 유효범위
안쪽 scope는 바깥쪽에서 못씀 // 성처럼 생각 내부에선 외부 나가지만 외부 침략 방어
중첩 사용가능
가장 바깥 스코프는 global scope(전역 스코프), 그 외는 local(지역) 스코프
스코프는 {}이거 범위 즉, 지역 스코프에서 선언한 변수는 지역 변수
지역 변수는 전역 변수보다 더 높은 우선순위
block scope : 중괄호 기준으로 범위 구분
화살표 함수는 블록 스코프 취급
function scope : 함수 스코프
함수 스코프는 함수의 실행부터 종료까지, var 선언은 함수 스코프의 최상단에 선언, 선언 키워드 없는 선언은 최고 스코프에 선언됨
함수 내에서 선언 키워드 없는 선언은 함수의 실행 전까지 선언되지 않은 것으로 취급함
let, const, var
let // 재할당 가능 // 재선언 금지
재선언 방지
var // 재할당 가능 // 재선언 가능
블록 스코프 무시(화살표 함수의 블록 스코프는 무시 안함) // 블록 스코프 무시, 재선언해도 에러안냄, 전역변수로 사용시 브라우저의 내장기능을 못쓸 수 있음 그러므로 let이 좋음
const // 재할당 금지 // 재선언 금지
변수를 상수화 시켜서 재할당 금지
for( let i = 0 ; i < 3 ; i++){}
console.log(i);
let이라면 블록 스코프를 벗어 났기 때문에 에러가남
그런데 for안에 let을 var로 바꿔주면 i=2가 나옴
var은 블록 스코프 무시 하기 때문(화살표 함수의 블록 스코프는 무시안함)
선언 없이 변수를 할당시 함수안에 할당을 하더라도 그 변수는 전역변수로서 var로 선언한거 처럼됨
이러한 에러를 방지하려면 js 파일 상단에 ‘use strict’ (따옴표 포함)을 입력하면 엄격하게 작동하게함
브라우저에는 window 객체가 존재
브라우저의 창을 의미하지만 전역 영역을 담고 있기도 함
함수 선억식으로 함수를 선언하거나 var로 전역 변수를 만들면 여기에도 들어감
side effect : 여러 사람이 같이 개발시 전역변수를 많이 쓰게 되다보면 이름을 동일하게 지을 수 있음 // 그러니까 전역변수는 최소화하는게 좋음
클로저
const add = (x, y) => x + y; // 이거 와
const add = x => y => x + y; // 이거 와
const add = function (x) {
return function (y){
return x + y;
}
} // 이렇게 3개는 같은 의미
즉 클로저 함수는 함수를 리턴하는 함수 // 변수의 접근 범위를 닫는 폐쇄가 핵심
사용하는 의미는 y보다 x가 바깥 스코프에 있음
내부 함수는 외부 함수에 선언된 변수에 접근이 가능
클로저는 외부 함수의 실행이 끝나도 외부 함수 내 변수가 메모리에 저장
const add = function (x) {
return function (y){
return x + y;
}
}
이거를
add로 호출하면
f(x) {
return function (y){
return x + y;
}
}
이렇게 전체가 다 나오지만
add()로 호출하면
ƒ (y){
return x + y;
}
안쪽꺼만 나옴
그래서 const add5 = add(5); 하면
x는 5가 고정되어있고 y함수만 남아서 계산하는듯
--클로저 모듈 패턴--
const count = () =>{
let value = 0;
return{
up: () =>{
return value +=1;
},
down: () => {
return value -=1;
},
getValue: () => value
}
}
이렇게 해 놓으면
외부 스코프에선 내부 스코프 못 변경하므로 value값 못 바꿈
이것이 정보의 접근 제한(캡슐화)
const counter = count() // 로 선언해 놓고
counter.up() // 이런식으로 value값 간접적으로 조작
이런식으로 함수 재사용성을 극대화해서 함수 하나를 독립적인 부품 형태로 분리하는 것을 모듈화
--html 문자열 생성--
const tagMaker = tag => content => `<${tag}>${content}</${tag}>`
const divMaker = tagMaker('div'); //
divMaker('hello') //<div>hello</div>
divMaker('codestates') // <div>codestates</div>
const anchorMaker = tagMaker('a');
anchorMaker('go') // <a>go</a>
anchorMaker('urclass') // <a>urclass</a>
--html 문자열 생성2--
const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
htmlMaker('div')('code states') // <div>code states</div>
const liMaker = htmlMaker('li')
liMaker('1st item') // <li>1st item</li>
함수를 리턴하는 함수/ 원리 : 스코프를 외부 내부 나누어서 변수의 접근 범위를 나눔/ 유용성 : 함수 하나를 모듈화 시켜서 여러곳에 사용가능
가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것
구조분해
Spread : 배열을 배열아닌 요소로 펼침
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers) // 6
-----------------------
const name= {
name: '만선'
};
const attribute{
name: '만선',
attribute: '좋음'
};
const color= {
name: '살색',
attribute: '좋음',
color: '살색'
};
console.log(name);
console.log(attribute);
console.log(color);
이런것을
const name= {
name: '만선'
};
const attribute= {
...slime,
attribute: '좋음'
};
const color = {
...attribute,
color: '살색'
};
console.log(name);
console.log(attribute);
console.log(color);
이렇게 할 수 있다
let value= [1,2,3]
let value = Math.max(value); // 이러면 NaN나옴 Math.max(…value); 해야함
펼쳐서 넣어주는것임 즉, 배열같은것을 배열아니고 요소로
a=[1,2] 이면 b=…a하면 안되고 b=[…a]해야함
Rest : 매개변수로 쓰을 때, 배열아닌걸 배열형태로 받음
function sum(...num) {
return num.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10
구조분해
const [a, b, ...rest] = [10, 20, 30, 40]; // a : 10, b : 20, rest : [30, 40]
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} // a : 10, b : 20, rest : {c : 30, d : 40}
구조 분해 할당시 선언자 같이 써야함
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const returnedTarget = Object.assign(target, source);
target은 {a : 1, b : 3, c : 4}, source는 {b : 3, c : 4}
function abc() {
return arguments;
}
이런식으로하면 매개변수 상관없이 arguments에 다 담아버림 알규먼트는 무조건 오브젝트
arguments 객체는 배열이 아니기 때문에, 배열 메소드인 push를 사용할 수 없습니다. 이 점이 오랫동안 자바스크립트의 불편한 점으로 남아있어, ES6에서는 rest parameter를 사용할 수 있게 되었습니다.
DOM : Ddcument Object Moder // js에서 html의 내용을 조작하기 위한것
<script src=’myScriptFile.js’></script> // js파일 적용
js파일은 등장과 함께 실행
<script> 태그를 넣는 두가지 방법
1. <head>안쪽에 삽입
이건 <script>뒤에 나오는건 무시됨
2. <body>태그가 끝나기 전에 삽입
이게 나음 // js를 읽는 동안 html의 해석이 정지되므로 다 html이 끝나고 js 읽는게 좋음
(<script>태그를 body끝나기 직전에 넣으면 parsing(html)파일을 다 읽고 해서 버벅이는게 없는데 head에 넣으면 html읽다가 script에 들어가서 렌더링이 멈춰서
버벅임 (멈출 때 fetching과 execution을 하면서 멈춤 body끝에 넣는게 좋음))
console.dir : DOM 구조를 조회할땐 이게 나음 DOM을 객체의 모습으로 출력
document.body.children : 자식 속성 찾기
let a = document.body.children[1] // 이런식으로 변수에 할당 가능
CRUD : create, read, update, delete
Create
const tweetDiv = document.createElement('div')
Append
document.body.append(tweetDiv) : 만든 div를 body에 넣기
//append는 여러가지 자식 엘리먼트를 동시에 가능
//appendChild는 한번에 하나
Read
const container = document.querySelector('#container')
container.append(tweetDiv)
container의 마지막 자식 엘리먼트로 tweetDiv추가
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해선querySelector의 첫번째 인자로 셀렉터(selector)를 전달하여 확인가능
셀렉터로는 HTML 태그(‘div’), id(#tweetList), class(.tweet)가 가장 많이 사용됨
querySelector
const oneTweet = document.querySelector.(‘.tweet’) : 클래스 이름이 tweet인 html엘리먼트 중 첫번째 엘리먼트 조회
const oneTweet = document.querySelectorAll.(‘.tweet’) : 여러 개의 엘리먼트 한번에 가져옴 배열처럼 for문 사용가능하지만 유사 배열, 배열형 객체임 (Array-like Object)
get으로 시작하는 DOM 조회 메소드도 있지만 옛날 버전
update
tweetDiv.textContent = ‘할말’; // 만든 빈 div에 글 넣기
tweetDiv.classList.add(‘tweet’) // tweet로 calss 정해주기
innerHTML : string을 parsing해 엘리먼트로 변환하여 집어넣는 속성
textContent : 엘리먼트 내 content 부분에 text만 넣어주는 메소드
ineerHTML은 해킹에 취약 속성보다는 메소드를 쓰는게 안전
delete위치를 알 때 삭제
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
모든 자식 엘리 먼트 삭제
document.querySelector('#container').innerHTML = ''; // 또는 textContent = '' // 그런데 이렇게 자체값을 바꾸는건 보안상 문제가 있어서 메소드인 removeChild 쓰는게 나음 반복문으로 사용해서 하나하나 지우기
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
또는 직접 클래스 이름이 tweet인것들 찾아서 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
} id가 world인 것 안에 aElement 삭제시
aElement.remove() // 또는
document.querySelector("#world").removeChild(aElement)
( document.querySelector("#world").remove(),
document.querySelector("#world").remove(aElement) 두 메소드는 world 엘리먼트 전부를 지우게 됩니다. )
종합
const tweetDiv = document.createElement('div') // 생성
const container = document.querySelector('#container') // 조회
container.append(tweetDiv) // container에 넣기
tweetDiv.textContent = '할말'; // 만든 빈 div에 글 넣기
tweetDiv.classList.add('tweet') // tweet로 calss 정해주기
document.createElement(‘div’) : div 생성
document.querySelector() : 조회
document.cloneNode : 복제
document.importNode : template을 활용하여 내용을 붙여넣을때
document.querySelector('div') 는 최상단 div 하나만 조회합니다.
document.getElementById('div') 는 id가 div 인 element 하나를 조회합니다.
document.querySelectorAll(‘div’) 는 div를 모두 조회
document.getElementsByTagName(‘div’) : div모두 조회
document.getElementsByClassName('div') 는 class가 div 인 element 여러 개를 조회합니다.
abc.setAttibute('속성', '속성값')
아이디가 'hi'이고 내용이 'hello'인 div 태그 만들기
let aElement = document.createElement('div')
aElement.setAttibute('id', 'hi')
aElement.textContent = 'hello' // 이 방법이 좋고
//or
let aElement = document.createElement('div')
aElement.id = 'hi'
aElement.innerHTML = 'hello' // innerHTML을 쓰는건 안좋음 HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 해킹에 취약
id =’apply’인 버틀을 클릭시 글자 출력하려면
function displayAlert() {
alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert // 또는
document.querySelector('#apply').addEventListener('click', function(){
alert("코드스테이츠에 오신 것을 환영합니다")
})
html의 메시지를 안보이게 하려면 css로 조작해야하지만 js에서 가능
abc.style.display = 'none' // 이렇게하면 그 메시지가 안보이게 됨 // 다시 보이게 하려면 'none' 대신 'block'
그런데 더 좋은 방법이 있음 css를 쓰는거
css에
.hide{
display : none; // visibility: hidden 이건 영역크기는 남아있고 내용만 사라짐
]
이렇게 해준다음
html에 해당 메시지 class에 hide도 넣어줌 (띄어쓰기해서 넣으면 class이름 여러개 // class = 'a b c' 이렇게 따옴표 안에 넣어야함
그러면 현재는 메시지가 가려져있는데 js에
abc.classList.remove('hide') 이러면 보이게됨 // classList.add 하면 반대로
eventhandler : 이벤트가 발생했을때 실행되는 함수를 의미
.onkeyup = function(){ } // 키보드 누를때 발생 // 같은 방법으로 따로 함수 선언후에 .onkeyup = 함수이름 이렇게 해도 됨 이때 함수를 호출하지는 않음 즉 함수이름() 이건 안함
왜인지는 모르겠는데 ha 시험중 리액트 부분에 onClick={함수()}는 안되는데 onClick = {() => 함수()} 는 됐다 이유는 잘 모르겠다 에러메시지는 렌더링을 무한으로 한다고 그러는데 구글링해도 되는거 같은데.. this를 쓰기도 하는데 이거떄문은 아닌거 같다
이벤트 핸들러 할당방법 2가지
divElement.onclick=()=>{} // 일반적으로 하는거 내가한거 (예전방식)
divElement.addEvenListener(‘click’,()=>{}) // 위의 방식은 이벤트 2개하면 덮어 씌워지지만 이 방식은 중복가능
btn.onclick = handler; // 이벤트 속성에 이벤트 핸들러를 등록 할때는 함수 자체를 등록, 호출이아님 즉, handler에 ()생략
title.onclick=handler이거 보다 title.addEvenListener('click', handler)이게 좋음 왜냐하면 removeEventListener을 통해 event listener을 제거할 수 있어서
h1.classList.contains()
h1.classList.remove()
h1.classList.add()
h1.classList.toggle()
기타
복사의 종류
1. 단순 객체 복사 (주소 참조)
let a = [1, 2, 3];
let b = a;
2. 얕은 복사(shallow copy) : 다른 주소이지만, 참조 요소는 복사되지 않음 ex) Object.assign
const target = {a : 1, b : 2};
const source = {b : 4, c : 5};
const returnedTarget = Object.assign{targer, source}
3. 깊은 복사(deep copy) : 전부 온전하게 다른 주소
방법1. JSON.stringify : 객체를 스트링 포멧으로 변환
방법2. 반복문 활용 복사
방법3. lodash 라이브러리의 cloneDeep() 메소드 활용