본문 바로가기

공부 정리

(39)
23.01.15: JavaScript - Array.from() Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듦. 구문 Array.from(arrayLike[, mapFn[, thisArg]]) 매개변수 arrayLike: 배열로 변환하고자 하는 유사배열 객체나 반복 가능한 객체 mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수 (optional) thisArg: mapFn 실행 시 this로 사용할 값 (optional) 반환 --> 새로운 Array. 인스턴스 Map 에서 배열 만들기 const m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m) // [[1, 2], [2, 4], [4, ..
23.01.11: dependency array에는 언제, 뭘 넣어주어야 할까 (useEffect, useMemo, useCallback) React Hooks 중 useEffect, useCallback, useMemo를 사용하면서 언제 dependency array를 추가하고 또 어떤 것을 넣어주어야 할 지 어렴풋이 짐작은 하지만 확실하게 알고 있지 못한 것 같아 공부를 또 해야겠다 싶었습니다. 같은 내용을 몇 번을 쓰고 또 쓰는지 모르겠지만 이렇게 정리하다 보면 완전히 알게되는 날이 올 것이라는 믿음으루... 또 정리 해보겠습니다. 별코딩의 리액트 hooks 강의 예제 및 다른 블로그들의 예제들을 참고 하며 학습 및 정리한 내용입니다. 링크는 본문 하단에 있습니다. # useEffect useEffect는 컴포넌트가 화면에 첫 렌더링이 될 때(Mount), 다시 렌더링이 될 때(Update), 화면에서 사라질 때(Unmount) 특정 ..
23.01.10: React-hook-form 이용한 form 구현(React storybook, typescript) 구현 조건 1. styled 를 활용해 Wrapper 를 만들어주세요. (width: 500px, height: 700px, Wrapper border 속성을 통해서 구분을 주어야합니다.) 2. 사용자로부터 다음의 정보를 입력받을 예정입니다. (id, name, pwd, gender(M, F), email, phone, address, description) 3. description 은 선택 입력입니다. 하단에 체크박스를 클릭하면 descipriton 필드가 노출됩니다. 체크박스를 해제하면 안보입니다. 4. phone, email 은 각각의 형식에 맞게 입력을 받아야합니다. 나머지 필드는 반드시 입력해야 합니다. 5. 비밀번호는 확인을 통해서 입력한 비밀번호가 일치하는지 체크를 해야합니다. 6. 하단에..
22.01.05: typescript, React Storybook 이용 과제 (Arrow Function, currentTarget) 문제 1. (FirstTemplate 에 작성합니다.) 간단한 버튼 3개를 구현해주세요. 버튼 문서는 오른쪽 링크를 참조합니다. (https://mui.com/material-ui/react-button/) 첫 번째 버튼의 속성은 small 사이즈이며 outlined, primary 입니다. 두 번째 버튼의 속성은 medium 사이즈이며 contained, secondary 입니다. 세 번째 버튼의 속성은 large 사이즈이며 text, error 입니다. const FirstTemplate: Story = (args) => { return ( Primary Secondary Error ); }; 문제 2. (SecondTemplate 에 작성합니다.) InputText 에 값이 없을 때 비활성화, 값이..
22.12.29: 프로그래머스_다음에 올 숫자 문제 설명 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 제한사항 2
22.12.28: 프로그래머스_옹알이(1) 문제 설명 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다. 문자열은 알파벳 소문자로..
22.12.21: 타입스크립트 타입들 - Union, Any, Unknown 타입스크립트는 변수를 만들때 타입을 지정할 수 있다. 자주 쓰는 type들은 다음과 같음 let 이름 :string = 'Kim' let 나이 :number = 20; let 여성 :boolean = true; array 또는 object 자료 안에서도 타입을 지정한다 let name :string[] = ['Kim', 'Park'] array안에 다른 타입이 동시에 들어갈 때 let 회원들 :(string | number)[] = ['Kim', 22] object 자료 안에 들어가는 타입은 object 모습과 같다. let kkongJji: { age : number } = { age : 2 } 하지만 모든 변수에 타입을 지정 할 필요는 없다. 변수 생성시 타입스크립트가 타입을 자동으로 부여 해 준다...
22.12.17: TypeScript 특징, 쓰는 이유? TypeScript란? JavaScript에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하기 위해 파일을 한번 변환 해 주어야 한다. 이 과정을 컴파일(compile)이라 한다. # TypeScript 특징 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프린터 언어로 런타임에서 오류를 발견한다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이고 타입스크립트 컴파일러 또는 바벨을 통해서 코드로 변환된다. 자바스크립트에 타입스크립트 문법이 추가된 것 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환 가능 객체 지향 프로그래밍 지원 ES6에서 새롭게 사용된 문법을 ..

반응형