TIL#16

박감자·2024년 10월 10일

TIL

목록 보기
16/34


썸네일 출처: https://x.com/molang2010/status/1331254855483219974

HTML/CSS 특강 (1회차)

div를 센터로 둘지 모른다면 꼭 들어야 하는 특강

오늘 특강이 있어서 참여했는데 유용한 내용이 많았다. 기초가 부족한 감자에게는 딱인 특강이었다.

1. Hypertext Markup Language (HTML)이란

웹사이트의 뼈대를 구성하는 마크업 언어, 레고 블록쌓기 같은 느낌으로 뼈대를 구성하면 된다.

2. HTML의 모든 태그

태그를 모두 외우는 건 불필요한 일이다. 경험상 쓰다보니 외워지고 누군가 시간을 들여서 외운다 하면은 굳이 필요한 일은 아니라고 알려주고 싶다. 대신 태그를 모아둔 MDN 웹사이트가 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

여기서 찾아보면서 태그를 필요할때 찾아 쓰는 방법으로 태그를 활용하는 것이 좋다.

3. 자주 쓰는 태그 모음

그중에서도 거의 대부분 사용하는 태그들은 아래와 같다.

Tag설명
div만능 태그ㅋㅋ, 공간 나누기에 적합
h1, h2, ~ h5제목 크기
span지정하고 싶은 text가 필요할때
img이미지 업로드시 필요 (alt 추가해 텍스트 설명을 넣을 수 있음)
a다른 페이지로 이동시 필요 href에 링크 추가 (target="_blank"를 추가해 새로운 탭에 열게끔 조정 가능)
button말 그대로 버튼이 필요할때
input입력창이며 여러 타입이 있음: text, number, email, password, file, checkbox 등 (label 짝궁!)
ul리스트 생성시 필요 요소 li - 순서 없는 리스트 / ol - 순서 있는 리스트

4. Cascading Style Sheets (CSS)란?

웹사이트를 스타일링하는 코드, 브라우저에 그림 그려주는 코드라고 생각하고 사용하는 중

5. 셀렉터

셀렉터란 규칙을 적용할 요소를 선택하는 방식이다.

TMI이지만 개인적으로 id에 CSS 규칙 적용하는 걸 선호하지 않는다. class에는 css요소를, id에는 동작 기능을 이런식으로 구분해놓고 사용하는 편이라 이런 방법으로 코딩하는 감자도 있구나 하고 알아두면 좋을 것 같다.

6. CSS 모든 속성

HTML과 마찬가지로 모든 속성을 외우는 건 CSS 쪽이 더 무리이다. 수가 훨씬 많기 때문에 절대로 일부러 외우려 하지 말 것. 필요한 건 그때그때 찾아보기!
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

JS 강의 2주차(요약)

ES6 문법

어쩐지 문법이 이해가 될듯 하면서도 집중의 줄이 딱 끊기면서 이게 먼소리지 ㅇㅅㅇ.... 하는 부분이 있었는데

알고보니 문법을 개편은 하되 예전 문법도 그대로라 혼용될때 이해가기 어려웠던 부분이 있었던 것 같다.

새로 배운 문법을 정리해보았다. (아는 문법은 제외함)

1. 삼항연산식

간단한 if-else구문을 한 줄로 쓸 수 있도록 줄인 문법으로 용이하게 쓸 수 있어 보인다

// (condition) ? true일때 : false일때
var age = 19;
console.log((age > 20) ? "성인" : "미성년자");
2. 구조분배할당 (destructuring)

말 그대로 배열 혹은 객체의 속성을 분해해서 따로 변수에 저장할 수 있는 문법을 얘기한다. Python에도 비슷한 개념이 있기에 사용 방법만 적어보려 한다.

// Arrays
let [value1, value2] = [1, "new"];

let arr = ["value1", "value2", "value3"];
// a에 'value1', b에 'value2', c에 'value3'가 저장됨
var [a,b,c] = arr;	

// 네번째 값이 없지만 초기값을 설정해줄 수 있음
// 만약에 네번째 값이 arr에 존재하는 경우 d는 4가 아닌 그 값이 된다.
var [a,b,c,d = 4] = arr

// Objects
let user = {name: "nbc", age: 30};
var {name, age} = user;

// 마찬가지로 없는 세번째 값의 초기값을 설정할 수 있으며
// 만약에 이미 존재한다면 그 값으로 바뀜
let {name, age, birthDay = "today"} = user;
3. 단축 속성명 (property shorthand)

객체에서 key와 value명이 같다면 생락이 가능함

