안녕하세요~ totally 개발자입니다. Form, validator, TextFormField, Navigator.pushNamed의 매개변수 전달해서 다른 클래스에서 받기 Form, validator, TextFormField를 사용해서 잘 제출되었을 때 다른 페이지로 넘어갈 수 있는 예제를 살펴 보도록 하겠습니다. 플러터에서는 Form 위젯을 제공하여 양식을 만들 수 있습니다. 그리고 TextFormField를 사용하여 autoFocus, validator, onSaved 등 여러가지 속성을 같이 활용할 수 있습니다. Step 1: MaterialApp 부분에 home 부분을 주석 처리해주시고 initialRoute와 routes를 다음처럼 정의해주도록 합니다. 이 routes 정의를 통해 push..

안녕하세요~ totally 개발자입니다. Eslint 오늘은 Eslint에 대해 살펴보도록 하겠습니다. Eslint는 프로그래밍 코드를 작성할 때 문법에 문제가 있거나 오류를 찾아주는 도구이며 다른 개발자들과 같이 협업할 때 가독성 및 일관성 있는 코드를 작성할 수 있다는 점에서 매우 중요합니다. 설치 방법과 사용하는 아주 간단한 방법을 아래에 소개합니다. Step 1: 터미널에 yarn add -D eslint를 입력해줍니다. Step 2: 터미널에 yarn add -D eslint-plugin-react eslint-plugin-react-hooks를 입력해줍니다. Step 3: 터미널에 yarn add -D @typescript-eslint/parser @typescript-eslint/eslint..

안녕하세요~ totally 개발자입니다. Hot Module Replacement (저장 시 바로 반영) 개발하다보면 Ctrl + S했을 때 바로 수정사항을 반영해서 자주 봐야하는데 새로고침을 하게 되면 모든 요소의 상태가 리셋되기 때문에 좋지 않습니다. 그래서 Ctrl + S로 저장했을 떄 수정된 부분만 체크해서 반영될 수 있도록 설정을 해주어야 합니다. Step 1: 터미널에 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh를 입력해줍니다. 만약에 permission denied 이슈가 있는 경우에는 node_modules 폴더와 package-lock.json 모두 root으로 되어 있기 때문에 사용자 이름으로 변경해주시면 됩니다. 커맨..

안녕하세요~ totally 개발자입니다. flutter_webview 오늘 구현해볼 부분은 플러터 웹뷰(flutter webview)입니다. 이 웹뷰를 사용하여 웹사이트를 그대로 모바일 어플에서 보여질 수 있도록 구현할 수 있습니다. Step 1: pubspec.yaml 파일에 이 3줄을 추가해줍니다. webview_flutter, webview_flutter_android, webview_flutter_wkwebview Step 2: 다음처럼 import 해줍니다. Step 3: Android는 sdk 버전 최소 19이상 ios는 11이상이라고 가이드 문서에 나와 있습니다. android/app/build.gradle android { defaultConfig { minSdkVersion 19 } } ..

안녕하세요~ totally 개발자입니다. Development, Production Mode Configuration Webpack에서 Development(개발 용도) 모드와 Production(실제 서비스되는 배포용) 모드를 설정해줄 수 있는데 그 부분에 대해서 살펴보도록 하겠습니다. Step 1: 기존에 만들었던 webpack.config.js의 파일명을 webpack.common.js로 바꿔주고 새로 3개의 파일을 생성하여 각각 이름을 webpack.config.js, webpack.dev.js, webpack.prod.js로 명명해줍니다. Step 2: webpack.config.js에는 다음 내용이 들어가 있어야 합니다. const { merge } = require('webpack-merge..

안녕하세요~ totally 개발자입니다. 이미지 삽입 설정 이미지 삽입할 수 있게 설정하는 방법에 대해 바로 알아보도록 하겠습니다. Step 1: 이미지를 하나 준비해줍니다. 저는 pixabay에서 하나 가지고 왔습니다. 그리고 images 폴더를 만드시고 그 안에 넣어주도록 하겠습니다. Step 2: delcaration.d.ts 파일을 src 폴더 내에 하나 생성해주시고 다음처럼 입력해줍니다. Step 3: webpack.config.js 파일을 열어서 빨간색 박스에 내용을 추가해줍니다. Step 4: 2번째 줄처럼 이미지를 import 해주시고 8번째에 src={image}로 작성하시면 바로 이미지를 불러오실 수 있습니다. Step 5: yarn start로 테스트해봅니다.