Til

TIL 220408

1. Input(학습) 바닐라 자바스크립트 투두앱으로 DOM 조작 학습(강의링크) css의 7가지 단위(링크) 2. Output(복습) 이벤트 핸들러 함수 웹게임 - 계산기 3. Notes(정리) 1. DOM 조작하기 1.1 이벤트 핸들러 함수 사용 이벤트 리스너의 콜백함수로 익명함수 또는 외부함수를 가져와서 사용할 수 있다. 다만 외부함수 사용시 () 사용할 경우 이벤트 발생과 상관없이 함수가 실행되기 때문에 () 생략하고 함수명만 넣는다. const $button = document.querySelector('button'); // 익명함수 사용시 $button.addEventListener('click', () => { 버튼 클릭시 동작할 내용 }); // 외부함수 사용..

TIL 220406

1. Input(학습) set 객체로 배열의 중복 요소 제거 코딩애플 es6 강의 화살표함수 콜백함수와 고차함수의 차이 이벤트 핸들러 2. Output(복습) 백준 3052번 this 연습문제 웹게임 - 끝말잇기 3. Notes(정리) 화살표 함수 화살표함수 간소화하기 매개변수가 1개일 경우 소괄호 생략 가능 실행할 코드가 한줄인 경우 중괄호와 return 생략 가능 let func1 = a => a + 10; let func2 = b => console.log(b); func1(1); // 11 func2(2); // 2 화살표 함수 실 사용 예시 - 1. forEach [1,2,3,4].forEach(a => console.log(a + 1)); // 2 // 3 // 4 // 5 화살표 함수 실 사..

TIL 220405

1. Input(학습) this 란? strict모드(this: undefined) [JS] 백준 2577번 숫자의 개수 css-flex 2. Output(복습) 3. Notes(정리) this this는 객체다. this = 자신을 호출한 객체(자신을 가지고 있는 객체) 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.(MDN 설명) 예외: 전역스코프(this: window), 화살표 함수(this: 나의 상위 스코프), strict모드(일반 함수의 this: undefined) 1. 일반적인 this 바인딩의 변화 4가지 1. 전역 스코프에서의 this = window(전역 객체) 전역 스코프의 일반 함수 내에서 this를 사용하거나 그냥 전역 공간에서 console.log(this..

TIL 220404

1. Input(학습) 2. Output(복습) 참조(객체: TIL0307, this: TIL0304 ) 백준 배열문제(최솟값, 최대값) 객체 복습 deep copy vs shallow copy 3. notes Math.min(), Math.max() 인수(parameter)로 받은 숫자형들 중 최솟값 또는 최대값을 반환. 백준 문제에서는 배열을 전개연산자를 사용하여 인수에 넣었음. let min = Math.min(...arr); 메서드 메서드란 객체의 프로퍼티 값이 함수일 경우 이 함수를 일반 함수와 구분짓기 위해 메서드라 칭함. const 객체명 = { 프로퍼티이름: 프로퍼티값, // 프로퍼티의 값(value)는 모든 자료형 다 사용 가능. }; .repeat() 문자열을 인수만큼 반복(별찍기 문제..

TIL 220402

1. Input(학습) slice 메서드 2. Output(복습) 함수 복습 배열, 객체 복습 css position 복습 3. Reminder slice 배열 메서드 기능: 인자(begin, end)로 받은 begin부터 end까지 지정한 원본 배열의 인덱스 범위의 요소들을 새로운 배열로 반환. 인자에 아무 값도 안 넣으면 원본 배열 그대로를 새로운 배열로 반환. 음수 인덱스 사용시: 뒤에서부터의 인덱스 let arr1 = [1,2,3,4,5]; let arr2 = arr1.slice(0, 3); console.log(arr2); // [1, 2, 3] let arr3 = arr1.slice(1, -1); console.log(arr3); // [2, 3, 4] splice 배열 메서드의 매개변수 3개..

TIL- 22.03.22 화

1. Input(학습) Reference SSR과 CSR 이 영상 하나로 끝내기! (SEO 해결 포함) 코딩애플 리액트 자바스크립트 array.map 을 설명해준다! 배열 내장함수(메서드) map 기능: 원본 배열의 요소만큼 반복하며 함수를 실행하여 새로운 배열을 반환. map 내부에 들어가는 함수는 배열의 요소, 배열의 인덱스, map()을 호출한 배열 세가지 인수를 받을 수 있다. 주의사항: 함수의 return값을 반드시 지정해주어야 새로운 배열의 값을 반환한다. 함수의 return값이 없으면 [undefined, undefined, undefined] 가 반환됨 사용법: 새 배열 = 원본배열.map(함수); // 한줄짜리 화살표 함수 사용시 예제 const likes = ['1', &..

TIL- 22.03.21 월

1. Input(학습) Reference 코딩애플님 리액트 강의 라매개발자님 유튜브 강의 1. 리액트로 블로그 만들기 React의 내장함수 useState state란? : 변수처럼 데이터를 저장할 수 있는 공간. 최초에 상단에서 먼저 import 해와야 함. import React, { useState } from 'react'; 데이터 저장시 변수에 저장하거나 state에 저장할 수 있다. 변수에 저장하면 되지 왜 state를 써야하나? 페이지 새로고침 없이 html을 re-rendering 하기 위해. 따라서 중요하거나 자주 변경될 데이터는 state에 저장. state에 저장할 수 있는 데이터: 원시형, 객체 모두 가능 state 생성시 2가지 데이터가 들어있는 array가 생성됨...

TIL- 22.03.09 수

1. Input(학습) 백준 2884 알람 시계 - 정답 참고 2525 오븐 시계 2480 주사위 세 개(if) - 오답 노마드코더 JS 김버그 html/css tag, class, id selector 하나의 요소에 여러 클래스를 부여 가능(html) class와 id를 동시에 선택하기(css) .box#username { display: none; } Child Combinator(자식 선택자) : 부모의 여러 자식 요소 중 해당 요소만 선택 해당 부모 요소의 자식 요소만 선택가능(자손 X) ol > li { display: none; } Descendant Combinator(자손 선택자):부모 요소의 특정 자식 또는 자손 요소만 선택 자식요소도 자손으로 볼 수 있어 선택 가능함. section b..

TIL-22.03.05 토

Today I Learned 학습 인프런 자바스크립트 알고리즘 강의 예제 기초문제, 백준 10818번 풀었다. 가장 작거나 큰 값으로 MAX(또는 MIN)_SAFE_INTEGER 사용 내장함수 Math 객체의 min이나 max 메소드 사용 전개연산자로 배열의 요소 하나하나 인자로 넣기 apply메서드로 배열 그대로 넣기 내 코드를 리팩터링할 때 염두해야 할 것들에 대해 배웠다. 다른 방법으로도 풀 수 있을까? 한눈에 알아볼 수 있는가? 비슷한 다른 문제에도 적용 가능한가? 성능을 더 향상시킬 수 있을까? 다른 사람들은 어떻게 풀었지? Review for문 증감식에 전위연산자를 쓰든 후위연산자를 쓰든 결과가 똑같은지 잘 모르겠다. apply메서드 개념정리 다시 하기

TIL- 22.03.04 금

Today I Learned 오늘 한 공부 호출 위치에 따른 this 바인딩의 변화와 화살표함수의 this에 대해 간략히 배웠다. 인프런 자바스크립트 코테 강의예제와 백준 1330, 10950번 문제 풀어보았다. html/css 강의 마크업 실습예제 풀이 복습.