티스토리

갈푸라떼는 개발중

검색하기

블로그 홈

갈푸라떼는 개발중

latte1114.tistory.com/m

갈푸라떼 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[Typescript] Class 객체 지향 코드 타입스크립트에서는 파라미터에 써주기만해도 Typescript가 알아서 Constructor함수를 만들어준다. * 아래는 이해를 돕기위한 예시 사진 타입스크립트와 객체지향 프로그램이 가지고 있는 추상클래스(Abstract Class) 여기서 추상클래스란? 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 이 추상클래스는 직접 새로운 인스턴스를 만들 수는 없다. ex) new User()를 이용해 새로운 인스턴스를 만들려고 하면 error가 발생할 것이다. 이번엔 추상 메소드(Abstract Method)를 만들어 보자 (추상 메소드란? 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메소드를 의미한다.) (메소드란? 클래스안에 존재하는 함수) (참고: property를 private로 만들면 그 클.. 공감수 0 댓글수 0 2022. 10. 7.
[Typescript] Generic 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 라이브러리를 만들거나, 다른 개발자가 사용할 기능을 개발하는 경우엔 제너릭이 유용할것이다. 그 외 대부분의 경우에는 제너릭을 직접 작성할 일은 없을것이다. 대부분의 경우 작성해놓은 제너릭을 사용만 하게 될것이다. Generic의 일반적인 형태 type SuperPrint = { (arr: T[]): T } const superPrint: SuperPrint = (arr) => arr[0] const a = superPrint([1, 2, 3, 4]) // number const b = superPrint([true, false, true]) // boolean const c = .. 공감수 0 댓글수 0 2022. 10. 6.
[Typescript] over loading Overloading은 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로, 하나의 함수가 복수의 Call Signature를 가질 때 발생한다 예를 들어, Next.js의 라우터 push가 대충 두 가지 방법으로 페이지를 이동한다고 할 때, router.push("/home"); router.push({ path: "/home", state: 1 }); * Type지정 type Config = { path: string, state: number } type Push = { (path: string): void, (config: Config): void } const push: Push = (config) => { if (typeof config === "string") { console.log(c.. 공감수 0 댓글수 0 2022. 10. 6.
[Typescript] call signature // type 지정 type Add = (a:number, b:number) => number // 함수 const add:Add = (a, b) => a + b 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분 예시의 함수는 a, b인자를 받아서 a + b값을 return하는 함수이며 number, nuber type을 받고 number를 반환하는 함수이다. 공감수 0 댓글수 0 2022. 10. 6.
[React_study] useMatch() * useMatch() 현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환합니다. useMatch()의 인자로 url을 넘기어 해당 url과 일치할 경우 url의 정보를 반환하고 일치하기 않을 경우 null을 반환한다. * useMatch() 활용 예시코드 import { useMatch } from 'react-router-dom'; const priceMatch = useMatch("/:coinId/price"); const chartMatch = useMatch("/:coinId/chart"); const Tab = styled.span` color: ${(props) => props.isActive ? "white" : "black"}; `; Chart Price useMatch를 이용해.. 공감수 0 댓글수 0 2022. 7. 24.
[TypeScript_study] type지정을 쉽게 하는 팁 * TypeScript type지정을 쉽게 하는 팁 Object.keys() 그리고 Object.values()를 활용한다. console에서의 temp를 이용한다. 연습을 위한 api (https://api.coinpaprika.com/v1/coins/btc-bitcoin) 1. api데이터를 console.log를 이용하여서 console창에 출력한다. 2. 마우스 우클릭을 하여서 Store object as global variable를 클릭해주어 임시 변수 안에 해당 값들을 담아준다. temp1이라는 임시변수안에 값이 할당된다. 3. Object.keys()를 이용하면 key들이 전부 배열안에 담기게 된다. 4. Object.keys()를 이용해 key를 가져온뒤 join함수를 이용해 문자열로 변.. 공감수 0 댓글수 0 2022. 7. 24.
[TypeScript] TypeScript & React SyntheticEvent(합성이벤트) * [참고] https://ko.reactjs.org/docs/events.html import React, { useState } from "react"; import "./App.css"; function App() { const [value, setValue] = useState(""); const handleValue = (e: React.FormEvent) => { setValue(e.currentTarget.value); }; const onSubmit = (e: React.FormEvent) => {}; const onClick = (e: React.MouseEvent) => {}; return ( Click ); } export default App; React.event이름.이벤트를 발생.. 공감수 0 댓글수 0 2022. 7. 22.
[React_study] styled-components를 이용한 dark/light모드 * Theme를 이용한 dark/light모드 만들기 index.js파일에 기본 셋팅을 해준다. darkTheme와 lightTheme를 만들어준다. property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다. ThemeProvider를 통해서 App을 감싸준다. 그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다. theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다. // index.js import { ThemeProvider } from "styled-components"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { tex.. 공감수 0 댓글수 0 2022. 7. 20.
[TypeScript_study] Pick & Omit & Exclude & NonNullable * Pick T에서 원하는 K만 골라서 사용한다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Omit - 특정 property를 생략하고 사용 가능 - age, gender property는 제외되고 나머지가 사용된다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Exclude - T1의 type들 중에서 T2 type과 겹치는 부분을 제외하고 사용하는 .. 공감수 0 댓글수 0 2022. 7. 5.
[TypeScript_study] Record Record K : key T : type - TypeScript는 Version 2.1부터 Utility Type인 Record Type을 도입했습니다. Record Type은 Record 형식으로 키가 Key이고 값이 Type인 객체 타입입니다. * Record를 활용하기 전 interface Score { "1" : "A" | "B" | "C" | "D" "2" : "A" | "B" | "C" | "D" "3" : "A" | "B" | "C" | "D" "4" : "A" | "B" | "C" | "D" } const score:Score { 1 : "A", 2 : "C", 3 : "B", 4 : "D", }; * Record를 활용한 코드 type Grade = "1" | "2" | "3" | "4.. 공감수 0 댓글수 0 2022. 7. 5.
[TypeScript_study] 함수 오버로딩(Function Overloading) * 함수 오버로딩이란? TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다. * 매개변수의 개수는 동일하지만, 타입이 다른 경우 interface User { name: string; age: number; } function join(name: string, age: number|string):User|string { if(typeof age === 'number') { return ( name, age, ); } else { return "type number"; } } const kim:User = join("kim", 30); const par.. 공감수 0 댓글수 0 2022. 7. 5.
[TypeScript_study] Typescript 설치와 셋팅 & 간단 사용법(Vue, React 포함) * 타입스크립트 쓰는 이유 - TypeScript는 JavaScript의 타입부분을 업그레드해서 사용하고 싶을 때 사용하는 일종의 JavaScript의 일종의 확장판이다. 완전 다른 언어가 아니라 JavaScript문법 그대로 이용가능한대 타입 문법을 업그레이드 해서 사용할 수 있다. - JavaScript는 타입에 관대하다. 따라서 숫자와 문자를 연산해도 아무런 문제 없이 정상적으로 작동한다. 혹은 숫자로 바꿔주는 함수에 이상한 값을 넣어도 아무런 오류가 없다. 언어 자체에서 알아서 타입을 변경해준다. (JavaScript는 Dynamic typing를 지원하는 언어이기 때문이다.) ex) 5 - "3" 혹은 parseInt([1, 2, 3]) - Dynamic typing은 간단한 기능을 개발할 때는.. 공감수 0 댓글수 0 2022. 6. 26.
[React_study] 터미널 / 브라우저 콘솔창에 warning * 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유 개발을 하다보면 에러메세지는 터미널 혹은 브라우저 개발자도구에서 확인이 된다. 간혹 노란색의 waining 메세지가 등장하는 경우가 있다. 해당 warning는 무시하고 넘어가도 된다. (빨간 error은 해결해야한다.) 대부분 Eslint에서 잘못된 코딩관습을 교정해주고 있어서 warning를 띄워주고있다. ex) 000변수를 만들었는데 사용하지 않고 있습니다. 삭제하는게 어떤가요. 개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데 간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 빨간 error는 해결해야하지만 warning은 개무시해도 됩니다. /*eslint-disable*/ 이라는 주석을 js 파일 최상.. 공감수 0 댓글수 0 2022. 6. 20.
[React_study] reset css 하는 방법 + npm으로 설치 * reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. [결론적으로는] 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 * 기존에 사용하던 방법 ( css 파일 추가 ) https://meyerweb.com/eric/tools/css/reset/index.html 가장 많이 사용 하는 Reset css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public.. 공감수 0 댓글수 0 2022. 6. 18.
[JavaScript][clean-code] 클로저 (Closure) * Closure (클로저) [참고 내용] https://latte1114.tistory.com/298 https://latte1114.tistory.com/365 * 클로저 예시 코드 function add(num1) { return function sum(num2) { return num1 + num2; }; } const addOne = add(1); console.log(addOne(3)) // 4 // 1을 넘긴상태로 scope가 기억되기 때문에 4가 호출된다. 클로저를 사용한 함수를 보면 괄호가 2개이다. 괄호가 모두 호출되면 완벽히 함수가 다 호출되고 종료된다. 그말은 즉, 괄호를 한번 실행했기 때문에 add라는 함수는 외부함수만 실행이 된거고 실행된 상태에서 내부의 함수의 환경을 기억하고 .. 공감수 0 댓글수 0 2022. 6. 15.
[JavaScript][clean-code] 순수 함수(pure function) * 순수 함수(pure function) - 부작용(side effect)을 일으키지 않는 함수 * 부작용 (side effect) list Logging a value to the console Saving a file Setting an async timer Making an AJAX HTTP request Modifying some state that exists outside of a function, or mutating arguments to a function Generating random numbers or unique random IDs (such as Math.random() or Date.now()) * 순수 함수가 아닌 예시 (BAD) let num1 = 10; let num2 =.. 공감수 0 댓글수 2 2022. 6. 15.
[JavaScript][clean-code] Callback Function * Callback Function - callback function을 이용한 함수 위임 * callback function 사용하기 전 // callback함수 사용전 function register() { const isConfirm = confirm( '회원가입에 성공했습니다.', ); if (isConfirm) { redirectUserInfoPage(); } } function login() { const isConfirm = confirm( '로그인에 성공했습니다.', ); if (isConfirm) { redirectIndexPage(); } } * callback function 사용후 // callback 사용후 function confirmModal(message, cbFunc) { .. 공감수 0 댓글수 0 2022. 6. 15.
[React_study] Redux state가 object/array일 경우 변경 방법 * store에 저장된 state가 array, object 자료인 경우 Immer.js 라이브러리가 state사본을 하나 더 생성해주어서 직접 수정하는 문법도 잘 변경 된다. (Redux를 설치하면서 Immer.js라이브러리가 같이 설치되었다.) array/object자료의 경우 state변경을 state를 직접 수정해버려도 잘 된다. (참고) 그래서 state를 만들 때 문자나 숫자 하나만 필요해도 redux에서는 일부러 object아니면 array에 담는 경우가 있다. 수정이 편리하기 때문에 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ stat.. 공감수 0 댓글수 0 2022. 6. 15.
[JavaScript][clean-code] 화살표 함수 (Arrow function) * 화살표 함수 (Arrow function) [참조 내용] https://latte1114.tistory.com/367 * 예시 코드 // arrow function const user = { name : 'Hyeonwoo', getName : () => { return this.name; }, }; user.getName(); // undefined // 일반 method const user = { name : 'Hyeonwoo', getName() { return this.name; }, }; user.getName(); // Hyeonwoo 화살표 함수로 this.name에 접근시 undefined가 반환된다. 일반 메서드로 this.name에 접근시 정상적으로 this.name의 값이 반환된다... 공감수 0 댓글수 0 2022. 6. 13.
[JavaScript][clean-code] void & return * void & return void : 함수의 반환이 없다. return : 함수가 무언가를 반환한다. * 예시로 보는 void와 return function handleClick() { return setState(false); } function showAlert(message) { return alert(message); } setState함수와 alert함수를 void함수이다. 따라서 함수의 반환이 존재하지않는다. 따라서 return을 넣어주지 않아도 된다. 굳이 반환이 없는데 return을 사용할 필요가 없다. undefined가 return된다. * JavaScript는 기본적으로 아무런 return이 없을때는 undefined를 return한다. function test(sum1, sum2.. 공감수 0 댓글수 0 2022. 6. 13.
[JavaScript][clean-code] Rest Parameters * Rest Parameters [참조 내용] https://latte1114.tistory.com/297 * 예시 코드 function sumTotal() { return Array.from(arguments).reduce( (acc, curr) => acc + curr, ); } sumTotal(1, 2, 3, 4, 5, 6, 6); arguments를 활용하여 가변인자를 취한다. * 만약 추가적인 인자를 받고 싶은 경우에는?? - Rest parameters를 이용한다. function sumTotal(...args) { return args.reduce ( (acc, curr) => acc + curr, ); } sumTotal(1, 2, 3, 4, 5, 6, 6); [참고] rest parame.. 공감수 0 댓글수 0 2022. 6. 13.
[React_study] Redux store의 state 변경 * Redux의 state를 변경하는 단계 store.js에 state변경해주는 함수를 만든다. export 해준다. 필요할 때 import해주고 dispatch()를 이용해 사용한다. * store의 state 변경하는 법 1. store.js안에 state수정해주는 함수 만들기 slice안에 reducers안에 함수를 만들면된다. (함수 작명은 마음대로 해도 된다.) 첫번째 파라미터안에 기존의 state가 담겨져 있다. (parameter name은 state로 사용한다.) return 우측에 새로운 state 입력하면 그 값으로 기존 state를 변경해준다. let user = createSlice({ name : 'user', initialState : 'kim', reducers : { chan.. 공감수 0 댓글수 0 2022. 6. 12.
[React_study] Redux store에 state 보관 & 호출 * Redux store에 state 보관하는 법 configureStore, createSlice를 import한다. createSlice()를 이용해 state를 만든다. { name : 'state이름', initialState : 'state값' } configureStore()안에 등록 reducer : { 작명: createSlice에서 만든 name.reducer } import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initialState : 'kim' }) export default configureStore({ reducer: { user : user.re.. 공감수 0 댓글수 0 2022. 6. 12.
[React_study] Redux & Redux Toolkit 셋팅 및 사용 * Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리 js파일 하나에 state들을 보관할 수 있다. 모든 컴포넌트가 직접 꺼내어 사용할 수 있다. props전송을 안해도 된다. * Redux 설치 npm install @reduxjs/toolkit react-redux redux toolkit이라는 라이브러리를 설치 redux의 개선버전이다. "react", "react-dom"의 버전이 18.1.x 이상이면 사용 가능하다. * Redux 셋팅 src폴더안에 store폴더를 만들고 store.js파일을 만들어준다. 아래의 코드를 작성 import { configureStore } from '@reduxjs/toolkit' export default configure.. 공감수 0 댓글수 0 2022. 6. 12.
[React_study] Context API * SPA의 단점 컴포넌트간 state 공유가 어렵다. 부모 컴포넌트 => 자식 컴포넌트 props전송은 가능 props가 10개 ~ 20개 중첩이 되어 있으면 너무 헷갈리고 파악하기 어렵다. (Prop Drilling) * 해결방법 Redux와 같은 외부 라이브러리 사용 Context API를 사용 (오늘 알아볼 내용) * Context API를 이용해 props없이 state를 공유하는 방법 - setting createContext() 함수를 가져와서 context를 만들어준다. (context를 쉽게 비유해서 설명하자면 state 보관함이다) Context로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 적으면 된다. Context로 감싼 모든 컴포넌트와 자식컴포넌트는 state를 .. 공감수 0 댓글수 0 2022. 6. 12.
[JavaScript][clean-code] default Value / default parameter * Default Value / Default parameter - 기본값 설정 * 기본값 예시 코드 function createCarousel(options) { options = options || {}; const margin = options.margin || 0; const center = options.center || false; const navElement = options.navElement || 'div'; // ...some code return { margin, center, navElement, }; } createCarousel(); 기본값 설정이 되어 있어서 인자가 들어오지 않을경우 기본값으로 할당이 된다. * 기본값 다른 예시 function createCarousel({ .. 공감수 0 댓글수 0 2022. 6. 12.
[JavaScript][clean-code] 복잡한 인자 관리하기 * 복잡한 인자 관리하기 - 인자의 갯수별로 함수의 사용도가 달라지기보단 인자의 갯수에 따른 맥락을 유추할 수 있는 방식이 더 중요하다. 무조건 인자가 많은게 나쁜건 아니다. 맥락과 흐름을 파악할 수 있는 인자가 더 중요하다. * 맥락과 흐름을 파악할 수 있는 인자 예시코드 function toggleDisplay(isToggle) { // ...some code } // 인자의 네이밍을 보고 bool형식의 인자가 들어갈 것이 유추된다. function sum(sum1, sum2) { // ...some code } sum(1, 2); // 값이 2개 이므로 2개의 값을 더하는구나를 유추 할 수 있다. function getRandomNumber(min, max) { // ...some code } * .. 공감수 0 댓글수 0 2022. 6. 12.
[JavaScript][clean-code] argument & parameter * argument & parameter - 자바스크립트 함수에서 넘기는 인자 혹은 매개변수 * JavaScript argument vs parameter의 다른점은 무엇일까? MDN에서는 아래의 예시와 같이 구분하고 있다. function example(parameter) { console.log(parameter); } const argument = 'foo'; example(argument); 함수의 parameters는 이름이 있고 함수의 정의 부분에 있다. 함수의 arguments는 함수에 들어가는 real value이다. * Parameter (Formal Parameter) 예시 형식을 갖춘 매개 변수 function axios(url) { // some code } * Argument (A.. 공감수 0 댓글수 0 2022. 6. 11.
[React_study] 컴포넌트 전환 애니메이션 지정 (transition & automatic batch) * 애니메이션 개발 단계 애니메이션 동작 전 스타일을 담아둘 className생성 애니메이션 동작 후 스타일을 담아둘 className생성 transition 속성 추가 원할 때 2번 탈부착을 해준다. * 애니메이션 예시 코드 (fade in 애니메이션 예시 코드) 애니메이션 동작 전 className 생성 애니메이션 동작 후 className 생성 transition 추가 원할 때 fade-end 탈부착 .fade-start { opacity : 0; } .fade-end { opacity : 1; transition : opacity 0.5s; } function TabContent({tab}){ return ( { [content0, conten1, content2][tab] } ) } useEff.. 공감수 0 댓글수 0 2022. 6. 10.
[React_study] if를 사용하지 않고 props를 사용하기 * if를 사용한 예시 function Detail(){ let [tab, setTab] = useState(0); return ( ) } function TabContent(props){ if (props.tab === 0){ return content0 } if (props.tab === 1){ return content1 } if (props.tab === 2){ return content2 } } { setTab(0) }} eventKey="link0">Button0 { setTab(1) }} eventKey="link1">Button1 { setTab(2) }} eventKey="link2">Button2 * if문을 사용하지 않고 변경하기 방법1 function TabContent(props).. 공감수 0 댓글수 0 2022. 6. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.