[멋쟁이 사자처럼] JS 기본 & 응용 세션

재오·2023년 4월 26일

🦁 LIKELION

목록 보기

2/2

Intro

멋쟁이 사자처럼 11기 활동에서 JavaScript 세션 강의를 맡게 되었다. 작년에는 JS 세션이 딱 2시간만 진행되고 바로 React로 넘어간지라 작년 처음 코딩을 시작했던 나에게는 JS를 베이스로 깔고 시작하는 React가 너무 어렵게만 느껴졌다. 올해 운영진을 맡고나서는 나같은 코린이도 프론트엔드 공부가 어렵게만 느껴지지 않도록 차근차근 JS에 대해서 가르쳐주고 싶었다. 그래서 총 3차례에 나누어 JS기본, JS응용, 리액트 기초에 대한 세션 강의를 하기로 하였다.

JavaScript는 현재 웹개발에서 가장 인기가 많은 언어 중 하나이다. React라는 프레임워크를 잘 사용하기 위해서는 기반이 되는 것이 JavaScript이다.

⭐️JavaScript Basic

📝 목차

📝 변수

변수에는 let, var, const 이렇게 크게 3가지가 있다. 예전에는 var변수를 많이 사용하지만 이 변수는 값의 중복선언이 가능하다는 점에서 현재는 쓰지 않는 것을 지향한다. 처음 JS를 배울 때에는 let 과 const를 쓴다고만 생각하면 쉽다. 그렇다면 let과 const의 차이점은 무엇일까? 바로 값 재할당의 유무이다. const를 사용하면 값의 재할당이 불가능해진다. 아래 예시를 본다면 이해하기 쉬울 것이다.

📝 자료형

자료형에서도 주의깊게 봐야할 곳은 null과 undefined이다. 일반적으로 우리가 변수를 선언만 하였을 때(할당은 하지 않은 상태)에는 JS에서는 기본적으로 undefined가 할당이 되어있다. 한마디로 값이 지정되지 않았음을 나타낸다. 하지만 null은 의도적으로 값이 없다는 것을 의도적으로 나타내기 위해서 자주 쓰이는 자료형이다.

📝 조건문

조건문이 들어가는 자리에는 항상 결과 값이 boolean 타입이어야만 한다. 그래야만 그 조건문이 참일 때 해당 실행문이 수행되고 거짓이면 해당 실행문을 수행하지 않을 수 있기 때문이다.

📝 반복문

for 반복문에서는 이 반복문의 수행순서를 좀 주의깊게 볼 필요가 있다. 우선 초기문을 수행하고 조건문을 살펴봐서 해당 조건이 참일 때 실행할 내용을 수행하게 된다. 그 이후에 증감문에 가서 증감문을 수행하는 과정이 반복되는 것이다.

📝 연산자

기본 사칙연산이기 때문에 깊게 다룰 내용은 없다고 생각한다. 하지만 주의해야할 점은 나누기 연산(/)을 했을 때 몫만 return하는 것이 아니라 소수점까지도 return된다. 따라서 반드시 Math.floor() 안에 값을 넣어줘야 한다. %연산자는 나눗셈에서 나머지 값을 return해준다.

&&은 And 연산자라고 부르고 ||는 OR 연산자라고 부른다.

보통 값이 같은가를 비교할 때 항등연산자인 ==을 사용하지만 자바스크립트에서는 타입과 값이 모두 일치한지 여부를 알기 위해서 일치 연산자인 ===을 사용한다. 좀 더 구체적인 값을 얻어낼 수 있다는 장점이 있다.

if...else 문은 코드 줄을 많이 차지하게 된다. 하지만 삼항 연산자를 사용하게 된다면 한 줄에 원하는 if...else문을 작성할 수 있게 된다.

📝 함수

함수의 가장 큰 장점은 일을 단순화 시킬 수 있다는 점과 함수를 언제든지 원할 때 호출하여 재사용할 수 있다는 점이다.

기본 함수를 제작할 때에는 앞에 function을 명시해주고 함수명과 함께 입력받을 매개변수를 작성해준다. 그 매개변수를 이용하여 함수를 작성해주면 된다. 주의해야할 점은 함수를 작성할 때에는 return 값이 반드시 필요하다.

익명함수를 작성할 때에는 기본함수와는 다르게 function을 앞에 붙이지 않는다. 변수처럼 사용이 가능하다.

화살표 함수는 JavaScript에만 존재하는 함수이다. 직관적으로 본다면 매개변수를 담은 중괄호 함수 방식이 아니라 조금 더 표현하기 쉽다. 화살표 함수는 익명함수를 사용한다. 한줄 안에 표현이 끝난다면 상관은 없지만 표현식이 길어져서 중괄호를 사용하게 된다면 반드시 return 값을 명시해줘야 한다.

React에서도 많이 사용되는 메서드가 바로 map 메서드이다. map을 사용하면 각 인자에 대해 실행 값을 배열로 반환해준다. for 반복문과 비슷하다고 생각하면 된다.

📝 배열

위 그림과 같이 배열은 네모로 된 칸이 일렬로 쭉 나열된 모습이라고 생각하면 된다. 원하는 data의 값이 한 칸을 차지한다. 하지만 꼭 명심해야할 점은 배열의 시작 index는 0이라는 점이다. 여기서 index는 th라고 생각하면 된다. 몇 번째에서 번째를 의미한다.

