TIL

node_modules, package-lock.json을 깃허브에 올릴 필요가 없다.dependencies에 있는 모듈을 npm i로 설치할 수 있기때문.babel은 nodejs가 이해하지 못하는 것을 이해하게 해준다.dependendencies, devDepende

.gitignore 파일로 깃에 업로드하지 않을 항목 추가하여 처리할 수 있다.서버는 항상 켜져있고 인터넷에 연결되어있다. request를 listening하는 컴퓨터이다.포트는 창문같은 개념.서버 = 건물Request = 문request, response는 expre

라우터 만드는 법 : const ---Router = express.Router();자바스크립트에서는 모든 파일이 자기만의 세계를 가진다.(독립적)\->server.js에 express를 임포트했어도 다른 라우터에서 express를 임포트해야함.임포트하기 전에는 익스포

라우터와 컨트롤러를 섞어 쓰는 것은 좋지않다.컨트롤러는 함수이기 때문.nvm = Node Version Managernpm = Node Package Managerexport default는 한파일에 하나밖에 export하지 못한다.export const control

URL을 더 낫고 독립적인 방법으로 관리하기 위해 라우터를 사용함."../" => 지금 디렉토리에서 벗어나는 것 의미함."./" => 지금의 디렉토리

Pug는 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해주는 템플릿 엔진이다.

pug는 지저분한 html을 쓰지 않고, 파이썬처럼 깔끔한 코드를 사용할 수 있다.MVP.css : html 태그에 스타일을 입혀줌.h1=pageTitle(텍스트가 아닌 변수로 인식)conditionals는 if, else if와 같다.

each in : pug 반복문ex)each val in 1,2,3,4,5Mixins는 데이터를 받을 수 있는 일종의 미리 만들어진 HTML block이라 볼 수 있다.(코드 재사용 가능)Iteration(반복)은 array의 모든 element에 대해 특정 행동을 취

get method를 사용하면 그 form에 있는 정보가 url에 들어가게 된다.express.urlencoded:express 서버로 POST 요청을 할 때 input태그의 value를 전달하기 위해 사용요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만

git status -> git add <파일 이름> 또는 git add .(전체 파일) -> git commit -m "커밋 내용" -> git pushgit pull(수정된 저장소 내용 불러오기)

