일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 그리디
- 알고리즘
- github
- 코딩테스트
- 야놀자
- 너비우선탐색
- cpu
- Javascript
- 코테
- 자바스크립트
- git
- html/css/js
- CS
- DFS
- 컴퓨터과학
- 패스트캠퍼스
- 국비지원
- 부트캠프
- 프론트엔드개발자
- nodejs
- computerscience
- 컴퓨터공학
- 국비지원취업
- 백준
- LinkSnap
- js
- BFS
- KAKAO
- 호이스팅
- CSS
- Today
- Total
목록분류 전체보기 (326)
My Boundary As Much As I Experienced
useReducer란? useReducer는 상태를 관리하는 또 다른 방식이다. useState의 경쟁자?라고 보면 된다. 그렇다면 useReducer와 useState는 무엇이 다른가? 흔히 쓰는 useState는 '필요한 state만큼 생성해서 개별 관리'하였다. 그러나 useReducer는 여러 state가 존재해도 하나의 로직으로 다 관리한다. '중앙화된 state묶음'이라고 보면 된다. 이렇듯 기능적으로는 이점이 두드러지기보단 관리 방식의 차이가 발생한다. 중앙 관리해서 좋은 점은? 1. state가 너무 늘어나서 헷갈리는걸 방지한다. state가 열 몇 개씩 쌓이면 이게 어떤 state인지 헷갈리기 시작하는데 이를 방지할 수 있다. 2. 다른 state의 이전 값을 참조해서 최신 값을 만드는 ..
달성한 조건 98문제 해결 평균 solve난이도 실버4 (문제 난이도 별 모음집에서) 클래스3 클리어 지금까지 푼 문제 난이도 분포는 이렇다. 이때, 혼자서 못 풀어서 직접적으로 답을 본 것들은 정답 제출하지 않았고, 질문게시판에서 반례 테스트케이스를 조회해본 정도만 제출하였다. 거의 실버로만 그득한걸 볼 수 있다. 골드는 딱 5문제... 골드 문제를 쉽게 풀 수 있으면 이제 플레로 가는거겠지? 플레는 최소 400문제는 풀어야된다고 한다. 내가 올해 5월부터 10월까지 백준 100문제를 풀었으니... 내후년 쯤에 400문제 채울 수 있으려나? 물론 양치기만 하는게 아니라, 푼 문제들의 상위 100문제가 평균 골드로 맞춰져야 한다. 실버문제들을 아무리 양치기 해봤자 플레를 달성하긴 힘들다. 백준 랭크 올리..
기존 useState를 쓸 때 발생하는 문제 아래는 리액트로 양방향 입력 컴포넌트를 만드는 흔한 예시이다. 양방향이란, 1. 유저가 input 태그에 입력해서 state값을 바꿀 수 있고, 2. 시스템이 다른 handler함수에서 setState를 통해 렌더된 인풋을 바꿀 수 있음을 의미한다. const [state, setState] = useState(””) 이게 틀리다는 건 아닌데 이런 식으로 하면 state가 바뀔 때마다 input이 재렌더 된다. value={state}때문에 state값의 변화에 영향을 받는 이 input컴포넌트는 엄청나게 많은 재렌더 api를 쏘게 되는데.. (단순 키보드 입력 때마다 state가 바뀌기 때문. state가 쓰이는 모든 곳이 재렌더 된다.) 성능적으로 민감한 ..
리액트 포털은 언제 쓰는가? 웹페이지를 만들다보면 종종 모달을 만들 상황이 발생한다. 많은 사람들이 모달을 그때그때 모달이 필요한 페이지의 자식으로 만들고 있다. 그렇게 되면 원래라면 해당 페이지의 맨 아래 있어야하는 모달을 css를 사용하여 최상단에 있는 것처럼 꾸미는 것이다. 이게 완전히 틀리다는건 아니지만, 의미적으로 좋지 않긴 하다.(최상단에 보이는 컴포넌트가 사실 맨 아래에 있는건데 z-index만 조작해서 위에 있는것처럼 보임) 의미적인 측면 뿐만 아니라 기능적으로도, 모달을 발생시켜야 하는 지점이 매우 깊은 곳이면, 그 상위요소들의 css에 모두 영향을 받는다. z-index가 다른 의존성 때문에 잘 안 올라가는 경우도 생길 수 있음. (리액트 루트를 넘어) 최상단으로 모달같은 컴포넌트를 보..
JSX코드가 처리되는 과정 JSX는 자바스크립트 코드가 HTML처럼 보이게 만든 일종의 Syntax Sugar일뿐이다. 실제로는 자바스크립트이다. // JSX return Let's get started! // 원시 React? return React.createElement("div", {}, React.createElement("h2", {}, "let's get started"), React.createElement(Expenses, {item: expenses}) ) //최상위 div에는 속성이 없으므로 빈객체{}를 2번째 인자로 제공한다. 위 예시의 아래 부분처럼 실제로 JSX 문법이 나오기 전까진 createElement() 메소드의 체이닝을 계속 했어야 했다. (return문은 단 하나의 값..
타입 가드 - typeof typeof 조건식으로 처리되는 타입을 방어하는 코드이다. 주로 조건문으로 구성된다. 타입스크립트는 null이나 undefined의 가능성, 패러미터에 다른 타입이 들어올 가능성들을 추적하여 사용자에게 경고한다. function add(a: Combinable, b: Combinable): Combinable { if (typeof a === "string" || typeof b === "string") { // 조건식으로 처리되는 타입을 방어. return a.toString() + b.toString(); } return a + b; // must be Number } If 문에 typeof를 활용하여 a가 문자거나, b가 문자인 경우를 걸러주었다. 그러니 마지막 retur..
교차 타입 커스텀 타입을 혼합해서 쓸 수 있다. 사용법1. 객체 커스텀 타입과 객체 커스텀 타입을 혼합하면 합집합을 강제한다. type Admin = { name: string; privilages: string[]; }; type Employee = { name: string; startDate: Date; // 자바스크립트 Date객체를 말한다. }; type ElevatedEmployee = Admin & Employee; // 이런걸 교차타입이라고 한다. const e1: ElevatedEmployee = { name: "Max", privilages: ["create-server"], startDate: new Date(), }; console.log(e1); 인터페이스를 커스텀 타입으로 조합할..
두 개 중 뭘 사용해야 되나? 거의 비슷해서 서로 immigration해도 문제 없는 경우가 대부분이긴 한데 사소한 차이점들이 있긴 하다. 차이1: 문법 커스텀 타입은 등호를 이용하여 값을 할당한다. // 타입은 등호를 활용하여 값을 할당해준다. type Credit = number type People = { name: string; age: number; } type Id = string | number 인터페이스는 객체 형식꼴로 만든다. // 인터페이스는 객체 형식 혹은 클래스 형식과 비슷하게 생겼다. interface GreenThings { tree: string[]; jewel: string[]; brand: string[]; } interface Korean { name: string; id..
특정 숫자에 의미를 부여해서 타입들을 관리하고 싶을 때, 예를 들어 어떤 게임에서 player = 0, staff = 1, manager = 2 이런 식으로 코드를 부여해서 쓰고 싶다고 하자. 이런 상황에서 유용하게 사용할 수 있는게 enum이다. 이걸 자바스크립트에서 쓰려면 이런식으로 사용한다. // 자바스크립트에서도 통하는 방식 const ADMIN = 0 const READ_ONLY = 1 const AUTHOR = 2 이걸 아래 role에다 넣는게 더 간편할 수 있다. (자바스크립트에도 통하는 방식) 그러나 TS의 enum을 사용하면 조금 더 그룹화된 사용을 할 수 있다. 순서대로 0,1,2,... 식으로 일종의 인덱스가 부여된다. // 각기 변수를 만들지 않고 통합된 하나의 그룹처럼 쓰는게 en..
배열 타입 '배열'의 타입은 : []라고 지정하면... 될 줄 알았다. 그러나 이렇게 빈 배열을 타입으로 지정하면 '진짜 빈 배열' 이외에는 받지 못한다. string[], number[], ... 이런 식으로 어떤 데이터를 받는지를 리터럴 앞에 써줘야 한다. const person: string[] = ["Kim", "Han"] // 문자열만 받는 배열 생성. 초기화 때 비워놔도 된다. 어차피 문자열 들어간다고 선언해놨으니 다른 데이터가 들어갈 가능성은 없다. person.push(5) // 에러 만약 받을 수 있는 데이터 타입이 2개 이상이면 어떻게 할까? 유니언 타입을 [] 앞에 써두면 된다. ([]은 객체 리터럴이라 한다.) const person: (string|number)[] = ["Kim"..