2024~2025 동계모각코

[2024~2025 동계모각코] 2회차 결과

슈슈버거 2025. 1. 12. 16:00

2025.01.11

 

수강 완료 화면

11강

중요 자바스크립트 개념 복습하는 챕터임

문법 규칙, 모던 자바스크립트 개념, 리액트에서 쓸 수 있는 것 정도

12강

자료 모음

자료에 있는 코드를 이용해서 기본적인 것을 공부해보자

13강

자바에서 꼭 알아야 할 주요 개념

자바는 매우 다양한 환경에서 실행 가능함 == 브라우저말고도 모바일 앱도 가능하고 컴퓨터도 가능하고 다양함

여기서는 브라우저에서의 자바 스크립트에 집중할 거임

script는 head에도 들어가도 되고 body에도 들어가도 된다.

body 맨 아래 내려서 html이 로드되고 js가 실행되도록 해도 되고 아니면

defer라는 속성을 이용해서 그렇게 만들어도 된다

아니면 type-”module”이라고 추가하면 자바스크립트를 자바스크립트 모듈로 인식하도록 함 이러면 import 문법을 사용할 수 있게 됨.

어디서? js 파일 내에서

14강

자료 모음

html에 보면 기존 자료에는 script 태그가 없을 거에요.

근데 어떻게 react가 정상 동작할까?

별도의 방식으로 동작하기 때문

작성한 코드가 그대로 브라우저에서 실행되는 게 아님

브라우저에 전달되기 전에 내부적으로 코드가 수정됨

백그라운드에서 작동하는 툴에 의해 동작함

package.json에서 그 라이브러리 목록을 확인할 수 있음

당연히 react-scripts라는 라이브러리도 있음

그래서 자료의 코드를 브라우저에서 실행시키고 f12를 눌러보면 script태그가 추가되어있음을 볼 수 있다

로컬에서는 개발 서버 직접 실행해야 되는데 끙

왜 이런 빌드 프로세스를?

  1. 처리되지 않은 리액트 코드는 브라우저에서 실행될 수 없다
    1. jsx를 쓰기 때문에 그럼 (jsx는 자바스크립트 안에 작성된 html 코드로 원칙상 이게 안 되기 때문에 처리를 안 해주면 정상적 동작이 안 된단다)
    2. app.js에 div를 추가하고 웹사이트 프리뷰를 열고 페이지를 새로 고치면 오류가 발생함 div 때문임(표준 자바스크립트 기능이 아니그든)
    3. 그래서 이 문법을 활성화해주어야 하는 것임 (코드 변환을 통해)
  2. 작성한 코드가 프로덕션에 최적화되어 있지 않음(간소화 되어 있지 않음)
    1. 함수명, 변수명 이런 거 땜에 다 어렵다

리액트 하려면 node.js 깔아야 한다

  • npm 명령어로 패키지 설치, npx로 프로젝트 생

15강

react도 여러 파일에 코드 나누어 하는 게 좋은 방법이다

export let apiKey = "adnasdoasflak1";

이렇게 해주면 다른 파일에서도 이 apiKey라는 변수를 사용할 수 있다고 함

import { apiKey } from "./util.js";

그리고 이렇게 해서 어느 파일의 어느 변수를 사용할지 표현해준다고 한다.

자바스크립트만 쓴다고 하면 확장자를 넣어주어야 함

react는 확장자가 필요가 없음 (빌드 프로세스가 알아서 추가해줌)

빌드 프로세스가 import, export 키워드가 있는 개별 파일을 모두 합쳐 큰 하나의 파일로 만든다음에 import 구문을 처리한다

그래서 브라우저도 몇개의 큰 파일만을 다운로드하면 되어서 더 효율적이게 된다.

그래서 react에는 type=”module”이 없다라는 사실

또다른 방법이 있다

변수 앞에 export 다는 대신에

export default "adnasdoasflak1";

그냥 이렇게 내보낼 수도 있지만 이건 파일별로 하나가 유일하다는 점!!

다른거하려면 오류뜸 (아까는 여러개 다 export가능)

그리고 import할 때도 이렇게 해주면 된다

import apiKey from "./util.js";

얘는 아까 export할 때 변수명을 해준 게 없기 때문에 반드시 변수명을 설정을 해주어야 한다.

