언어(Language)/Javascript(24)
-
[Javascript30] 바닐라 자바스크립트 30일 코딩 챌린지
리액트로 프로젝트를 만들며 최근 느낀 점은 제가 기초가 많이 부족하다는 것입니다. 저는 기초가 탄탄한 개발자가 되고 싶기에 어떤 것을 공부하고 어떠한 방법으로 할 지에 대해 고민했습니다. 그 결과 바닐라 자바스크립트를 공부하기 위한 방법으로 토이프로젝트를 개발하면서 바닐라 자바스크립트의 사용에 익숙해지려고 합니다. 토이 프로젝트 아이디어를 찾아보던 중 찾게 된 것이 바로 다음의 챌린지입니다. 이 챌린지는 30일간 프레임워크, 라이브러리 등 없이 순수 자바스크립트로 프로젝트를 완성시키는 챌린지입니다. 제가 이 챌린지를 선택한 이유는 다양한 주제의 프로젝트들이 나와있어 기획에 있어서 부담을 줄일 수 있다고 생각했기 때문입니다. 또한 강의 제작자의 깃허브에 코드가 공유되어있고, 짧은 강의도 올라와 있기 때문에..
2023.11.28 -
[javascript] .trim()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trim String.prototype.trim() - JavaScript | MDN trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 developer.mozilla.org trIm() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등..
2023.09.29 -
[javascript] event.preventdefault()란?
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. developer.mozilla.org event.preventdefault()란? event.preventdefault()는 Event 인터페이스에서 제공하는 메서드로 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다 예를 들어 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데e..
2023.09.18 -
화살표 함수를 사용할 때 유의할 점
화살표 함수를 사용할 때 문법을 간소화하는 것이 필요하다 가장 중요한 것은 대안책을 알아야 하는 것인데, 1) 매개 변수 괄호 생략 만약 화살표 함수가 한 개의 파라미터만 가지고 있다면 괄호를 생략할 수 있다 Instead of (userName) => { ... } you could write userName => { ... } Please note) 만약 함수에 파라미터가 없을 경우 괄호는 생략되면 안된다. () => { ... } 사용 만약 함수가 한 개 이상의 파라미터를 가질 경우 괄호는 생략되면 안된다. userName, userAge => { ...} 대신에 (userName, userAge) => { ... }를 사용해야 된다. 2) 함수 본문에 중괄호 생략 만약 화살표 함수가 아무 문법이 ..
2023.09.04 -
event.preventDefault();
form에서 버튼을 눌렀을 떄 원래는 얘가 하는 일이 페이지를 한 번 리프레쉬 시킨다. 그렇게 되면 state가 없어져 버림. 그래서 리프레쉬 시키는 것을 막아준다.
2023.04.04 -
js bind()
bind() ● js 함수 호출 시에 사용할 수 있는 함수 ● bind() 사용 시 새로운 함수를 반환 ● call(), apply()처럼 this를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있다. 문법 function.bind(thisArg, [arg1, arg2, ...]) ● thisArg - this가 가리킬 객체를 지정 ● setTimeout 내에 콜백 함수를 만들 때, thisArg로 전달된 원시 값은 객체로 변환 ● [arg1, arg2 ...] : 함수의 인자로 전달되는 값 예제 바인딩된 함수 생성 ● bind()의 가장 간단한 사용법은 호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만드는 것이다. ● 초보들의 흔한 실수는 객체로부터 메서드를 추출한 뒤 그 함수를 추출..
2023.03.13