TypeScript
-
들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..
React Native Expo Navigation 설정하기 (+TypeScript)들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..
2023.12.07 -
[Good Night Hackathon] 2023/08/26 10:00 ~ 2023/08/28 00:00 이번에는 반년만에 열린 2회차 Good Night Hackathon에 참여하였습니다. 분명 이전에 열렸던 스프링부트에 참여한 지 얼마 되지 않은 것 같았는데 벌써 더 업그레이드 된 해커톤이 진행되었네요! https://time-map-installer.tistory.com/175 [Good Night Hackathon] SpringBoot! 맛 좀 보자! 2023 Serieses [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 [2022..
[2nd Good Night Hackathon] 해커톤 프레임워크 어떤걸로 할까? Svelte Go?[Good Night Hackathon] 2023/08/26 10:00 ~ 2023/08/28 00:00 이번에는 반년만에 열린 2회차 Good Night Hackathon에 참여하였습니다. 분명 이전에 열렸던 스프링부트에 참여한 지 얼마 되지 않은 것 같았는데 벌써 더 업그레이드 된 해커톤이 진행되었네요! https://time-map-installer.tistory.com/175 [Good Night Hackathon] SpringBoot! 맛 좀 보자! 2023 Serieses [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 [2022..
2023.08.28 -
TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
[TailwindCSS] 디자인 적용이 잘 안된 것 같다면??TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
2023.07.14 -
상황 : .prettierrc 파일에 따로 typescript 설정을 해두지 않았습니다. 문제는 아래와 같았습니다. const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const [rel, setRel] = useState(null); // 위와 같아야 하던 코드가 Prettier 세팅으로 인해 아래와 같이 변경됨 const [position, setPosition] = useState { x: 0, y: 0 }; const [dragging, setDragging] = useState false; const [re..
[Prettier] Prettier를 세팅할 때 타입스크립트를 생각해야합니다상황 : .prettierrc 파일에 따로 typescript 설정을 해두지 않았습니다. 문제는 아래와 같았습니다. const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const [rel, setRel] = useState(null); // 위와 같아야 하던 코드가 Prettier 세팅으로 인해 아래와 같이 변경됨 const [position, setPosition] = useState { x: 0, y: 0 }; const [dragging, setDragging] = useState false; const [re..
2023.07.11 -
D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
[D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
2023.05.22 -
오늘 저는 여러분에게 백엔드 개발에 있어 효율적이고 강력한 도구인 Nest.js에 대해 소개하고자 합니다. 이 글을 통해 Nest.js가 무엇인지 알아보고, 지금 프론트엔드 개발자의 길을 향해가고 있는 제가 이 기술을 배웠을 때의 이점이 무엇인지에 대해서도 알아보도록 하겠습니다. Nest.js란 무엇인가요? Nest.js는 효율적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 고성능의 Node.js 프레임워크입니다. Typescript를 기반으로 하지만, Javascript로도 사용이 가능하며, OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 와 같은 다양한 개발 방법론..
[Nest.JS] TypeScript 기반 프레임워크, Nest.JS에 대해 알아보자오늘 저는 여러분에게 백엔드 개발에 있어 효율적이고 강력한 도구인 Nest.js에 대해 소개하고자 합니다. 이 글을 통해 Nest.js가 무엇인지 알아보고, 지금 프론트엔드 개발자의 길을 향해가고 있는 제가 이 기술을 배웠을 때의 이점이 무엇인지에 대해서도 알아보도록 하겠습니다. Nest.js란 무엇인가요? Nest.js는 효율적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 고성능의 Node.js 프레임워크입니다. Typescript를 기반으로 하지만, Javascript로도 사용이 가능하며, OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 와 같은 다양한 개발 방법론..
2023.05.21 -
ESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..
[Template] ESLint Template for FrontEnd DevelopersESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..
2023.05.13 -
Prettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..
[Template] Prettier Template for FrontEnd DevelopersPrettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..
2023.05.13 -
오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
[TypeScript] type {함수명}? interface {함수명}?오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
2023.04.27 -
프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
[Folder Structure] Hooks? Utils? 차이점이 뭘까?프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
2023.04.27 -
Previous Series
[TypeScript] TypeScript Grammar - 09Previous Series
2023.01.08 -
Previous Series [TypeScript] TypeScript Grammar - 06~07 Previous Series [TypeScript] TypeScript Grammar - 03~05 3. Type alias This Posting contains how to alias type to other variables type myType = number | string; let grade: myType = 3 Use type to create type and use to annotate another. Usually, we use it wh time-map-installer.tistory.com 8. Class class Train { color : string; constructor(col..
[TypeScript] TypeScript Grammar - 08Previous Series [TypeScript] TypeScript Grammar - 06~07 Previous Series [TypeScript] TypeScript Grammar - 03~05 3. Type alias This Posting contains how to alias type to other variables type myType = number | string; let grade: myType = 3 Use type to create type and use to annotate another. Usually, we use it wh time-map-installer.tistory.com 8. Class class Train { color : string; constructor(col..
2023.01.08