VSCode 단축키자동완성 : Ctrl + Space줄 복사 : Shift + Alt + 방향키(위/아래) 멀티 커서 편집 : Ctrl + Alt + 방향키(위/아래)코드 줄 이동 : Alt + 방향키(위/아래) 코드 접기/펼치기 : Ctrl + Shift + \[

mongoDB : NoSQL DBMS의 한 종류, 크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템, document-based database문서지향 데이터베이스.(다루기 편함)mongoose : nodejs와 mongoDB를 이어주는 다리.on : 계속 이벤트 발생가

CRUD : Create, Read, Update, Delete

몽구스 모델은 CRUD 작업을 위한 여러 정적 헬퍼함수를 제공함.몽구스 쿼리 함수 : model.queryMethod({filter}, callback) 형식filter : 쿼리함수의 첫번째 인자, db 내에서 찾을 document 설정만약 비어있을 경우 모든 docu

코드에 따라 실행 순서가 다르다.await : 프로미스가 처리될 때까지 기다림, function 내에서만 사용 가능함. async를 (req, res) 앞에 붙여줘야함return은 함수를 종료시키는 역할.이미 render 된 것은 또 render될 수 없다.

required 유무에 따라 필수 데이터 설정 가능.try catch를 사용해 에러 발생시 대처가능.await 되는 코드에 오류가 있다면 javascript는 더이상 코드를 실행시키지 않을것임.그렇기에 try catch문 사용.small: HTML 요소로 덧붙임 글 요

0-9a-f{24} 24바이트 16진수 문자열 표현.

exec() : 쿼리를 실행.

startsWith() : 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환.endsWith() : 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 true 혹은 false로 반환.

Web Browser(react-dom)Expo CLI(Command Line Interface), React Native CLI : 리액트 네이티브를 사용하기 위한 툴.Expo CLI : React Native CLI보다 코드 작성이 더 쉬움, 무료React Nati

app.json : 앱의 미리보기나 실제 앱스토어를 위해 구축될 때 Expo에 이어서 사용할 파일, 이름이나 배경색 설정 가능.npm start 했을 때 expo go 앱에서 오류가 났었는데 expo start --tunnel으로 실행하니 해결. 그래도 안될 시 Exp

리액트 네이티브는 css가 없다.인라인 스타일이나 StyleSheet를 사용.App.js는 앱에 렌더링 되는 루트 컴포넌트이다.View에는 Text 컴포넌트로 묶인 텍스트 등등을 넣을 수 있음.

React Native는 ReactDom 대신 다른 플랫폼 사용.이벤트 처리, 상태관리 등 리액트의 핵심 기능은 웹용 리액트와 같은 방식으로 작용함.리액트네이티브는 onClick이 아니라 onPress임.리액트(React)에서 useState는 상태(state)를 관리

Pressable : 리액트 네이티브에서 Pressable은 사용자가 화면에서 터치 또는 클릭하는 동작을 감지하기 위해 사용되는 컴포넌트입니다. 이 컴포넌트를 사용하면 사용자의 상호작용에 따라 특정 동작을 실행할 수 있습니다. Pressable은 버튼이나 링크와 같은

react native에서 image는 require를 사용하여 경로 지정함.

app.json에서 backgroundColor를 설정하면 모달은 적용되지 않고 오버레이가 아닌 모든 메인 화면에 백그라운드 컬러 일괄 적용됨.

console.log 코드를 넣어서 언제 어떤 코드가 실행되는지 알 수 있음.react-devtools 실행 : npm run devtoolsreact-devtools : 컴포넌트 트리를 볼 수 있음.

Another git process seems to be running in this repository, e.g.an editor opened by 'git commit'. Please make sure all processesare terminated then tr

React Native에서 'elevation'은 요소의 Z 축 방향으로의 높이를 지정하는 속성입니다. 이 속성은 플랫폼별로 다른 방식으로 렌더링되며, iOS와 Android에서 다른 시각적 효과를 생성할 수 있습니다.Android에서 'elevation'을 사용하면

리액트 네이티브에서 키보드타입을 정할 수 있다.https://reactnative.dev/docs/textinput숫자입력만 할 수 있는 키보드 number-pad (ios,android 둘다 가능)VSCode에서 css자동완성이 뜨지 않을 때, 우측 하단 언

justifyContent 기본 중심축인 위에서 아래로 요소를 배치함.ReactNative의 기본 flex는 열방향임.alignItems는 중심축을 가로지르는 가로축을 따라 요소를 배치함.flexDirection : 'row'를 설정하고 스타일을 적용하면 가로로 나란히

useEffect는 React 라이브러리에서 제공하는 훅(Hook) 중 하나입니다. 이 훅은 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있습니다.useEffect는 컴포넌트의 생명 주기 메서드 중 componentDidMount, componentDi

사용자의 기기에 따라 화면이 다르게 보일수 있다.maxWidth, minWidth, maxHeight, minHeight를 적절히 사용해 비율로 화면을 구성할 수 있다.

Android의 경우 'screen'은 상태 표시줄을 포함한 너비와 높이이고 'window는 상태표시줄을 제외한 너비와 높이라서 UI가 실제로 표시되는 화면.값을 하드 코딩하는 것은 좋은 방법은 아니다.앱이 어떤 크기의 화면에서 실행될 지 미리 알 수 없기 때문.\->

git diff 파일명.확장자 를 git cli에서 입력하면 파일의 수정 내용을 비교하여 변경된 부분을 보여줌.React Navigation 패키지를 사용하는 것만으로도 훌륭한 기본 래퍼(wrapper) 레이아웃을 만들 수 있음.(<Stack.Navigator>을

screenOptions로 전체 스택 화면 스타일 옵션을 줄 수 있다.개별 화면에 스타일 적용하려면 Stack.Screen options에서 속성주면 됨.화면을 구성하고 싶은데로 코드 작성하면 됨.Stack.Screen options={() => {}}처럼 함수를 줄

Bottom Tabs Navigator로 흔히 사용하는 하단 탭 이동 네이비게이터를 구현할 수 있음.https://reactnavigation.org/docs/bottom-tab-navigator

앱 전반에 걸친 상태에 연관된 논리를 담을 폴더에는 흔히 관례로 store라는 이름을 붙임.React Context와 Redux는 모두 React에서 상태 관리를 위해 사용되는 라이브러리입니다. React Context는 React에서 컴포넌트 간에 데이터를 전달하기

모든 화면을 먼저 추가한 후 핵심이 되는 내비게이션 논리를 설정. 그런 다음 단계별로 스타일을 추가하고 내비게이션 옵션에 구성을 추가해서 개선.expo 프로젝트 생성시 npm 기본 설정법

presentationReact Native에서 'Presentation'은 특정 화면을 구성하고 보여주는 역할을 합니다. Presentation layer는 UI layer로써 앱에서 눈에 보이는 결과물로써 사용자와 상호작용하는데 사용됩니다. 쉽게 말해, RN에서 '

promiseJavaScript에서 Promise는 비동기 작업을 수행할 때 사용하는 객체입니다. Promise는 비동기 작업이 완료될 때까지 기다리면서 블록하지 않고 코드를 실행할 수 있도록 도와주는 역할을 합니다.Promise 객체는 새로운 promise를 생성하는

ActivityIndicatorActivityIndicator는 사용자에게 작업이 실행 중인지를 나타내는 동그라미 모양의 로딩 표시기입니다. 일반적으로 데이터를 가져 오거나 처리하는 동안 화면에 표시하여 사용자에게 작업이 진행 중인 것을 알리는 데 사용됩니다. iOS

try catch문을 사용하여 오류가 났을 때 로딩 페이지를 나타나도록 설정할 수 있음.UX친화적!UI/UX관련 정리가 잘 된 글: https://velog.io/@euji42/%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%B9%9C%ED%99%94

앱을 끄고 켰을 때도 로그인이 되어있게 하려면 어떻게 해야할까?메모리뿐만 아니라 장치에도 토큰을 저장.\-> 앱 실행시 리로딩할 수 있고 이전에 토큰이 저장되어있다면 자동 로그인 가능.사용자 로그인시 토큰 저장.

Async Storage 패키지를 이용하면 데이터를 장치에 저장할 수 있게 해줌.장치 저장소와의 상호 작용을 걱정하지 않아도 됨.

launchCameraAsync 속성인 quality값을 정해 품질에 제한을 둘 수 있다. 품질에 제한을 두지않으면 이미지가 너무 커지기 쉬워 품질을 제한을 할 수 있다.expo-image-picker 설치: expo-image-picker 라이브러리를 설치해야 합니다

location의 주소를 사람이 알 수 있는 주소로 변환하려면 Google에서 제공하는 API를 활용해야함.Google maps geocode좌표값을 주소로, 주소를 좌표값으로 변환해줌.기기에 데이터를 저장하고 싶으면 SQLite.https://docs.exp

로컬 알림 : 앱이 설치된 기기에서 설치된 앱이 트리거하는 알림. 다른 기기나 사용자가 보내는 것이 아니라 앱이 설치된 기기에서 해당 앱이 트리거하는 알림. 앱 내부에서 간단히 알림 일정을 설정하고 전송을 구성하고 기기에서 알림을 수신했을 때 동작을 설정할 수 있음.로

redux, redux toolkit 정리 블로그https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB

기기들은 노치같은 것들이 있어 화면이 잘리는 경우가 많다.이럴 경우에 SafeArea를 사용하면 손쉽게 해결이 된다.앱을 화면에 맞춰서 해준다.SafeArea로 감싸주자.사용할 면적을 직접 정할수도 있다.여러개 내용중에 하나만 골라서 넓게 하고싶다면?Expanded를

상태 관리를 위한 특별한 종류의 위젯이다.위젯 트리의 루트에서 데이터를 저장하고 그 데이터를 하위 위젯들에게 효과적으로 전달할 수 있도록 돕는다.전체 데이터가 아니라 데이터의 일부가 변경되었을 때만 관련 위젯을 재빌드하게 할 수 있다.자식 위젯의 모서리를 둥글게 잘라내

리스트를 쉽게 영상화시켜줌.부모의 사이즈가 변경될 때 자식의 사이즈도 유동적으로 변경할 수 있게 해주는 위젯.태블릿과 모바일폰에서 UI가 다르게 보여주고 싶응ㄹ 때 MediaQuery를 사용함.사용자 레이아웃 기본 설정에 대한 더 자세한 정보를 제공할 수 있습니다.맞춤

정해진 값이 아닌 퍼센트로 위젯의 크기를 정할 수 있음.스크롤이 가능한 위젯을 구현할 수 있음.동적으로 제작되는 항목 리스트를 구현하려면 itemBuilder를 사용.재료 설계 목록의 사양을 알아서 구현함.사용자는 무엇을 넣을 지만 고민하면 됨.하위 요소 위젯 구성,

사용자가 여러 옵션 중 하나 이상을 선택할 수 있게 해주는 버튼 그룹.ios기반 위젯으로서 상향식 슬라이드 동작 리스트를 제공함.(아래에서 올라오는 선택 리스트)사용자에게 현재 컨텍스트와 관련된 두 개 이상의 선택지를 제시하는 데 사용됨.굳이 컨트롤러를 이용하지 않더라

Firebase사용법데이터를 가져올 때까지의 로딩을 보여주는 방법? : 구문을 이용해 사용자에게 더 좋은 경험을 선사하는 방법동그라미 로딩 코드Url이 잘못되었을 때 에러 메시지를 뜨게하는 법firebase에 데이터 삭제할 때 ${item.id}로 삭제 가능.

독특한 모양의 위젯을 만들고 싶으면 사용.원하는 모양으로 만들 수 있음.자식 위젯의 모양을 사용자 정의 경로로 잘라내어 (클리핑하여) 표시하는 데 사용됩니다. 클리핑(clipping)이란 주어진 경로나 모양에 맞춰서 내용을 '자르는' 과정을 의미합니다. 이를 통해 다양

Riverpod을 이용해 상태관리 하는 법.생성된 listtile을 onTap하여 화면을 넘어가게 하는 법.화면 개별로 파일을 만들어서 정리하자.카메라 사용법.카메라를 활용해 이미지 활용법.(PickedImage)leading으로 이미지를 작게 원형으로 표시할 수 있음

가끔은 장치에 중요한 앱 데이터를 저장해야 할 때도 있는데요, 만약 구조화된 데이터라면 SQL 데이터베이스를 사용하고 싶으실 거예요. SQL 데이터베이스 엔진은 휴대폰을 포함하여 거의 모든 장치에서 이용할 수 있는데 이를 SQLite라고 부르죠. Flutter가 자랑하

Google Map Api 사용법geocoding API로 사용자 위치 아는법.Maps Static API로 사용자에게 지도를 보여주는 법.

사용자가 번거로움 없이 밀어내기로 기능을 표시할 수 있는 위젯을 제공하는 패키지입니다. 이 패키지를 사용하고 작업을 정의하는 방법에 대해 알아보세요.디자인에 잘 맞도록 박스를 계속 회전시켜 놓고 싶은가요? RotatedBox 위젯을 사용해 보세요. 어떻게 작동하고 설정

구글 맵에서 사용자가 로케이션을 지정하는 법.

사용자 기기에 이미지 파일을 저장하는 법.(로컬)sql로 데이터 저장하는 법.(insert)sql 데이터를 불러오는 법.

Hero 변환이 있지만, 위젯 트리의 상위 항목으로부터 애니메이션을 끄는 방법을 잘 모르시겠다고요? HeroMode에서 Hero을 행갈이 하면, 해당 애니메이션 작동을 활성화 또는 비활성화할 수 있죠. Hero모드를 끄고 킬수 있는 위젯.HTML에 대한 향수가 있으신

Firebase에 이메일/비밀번호 설정하는 법.CardMainAxisSize.minFormTextFormFieldInputDecorationKeyboardType(TextInputType.emailAddress)autocorrecttextCapitalization: T

사용자들이 여러분의 앱을 설치할 때마다 매번 같은 데이터를 다운로드하게 하는 것이 지겹지만, 문서나 데이터베이스의 저장 공간을 복잡하게 만들기는 싫다고요? path_provider를 사용해 보세요. 파일 시스템에서 흔히 사용되는 위치를 찾을 수 있도록 도와주거든요.Fl

firebase에 유저의 이메일과 비밀번호 저장하는 법.try catch문으로 에러 잡는 법.ScaffoldMessenger로 SnackBar 설정하는 법.?? 연산자 : 표현식의 결과가 null이 아닌 경우 해당 결과를 반환하고, 결과가 null인 경우 다른 값을 반

마우스 오버 시 형광펜 효과, 초점, 키보드 단축키 등의 기본적인 기능을 탑재한 사용자 정의 버튼을 쓰는 것은 어려운 작업이 될 수 있습니다. Shortcuts, Actions, Focus, 그리고 MouseRegion 위젯을 중첩하는 대신, FocusableActio

image파일을 firebase에 연동하여 업로드하는 법.로딩되는 동안 동그란 로딩 프로그레스(CircularProgressIndicator)를 나타내는 법.

firebase에 username을 추가해 사용자 가입하는 방법.TextFormField를 추가해 사용자에게 username입력 할 수 있게 하는 방법.

웹과 데스크톱 애플리케이션 환경에서 키보드 단축키는 중요합니다. 이번 에피소드는 세 부분으로 나누어진 시리즈로, Flutter에서 지원하는 세 가지 주요 위젯을 다루고 있습니다. Focus, Shorcuts, 그리고 Actions 위젯이죠. 이번 에피소드는 Focus

Firestore에 데이터를 보내고 읽는 방법.로딩 & 채팅 메시지를 보여주는 방법firebase에서 push notification 설정하는 법.

애플 개발자에서 push notifications 활성화 시키는 법.

ios에서 push notifications 테스트 하는 법.cloud Functions를 이용해 push notifications를 자동으로 보내는 법.

Iconbutton에 Padding이 있어 UI가 예뻐보이지 않는 경우가 있다.이럴 때는 이렇게 하면 간단히 해결된다.Container를 통해서도 해결 가능하다.

앱 아이콘을 변경하는 방법은 두가지가 있다.flutter_launcher_icons 패키지직접 아이콘 변경이 방법의 경우는 pub.dev(아래에 첨부)에 보면 자세한 가이드가 나와있다.https://pub.dev/packages/flutter_launcher_