20250407 데브코스 프론트엔드 Day25
💡 인사이트
- 포크는 내 소유가 아닌 레포지토리를 내꺼로 복사해오는 것인데, 남의 레포지토리를 포크로 찍어 먹는다는 느낌.
- git branch는 커밋된 브랜치를 확인하는 명령어.
- git 명령어는 .git 폴더가 있는 곳에서 사용하는게 가장 좋다.
- 현재 위치 확인하는 명령어는
pwd.- 경로 적을 때 일부분만 작성하고
tab누르면 자동완성됨.fn+control+space-> 어떤걸 적을 수 있는지 보여줌.- name변수는 못 쓰게 해서 uname으로 짓는 편이다.
- code runner extension은 드래그한 부분만 실행시킬 수 있음.
- caniuse.com에 들어가면 메서드가 어느 브라우저에서 지원 되는지 확인 가능함. global %가 80%이상만 돼도 사용해도 되는데, 조직 규칙을 따르면 된다.
- ESNext는 미래 지향적 설정. 특정 년도/버전을 의미하는게 아닌 출시 예정인 다음 버전을 의미함.
- 웹브라우저는 항상 html, css, javascript만 실행 가능함. 요즘은 어셈블리어도 가능하도록 업데이트 되는 중이긴 하지만 아직은 html, css, javascript만 실행 가능.
rm -rf ./.*
폴더 안에 숨겨진 파일까지 모두 삭제하는 명령어.
컴퓨터의 모든 파일을 지워버릴 수 있기 때문에 조심해야 한다.
git push origin 브랜치명 vs git push -u origin 브랜치명
- git push origin 브랜치명 : 원격에 브랜치가 새로 만들어지고 코드가 업로드됨. 다만, 로컬과 원격이 아무런 연관관계가 없음. 즉, 계속 git push origin 브랜치명으로 push 해야 됨.
- git push -u origin 브랜치명 : 원격과 로컬이 서로 연결관계가 맺어짐. 이후부터는 git push만 하면 된다.
따라서 git push -u origin 브랜치명을 권장함.
git pull도 마찬가지로
git pull은 참조관계가 맺어졌을 때 사용.
따라서 git pull -u origin 브랜치명을 먼저할 것.
git clone 클론할레포지토리링크 .
클론할 레포지토리를 내부의 폴더로 만들지 않고 그냥 해당 폴더를 클론한 레포지토리로 만드는 방법.
마지막에 띄어쓰고 .을 찍으면 됨.
구조 분해 할당(비구조화 할당)
분해해서 할당하겠다.
배열
배열이면 껍데기가 배열이어야 함.
const [apple, banana, orange] = ["apple", "banana", "orange"];
인덱스에 맞춰서 들어간다.
따라서 아래와 같이 작성할 경우, banana와 orange는 없어진다.
const [a] = ["apple", "banana", "orange"];
console.log(a); // apple
const [, , c] = ["apple", "banana", "orange"]; // <- 가능함
console.log(c); // orange
객체
객체면 껍데기가 객체여야 함. 또한, 속성의 키값을 그대로 가져서 받아야 됨.
즉 속성의 키 값이 animalName이었으면, 변수명을 animalName으로 받아야 됨.
const { animalName, animalType, animalAge, animalGender } = {
animalName: "곰이",
animalType: "고양이",
animalAge: 10,
animalGender: "male",
};
console.log(animalName); // 곰이
변수명 키값과 다르게 설정
만약 다른 이름으로 받아오고 싶다면 : 사용.
ie. 키 값: 원하는 변수명
const { animalName: aname } = {
animalName: "곰이",
};
console.log(aname); // 곰이
중첩된 객체 구조 분해 할당
const {
id,
profile: { age },
} = {
id: 1,
profile: {
name: "곰이",
age: 20,
gender: "male",
},
};
console.log(age); // 20
3번 중첩되어 있다면
const {
cid,
profile: {
cats: { cage },
},
} = {
cid: 1,
profile: {
cats: {
cname: "곰이",
cage: 20,
cgender: "male",
},
},
};
console.log(cage); // 20
활용
아래와 같이 함수의 매개변수로 많이 전달함.
function printInfo({ name, age }) {
console.log(`${name}, ${age}`);
}
printInfo({
name: "yeonseo",
age: 25,
});
계산된 속성 []
객체의 키를 변수로 치환할 수 있음.
const key = "name";
const user = {
[key]: "yeonseo",
};
접근은 두가지 방법(.으로 접근, []로 접근)이 가능함.
console.log(user.name);
console.log(user[key]);
스프레드 연산자
깊은 복사처럼 보이는 얖은 복사가 가능함.
왜 얕은 복사냐하면 중첩된건 깊은 복사 안되기 때문에, 1중첩만 깊은 복사 해준다.
cf. 원래 자바스크립트는 배열을 복사후, 복사한 배열의 값을 바꾸면 원래 배열의 값도 바뀐다.
const colors = ["red", "orange", "banana"];
const copyColors = [colors];
copyColors[0] = "pink";
console.log(colors[0]); // "pink"
안바뀌게 하고 싶을때, 스프레드 연산자 사용이 가능하다.
const colors = ["red", "orange", "banana"];
const copyColors = [...colors];
copyColors[0] = "pink";
console.log(colors[0]); // "red"
주의할 점은 스프레드 연산자는 얖은 복사기 때문에, 1중첩만 깊은 복사를 해준다는 것이다.
아래의 경우는 값이 바뀐다.
const colors = ["red", "orange", "banana", { special: "pink" }];
const copyColors = [...colors];
copyColors[0] = "pink";
copyColors[3].special = "grey";
console.log(colors); // [ 'red', 'orange', 'banana', { special: 'grey' } ]
console.log(copyColors); // [ 'pink', 'orange', 'banana', { special: 'grey' } ]
따라서 1중첩이라는 확신이 있을 때는 스프레드 연산자로 복사하고,
아닐때 깊은 복사는 structuredClone()로 한다.
cf. 과거에는 JSON.parse(JSON.stringify(colors));를 사용해서 깊은 복사 했었음.
const colors = ["red", "orange", "banana", { special: "pink" }];
const copyColors = structuredClone(colors);
copyColors[0] = "pink";
copyColors[3].special = "grey";
console.log(colors); // [ 'red', 'orange', 'banana', { special: 'pink' } ]
console.log(copyColors); // [ 'pink', 'orange', 'banana', { special: 'grey' } ]
타입스크립트
자바스크립트를 확장한 언어.
자바스크립트 + 타입 시스템을 추가한 언어다.
let num1: number = 10;
결국 값의 타입을 지정해주는 것인데, 타입스크립트가 왜 어렵다는 생각이 드냐면 값에 대한 타입을 지정하는 방법이 많기 때문.
타입을 지정하면 불필요한 실수를 예방할 수 있다는 장점이 있다.
타입
string, number, boolean, object, array, tuple, undefined, null, any, bigint 가 있음.
동적 타입 시스템 vs 정적 타입 시스템
자바스크립트는 동적 타입 시스템. 할당과 동시에 타입이 결정된다. 자바스크립트의 단점이라고 할 수 있다. 타입이 정해져 있지 않다보니, num이라는 변수를 문자열로 썼다가, 숫자로 썼다가, boolean으로 썼다가가 다 가능하기 때문에.
타입스크립트는 정적 타입 시스템이다.
트랜스 컴파일 & 트랜스 컴파일러
- 트랜스 컴파일 : 타입스크립트를 자바스크립트로 변환해주는 과정. 컴파일링이라고도 함.
- 트랜스 컴파일러 : 트랜스 컴파일을 수행하는 도구. (ie. 타입스크립트 컴파일러 중에는 tsc)
왜 컴파일을 해야 하는가?
웹브라우저는 항상 html, css, javascript만 실행 가능하기 때문에.
요즘은 어셈블리어도 가능하도록 업데이트 되는 중이긴 하다만 아직은 html, css, javascript만 실행 가능.
따라서 sass로 작성해도 css로 변환해줘야 하고, typescript로 작성해도 javascript 로 변환해줘야 한다.
cf. react는 그런 변환해주는게 웹팩.
어떻게 컴파일할까?
정석은
index.html을 만들고, body부분에 <script src=”dist/index.js”></script>로 확인하는게 타입스크립트로 작성된 코드를 실행하는 가장 정석적인 방법이다.
index.ts를 수정하고 나면 또 npx tsc로 변환해주고, 확인해야 하는거다. → 너무 번거롭다
⇒ vs code의 code runner 익스텐션을 사용하면 된다.
Leave a comment