전체 글

Next.js 13 신버전

출처: [Youtube] 코딩애플: Next.js 13 신버전 발표회 요약 참고(Netx.js): https://nextjs.org/blog/next-13 Next.js 서버에서 리액트 문법을 사용할 수 있도록 해주는 백엔드 프레임워크 리액트 문법쓰는 프론트 + 백엔드 프레임워크 Next.js 신버전 (Beta) Turbopack 출시 React Server Components 개선 html streaming font 최적화 Nested Layout OG 자동생성 Next.js 12 Next.js 13 pages 폴더 app 폴더 getStaticProps use() getServerSideProps fetch() 아직까지는 예전 문법도 병행해서 쓸 수 있으므로 가능하지만, 정식 출시 이후 13으로 아예..

[React] React Query의 useQuery

useQuery란? useQuery 는 React Query를 이용해 서버로부터 데이터를 조회해올 때 사용한다. *데이터 조회가 아닌 데이터 변경 작업을 할 때는 useMutation 을 사용한다. useQuery는 다음과 같은 형태로 사용된다. // 1 const res = useQuery(queryKey, queryFn) // 2 const res = useQuery({ queryKey: queryKey, queryFn: queryFn }) 시작하기 react-query를 설치해주고, app.tsx를 다음과 같이 변경해준다. yarn add react-query // app.tsx import { QueryClient, QueryClientProvider } from "react-query"; imp..

[Javascript] !! 연산자

자바스크립트에서 느낌표 두 개(!!)는 다른 타입의 데이터를 boolena 타입으로 명시적으로 형 변환(Type conversion)하기 위해 사용한다. var a = "test"; //a: "test" (조건문 적용시 true) var b = !"test"; //b: false var c = !!"test"; //c: true 자바스크립트에서 아래의 기본 타입 데이터 6가지는 false, 이 외에는 모두 true가 된다. 사실상 조건문에서 비교할 때는 자동으로 boolean 타입으로 변환해주기 때문에 조건문에서 사용시에는 큰 의미를 찾지 못한다. "" 빈 문자열 false 기본 boolean false NaN Not a Number undefined 정의되지 않은 값 null Null 값 0 숫자 기본값

Pre-rendering

Pre-rendering Pre-rendering은 미리 HTML을 만드는 기능을 뜻한다. Next.js는 기본적으로 모든 페이지를 pre-rendering 한다. 보통 성능이 더 좋고, SEO(Search Engine Optimization)에서 더좋다. Pre-rendering 사용 차이 React.js 만 사용할 때 Next.js 사용할 때 Pre-rendering 방식 Pre-rendering 기능에는 두 가지 방식이 있다. 이는 HTML을 만드는 시점에 따라 달라진다. Next.js는 페이지별로 아래 두 가지 방식을 선택해서 렌더링 할 수 있다. 보통은 개발모드로 계속 띄우고 있어(npm run dev) 모든 페이지가 Server-side Rendering 하고 있다. Static Generat..

tsconfig.json option 정리

