flutter를 입문하고 간단한 프로그램을 만들어 보고 있는 중에 다음과 같은 오류가 발생했다. 항상 느끼지만 앱개발은 내가 무언가 특별한걸 하지 않았는데도 오류가 참 많이 발생한다..; 에러메세지를 자세히 보다보면 에러를 유추할 수 있기 때문에 에러를 유심히 보는 것이 중요하다. 'INSTALL_FAILED_INSUFFICIENT_STORAGE' (설치 실패 스토리지(용량) 부족) 1. 데이터 지우기 필자의 경우 새로운 프로젝트를 하도 많이 만들면서 연습하다보니 앱이 쌓이면서 메모리 부족현상이 일어난 거 같다. - 안드로이드 스튜디오 > Device Manager 'Wipe Data'를 눌러서 사용자 데이터를 초기화 해보자. 초기화를 진행한 후 시작해보니 정상적으로 동작하는 것을 확인할 수 있었다. 2..
vscode로 flutter new projects를 통해 새로운 프로젝트를 생성하고 디버그 실행을 시켰는데 이런 에러가 발생했다! 실행하는데는 큰 무리가 없었지만 빨간 글씨를 보고싶지 않아서 해결방법을 찾아보았다. 정확히 어떤 에러인지는 모르겠지만 쓰여있는 글로만 추측컨대, macOS에서 플러터 프로젝트를 xcode로 build할 때 생긴 문제라고 보여진다. 해결방법은 간단하다. 1. 터미널에서 다음 커맨드를 입력해준다. open macos/Runner.xcworkspace 2. xcode가 실행되고 다음 화면이 나올텐데 좌측상단 가장 위에 Runner라는 탭을 클릭해준다. 3. 빨간 동그라미로 표시된 부분을 선택해준다. All, Levels부분을 선택하지 않으면 아래 모든 메뉴가 나타나지 않을 수 있..
1.1 폴더 구조 플러터에서 기본 프로젝트를 생성하면 위와 같은 폴더구조를 가지게 된다. 간단하게 폴더들의 역할에 대해서 알아보자. - pubspec.yaml pubspec.yaml 파일은 프로젝트의 메타데이터를 기록하는 공간이라고 생각하면 된다. (프로젝트 버전, 디펜던시,앱 이름, 설명 등등..) React 프로젝트의 `package.json` 같은 역할을 한다고 생각하면 쉽다. - android,ios 이 두 폴더는 각 플랫폼에 맞게 배포하기 위한 정보들을 가지고 있다고 생각하면 된다. - lib - 플러터의 개발 코드 파일들을 포함하고 있다. 우리가 플러터 코딩을 할 때 99%의 코드는 이 lib 폴더 안에 존재시키면 된다. 1.2 진입점(코드) lib 폴더 하위에 최초로 생성되는 `main.da..
자바스크립트가 만들어진 지 얼마 안 되었을 때는 자바스크립트로 만든 스크립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 *모듈 관련 표준 문법 없이 성장해왔다. 하지만 최근 앱의 사이즈가 커지면서 모듈화의 필요성이 생겨났고 브라우저, 노드 진영에서도 모듈시스템을 도입하기 시작했다. *모듈(module) : 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 1. Next.js에서의 모듈 따로 특별한 설정을 해주지 않아도 모듈시스템이 적용되어 있다. 따로 설정이 없다면 이런식으로 ../../ 으로 구성된 상대경로로 적용된다. 상대경로로 표시하는 것이 문제되는 것은 아니지만 한..
1. 웹 폰트? - 로컬 폰트 설치 여부와 관계없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 해주는 기술이다. *타이포그래피 : Typography란 글자와 글자가 위치한 공간이나 레이아웃 등 글자로 디자인된 상태를 말한다. 2. 웹폰트 사용법 웹 폰트는 css의 @font-face를 사용해서 설정할 수 있다. - font-family : 사용할 웹 폰트의 이름을 지정한다. 이때 아무 이름으로 지정해도 상관없다. 예를 들면, humanFont1234 이런 이름도 가능하다. 하지만 최대한 본래의 폰트명과 비슷하게 하는 것이 유지보수에 도움을 주기 때문에 비슷하게 짓는 편이다. - src : 폰트 파일의 경로와 폰트 형식을 지정한다. url로 폰트 파일 경로를 설정하고, format에 폰트 파일의 ..
프론트엔드 진영에서는 패키지 매니저로 npm 또는 yarn을 기본적으로 많이 사용한다. 어떤 패키지를 설치할 때 주로 사용하는 키워드는 npm i react 또는 npm install react이다. 많이들 익숙하기 때문에 자연스럽게 사용하고 있을 것이다. 그런데 npm install, npm ci의 차이는 뭘까? 위 커맨드들은 아래 파일들과 연관성이 있다. package.json package-lock.json package.json 파일은 우리가 설치하려고 하는 모듈에 대한 의존성 목록을 가지고 있다. 하지만 중요한 점은 이 package.json의 의존성 목록들은 정확한 버전이 아닌 range로 관리된다는 점이다. { "next": "^12.1.0", "redux" : "^4.1.2", } 이로 인..
최근에는 순수 React를 사용하기보다 거의 모든 프로젝트에서 Next.js를 사용하고 있다. Next.js를 사용하지 않을 이유가 없기 때문인데.. Next.js의 장점에 대해서는 다른 글에서 자세히 써보도록 할 것이다. 보통 폰트는 프로젝트 세팅할 때 적용하고 따로 설정할 일이 많지 않기 때문에 방법을 잘 잊어버린다. 다시 찾아보는 수고를 덜기 위해서 Next.js에 폰트를 적용하는 방법을 자세히 작성해 볼 것이다. 1. 라이브러리, 프레임워크 버전 - Next.js 12.2.3 (13버전이 아님 주의!) - styled-components 5.3.5 폰트 관련 설정이므로 css관련 버전만 명시한다. 2. 사용할 폰트 - Prentendard Pretendard는 한글에 최적화되어 있고 9개의 다양한..
프론트엔드 개발을 하다보면 아래와 같은 페이지 형식을 자주 접할 수 있다. 일정부분까지 스크롤이 되었을 때 자연스럽게 다음 화면으로 스크롤되는 기능이다. 필자도 회사에서 맡은 프로젝트의 메인페이지가 위와 같은 형식으로 디자인되어 있었다. 디자인이 되어 있다는 건.. 내가 구현해야한다는 뜻이다 🤣( 귀찮은 기능이지만 월급 받으니까 해야지) 1. react-full-page 라이브러리 가장 먼저 시작한건 라이브러리 검색이었다. ( 코드 리팩토링, 기능 구현 등등 사내 프론트엔드 개발자가 혼자라.. 사소한 기능에 시간을 많이 쓰고 싶지 않았다 ) 구글링한 결과 react-full-page 라는 패키지를 손쉽게 찾을 수 있었다. 이 기능을 full-page 라고 부르는 것도 패키지를 검색하다가 알게 되었다. M..
