email, username을 각각 useState로 관리하는 방법도 있겠지만 아래 예제에서는 formData라는 여러 폼 요소를 하나의 객체로 관리하는 방법을 택함.useState 필요없이 useForm 훅이 모든 상태 관리 작업을 자동으로 처리.register 함수

이슈 바닐라 자바스크립트, EJS, Express를 사용하여 미니 프로젝트를 진행하고 있다. JWT를 활용해 사용자 로그인 시 브라우저 쿠키에 정보를 저장해서 페이지 권한과 헤더의 로그인 메뉴를 동적으로 관리하는 기능을 구현했다. 처음엔 로그인 메뉴를 JavaScri

https://school.programmers.co.kr/learn/courses/30/lessons/42583?language=javascript트럭 여러 대가 무게 제한이 있는 다리를 건넌다. 이 때 모든 트럭이 다리를 건너는 최소 시간을 구해야한다. 단

바닐라 자바스크립트로 토이 프로젝트를 진행하는 중에 모달을 보여주는 함수의 위치에 대해 고민이 되었다. 현재 프로젝트에서는 React와 유사한 함수형 패러다임을 적용했고, 컴포넌트 함수는 오직 컴포넌트 요소만을 반환하도록 설계했다. 하지만 이런 일관된 구조를 유지하려다

리액트를 처음 배울 때 간략하게 접하고 이건 다시 볼 일 없겠지 하고 지나갔던 웹팩이 다시 돌아왔다. CRA 이전의 웹팩의 기본 형태, 바닐라 자바스크립트를 웹팩 환경에서 어떻게 빌드하는지에 대해 알아보려 한다. 웹팩 5 버전을 적용할 것이며 CSS 로더, Dev Se

위와 같은 포스트 등록 동작을 구현하였는데 이미지를 로드만 한 후 뒤로가기(backBtn)를 클릭한 뒤 다시 이미지를 로드하고 등록하면 두 개의 이미지가 등록되는 문제가 생겼다.뒤로가기 동작시 이미지 등록요소를 css로 숨김처리만 했기 때문에 input에 로드된 파일은

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.키-값 쌍의 형태로 저장.브

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.script 태그 src로

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.https://js

apply, call은 함수를 특정 객체에 연결하고 호출하는 데 사용된다. 이들 메소드의 첫 번째 인자는 함수가 호출될 때 this의 값이 된다.두 메서드의 차이는 인자의 처리 방식에 있다. apply는 두번째 인자에서 함수에 전달될 인자들의 배열을 받고 call은 두

위 코드에서 setTimeout 함수는 "1밀리초 후에 'hi'를 출력하라"고 JavaScript에 지시한다. 그런데 중요한 점은, 이것이 바로 실행되는 것이 아니라 '예약'되는 것이라는 점이다.동기적 코드(for문)가 모두 끝난 다음에야 호출 스택이 비어 예약한 co

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.자바스크립트의 모든 숫자는

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.클로저란? 외부 변수를 기억

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.removeEventList

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.이번 챕터에선 class,

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.객체는 많이 익숙해서 메모한

this는 해당 함수를 호출한 객체를 참조호출된 객체를 참조.본래의 객체와 별개의 독립적인 함수로 취급화살표 함수 내에서 this는 화살표 함수를 둘러싼 가장 가까운 일반 함수나 전역 스코프의 this를 바인딩.이벤트 핸들러 내부에서 this가 이벤트의 대상(targe

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.Set과 Map에 대해서 처

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.DOM (Document O

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록한다.함수 선언문은 코드가 실행되기