{ "compilerOptions": { /* https:aka.ms/tsconfig.json 를 방문하면 해당 파일에 대한 더 많은 정보를 얻을 수 있습니다. */ //옵션은 아래와 같은 형식으로 구성되어 있습니다. //"모듈 키": 모듈 값 /* 설명: 사용가능 옵션 (설명이 "~ 여부"인 경우 'true', 'false') */ /* 기본 옵션 */ "incremental": true, /* 증분 컴파일 설정 여부 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */ "module": "commonj..

windows 10 에서 docker 설치 후 open //./pipe/docker_engine: The system cannot find the file specified

Windows10 에서 docker 설치 후에 컨테이너 생성 시 open //./pipe/docker_engine: The system cannot find the file specified. 에러가 나는 경우 Powershell 을 관리자 권한으로 열고 아래 명령어를 입력한다. cd "C:\Program Files\Docker\Docker" ./DockerCli.exe -SwitchDaemon 출처 windows 10 에서 docker 설치 후 open //./pipe/docker_engine: The system cannot find the file specified windows 10 에서 docker 설치 후에 open //./pipe/docker_engine: The system cannot f..

로컬서버(local), 개발서버(dev), 스테이지서버(stg), 운영서버(prod)란?

출처 로컬서버(local), 개발서버(DEV), 스테이지서버(STG), 운영서버(PROD)란? 프로젝트를 수행하는데 있어서 서버는 여러 개를 구동을 한다. 그 중에서도, 로컬서버(local), 개발서버(DEV), 스테이지서버(STG), 운영서버(PROD)에 대해 글을 작성한다. 로컬 서버(Local Server) 로컬 서 yongku.tistory.com 프로젝트를 수행할 때 서버를 여러 개를 구동한다. 그 중에서도 로컬서버, 개발서버, 스테이지서버, 운영서버에 대해서 헷갈리는 점들을 기억하기 위해서 위의 블로그 글을 가져왔다. 로컬 서버(Local Server) 로컬 서버는 개발자들이 처음으로 실행시키는 서버라고 할 수 있다. 흔히 말하는 http://localhost:~ 으로 접속하여 우리가 개발하는..

IT 개발 실무 용어

출처 [ 잡다구리 개발 용어 ] IT 실무 용어 velog.io 인프라 인프라 IT 리소스, 시스템, 플랫폼, 환경을 제어하는 인력으로 대부분 하드웨어나 CI/CD 관리를 한다. CI/CD 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 릴리즈하는 방법으로 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포다. 그니까 개발 이후에 똥꼬쇼 할 필요없이 웹 서버 안내리고 자동화된 배포와 파일 병합 등을 제공하는 것을 말한다. CI (Continuous Integration) : 지속적인 통합 CD (Continuous Delivery/Deployment) : 지속적인 서비스 제공/배포 DevOps Development + Operation 개발과 운영을 결합해 탄생한 개발 ..

앱개발 4주차 과제

구현해야할 기능과 가이드 1. LikePage 에 찜 데이터 모두 보여주기 LikePage 를 숙제로 구현 완료했다면, 찜 구현을 통해 저장한 찜 데이터 목록을 가져올 수 있다. firebase_db.ref('/tip').once('value').then((snapshot) => { console.log("파이어베이스에서 데이터 가져왔습니다!!") let tip = snapshot.val(); }) 파이어베이스에서 데이터를 가져올 때 이런식으로 가져왔었다. 이제 찜한 데이터를 LikePage 에서 보여려고 한다면 /tip 부분이 /like 가 되어야 한다. 그리고 /like/userUniqueId 가 되어야 한다. 사용자마다 다르기 때문에! 2. 찜한 데이터가 없을 때 조회하려는 에러 처리 데이터가 없는..

앱개발 4주차

개요 서버를 만드는 일은 쉬운일이 아니다. 이 서버를 대신 만들어 놓고 데이터 생성, 조회, 삭제/수정 등 기능을 제공해주는 서비스들이 있다. 이를 서버리스 라고 부른다! 서버에서 주는 데이터 형식은 JSON으로 되어 있다. 앱 화면에서 전달받은 데이터를 준비하는 시점은 앱 화면이 그려진 다음에 서버측에서 제공해주는 API를 이용해 필요한 데이터를 준비한다. 👉 useEffect 날씨 API 날씨데이터를 제공해주는 openweathermap api를 사용해보자. API를 통해 날씨 데이터를 가져올 때 필요한 것 현재 위치(좌표) 데이터 위치 데이터를 이용해 현재 위치 날씨 데이터 가져오기 앱 위치 정보 권한 설정 (expo-location) 🛠 expo-location 공식 문서 Expo에서 현재 위치 ..

[React-native] While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved 파이어베이스 연동 오류 해결 방법

firebase 연동 후 실행 하면 이런 에러가 발생하는 것을 볼 수 있다. While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved firebase 버전 차이로 인해서 발생할 수 있다고 한다. 파이어베이스 패키지 버전을 낮춰서 해결할 수도 있고, 소스 코드를 일부 변경해서 해결할 수도 있다. 1. 소스 코드 변경 firebaseConfig.js 의 import 부분을 아래와 같이 바꿔준다. import * as firebase from 'firebase/app'; 👇 import firebase from 'firebase/app'; 2..

앱개발 3주차 과제

- 2주차에 만들었던 AboutPage 를 MainPage 에 연결시키고, AboutPage 에는 인스타나 블로그 주소 혹은 아무 주소를 하단 버튼에 연결시켜주자. - 꿀팁 찜 페이지(LikePage) 화면을 만들어주자. - 아직은 기존의 데이터와 연결시키는 것이 아니라, 기본 데이터를 가지고 화면을 그려보자. 가이드 메인에 TouchableOpacity 버튼을 두고 navigate 를 연결시켜서 이동시켜주자 Stack.Screen 에 AboutPage.js 를 연결시켜야 한다. AboutPage 상단바는 흰색이다. 메인 페이지에 위치해있던 꿀팁 찜 카테고리에 꿀팁 찜 페이지를 연결시켜주자. 찜 목록에 있는 카드도 컴포넌트(LikeCard)로 분리해서 만들자. → 찜 삭제 버튼 추가 LikeCard 에서..