FE

1. Flutter 프로젝트 생성 flutter create first_app cd first_app first_app 폴더 안에 Flutter 프로젝트가 생성됨. 2. 에뮬레이터 실행 Android Studio > Device Manager > 생…

1. Android Studio 설치 공식 다운로드 링크 설치 후 실행해서 기본 SDK 설치가 포함된 Setup Wizard를 반드시 완료하기 현재 Apple Silicon 맥북을 사용하고 있으므로, ARM 기반의 Android 스튜디오 패키지를 설…

Flutter를 시작하기 위해서 homebrew를 사용하여 설치하는 과정 속에서 오류가 발생했다. 어떤 식으로 오류가 발생했고, 어떤 식으로 해결했는지를 기록하고자 한다. 0차 시도 : flutter 설치 brew install --cask flut…

Dart 첫 실행, 갑자기 뜨는 알림? Dart CLI에서 코드를 처음 실행했을 때 아래와 같은 메시지를 보게 되었다. The Dart CLI developer tool uses Google Analytics to report usage and di…

시작하며 다가오는 다음 학기에 '모바일 앱 개발'이라는 전공 수업을 수강할 예정이다. 해당 과목에서는 Google의 크로스플랫폼 프레임워크인 Flutter를 학습하게 되며, 이 Flutter는 Dart 언어를 기반으로 동작한다. Flutter와 Da…

React에서 상태를 관리할 때 대부분 useState로 시작한다. 간단한 상태라면 이걸로 충분할 수 있다. 예를 들어 숫자 카운트를 증가시키거나 입력 필드를 제어할 때 말이다. 하지만 앱이 커지고 상태가 서로 얽히고설키는 상황이 오면 얘기가 달라진…

React.memo : 컴포넌트 자체를 메모이제이션하여 props가 바뀌지 않으면 다시 렌더링하지 않도록 한다. 1) 사용하는 경우 부모 컴포넌트가 자주 렌더링되는데, 자식 컴포넌트의 props가 변하지 않는 경우 불필요한 리렌더링 방지 목적 2) …

프로젝트가 커질수록 이런 경험, 한 번쯤은 해봤을 것이다. app/, components/, utils/ 안에 파일이 정체 불명의(name.conflict)처럼 쌓이다 보니 "이걸 어디에 넣어야 하지?" 며 5분을 검색하게 된다. 누구나 겪는 이 문…

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅 등 다양한 기능을 내장하고 있습니다. 여기에 TypeScript와 Tailwind CSS를 조합하면 생산성과 안정성을 동시에…

가운데에서 퍼지는 밑줄 효과, ::after로 만드는 동적인 스타일링 React 프로젝트에서 메뉴 탭이나 버튼과 같은 인터랙티브한 UI를 만들 때, 사용자의 선택을 시각적으로 명확하게 표현해 주는 것은 중요하다. 그 대표적인 방식 중 하나가 bord…

웹 개발을 하다 보면 가끔 HTML 구조를 바꾸지 않고도, 특정 요소에 스타일을 더하거나 장식을 추가하고 싶은 순간이 있다. 예를 들어, 리스트 아이템 앞에 꾸밈용 아이콘을 넣고 싶거나, 버튼에 강조 선을 추가하고 싶을 때가 그렇다. 이럴 때 유용하…

React로 프로젝트를 진행할 때, ESLint가 아래와 같은 경고를 띄울 때가 있다. 'react/prop-types': 'desc' is missing in props validation 이 글에서는 이 경고가 왜 발생하는지, 그리고 어떻게 해결…