JavaScript 썸네일형 리스트형 [JavaScript] 객체의 프로퍼티(property) 접근 방법, 속성과 메소드 차이 🙌객체(Object) - 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 속성(property)과 메소드(method)의 차이 - 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드(객체에 제한되어 있는 함수)라 부른다. - 객체는 데이.. 더보기 [TypeScript] props으로 받은 함수의 타입 지정하기 ✨props으로 받은 함수의 타입 지정하기 타입스크립트를 아무것도 모른 상태로 처음 사용하면서, 타입을 지정하는데에 어려움이 있었다. 예를들어 다음과 같이 일반적으로 타입을 명확하게 지정하기 쉬운 string, number, boolean 등은 타입을 지정할 때 크게 고민이 필요하지 않았지만, interface ICheckBoxProps { label?: string; placeholder: string; type?: 'email' | 'password' | 'text' | 'number'; autoComplete?: string; setValue: React.Dispatch; required?: boolean; maxLength?: number; inputRegexCheck?: ? } props으로 함.. 더보기 [TypeScript] React.KeyboardEventHandler<HTMLInputElement> 에서 event.target.value 에러 ❗타입스크립트 React.KeyboardEventHandler 에서 event.target.vale 사용시 에러 이슈 1. 타입스크립트를 처음 사용하면서, onKeyup 이벤트를 전달 시 발생한 에러 이슈이다. 이렇게 Input에서 onKeyUp 이벤트를 발생시켜 이벤트를 전달하면 2. 타입스크립트에서 타입을 명시해 주어야 한다. 마우스 hover 시 참고되어있는 이벤트 타입인 React.KeyboardEventHandler으로 지정해 주었더니 event.target.value에서 에러가 발생했다. 이유는 타입스크립트에서 KeyboardEvent에 target 속성은 정의 되어있지 않기 때문인 것 같다. index.d.ts에서 확인해 보면 target속성이 정의되어있지 않다. interface Keybo.. 더보기 [React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet 협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa.. 더보기 [React] 웹팩(Webpack)에 대한 이해 ✨웹팩(Webpack)이란 무엇인가? 웹팩(Webpack)이란 "JavaScript를 위한 정적 모듈 번들러" 이다. 그렇다면 모듈은 무엇이고, 번들러는 또 무엇일까? 이 둘의 개념부터 알아보자. 모듈(module)이란 ? 자바스크립트에서 모듈은, 어떤 특정 기능과 관련된 JavaScript 코드들(함수)로 이루어진 있는 하나의 파일을 말한다. 자바스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 파일을 여러개로 분리하여 모듈화 하는 등의 다양한 시도를 하게 되었고, 대표적으로 AMD, CommonJs(Node.js에서 사용 - requre(), module.. 더보기 [React] Create-React-App없이 React 개발 환경 셋팅하기 Create-React-App React를 처음 배우면서, 항상 CRA(Create-React-App)를 사용하여 리액트 앱을 생성하였다. React로 개발을 시작하기 위해서는 웹팩(Webpack), 바벨(Babel), 번들러(Bundler), 로더(Loader), 플러그인(Plugin), 린트(Eslint), dependencies와 devDependencies 등등 하나하나 배우고 설정해야 할 기술들이 굉장히 많은데 리액트 초심자로서 이것들을 일일히 다 숙지하고 프로젝트를 시작하기에는 실질적으로 힘들기 때문이었다. Create-React-App의 장점은 CRA로 앱을 생성하면 보편적으로 개발자들이 많이 사용하는 라이브러리 등이 대부분 셋팅 되어있기 때문에, 이후 추가적으로 필요한 라이브러리 등만 설치.. 더보기 [React] UUID - Date.now(), random()없이 고유한 key값 생성하기 리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui.. 더보기 [Javascript]정규표현식을 사용한 유효성검사 자주 사용하는 정규 표현식 모음 1. 기본 /^[ ]$/ 3. 숫자만 /^[0-9]$/ 4. 영문만(대소문자) /^[a-zA-Z]$/ 4. 소문자만 /^[a-z]$/ 5. 영문(대소문자) + 숫자 /^[a-zA-Z0-9]$/ 6. 영문(대소문자) + 숫자 + 길이 1~10자리 사이의 문자열 /^[a-zA-Z0-9]{1,10}$/ >>> 영문 포함 + 숫자 포함 + 길이 1~10자리 사이 문자열(반드시 모두 포함) const regexId = /^[a-z0-9](?=.*[a-z])(?=.*\d)[a-z0-9]{5,11}$/; 8. 소문자, 숫자, 특수문자 "-","_" 로만 구성된 길이 1~10자리 사이의 문자열 /^[a-z0-9_-]{1,10}$/ 9. 모든 특수문자 체크 /[\{\}\[\]\/?.,;:.. 더보기 이전 1 2 3 4 5 다음