const name = "nbc"
const age = "30"

const obj = {
	name,	// nbc
	age		// 30
}
4. 전개 구문 (spread)

배열이나 객체를 전개할 수 있는 문법으로 요소를 일일이 꺼낼 필요없이 전개만 하면 되는 편리한 문법

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];	// [1,2,3,4]
// 객체도 유사

이 외에도 let, const, Arrow function, 나머지 변수 (Rest Parameter), Template Literal(백틱 이용) 그리고 import & export가 있다. 이 내용들은 개편된 문법으로 배워서 강의 영상 보며 열심히 복습했다.

일급객체로서의 함수

함수를 객체로 취급하는 건 자주 보이는 방법으로 가장 먼저 생각이 떠오른 건 callBack function이었다. 매개변수로 자주 주로 사용하며 이 예시가 함수를 개체 취급하는 대표적인 예시라고 생각한다.

여기에 더해 함수를 변수에 할당할 수 있으며

const sayHello = function () { 
    console.log('Hello');
}

caller 함수는 함수에 함수를 부를 수 있다. (말이 왜 이렇게 어렵게 됐지??)

function callFunction(func) {
    // 매개변수로 받은 변수가 함수인 건에 대하여...
    func()
}

하지만 수업에서는 이 보다 더 많은 사실을 알려주기에 몇 가지 경우를 정리해보았다.

1. 함수에 함수 반환

반환값으로 함수를 반환할 수 있는데 코드를 보면 이해하기 편하다.

// 함수를 반환
function createAdder(num) {
    return function (x) {
        return x + num;
    }
}

// addFive가 createAdder에 있는 리턴 함수가 된것!
// const addFive = (x) => x+5;
const addFive = createAdder(5);		// 어떠한 숫자든 5씩 더하는 함수
console.log(addFive(10));			// 10 + 5 = 15
2. 배열과 객체의 요소 객체와 배열에 함수를 넣어서 사용하는게 가능한 줄은 수업을 통해서 알았는데 활용만 한다면 정말 편해보였다. 아래는 예시 코드 
// 객체의 경우
const person = {
    name: 'John',
    age: 31,
    isMarried: true,
    sayHello: function () { 
        // 여기서의 this는 person이 됨
        console.log(`Hello there! My name is ${this.name}`);
    }
  
    // sayHello: () => { 
    //     // ??? 화살표 함수는 this를 binding하지 않는다
    //     console.log(`Hello, My name is ${this.name}`);
    // }

}
  
// 부를땐
person.sayHello();
  
// 배열의 경우
const myArr = [
    function (a, b) {
        console.log(a + b);
    },  // 0th function
    function (a, b) { 
        console.log(a - b);
    }   // 1st function
]
  
// 부를 때
myArr[0](1,3);		// 더하기 값 4
myArr[1](9, 20);	// 빼기 값 -11

위 둘이 이번 주차 강의에서 새로 배운 내용들이며 활용방법이 많아질 수록 머리도 같이 아파 오는 건 덤이었다.

Map, Set

Map과 Set은 파이썬에서도 있는 개념이기에 어려운 부분은 없었으나 메소드만 정리하면서 사용법을 익혀야할 듯 하다.

1. Map (key, value)

  • new Map() : 새로 생성시
  • .set(key,value) : 엔트리 추가시
  • .keys(), .values(), .entries() : 각각 키 iterator, 밸류 iterator, 엔트리 iterator / for ~of 반복문에 사용하면 편리
// keys iterator
for (const key of myMap.keys()) {
  console.log(key);		// 모든 키가 배열처럼 나옴
}
// values iterator
for (const value of myMap.values()) {
  console.log(value);	// 모든 밸류가 배열처럼 나옴
}
// entreis iterator
for (const entry of myMap.entries()) {
  // 모든 엔트리가 [key, value] 형태로 나옴
  // ex) { [key1, value1], [key2, value2], ...}
  console.log(`${entry[0]}: ${entry[1]}`);	
}
  • .size : Map 크기를 알아야할 때
  • .has() : 특정 키를 찾을 때

2. Set (value) [집합]

Map과 살짝 다른 점이라면 중복된 값은 생성되지 않는다.

  • new Set() : 새로 생성시
  • .add(value) : 밸류 추가시
  • .values() : 밸류 iterator / Map과 마찬가지로 for ~of 반복문과 사용하면 편리
for (const value of mySet.values()) { 
    console.log(value);		// 모든 value가 배열처럼 나옴
}

알고리즘 특강

점심 먹고나니 특강이 넘쳐요.... 허헣....