배열을 선언할 때에는 대괄호를 써줘서 배열임을 명시해주면 된다. 배열을 사용할 때 정말 많이 쓰이는 메서드가 있는데 push와 pop이다. push는 배열에 마지막 위치에 원하는 값을 삽입할 때 쓰이는 메서드이고 pop은 배열 가장 끝에 있는 값을 삭제할 때 쓰이는 메서드이다.

⭐️ JavaScript Application

📝 객체

자바스크립트를 배우면서 가장 기본적이면서도 난이도가 있는 중요한 파트이다. 객체를 더 심화적으로 배울 수 있지만 가장 기본적인 것은 복잡한 개체를 저장할 수 있는 장점을 기억해야 한다. 중괄호 안에 키와 값의 한 쌍으로 구성이 되는데 키에는 문자형, 값에는 모든 자료형이 허용된다.

📝 map (심화)

map은 보통 반복되는 컴포넌트를 렌더링하기 위해 사용된다. 기본 파트에서 배운 반복문을 사용하면 되지 않냐라는 의문이 들지만 리액트 JSX에서는 for 반복문을 사용할 수 없기에 map을 사용한다.

📝 단축 평가

논리 연산자의 응용 버전이다. 생각보다 많이 써본 적은 없지만 클린 코드를 할 때 혹은 다른 사람의 코드를 읽다 보면 종종 나온다. 객체를 가리키는 변수가 실제 원하는 값이 아닌 null 또는 undefined 여부를 확하기 위해서 필요하다.

📝 구조분해 할당

정말 중요하다. 개념에 대해 줄글로 정의하는 것을 피하고자 하지만 구조분해 할당 만큼은 강조하고 싶다. 중요하다.

우선 배열을 분해할 때 구조분해 할당에 대해서 확인해보자. 원하는 변수명에 하나하나 대입하는 것보다 구조분해 할당을 사용하면 코드 줄 길이를 최소화할 수 있다. 자세한 사용 방법은 위 강의 노트를 확인하자.

객체 구조분해 할당 역시 배열과 마찬가지이다. 원하는 키 값 변수명을 한 곳에 모아서 객체를 저장하면 더 짧은 코드 길이의 수로 코드를 작성할 수 있다.

📝 JSON 맛보기

사실 JSON을 여기서 다룰 지 말 지를 고민을 많이 했다. 너무 많은 개념을 한번에 알려주는 것 같았지만 바로 뒤에 있는 리액트 세션을 위해서는 JSON의 기본에 대해서 조금은 알려주는 것이 맞다고 판단했다. 위 강의 노트를 살짝 읽어보는 것만으로도 충분하다.

📑 과제

이번 세션시간에는 리액트에서 많이 사용되는 자바스크립트 응용에 대해서 배웠습니다.

이번 과제는 총 5문제로 오늘 배운 새로운 함수나 메소드를 이용하여 풀어주시면 되겠습니다.

README.md 파일에 문제에 대한 자세한 설명이 있고 각 js파일에 코드를 작성해주시면 됩니다.

과제는 돌아오는 세션 전인 4/7 18:00까지 push해주시고 담당운영진한테 확인 받으시면 됩니다.🙆🏻‍♂️

1번 다음의 결과값 예측해보기(★★)

다음 코드의 결과를 예측해서 작성해주세요~

let Name = "나현";

alert(`hello ${1}`); // ?

alert(`hello ${"Name"}`); // ?

alert("hello ${Name}"); // ?

alert(`hello ${Name}`); // ?

2번 밀린 회비 합계 구하기(★★★)

멋쟁이 사자처럼 11기 회비가 연체된 인원에 대한 정보를 담고 있는 객체가 존재합니다. 연체 합산 금액을 구하고 그 값을 변수 sum에 저장해주세요.

let lionMoney = {
  상혁: 20000,
  유선: 8300,
  주용: 2800,
  맑음: 50000,
};

3번 로그인 구현하기(★★★★)

프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요.

사용자가 "LikeLion"을 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다." 라는 메시지를 보여주세요.

비밀번호 확인 절차는 다음과 같습니다.

맞는 비밀번호 "KingJS"를 입력했다면 "환영합니다!"라는 메시지를 보여주세요.
틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요.
빈 문자열을 입력하거나 입력을 취소했다면 "취소되었습니다"라는 메시지를 보여주세요.
힌트1: 중첩 if 블록과 논리 연산자만 이용한다면 풀 수 있습니다.
힌트2: 출력은 alert(실행 내용)으로 합니다.
힌트3: 프롬프트 창에 아무것도 입력하지 않으면 빈 문자열인 ''가, ESC를 누르면 null이 반환됩니다.

4번 객체 구조 분해 할당 이해하기(★★★)

아래와 같은 객체가 있다고 가정해봅시다.

let user = {
  Name: "지환",
  years: 23,
};

구조 분해 할당을 사용해 아래 미션을 수행해 보세요.

name 프로퍼티의 값을 변수 name에 할당하세요.
years 프로퍼티의 값을 변수 age에 할당하세요.
isAdmin 프로퍼티의 값을 변수 isAdmin에 할당하세요. isAdmin이라는 프로퍼티가 없으면 false를 할당하세요.

5번 객체를 JSON으로 바꾼 후 다시 객체로 바꾸기(★★★★)

user를 JSON 형태의 문자열로 바꾼 다음 이를 다시 객체로 바꾼 후 제2의 변수에 저장해주세요~

let user = {
  name: "윤정",
  age: 20,
};

재오

블로그 이전했습니다

이전 포스트