들어가며 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..

[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..

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..

상황 : .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..

D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..

오늘 저는 여러분에게 백엔드 개발에 있어 효율적이고 강력한 도구인 Nest.js에 대해 소개하고자 합니다. 이 글을 통해 Nest.js가 무엇인지 알아보고, 지금 프론트엔드 개발자의 길을 향해가고 있는 제가 이 기술을 배웠을 때의 이점이 무엇인지에 대해서도 알아보도록 하겠습니다. Nest.js란 무엇인가요? Nest.js는 효율적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 고성능의 Node.js 프레임워크입니다. Typescript를 기반으로 하지만, Javascript로도 사용이 가능하며, OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 와 같은 다양한 개발 방법론..