Timeline

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 회사에서 함수를 만들며 string인 변수를 잘라서 리턴해야 하는 경우가 있었다.가이드로 제공됐던 함수가 .substr()을 쓰고 있었으나 mdn에 따르면 .slice()나 .substring()을 사용하라고 권장해서 이번 기회에 이 함수들을 정리해보게 되었다.3가지 함수 모두 문자열을 추출해주는 기능이기는 하나 조금씩 다른 부분이 있다. 1. .substr(start, length)substr은 문자열에서 시작 위치와 추출할 길이를 지정한다.특징은 start가 음수인 경우 문자열의 끝에서 부터 시작 위치를 계산한다.length는 선택 사항이며 지정하지 않는 경우 문자열의 끝까지 추출한다. 코드 예시 :let str = "Hello, world!"..

Blocker :작업 중인 프로잭트의 화면에서 특정 동작을 실행하면 무한 로딩 후 아래와 같은 화면이 나왔습니다.이런 경우 메모리쪽에서 문제가 발생할 가능성이 높이 메모리를 체크해보기로 했습니다.보통 서버가 느려지는 경우도 메모리 누수가 발생했을 가능성이 높아 메모리를 체크해보는 것이 좋습니다. 메모리 누수(memory leak)란?간단하게 설명하면 사용하지 않는 메모리를 해제하지 않고 있는 것을 말합니다.js의 경우 가비지 컬렉션 메커니즘이 자동 정리라 보통은 메모리 할당과 비우는 과정을 신경쓰지 않아도 되지만 페이지가 느려지거나 아예 에러가 나는 경우 메모리 누수가 원인일 수 있어 안 쓰는 메모리를 정리해줘야 합니다.해결방법 :메모리는 개발자도구의 여러가지 기능을 통해 체크할 수 있습니다. 1. Me..

https://www.inflearn.com/course/모던-자바스크립트-딥다이브 [무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의 《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, 혼자가 외롭다면 시간차 스터디는 어때요?함께하는 모던 자바스크립트 스 www.inflearn.com 인프런에서 강의를 듣고 정리하는 글입니다. 3강 제어문 / 타입변환과 단축평가 1. 제어문 * 블록문 - 아래 예시에서 위는 블록문이고 아래는 객체 * 제어문 - 프로그램의 순차적 흐름을 제어해야 할 때 사용하는 실행문 - 조건문(if~else), 반복문(for) 등이 있음 * 함수 선언문 - 함수 선언과 비슷한 형식 - ex) function 함수..

https://www.inflearn.com/course/모던-자바스크립트-딥다이브 [무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의 《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, 혼자가 외롭다면 시간차 스터디는 어때요?함께하는 모던 자바스크립트 스 www.inflearn.com 인프런에서 강의를 듣고 정리하는 글입니다. 2강 데이터 타입 / 연산 1. 테이터 타입(대소문자 구분해야 함) * 숫자 타입 - 정수, 실수, 음의 정수 - 2진수, 8진수, 16진수 ... - 숫자 타입은 모두 실수로 처리 => 1 === 1.0 // true - Infinity, -Infinity, NaN * 문자열 타입 - '', "", 백틱(..

https://www.inflearn.com/course/모던-자바스크립트-딥다이브 [무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의 《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, 혼자가 외롭다면 시간차 스터디는 어때요?함께하는 모던 자바스크립트 스 www.inflearn.com 인프런에서 강의를 듣고 정리하는 글입니다. 1강 변수 / 표현식과 문 1. 변수 * 변수 - 변수는 하나의 값을 저장하기 위한 수단 - 객체나 배열 같은 자료구조를 사용하면 여러 개의 하나로 그룹화해서 하나의 값처럼 사용할 수 있다 * 변수 선언 - var을 이용해 변수 선언을 하면 값을 할당하지 않아도 undefined가 기본 값이 된다 - 변수 ..

Blocker : 백엔드에 생년월일 데이터를 저장할 때 8자리로 저장해야 하는 상황이었으나, 년/월/일을 따로 입력받아야 해 일을 1자리 입력 시 자동으로 0을 앞에 붙여줘서 백엔드에 데이터를 전송해야 했습니다. 처음에는 사용자가 입력 후 데이터를 전송하기 전에 0을 붙여서 전송하려고 했으나, 사용자가 입력 후 변경한 경우에도 변경된 값에 따라 수정되어야하기 때문에 무조건 input 값을 입력받는 onchange event의 함수에 0을 붙여주는 작업을 진행해야 했습니다. 해결방법 : 먼저, 생년월일 중 일에 해당하는 입력값을 담을 useState를 만들었습니다 그리고 입력된 값이 한자리 수인 경우 0을 붙여서 반환할 수 있는 formatDay 함수를 만들었습니다 최종적으로 사용자가 입력하는 값을 받아오..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals 1. template literal이란 -ES6 이전에는 템플릿 문자열이라고 부르던 것을 ES6에서 템플릿 리터럴 이라고 부르게 되었음 -문자열 삽입, 표현식 삽입, 여러 줄 문자열 생성 등 다양한 기능을 제공함 2. 기본 사용법 -백틱(`)이라는 문자 사이에 문자열을 입력하고 ${variable}로 변수를 주입시켜 문자열을 작성함 ex. 3. 다양한 기능 설명 -문자열 삽입 -표현식 삽입 -여러 줄 문자열 생성 전체를 백틱(`)으로 감싸면 \ 기호를 사용하지 않고 여러 줄 문자열을 작성할 수 있음..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. 이벤트 버블링 event bubbling -특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되는 이벤트 전파 방식 -가장 아래에 있는 태그에서 이벤트가 발생했을 때 최상위 요소 태그까지 이벤트가 전달됨 -브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시키기 때문에 하위 -> 상위 -> 최상위 순으로 클릭 이벤트가 진행됨 2. 이벤트 캡쳐 event capture -이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 -특정 이벤트가 발생했을 때 최상위 요소에서 해당하는 태그를 찾아 내려감 -capture의 default값은 false이기 때문에 ..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. querySelector -형식 : element = document.querySelector(selectors); -selector의 구체적인 그룹과 일치하는 document의 첫 번째 element를 반환하고 일치하는 게 없으면 null 반환 -getElementById보다 구체적으로 selector를 지정할 수 있음 -getElementBy~와 달리 값이 바뀌어도 처음 가져왔던 값 그대로 유지됨 예를 들어 아래와 같은 코드에서 로고 이미지를 선택하는 경우. querySelector -> document.querySelector(.nav-left#logo-img); getElementById -> document.getElementById..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. 증감연산자 연산자 기능 예시 ++ 항의 값에 1을 더함 val = ++num => num 값에 1 더한 후 val에 대입 val = num++ => val에 기존 num 값 대입 후 num 값에 1 더함 -- 항의 값에 1을 뺌 val = --num => num 값에 1 뺀 후 val에 대입 val = num-- => val에 기존 num 값 대입 후 num 값에서 1 뺌 ex1. int val; int num1 = 10; int num2 = 10; val = ++num1; => num1이 11로 증가하여 val 변수에 11이 대입됨 val = num2++; => val 변수는 10이고 num2만 11로 증가함 ex2. Q. 1부터 10까지 ..