Flutter는 다음과 같이 일반적으로 사용되는 기본 Widget이 제공된다. Text 스타일이 지정된 텍스트를 생성할 수 있다. Row, Column 웹의 Flexbox 레이아웃 모델을 기반으로하여, Row, Column 방향 모두에서 유연한 레이아웃을 만들 수 있다. Stack 선형 방향(수평 또는 수직) 대신 Stack 위젯을 사용하여 페인트 순서에 따라 위젯을 서로 포개어 배치할 수 있다. Container 컨테이너는 배경, 테두리, 그림자 등으로 장식될 수 있고, 여백(margin), 안쪽 여백(padding) 및 크기에 대한 제약 조건이 적용될 수 있다. 또한 컨테이너는 행렬을 사용하여 3차원 공간에서 변환될 수 있다. 기본 사용법 import 'package:flutter/material.d..

프로젝트 시작 프로젝트 생성 > flutter create toonflix > cd toonflix > code . vscode 확장 설치 dart flutter 프로젝트 초기화 "main.dart" 파일의 void main() 함수 아래부분을 모두 지워주자. 그리고 main 함수 안의 runApp 함수를 확인해보면 아래와 같다. runApp() Function flutter에서 main함수는 필수이며 그 안에 들어가는 runApp 함수는 앱의 시작점, 루트라고 생각할 수 있다. runApp함수는 Widget 매개변수를 받고있는데, flutter는 모두 Widget으로 이루어진다고 생각할 수 있다. 마치 레고블럭과 같이 Widget들을 합치고 조립하여 하나의 앱이 완성된다. 공식 위젯은 아래 링크에서 확..

1. homebrew 설치 2. flutter 설치 brew install --cask flutter cask 옵션은 flutter를 application으로 넣어주기 위함 만약 dart가 설치되어있다면, 삭제하고 flutter로 다시 설치 (dart가 같이 설치된다) 3. 필수사항 확인 flutter docter 위 명령어로 flutter를 사용하기위해 필요한 것들을 확인해보자. 4. xcode 설치 1. app store에서 xcode 검색 후 설치 2. 아래 명령어 입력 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch 3. cocoapods 설치 - 링크 brew i..

평소 리액트를 사용하면서 Styled-Components를 주로 사용해왔다. css를 사용하면 class name의 중복을 고려하며 개발 해야하고, 특정 스타일 코드를 찾기 어려운 단점 때문이었다. CSS in JS CSS-in-js는 자바스크립트 코드로 CSS를 작성하는 방식이다. 2014년 처음 나오게 됐고, 다음과 같은 문제를 해결하기 위해 나온 기술이다. Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요 Dependencies: CSS간의 의존 관계를 관리 Dead Code Elimination: 미사용 코드 검출 Minification: 클래스 이름의 최소화 Sharing Constants: JS와 CSS의 상태 공유 Non-deterministic Resolution..

프리온보딩 인턴십 과제인 facebook/react 이슈 목록을 가져오는 프로젝트에 필요하다고 생각되는 기능을 추가하고 더 많은 학습을 위해서 Next로 마이그레이션하고자 한다. https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com Next 13에 대해 간단하게 소개했던 포스팅인데, 12에서 13버전으로 대규모 업데이트한 이유에는 생각보다 더 깊은 이해도를 필요로 하는것같다. 위 포스팅은 계속해서 업데이트할 예정이..

기존 프로젝트에서는 무한스크롤을 구현하면서 특정 타깃이 감지되면 query param에 page값을 증가시켜서 api 요청하고, issue list를 상태로 관리하여 새로 패칭되는 issue list를 상태에 계속 붙여주었다. 이번에는 react-query의 useInfiniteQuery 함수를 사용하여 구현해보자. react-query 공식문서 - useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com useInfiniteQuery ...result와 ...options 부분의 값은 useQuery 와 같다. react-query 공식문서 - useQuery useQuery | TanStack ..

진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..

지금은 로그인 방식이 OAuth만으로 되어있고 별도의 Credential은 적용하지 않고있다. 간단한 로그인 회원가입이 되길 원하는데 ... 어떻게 해야할까?? next-auth가 제공하는 callback 중에 signIn을 한 번 뜯어보자. https://next-auth.js.org/configuration/callbacks Callbacks | NextAuth.js Callbacks are asynchronous functions you can use to control what happens when an action is performed. next-auth.js.org 공식문서를 확인해보면 signIn callback만 존재하고, singUp callback은 존재하지 않는다. 따로 커스텀을 ..