오류 로그 ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════ The following ImageCodecException was thrown resolving an image codec: Failed to load network image. Image URL: https://cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/U4IIQNIIYFLA3JC7EYMNJMOCIA.JPG Trying to load an image from another domain? Find answers at: https://flutter.dev/docs/development/pla..
1.1 프로그래밍의 기본 요소 프로그래밍의 기본 요소 원시 표현식 : 언어와 관련한 가장 단순한 개체(entity) 조합 수단 : 단순한 요소들로부터 복합적인 요소를 만듦 추상화 수단 : 복합적인 요소들에 이름을 붙여서 하나의 단위로 다룸 모든 강력한 프로그래밍 언어는 반드시 원시 데이터와 원시 함수를 서술하는 기능이 있어야 하고, 그런 함수들과 데이터를 조합하고 추상화하는 수단들도 제공해야 한다. 표현식 표현식 문장은 표현식(expression)과 세미콜론(;)으로 구성된다. 표현식은 하나 이상의 원시 표현식(primitive expression)으로 구성되는데, 여러 원시 표현식 중 하나로 수(number)가 있다. 수를 나타내는 표현식들은 연산자(+나 *같은)로 조합할 수 있다. 그 결과는 연산자들..
최근 SICP( Structure and Interpretation on Computer Programs) : JavaScript Edition 책을 가지고 스터디를 진행하고 있다. 물론 최신 트렌드와는 맞지 않는다는 이유로 MIT에서는 교과과정에서 배제되었지만 이 책이 프로그래밍을 하는데 도움이 되지 않는다고는 말할 수 없을 것이다. 최근 트렌드는 다른 사람들이 써놓은 라이브러리를 적재적소에 잘 사용해서 빠르게 만들어 출시하는 것이지만, SICP의 커리큘럼을 따라가면 다른 사람들이 라이브러리를 만든 것처럼 나 스스로가 튼튼한 라이브러리 또는 앱을 만들 수 있다고 생각한다. 어떤 사람이 SICP에 대한 후기를 남긴 것을 보았는데, "폴리글랏, 그리고 메타 프로그래밍을 할 수 있도록 훈련시키는 책" 이라고..
왜 사람들을 Next.js를 사용하는 걸까? google에 입력해보면 대부분 SSR하려고 쓴다라는 포스팅 뿐이다. (물론 이 외 이점들이 있다.) 애초에 Next.js 는 React 프레임워크인데 그냥 Next.js 없이 React만으로 SSR을 하면 되는게 아닐까? 오히려 Next.js를 쓰는게 추후 기술적 부채가 될수도 있지 않을까? 라는 생각에 React만으로 SSR을 하는 법을 파헤쳐본다. SSR SSR(Server Side Rendering)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client Side Rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사..
하루 5분 UX UX는 직독하면 User eXperience 즉, 사용자 경험이다. 목표는 사용자가 쓰기 편한 데에 있다. 흔히들 UI/UX를 묶어서 말하는데, 이 둘의 공통점은 User이다. 사용자에 포커스가 맞춰져 있다. 사용자가 보기에 심미적으로 우수하고, 사용성이 좋은 앱은 매출 증가에도 영향을 끼칠 수 있다. 나는 디자이너는 아니지만, 프론트엔드 개발자로서 서로 협업을 하기 위해 이에 대한 기본적인 지식이 필요함을 알고있다. 그저 눈에 보여지는 디자인을 화면에 옮기는 것이 아니라 디자인 안에 숨겨진 UX를 이해해야 온전히 디자인을 적용했다라고 얘기할 수 있다. 모두에게 100% 맞는 UX는 없다. 나에게는 이 앱이 편하나 다른 사람에게는 편하지 않을 수 있다. 그럼에도 불구하고 공통적으로 드러나..
'notification.metrics.axis == widget.axis': is not true. Listview 위젯의 physics를 통해 스크롤 방식을 제어할 수 있는데, 아래처럼 ScrollPhysics가 적용되어있는 Listview 하위에 수평적으로 스크롤이 가능한 ListView를 두려고 했다. 이 때, 하위 ListView에서 수평스크롤이 먹히지 않고, 컨텐츠 너비가 흘러넘쳤다. 이러한 경우 아래처럼 하위 ListView에 BouncingScrollPhysics() 를 적용하여 해결할 수 있었다. 보통 bouncingScrollPhysics을 적용하면 목록보다 더 많이 스크롤을 했을때, 바운스되면서 다시 목록이 있는 지점으로 돌아오는 기능을 한다. 근데 왜 위와 같은 상황에서 Bounci..
로컬에 폰트파일을 두고 사용하는 경우로 글을 작성합니다. 제가 예시로 사용할 폰트는 Tenada 입니다. 다운로드는 https://blog.naver.com/tenada/222849825644 에서 할 수 있습니다. font-face 적용. css파일에 font-face를 적용시켜주면 되는데, 저는 tailwind 지시문이 있는 css파일에 넣어주었습니다. 어느 css파일이든 상관은 없으나 css파일을 import해서 넣어주는 부분이 앱 구조상 윗단에 있으면 상관 없습니다. 이미 이렇게 넣어줌으로써, className에 tailwind 식으로 넣을 수 있습니다. 안녕하세요 여기서, 나는 theme으로 정의하고 싶다면 아래의 방법을 따라합니다. tailwind.config.js에서 theme을 정의합니다...
설치한 플러터 패키지 내용을 직접 수정할 일이 있었다. 패키지를 삭제 후, 다시 설치해도 수정했던 이력이 그대로 남아서 원래 패키지 내용으로 돌아갈 수 없었다. 이때 패키지가 저장되어있는 곳이 .pub-cache 폴더인 것을 보고 캐시를 삭제했더니 패키지 원본을 받아올 수 있었다. pub의 종속성(=패키지) 중 일부는 pub 캐시에 다운로드된다. (출처 : https://fartlang.org/tools/pub/installing.html) 만약 패키지를 수정했는데 원본으로 돌리고 싶다거나 패키지 원본이 손상되면 아래의 커맨드를 입력해보면 좋겠다. $ flutter pub cache repair
맥북을 사용하고 있고, 에디터는 VSCode를 씁니다. 테스팅할 앱은 Flutter로 만든 앱입니다. 아이패드를 테스팅기기로 삼은 경우라 아이폰과는 조금 다를 수도 있습니다. 1. 버전 업데이트 맥북, 아이패드, X-code를 최신으로 모두 업데이트 시켜줍니다. (서로 버전이 맞지않아 되지 않는 경우도 있다 합니다.) 2. 맥북과 아이패드를 USB로 연결시켜줍니다. 이때 아이패드에서 권한허가에 대한 대화상자가 뜨는데 허가를 눌러줍니다. 3. Xcode 셋팅 테스팅할 앱에서 커맨드를 입력합니다. open ios/Runner.xcworkspace 그러면 아래와 같은 창을 볼 수 있습니다. 순서대로 따라해봅시다. 좌측편 Runner 메뉴를 누릅니다. Signing & Capabilities 탭을 누릅니다. 펼..
flutter_blue 패키지를 다운받고, 앱을 구동시키는데, 오류가 발생했다. FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':flutter_blue:generateDebugProto'. > Could not resolve all files for configuration ':flutter_blue:protobufToolsLocator_protoc'. > Could not find protoc-3.11.4-osx-aarch_64.exe (com.google.protobuf:protoc:3.11.4). Searched in the following locations: https://repo.mav..
1. macOS 업데이트 1. OS를 최신상태로 업데이트 2. 안드로이드 스튜디오 설치 https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today. developer.android.com 1. 안드로이드 스튜디오 홈페이지에서 Download Android Studio 클릭 2. 약관 동의 - 칩에 따라 설치 3. Flutter, Dart 설치 ..
모바일용과 PC용 디자인 시 사용성은 어떻게 달라질까? 별다른 차이는 없으며 기본 원칙은 여전하다. 다만 모바일 환경에서는 사람들이 더 빨리 움직이고 더 적게 읽으며, 모바일이 주는 환경의 특수성이 존재한다. 1. 트레이드오프를 고려하라 제약이란 해야만 하는 일과 할수 없는 일을 가르키며, 트레이드 오프는 제약 때문에 이상을 버리고 선택하는 현실적인 대안을 가르킨다. 제약이 전혀 없다는 말은 언뜻 듣기에는 자유로은 느낌이 들지만, 막상 무언가 지켜야 할 제약이 있다면 초점을 맞출 곳이 생긴다. 훌륭한 모바일 사용성을 구현하는 문제의 본질은 대체로 트레이드오프를 훌륭하게 해내느냐에 있다. 2. 공간이 좁아서 생기는 문제들 화면 공간 부족 때문에 사용성이 희생되면 안 된다. 모바일 화면이 갖는 가장 눈에 띄..
