'분류 전체보기' 카테고리의 글 목록 (12 Page)

[flutter/플러터] Cannot run with sound null safety 오류 해결

2022.06.23· 개발/❌ 오류 노트

CustomSwitch button을 더했는데, 갑자기 오류가 떴다. Error: Cannot run with sound null safety 알아본 해결 방법은 굉장히 간단하다. 메뉴창에서 Run (안드로이드 스튜디오 기준) > Edit Configurations 그리고 --no-sound-null-safety 라는 말을 Additional run args:에 넣어주면 된다. 그러면 깔끔하게 해결~ 안돌아가던 코드가 잘 돌아간다!!!

git branch 만들기 / branch 이름 변경하기

2022.06.23· 개발/Etc...

사실, 내가 기억하고 싶어서 만드는 포스팅 😅 ✅ git branch 만들기 주로 터미널에서 명령어로 적어서 진행하는 경우가 많죠? 저도 git 만들때 명령어가 너무 어렵게 느껴졌는데 계속 쓰다보니 명령어가 아니면 불편한 지경이 된 것 같아요. 프로젝트를 진행하다보면 브랜치를 생성해서 세분화해서 작업하는 경우가 많답니다. 아래의 명령어를 넣어주시면 branch가 만들어집니다. 그리고 그 브랜치로 경로가 변경되어있습니다. git checkout -b 현재 어디에 있는지 확인해보고 싶다면 git branch 를 넣어보시면 현재 어느 브랜치에 있는지 확인하실 수 있어요 만약에 브랜치를 변경하고 싶다?! 그러면 switch를 써주면 됩니다 git switch ✅ git branch 이름 변경하기 브랜치를 만들었..

[플러터/firebase] signup 기능 구현하기

2022.06.21· 개발/Flutter

▪ flutter / firebase 연동하기 플러터와 firebase를 연동하는 방법은 쉬운 편입니다. 그런데, 전 오래 걸렸습니다 😑 firebase 콘솔에서 안드로이트 프로젝트를 새로 만들어주고 flutter 파일로 돌아와서 app 폴더속의 build.gradle 파일에 필요한 정보들을 넣어주면 됩니다. firebase문제가 상세하게 설명해주기 때문에 어려울게 없습니다. 모든 파일들 업데이트를 끝내고 오류메세지를 만났는데, flutter sdk버젼과 firebase 버젼이 상호가 안 되서였습니다. 이럴땐 android > app > build.gradle 파일에 midSdkVersion과 targetSdkVersion을 아래와 같이 넣어주면 됩니다. 숫자만 더해주면 되는데 전 그걸 모르고 엄청 해맸..

[TypeScript] 타입스크립트 기본 (Literal Types / Union Types / Intersection types)

2022.06.08· 개발/Etc...

▪ Literal types const userName1 = "Bob"; let userName2 = "Tom"; const는 상수로 변하지 않는 값을 선언할 때, let는 재할당이 가능한 값을 선언할 때 사용합니다. 저 상태에서 VSC같은 에디터에서 마우스를 올려보면 const는 "Bob"이라고 선언 된 값이 뜨고, let은 let userName2 : string이라는 타입 값이 뜹니다. let은 언제든 다른 값으로 변할 수 있기 때문입니다. userName2 에 숫자를 넣고 싶다면? let userName2 : string | number = "Tom"; 이렇게 타입을 둘 다 명시해줍니다. type Job = "police" | "developer" | "teacher"; interface User..

[NextJS] SSR 공부하기 (Static Generation vs Server-side Rendering)

2022.06.07· 개발/Next.js

▪ React는 NextJS를 이용해서 SSR을 할 수 있습니다. ▪ Static Generation vs Server-side Rendering pre-rendering(사전렌더링) 기본적으로 모든 페이지 pre-render - 사전에 HTML 파일들을 만든다는 의미로 퍼포먼스를 향상시키고 SEO에 최적화된답니다. Javascript을 끄고 페이지를 렌더링을 해도 HTML이 렌더링되기 때문에 기본 페이지가 로드됩니다. 여기서 Javascript을 복원시켜주면 hydration이 된다고 합니다. 정적인 페이지가 동적으로 바뀌는 것을 의미합니다 Static Generation : 정적생성 vs Server-side Rendering : 서버 사이드 렌더링 이 두 가지의 차이점은 언제 HTML 을 만드냐입니..

babel.config.js vs .babelrc

2022.06.02· 개발/Etc...

1. 바벨(babel)이란? ▪ 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많다. 이러한 차이를 최소화하여 브라우저, 환경에 영향을 덜 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 크로스 브라우징이라고 한다. 프론트엔드 개발자들에게는 크로스 브라우징 이슈는 코드의 일관성도 어렵게 만들고 혼란스럽게 하는 요소 중에 하나이다. 이런 크로스 브라우징 이슈를 해결하기 위해서 만들어진 툴이 바벨이다! ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 코드를 변화시키는 트랜스파일러의 역할을 한다. 바벨 설정을 할 때 두가지로 나뉩니다. 두가지 파일 포맷은 단독으로 쓰일 수도 있고, 함께 쓰일 ..

