초기 환경 설정node 설치React Native는 React와 같이 Javascript으로 개발을 하기 때문에 node가 필요합니다. node 설치는 아래 링크를 참고하시면 됩니다. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치bluemiv.tistory.com watchman 설치Watchman은 Facebook이 개발한 오픈 소스 툴입니다. 파일 시스템에서 변화를 감지하고 해당 변화에 반응하는 작업을 자동화할 수 있게 해주는 도구입니다. ..

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다. 여기서 시맨틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다. 시맨틱 태그란?시맨틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 구..

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다. 소규모 & 중간규모 프로젝트 작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다. my-app/ │ ├── src/ │ ├── components/ # 재사용 가능한 컴포넌트 │ │ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등) │ │ └── BlogContainer # 블로그 컨테이너 컴포넌트 │ │ ├── index.tsx │ │ ..

vercel vercel은 AWS처럼 클라우드 시스템 위에서 Next.js(SSR, SSG 모두 가능) 혹은 React 프로젝트를 무료로 호스팅할 수 있게 도와주는 서비스 입니다. 그리고, Next.js도 같이 개발을 하고 있어서 어떤 클라우드 서비스보다 원활한 Next.js 호스팅이 가능합니다. 직접 사용해본 결과 AWS Amplify와 비교했을때, 훨씬 지원되는 기능도 많고 안정적입니다. Next.js 프로젝트를 한다면 vercel을 사용하는게 좋을거 같습니다. Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the framewo..

실행 환경 설정 Next.js 14버전은 node버전이 18.17 이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기) nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치 bluemiv.tistory.com n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다. sudo n 18.19.0 node ..

Name Routing Name Routing은 web과 같이, 경로를 이용하여 라우팅 될 위젯(widget)을 정의하는 routing 방법입니다. 예시를 들면 아래와 같습니다. @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailScreen(), }, ); } 실제로 간단하게 구현을 해보겠습니다. 우선 flutter 프로젝트를 만들고, HomeScreen과 SettingScreen 2개의 스크린 위젯을 생성하겠습니다. // home_screen.dart import 'package:flutter/materi..

Flutter 설치 플러터 설치 요구 스펙 운영 체제(Operation System): macOS 10.14(Mojave) 이상 디스크 공간: 2.8GB (IDE/도구용 디스크 공간은 포함되지 않음) Rosetta 설치 (Apple 실리콘 Mac 만 설치) flutter를 설치하기 전에 Apple 실리콘이 탑재된 mac의 경우는 Rosetta를 설치해줘야 합니다. 만약 Intel 칩을 사용하는 Mac은 설치하지 않아도 됩니다. 설치는 아래 명령어를 사용해서 설치할 수 있습니다. sudo softwareupdate --install-rosetta --agree-to-license Rosetta 사용하면 Intel 칩이 탑재된 Mac용으로 만들어진 Application을 Apple Silicon이 장착된 M..

webpack이란? 웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다. 간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다) pug란? html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다. 코드로 예를들면, Google 위 html 을 pug로 작성하면, 아래와 같..

폰트의 굵기 웹 개발을 하면서, css로 자주 사용하는 폰트의 굵기는 normal, bold 가 있습니다. 거의 2가지 정도만 사용하지만 때때로는 수치를 입력하거나 lighter, bolder 등 부모의 상대 굵기를 사용할 수도 있습니다. 본 글에서는 굵기의 종류가 어떤게 있는지 살펴봅니다. css font-weight 기본 두께 폰트의 굵기를 표현할 때는 font-weight 속성을 사용합니다. normal 과 bold 는 아마 자주 사용하여 다들 아는 속성 값일 것입니다. font-weight: normal; font-weight: bold; 부모 요소에 대한 상대 두께 자주 사용하지는 않지만 lighter와 bolder가 있습니다. 이 2개는 부모 요소(element)에 대한 상대적인 두께를 표현할..

Gatsby 블로그에 Adsense 적용 자신의 블로그에 광고를 게시하기 위해서는 구글의 애드센스(Adsense)를 사용해야 합니다. html 코드를 에 직접 넣는 방법도 있으나 gatsby 플러그인을 사용하면 더 간단하게 적용할 수 있고, 매번 페이지를 생성할때마다 head에 넣어줄 필요가 없어서 적용 및 관리가 편하다는 장점이 있습니다. 방법 1. 개츠비 애드센스 플러그인 적용 우선 플러그인을 설치해봅시다. 아래 명령어와 같이 gatsby-plugin-google-adsense 플러그인을 npm 또는 yarn 통해 설치를 합니다. # npm npm install --save gatsby-plugin-google-adsense # 또는 yarn yarn add gatsby-plugin-google-ad..