[TIL] D+48 자바스크립트와 친해지기 + UI 분석 차력쑈

 

해피 크리스마스를 보내고 오늘도 어김없이 공부하기 위해 출석 ~

이제 새해가 정말 얼마 안남았네요 !! 

 

1️⃣ 자바스크립트 문법 종합반

 

손으로 코드 직접 치며 익히기 ...

 

오전에 강의를 듣고 있는데 영윤 튜터님께서 우리팀 자리에 방문해주셨다 !!

어려운 거 없냐고 여쭤보셔서 코딩 강의를 보면서 공부를 어떻게 해야할지 모르겠다고 했더니

손으로 코드를 직접 치면서 익히는 게 가장 중요하다고 하셨다... 허걱스...

여태까지 그냥 보기만 했는데 ㅋ 이런 ㅋㅋ 이제라도 알아서 다행이다...

그리고 원시타입과 참조타입의 차이를 이해해보라구 하셨다...(이게 뭐더라)

그래서 함수 강의부터 다시 손으로 직접 타이핑 하면서 다시 봤다 ㅎㅎ

 

VScode에서 폴더 열어놓고 파일 하나씩 추가하면서 실습하는데

"01.js"를 만들면 자꾸 "_.01.js" 이런 파일이 따라 생기는 거임 ㅡㅡ

 

삭제해도 계속 나타나길래 너무 신경쓰여서 서치해보니까

MacOS에서 파일을 압축했거나 외장하드로 복사한 경우에 생기는 것이라고 한다...

그래서 폴더 자체를 외장하드에서 내장하드로 이동시키니까 사라짐 ㅎㅎ

 

코딩은 이렇게 문제를 하나씩 직접 찾아서 해결할 수 있다는 점이 재미있는 것 같다...

(Tmi: 사실 부트캠프 리액트반으로 시작했다가 컴공 전공자들 무서워서 프로덕트 디자인으로 틀었는데 그냥 할껄 그랬나...???)

반면 디자인은 정해진 답도 없고 ... ㅠㅠ 인터넷 서치해도 답이 안나와유... 그 점이 무서워요(?)...

 

📌 함수(function)

function add(매개변수) {
    함수 내부에서 실행할 로직
}

 

함수는 이러한 형태를 갖고 있다... add는 그냥 임의로 정한 함수의 이름임

// 두 개의 숫자를 입력받아서 덧셈을 한 후 내보내는 함수

// 1. 함수 선언문
function add(x, y) {
    return x + y;
}

// 2. 함수 표현식
let add = function (x, y) {
    return x + y;
}

 

위와 같이 함수 선언문, 함수 표현식 두가지 형태로 나타낼 수 있다 ...

add라는 함수를 function으로 정의하냐, let으로 선언하냐의 차이인 것 같다... 아무래도 함수 선언문이 더 편해보인다.

 

// 함수를 호출한다(=함수를 사용한다)
// 함수명() -> add(입력값)
console.log(add(2, 3));
// 결과는 5가 나온다.

// 이렇게도 할 수 있다...
let functionResult = add(2, 3);
console.log(functionResult);
// 똑같이 5가 나온다.
// 굳이 왜 let으로 선언을 한 번 더 하는지 모르겠는데 아마 나중에 쓸 일이 있겠져?

// input: 함수의 input -> 매개변수(매개체가 되는 변수)
// output: return문 뒤에 오는 값 : 반환값

 

함수를 만들었으면 함수를 호출해보자...

바로 콘솔로 찍을 수도 있지만 let 으로 한번 선언을 하고 콘솔로 결과를 찍을 수도 있다.

굳이 왜 선언을 한 번 더 하는지 아직까지는 이해가 안가지면 나중에 쓸 일이 있으니까 알려주셨겠졍?

 

함수는 input(매개변수)과 output(반환값)이 있다.

 

📌 함수 스코프(scope)

여기서 스코프는 범위라는 뜻입니도 ~

let x = 10;

function printX() {
    console.log(x);
}

printX(); // 10
console.log(x); // 10

 

전역 스코프에서 변수 x를 선언하고 함수 printX에서 변수 x를 참조한 경우,

전역 스코프에서 선언된 변수는 어디서든 참조할 수 있다.

function printX() {
    let x = 10;
    console.log(x);
}

printX(); // 10
console.log(x); // 여기서 오류남

 

지역 스코프에서 변수 x를 선언하고 함수 printX에서 변수 x를 참조한 경우,

지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있기 때문에 마지막 줄에서 오류가 발생한다.

유사하게 블록 스코프라는 것도 있는데... if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있는 것이라고 한다.

 

 

📌 화살표 함수

// 화살표 함수
// ES6 신 문법
function add (x, y) {
    return x + y
}

// 1-1. 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y
}

// 1-2. 한 줄로
let arrowFunc02 = (x, y) => x + y;

 

ES6의 신문법인 화살표 함수... 초보들은 일단 정석대로 하라고 하셔서 그냥 보고 넘어가겠습니당 ㅎㅎ

 

 

📌 조건문 - if , else if , else , switch

특정 조건에 해당하는 경우에만 하위 로직을 실행하게 하는 것

if문은 false일 경우 실행되지 않는다.

 

// 1. if문

let x = 10;
if (true 또는 false가 나올 수 있는 조건) {
	조건에 맞으면 실행할 로직
}

// 1-1

if (x < 0) {
    console.log("x는 양수입니다.");
}

// 1-2
let y = "hello world";
// y의 길이가 5보다 크거나 같으면 길이를 출력

if (y.length >= 5) {
    console.log(y.length);
}

// 2. if - else 문
let x = -3;

if (x > 0) {
    console.log("x는 양수입니다.");
} else {
    console.log("x는 음수입니다.");
}