알고리즘 (Algorithm)

대학교때 교수님께서는 레시피라고 하셨다. 순서대로 재료를 넣으며 요리 혹은 디저트를 완성시키는 것. 그런데 집집마다 김장하는 재료와 방식이 조금씩 다르듯 김치를 만들 수 있는 레시피는 정말 많고 다른 음식도 마찬가지라...여기서부터는 머리가 아플 수 밖에 없다.

특강에서도 컴퓨터가 주어진 문제를 해결할 수 있도록 절차나 방법을 설명하는 과정이라고 말하고 있다. 그리고 이를 면접에 보는 것이 코딩테스트이다. 보통은 온라인과 라이브 두 종류로 나뉘며 난이도 차이가 조금은 있다.

왜 배우는가?

  1. 무조건 1번은 취업에 도움이 되는 것
    채용전형에 포함이 되어있기 때문에 따로 시간을 내서 공부하지 않으면 취업준비시 조금 어려울 수 있다. 회사의 이미지(?), 회사 선별에 도움이 많이 된다.

  2. 좋은 코드 작성에 도움이 된다.
    알고리즘 문제에서 중요한 것이 효율인데, 이러한 방법을 스스로 연구하는 기회가 되기도 한다. 전에 취업 준비하면서 써본 답안이 있었는데, 내 답안이 너무 비효율적이라 테스트 통과가 되지 않던 기억이 있다. 어떻게든 문제는 풀 수는 있었지만 도저히 runtime을 줄일 방법이 떠오르지 않았다. 이처럼 좋은 코드, 더 효율적인 코드를 작성하기 위해서는 알고리즘을 계속해서 공부해야한다.

  3. JS를 좀 더 알 수 있는 기회
    Frontend 개발자에게는 JS에 대해 따로 그리고 깊이 더 알아갈 수 있는 기회가 알고리즘을 공부하면서이다. 또한 알고리즘마다 적용되는 방식이 코딩언에마다 다른 것을 경험해봐서 좋은 기회라고 생각한다.

그리고서 특강에서는 실습을 진행했다.

문제 1) 가위바위 보

문제 설명: A, B 두 사람이 가위바위보를 진행할 때, 승부 결과를 반환할 수 있는 함수를 작성해보세요

제한 사항:

  • 함수의 인자로는 정해진 문자열 두 개가 들어오게 된다
    • 첫 번째 인자 a는 A가 내는 손모양으로 가위 , 바위 , 보 중의 하나의 문자열이다
    • 두 번째 인자 b는 B가 내는 손모양으로 가위 , 바위 , 보 중의 하나의 문자열이다
  • 승부의 결과에 따라 아래 문자열 중 하나를 반환한다
    • 무승부, a 승리, b 승리
  • 함수의 이름은 rockPaperScissors 로 지어주세요

아래가 내 답안이었는데...

  
  function rockPaperScissors(a, b) {
	if (a === b) {
        return "무승부"
    }

    // 다 나누기
    if (a === '가위') {
        return b === '보' ? 'a 승리' : 'b 승리';
    } else if (a === '바위') {
        return b === '가위' ? 'a 승리' : 'b 승리';
    } else if (a === '보') {
        return b === '바위' ? 'a 승리' : 'b 승리';
    }
}

이 함수가 무려 2줄로 된다고 해서 잠시 멍했다. (모범 답안)

  function rockPaperScissors(a, b) {
    if (a === b) return '무승부';
    return ['가위-보', '바위-가위', '보-바위'].includes(a+'-'+b) ? 'a 승리' : 'b 승리';
}

배열 사용할 생각은 전혀 못했는데...눈 앞에 눙물이....

오늘은 한 문제를 같이 풀어보았고 숙제로 하하핳 내일 아침까지 제출해달라고 말씀하시는데 그건 내일 TIL에....

마치며...

JS 강의를 3주차 5강까지 듣긴했지만 3주차 내용은 한 번에 묶어서 요약하고 싶어서 내일 3주차 강의 모두 듣는대로 요약 TIL을 작성할 예정이다. 그리고 이미 이 TIL도 강의 3개에 대한 요약이라.... ㅇㅅㅇ .... 강의가 너무 많아요ㅠㅠㅠㅠ

profile
박감자
코딩하는 감자
이전 포스트

TIL#15

다음 포스트

TIL#17

1개의 댓글

comment-user-thumbnail
림졍
2024년 10월 11일

아놔 짤방 너무 웃기네욬ㅋㅋㅋㅋㅋㅌ 잘 보고 갑니다 감쟈님!

답글 달기