[TS] 제네릭 / 유틸리티 타입
2022. 7. 6. 05:16
프로그래밍/TypeScript
1. 제네릭 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 할 수 있다. 선언할 때는 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다. 매개변수의 타입이 바뀌었는데 동일한 함수를 재사용하고 싶다면 함수 오버로드를 사용하거나 유니언 타입을 사용할 수 있다. 다른 타입들도 배열로 만들어서 전달 할 경우 아래와 같아진다. 이럴 때 사용할 수 있는 것이 제네릭이다. 사이의 타입 파라미터 T는 타입을 전달 받아 함수에서 사용할 수 있게 해준다. 함수 호출시 타입을 기입해주지 않아도 타입 스크립트는 전달되는 매개변수를 보고 어떤 타입인지 알고 있다. 혹은 옵션 객체의 모습이 정해져 있다면 아래와 같이 작성할 수 있다. showName 함수는 매개변수를 받아서 그 객체의 na..
[TS] 함수 / 리터럴, 유니온, 교차 타입 / 클래스
2022. 7. 5. 19:57
프로그래밍/TypeScript
· 1. 함수 함수 타입 정의는 다음과 같이 한다. function add(num1: number, num2: number): number { return num1 + num2; } function add(num1: number, num2: number): void { console.log(num1 + num2); } function isAdult(age: number): boolean { return age > 19; } 인터페이스처럼 함수의 매개변수도 옵셔널로 지정할 수 있다. name이 있으면 name을 쓰고 없으면 world를 출력하게 하는 코드다. 하지만 호출할 때 매개변수가 없어서 빨간 줄이 나타났다. name이 없을 때의 코드가 있지만 타입스크립트에서는 보다 명시적으로 알려줘야 한다. 아래와..
[TS] 타입스크립트 사용 이유 / 기본 타입 / 인터페이스
2022. 7. 5. 01:18
프로그래밍/TypeScript
※ 브라우저들은 타입스크립트를 이해하지 못하기 때문에 타입스크립트를 자바스크립트로 변환해서 로드해야 실행 가능 1. 타입스크립트를 사용하는 이유 // 자바스크립트 코드 function add(num1, num2) { console.log(num1 + num2); } add(); add(1); add(1,2); add(3,4,5); add('hello', 'world'); 더보기 NaN NaN 3 7 "helloworld" add(1,2)를 제외하고는 원하는 결과가 나오지 않는다. add()의 경우에는 아무 인수도 전달하지 않았으니까 num1과 num2 모두 undefined가 되었고, undefined끼리 더했으니 NaN이 나온다. 하지만 자바스크립트는 아무런 경고도 주지 않았고, 실수가 분명함에도 심지..
네이버 부스트 캠프 7기 1차 코딩 테스트 후기
2022. 6. 30. 03:32
기타
1차 코테이고 작년 후기들 보니까 프로그래머스 Lv.1~2 수준이라길래 별로 큰 걱정은 안 했다. 준비는 그냥 프로그래머스 Lv.2 카카오 문제 풀어보기 근데 막상 끝나고 보니 작년보다 훨씬 어렵다고 했고 0솔이 속출했다. 문제는 오류가 있고 그러다 보니 노래방처럼 시간은 자꾸 추가되고... 얼레벌레 우당탕탕 그 자체 오픈채팅방 투표 보니까 약 520명 중 0솔 30%, 0.5솔(일부 테케 통과) 40%, 1솔 23% 몇 천명이 지원했을 테니 1솔도 전체 인원 기준 몇 백 명은 될 거라고 생각해서 컷 기준을 1솔로 잡지 않을까 했는데 0.1솔인 사람들도 많이 붙은 것 같다. 2차 코딩에서 많이 거르려고 하는 것 같다. 코딩 문제 2개, cs 객관식 10개가 나왔고 주어진 시간은 1시간 40분 + 추가 시..
[React] Link와 useNavigate
2022. 6. 23. 14:06
프로그래밍/React
Link import * as React from "react"; import { Link } from "react-router-dom"; function UsersIndexPage({ users }) { return ( Users {users.map((user) => ( {user.name} ))} ); } react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장) 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포..
[React] Styled-components Naming
2022. 6. 12. 03:38
프로그래밍/React
Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고 태그나 id, class이름으로 가져와 쓰지 않고 컴포넌트 이름을 쓰듯 스타일을 지정하는 방식 css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음 Styled 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 css를 사용할 수 있음 글 작성 이유 className에 대한 고민이나, BEM 사용법이 맞는지 등.. 고민을 안 하게 되어서 좋았지만 styled-component의 이름을 어..
[React] useRef
2022. 5. 8. 17:13
프로그래밍/React
useRef로 특정 DOM 선택 자바스크립트에서 특정 DOM을 선택해야 하는 경우, getElementById, querySelector과 같은 DOM selector 함수를 사용했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 있다. 특정 input에 포커스 주기 특정 엘리먼트 크기 가져오기 스크롤바 위치 가져오거나 설정 Canvas 요소에 그리 그리기 등 이러한 경우에 DOM에 직접적으로 접근하기 위해 ref를 사용한다. 더보기 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못 사용된 것이다. 사용은 가능하지만 리액트 사상에 어긋난 설계이다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ↔ 자식 흐름으로 교류해야 한다. 이러한 ref를 함수 ..
[JS] 고차 함수
2022. 5. 2. 12:10
프로그래밍/JavaScript
고차 함수 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차함수라고 한다. 고차함수를 이용하면 코드의 중복을 제거하는 것이 용이하다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. cons..
[JS] 태그 선택, 이벤트 달기
2022. 4. 29. 17:52
프로그래밍/JavaScript
querySelector 자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다. querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다. document.querySelector('선택자') 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다. 태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다. 1번째 참가자 제시어: 입력 버튼2 버튼3 버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다. 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다. 세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 ..
[Spring] Auto-wiring
2022. 4. 25. 01:26
프로그래밍/Spring
Auto-wiring (의존 관계 자동 설정) 개념 Dependency Injection을 명시적으로 설정하지 않아도 container가 bean의 타입이나 이름을 이용하여 DI를 자동으로 수행하는 기능 XML 설정 방법 엘리먼트에 autowire 속성을 이용하여 자동 설정 방식 지정 모든 bean 객체들에 대해 특정 방식을 적용하려면 엘리먼트에 default-autowire 속성 이용 autowire 값 의미 no (default) auto-wiring을 수행하지 않음 byName property와 같은 이름 또는 id 값을 갖는 bean을 찾아 주입 (setter-based injection) byType property와 같은 타입을 갖는 bean을 찾아 주입 (setter-based injecti..