// 3. if - else if - else 문

let x = -1;

if (x < 0) {
    //main logic 1
    console.log('1');
} else if (x >= 0 && x < 10) {
    //main logic 2
    console.log('2');
} else {
    //main logic 3
    console.log('3');
}

// 1-4. Switch 
// 변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택
// Default와 break 기억하기...

let fruit = "바나나";

switch (fruit) {
    case "사과":
        console.log('사과입니다.');
        break;
    case "바나나":
        console.log('바나나입니다.');
        break;
    case "키위":
        console.log('키위입니다.');
        break;
    default:
        console.log('아무것도 아닙니다.');
        break;
}

 

switch문에서는 input값이 지정한 case들에 해당하지 않으면, default를 사용해서 값을 돌릴(?) 수 있다.

그리고 case별로 break문을 넣어줘야한다.

안그러면 input이 멈추지 않고 case 한번씩 싹다 문 두드려서 output을 모두 데리고 나와버린다...

 

📌 조건문의 중첩

// 조건문의 중첩
let age = 20;
let gender = "여성";

// 미성년자 구분
if (age >= 18) {
    if (gender === "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
} else {
    if (gender === "여성") {
        console.log("미성년 여성입니다.");
    } else {
        console.log("미성년 남성입니다.");
    }
}

 

조건문 안에 조건문을 쓰는 형태로도 코드를 짤 수 있다.

가독성이 안좋아지고, 유지보수가 어려워진다는 단점이 있긴 하지만 필요할 때가 있기 때문에 알아둘 것

 

📌 조건부 실행, 삼항 연산자와 단축 평가

// 조건부 실행

let x = 10;

if (x > 0) {
    console.log("x는 양수입니다.");
}

// and 조건(&&)을 활용하여 아래와 같이 쓸 수도 있다.
(x > 0) && console.log("x는 양수입니다.");

// or조건(||)
// 삼항 연산자와 단축 평가
let y; // y는 undefined
let z = y || 20;
// y가 존재하지 않는 경우, 기본값을 출력해주삼

console.log(z); // 20

 

조건부 실행을 사용하여 변수 x가 양수인 경우에만 "x는 양수입니다."라는 메시지를 출력한다.

 

삼항 연산자를 사용한 예시에서는 변수 y가 존재하지 않아 기본값으로 20을 사용한다.

||  연산자를 사용하여 단축 평가(Short-circuit evaluation)을 할 수 있다.

변수 y가 존재하지 않는 경우, || 연산자는 false값을 반환하고, 기본값으로 지정한 20을 반환한다.

 

 

📌 falsy한 값과 truthy한 값

falsy한 값 -> 0, 빈 문자열, null, undefined, NaN, false

truthy한 값 -> 그 외의 모든 값들 (if문의 조건 충족)

 

 

📌 객체(Object)

// 객체
// key - value pair
// 하나의 변수에 여러개의 값을 넣을 수 있다.

// 1. 객체 생성 방법
// 1-1. 기본적인 객체 생성 방법

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
}

// 1-2. 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");


// 2. 접근하는 방법
console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);

// 3. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~)
// 3-1. Object.key() : key를 가져오는 메소드

let keys = Object.keys(person);
console.log("keys =>", keys);

// 3-2. values
let values = Object.values(person);
console.log("values =>", values)

// 3-3. entries
// key와 value를 묶어서 배열로 만든 배열(2차원 배열)
let entries = Object.entries(person);
console.log("entries=>",entries);

// 3-4. assign
// 객체 복사
let newPerson = {};
Object.assign(newPerson, person, {gender : "여자"});
console.log("newPerson =>",newPerson);

// 3-5. 객체 비교
// 객체는 크기가 상당히 커서 메모리 별도 공간에 저장한다.
// 객체 별로 별도 공간에 대한 주소로 저장하기 때문에 값이 같아도 다르다고 나옴
let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
}

let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
}

console.log("answer =>",person1 === person2);
console.log(JSON.stringify(person1) === JSON.stringify(person2));

// 3-6.객체 병합

let person1 = {
    name: "홍길동",
    age: 30
}

let person2 = {
    gender: "남자"
}

// ... : Spread operator
let perfectMan = {...person1, ...person2};
console.log(perfectMan);

 

객체 파트에서 갑자기 뭔가 엄청 많은게 순식간에 지나감...

객체가 Key : Value 세트로 구성 되어있다는 사실과 생성하는 방법, 접근법은 알고있었는데

그 외의 것들은 금시초문...ㅎㅎ (누구세요?...)

객체 부분도 내용이 많으니 한 번 더 복습을 해야겠다 ㅎㅎ

 

 

 

2️⃣ 디자인 집중반

UI 집중반

 

그저께 각자 아고다 앱의 UI 뜯어본 것들을...

서로 얘기해서 의견을 맞춘 뒤 정리하여 제출하였습니다...

한 시간 반이 권장 시간이었는데 거의 두시간 반동안 작업했네욤...ㅎㅎ

튜터님의 피드백이 궁금합니다요...

 

---

느낀 점, 새롭게 깨달은 것💡

- 코딩공부하는 방법...!! 따라치면서 손에 익히기 ㅎㅎ

오늘의 잘한 점🥰

- 하지만 포기하지 않고 오늘도 열심히 했죠?

오늘의 문제점,부족한 것😵‍💫

- 나는 정리를 잘 못하나...보다... UI 집중반 할 때 분석한 것 보기쉽게 정리하는게 너무 힘드렁ㅆ음 ㅠㅠㅠ

해결방법👊

- 분석한 내용을 시각적으로 표현하는 방법 익히기... 흠 ... 어떻게 해야하지...