[NextJs] Project Clone 후에 npm run build -> SWC Failed to Load

2022.06.02· 개발/❌ 오류 노트

{ "presets": ["next/babel"] } github에서 프로젝트를 클론한 후에 npm install하고 npm run build를 하는데, SWC failed to load 오류가 났다. 그리고 https://nextjs.org/docs/messages/failed-loading-swc 여기를 방문해보라는 메세지가 떠서 봤더니 node modules과 package-lock.json을 지우고 다시 npm install을 하거나, 그래도 오류가 계속되면 .babelrc파일을 만들어라고 했다. 첫번째 노드 모듈을 지웠는데도, 다른 오류가 또 생겨서 프로젝트 자체를 다시 클론 받고, babelrc 파일을 만들어줬다! 아래와 같이 만들어주면 된다. 파일의 위치는 최상단이다! .babelrc { "..

[Flutter] 왜 TextFormField가 안 나타날까?

2022.05.18· 개발/❌ 오류 노트

▪ 완성 할 레이아웃 저 레이아웃을 만들어야하는데, 전체적으로 감싼 Container 가 있고, 그 안에 Column로 한번 더 감싸고, 각 레이아웃을 만들기 위해서 설계 계획을 세웠다. Column( children: [ 1. Container - 학교 이메일이라는 Text를 쓸 것 2. Row - TextFormField(이메일 input) , OutlinedButton(인증하기) 3. SizedBox - input 사이에 간격을 위해서 4. TextFormField - 인증번호 입력 input 5. OutlinedButton - 다음 버튼 ] ) ▪ 문제 발생 1을 하고 2번으로 넘어갈 때 우선 Row를 안 쓰고, TextFormField를 먼저 썼는데 화면에 출력이 안 되는거다! 이 전에 유튜버 ..

[React] TypeError : cannot convert undefined or null to object

2022.05.16· 개발/❌ 오류 노트

React Project를 업데이트하면서 Reducer에서 데이터를 받아 올 때 생겨난 오류이다. Reducer store에 저장되어있는 데이터를 useSelector를 사용해서 가져오기만 하면되는건데, 이전에는 잘 되던데 갑자기 데이터를 가져오지 못해서 undefined 상황이 발생했다. 그래서 생긴 오류이다. React 파일 일부, let scoreMention = ""; if(userInfo['scorelist'] == null){ return null }else{ if(userLan === "kr"){ Object.keys(userInfo['scorelist']).map((c, idx) => { if (scoreper >= parseInt(c)) { return (scoreMention = use..

[Flutter] 새로운 화면으로 이동하고, 되돌아가기 - 페이지 이동

2022.05.16· 개발/Flutter

플러터에서는 route라는 개념으로 페이지 이동이 가능합니다. 이 때 이동할 곳을 page라고 생각해주면 됩니다. 굳이 파일을 따로 나누지 않아도 같은 파일 안에서 page만 나눠주면 됩니다. 참 쉽죵? 😁 이동 할 때 쓰는 것으로는 Navagator 메서드를 사용하시면 됩니다. main.dart Container( margin: EdgeInsets.only(top: 100, left: 0), width: 100, child: IconButton( icon: Text('Signup', style: TextStyle(fontSize: 20),), onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => SignUpPage(..

React Testing Library 사용하기 (from Scratch) - 1

2022.04.29· 개발/React

테스트코드는 왜 중요한가요? 테스트코드는 코드를 리팩토링 할 때, 혹은 리팩토링을 하지 않아도 중요한 존재입니다. 리팩토링을 할 때에는 테스트코드를 짜두고 리팩토링을 하면 하기 전과 후의 결과가 동일하다는 것을 보장할 수 있습니다. 외에도 새로운 기능이 추가되거나 기존 기능이 변경되었을 때 다른 기능들이 제대로 동작하지 않을 수도 있기 때문에 테스트코드를 만들어두면 유지보수할 때 예상치 못 한 에러들을 미리 방지할 수 가 있습니다. 다양한 개발서적에서도 이 중요성을 굉장히 강조하고 있습니다. React Testing Library는 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성하기를 권고합니다. 예를 들어서 div 태그를 사용하는지 보다 div 테그의 메세지가 브라우저에 잘 노출..

[Flutter] ListView.builder로 반복되는 부분 만들기

2022.04.17· 개발/Flutter

반복되는 부분을 손수 쓰지 않고 반복해서 만들 수 있다. 이 때 쓸 수 있는 것이 ListView.builder 이다. ◾ Example 지금부터 만들어 볼 부분인데 보라색이 list_view부분이고 icons가 파란색부분이다 ◾ Code list_view에 반복되는 부분을 따로 파일(icons.dart)로 빼서 더하는거다. list_view.dart Container( margin: EdgeInsets.only(top: 10, bottom: 20), child: Text('${descList[index]}'), ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( '${majorList[index]}', style: T..

티스토리툴바