진짜 하나만 딱 내보낼 떄 아주 좋은 방법이겠네

export가 바뀌면 import가 바뀐다는 것만!!!

이름이 있는 대상을 export하고 다른 대상도 export할 때 또 다른 import의 방법이 생긴다는 점!!

<export>
export let apiKey = "adnasdoasflak1";
export let abc = "abc";

<import>
import * as util from "./util.js";
console.log(util.apiKey);

이렇게 하면 된다!!!

마지막으로 as를 이용해 별칭처럼 줄 수가 있음

import { apiKey, abc as content } from "./util.js";

일케 하면 content라는 이름으로 abc에 접근이 가능함

16강

자바나 리액트나 다 데이터를 다뤄야하고 코드 안에서 값을 다뤄야 한다

“데이터를 다룬다”이게 핵심이다

자바스크립트에서는 문자열, 숫자, bool, null 이거 다룰 수 있음

자바는 필요한 곳에 원하는 변수를 생성할 수 있음

변수 짓는 법

  • 하이픈 x, 공백 x
  • 여러 단어가 합쳐질 경우 단어 시작마다 대문자로 해주기
  • 숫자는 맨 처음에는 금지
  • 특수문자는 $랑 _
  • const랑 let 차이 주의
    • const는 값 갱신 불가

17강

연산자에 관하여

18강

함수함수

<함수 생성>
function greet() {
	console.log("Hello!");
}

<함수 호출>
greet();

리액트는 중요 구성 요소? 동작 이거를 함수로 한다고 함

그 뭐 매개변수 주는 거랑 디폴트 쓰는 거랑 알잖아? 그럼 됐으

매개변수랑 return은 독립적인 것도 알고있잖아?

19강

화살표 함수

익명 함수 나타낼 때 자주 사용

() => setActiveContentIndex(3)

이런 식으로!!

export default function() {
	console.log('Hello');
}
일케 하면 오류남

export default () => {
	console.log('Hello');
}
일케 하면 오류 안남

export default (username) => {
	console.log(username);
	return username + "2";
}
이것도 가능

20강

구문 단축키

  1. 매개변수 목록 괄호 생략(하나의 매개변수만 사용할 경우)그렇지만 매개변수가 없을 경우에는 ()를 생략해서는 안 됨
  2. 둘 이상의 매개변수일 때도 마찬가지로
  3. (userName) => {...} 이것도 되고 userName => {...} 이것도 된다
  4. 함수 본문 중괄호 생략 
    number => {
	return number * 3;
}
이렇게도 되지만

number => number * 3;
이렇게 쓴다.
  5. 반환문 외에 로직이 없을 때 생략 가능
  6. 특수 경우 : 객체만 반환할 때
  7. number => {{ age: number }}; 이렇게!!! 반드시 중괄호 2개

21강

객체에 관하여

const user = {
	name: "Max",
	age: 34,
	greet() {
		console.log('Hello!');
		console.log(this.age);
	}
}

user.name 이런식으로 접근
user.greet();

key 이름은 내 마음대로, 단 명명규칙에 맞게!!

블루프린트

class User {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	greet() {
		console.log('Hi!');
	}
}

const user1 = new User("Nanu", 35);
console.log(user1); // 이거는 저 위의 Class 형태로 다 출력
user1.greet();

22강

배열에 관하여…

const hobbies = []; //배열 생성은 대괄호로!!
console.log(hobbies[0]); // 이런 식으로 index로 접근

hobbies.[메소드] // 이 형태랍니다!

값만을 순서대로 입력합니다!! 그래서 위치로 값에 접근을 할 수 있다

배열은 모든 유형의 값을 저장할 수 있다

유용한 메소드 : findIndex (특정 값의 인덱스를 알아낼 수 있음)

const index = hobbies.findIndex((item) => {
	return item === 'Sports';
})

console.log(index);

또다른 유용한 메소드 : MAP

배열의 모든 원소가 전달된답니다 이렇게 하면!

const editedHobbies = 
hobbies.map((item) => item + "!"); // 배열 내용 출력할 때 유용

기존 배열은 변하지 않음. map은 새 배열을 만들어냄

const editedHobbies = 
hobbies.map((item) => ({text: item})); //반드시 소괄호로 감싸야 함 주의