본문 바로가기

분류 전체보기

 (49)
HOC & Hook & Typscript typescript 를 이용해 hook 으로 hoc 를 만들면서 알게된 내용들을 정리하고자 한다. 수정사항이나 피드백 환영합니당 HOC (Higer Order Component) react 문서에 따르면 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 라고 한다. 어떤 component 에 기능만 추가해서 새로운 compoennt 를 반환할 때 사용할 수 있다. 자 이제 typescript 와 hook 을 이용해 hoc 함수를 만들어보자. 만들려는 것 props 로 숫자를 받아서 보여주는 다음과 같은 component 가 있다고 해보자. interface ShowNumberProps { value : number } const ShowNumber = ({value} : ShowNum..
Typescript generic & util Typescript 쓰면서 알게된 것들을 정리해보고자 한다. 피드백 & 수정사항 환영합니다아 Typescript 의 제네릭 제네릭 : 클래스나 함수에서 사용할 타입을 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법 함수에서 흔한 사용 예 function first(arr: T[]): T { return arr[0]; } // number 로 타입을 명시해 주었다. first([1,2,3]); // type 명시하지 않아도 string 으로 추론한다. first(['a','b','c']); generic extends 특정 유형에 속한 type 을 정의하고 싶다면 extends 를 활용하자! 아래 예제에서는 Type 에 length 속성이 존재하지 않기 때문에 error 발생한다. function fo..
위장 분류 : 해시 문제 프로그래머스 - 해시 - 위장 programmers.co.kr/learn/courses/30/lessons/42578?language=javascript 문제 풀이 각 옷의 타입별로 몇가지의 옷들이 있는지 기록한다. => 각 옷의 타입을 key 로 하는 해시맵을 만들면 된다. 해당 옷으로 만들 수 있는 경우의 수를 구한다. 경우의 수를 구하는 것도 매우 간단하다. 각 옷 종류의 개수 + 1 한 값을 모두 곱해준다음에 1을 빼면 된다. 상의 3종류, 하의 2종류, 모자 2 종류가 있다고 하자. A1, A2, A3 , B1, B2, C1, C2 다. 이때 각각의 타입에서 하나씩 고를 수가 있다. 하지만 꼭 모든 옷을 선택해야 하는 것은 아니므로, 각 옷의 타입에는 선택하지 않는 경우도 들..
react-keycloak, js-adapter react 로 이뤄진 페이지에서 js-adapter 를 사용하여 keycloak 로그인을 진행하는 과정에 대해 정리하고자 한다. 구현하려는 그림 구현하고자 하는 로그인 flow 는 아래와 같다. 각 단계가 구체적으로 어떻게 진행되는지는 js-adapter 에 관해 먼저 알아보고 설명할 것이다. 사용할 라이브러리들 keycloak-js adapter javascript 용 keycloak adapter 이다. keycloak 을 이용한 로그인, token 갱신 등 작업들을 해준다. frontend 단에 적용하는 adapter 이기 때문에, token 교환이 frontend 에서 발생한다. github.com/keycloak/keycloak-documentation/blob/master/securing_ap..
return function Javascript 코드를 보다 보면 함수 내에서 함수를 return 하거나, () => () => () 와 같은 특이한 함수의 형태를 보곤 하는데 이런 패턴들이 잘 이해가 가지 않아 한번 정리해보려고 한다. const generateSum = () => { const sum = (a,b) => a+b; return sum; } const foo = generateSum(); foo(2,3); //5 위의 형태가 쉽게 생각해 볼 수 있는 함수를 return하는 함수다. generateSum 에서 sum 함수를 return 하고 있고, return 된 함수를 받아 실행하고 있다. foo 라는 변수에 대입하지 않고도 sum 함수는 호출 가능하다. generateSum()(2,3); //5 위와 같이 gene..
Gotdot - Tutorial 게임 만들기 (1) gotdot 의 tutorial 에 있는 게임을 만들어봤다. 게임을 만들면서 알게된 것들 / 게임 구성요소 등을 정리해보려 한다. ** 수정 사항/잘못된 정보 등에 관한 피드백 환영합니다. :) 완성된 게임 https://docs.godotengine.org/ko/stable/getting_started/step_by_step/your_first_game.html 의 url 에 있는 게임을 따라 만들어 봤다. player가 몬스터들을 피하면서 점수를 획득하는 게임이다. 친구가 귀여운 햄버거 몬스터를 만들어줘서 추가해봤다. 게임 구성 씬 구성 씬은 총 4개로 구성되어져 있다. 씬의 구성은 아래와 같다. Main , Player, Mob , HUB Main : 게임의 최상위 씬이다. root 라고 생각해도 ..
Godot - Physics ※ 본 포스팅은 Godot 의 공식문서를 정리한 것입니다. 피드백 환영합니다 :) 원글은 https://docs.godotengine.org/ko/stable/tutorials/physics/physics_introduction.html 를 참고해주세요. 게임 개발 중에는 두 물체가 교차하거나 접촉할 때를 알아야 한다. 이런 상황을 충돌 감지 라고 한다. 그리고 충돌이 감지될 때의 반응을 충돌 응답 이라고 한다. Gotdot 에서는 충돌 감지와 응답을 제공하기 위해 2D,3D 충돌 객체를 제공한다. 해당 충돌 객체들의 작동 방식과 장단점을 이해해보자! 다음과 같은 내용들을 다룰 것이다. Godot 의 4가지 충돌 객체 타입 각 충돌 객체의 작동 방식 각 충돌 객체 타입을 선택하는 기준 팁 충돌 객체 Go..
[You don't know JS] Chapter2 - 값 자바스크립트에서 '값' 이 될 있는 것들에 관한 내용이 있는 장이다. 간략하게 중요해 보이는 것들만 요약했다. 배열 문자열, 숫자, 객체 등 어떤 타입이라도 담을 수 있다. 배열 하나도 하나의 객체다. 키/프로퍼티로 문자열을 추가할 수 있다. (하지만 length 가 증가하지는 않는다.) 배열의 키로 넣은 문자열 값이 10진수 숫자면 문자열 키가 아닌 숫자키를 사용한 것 같은 결과가 나온다. var a = []; a["21"] = 100; a.length; // 22 가 나온다! 그래서 배열에 문자열 타입의 키/프로퍼티를 두는건 권장하지 않는다. 문자열 문자열은 배열과 같지 않다. 문자열은 불변 값 이지만, 배열은 가변 값이다. 각 문자열 접근시 a[1] 이 아니라 a.charAt(1) 으로 접근해야 한..

티스토리툴바