뇌 채우기 공간

[TIL] 20230208 next js/ firebase/ react context api 본문

TIL

[TIL] 20230208 next js/ firebase/ react context api

자바칩 프라푸치노 2023. 2. 8. 18:10

1. next js 

회사에서 만들게 된 페이지가 next js 와 타입스크립트를 써서 공부를 해보았다.

next-js + typescript 시작하기

https://velog.io/@arenacast/Next.JS-Typescript-시작하기

 

Next.js + TypeScript 시작하기

본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본

velog.io

 

next의 _documnet와 _app에 대하여

https://merrily-code.tistory.com/154

 

Next.js의 _document와 _app에 대하여

Next.js에는 두 가지 중요한 기본 페이지가 있는데요, 바로 _document와 _app 입니다. _document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용

merrily-code.tistory.com

 

next/image를 활용한 이미지 최적화

https://fe-developers.kakaoent.com/2022/220714-next-image/

 

Next/Image를 활용한 이미지 최적화

카카오엔터테인먼트 FE 기술블로그

fe-developers.kakaoent.com

 

next-seo 

https://kyounghwan01.github.io/blog/React/next/next-seo/

 

next.js seo 쉽게 적용하기 (next-seo)

next.js seo 쉽게 적용하기 (next-seo), react, seo, ssr

kyounghwan01.github.io

 

 

2. firebase

사이드 플젝을 만들때 파이어베이스를 사용하려고 찾아보았다.

firebase 시작하기

https://includecoding.tistory.com/229

 

React.js에서 Firebase 사용하기

1. 일단 터미널을 이용해서, 원하는 경로에 React.js를 설치한다. ( npm이 설치되어 있어야 합니다. ) [ Javascript ] npx create-react-app '프로젝트 이름' [ Typescript ] npx create-react-app '프로젝트 이름' --template t

includecoding.tistory.com

 

firebase로 로그인구현하기

https://velog.io/@wiostz98kr/Firebase-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0-Authentication

 

Firebase - Authentication을 이용해 손쉽게 로그인 기능 구현하기 (Feat. React.js)

설치 확인은 package.json에서 가능firebase>콘솔>프로젝트 생성>프로젝트>프로젝트 설정>하단의 Firebase SDK snippet에서 세번째 script 태그 안의 내용을 복사하기src폴더에 service폴더 생성후 이 안에서 비

velog.io

firebase채팅

https://velog.io/@khy226/firestore%EB%A1%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EC%95%B1-%EA%B5%AC%ED%98%84-react-firebase

 

Firestore로 실시간 채팅 앱 구현 (feat. React, Firebase)

이번 포스트에서는 React 채팅앱에 Firestore를 적용하는 방법을 공유드리고자 합니다. 기존에 polling 방식으로 채팅을 구현했을 때 속도도 너무 느리고, 싱크가 맞지 않아 실시간으로 데이터가 반영

velog.io

 

 

3. 기타

피그마가 나쁜 디자이너를 만든다.

https://yozm.wishket.com/magazine/detail/1699/

 

피그마는 여러분을 나쁜 디자이너로 만들고 있습니다 | 요즘IT

만일 여러분이 디자인 업무를 협업할 때 다른 사전 준비를 제치고 디자인 툴에 곧바로 뛰어든다면 이는 결국 여러분의 창의성을 빼앗아 갈 것입니다. 그 대표적인 예로 피그마와 스케치가 있습

yozm.wishket.com

 

 

4. 리액트

react Context api

https://ko.reactjs.org/docs/context.html

 

Context – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'TIL' 카테고리의 다른 글

[TIL] 20230315 volta로 노드 버전 바꾸기/ vue attrs / boolean vs Boolean  (0) 2023.03.17
[TIL] 20230306 패키지 잠금/ vue setup / vue filter/react custom hook  (0) 2023.03.07
[TIL] 20230206 nextjs/ pwa 푸시알림/ 리액트 달력 라이브러리/ yaml  (0) 2023.02.07
[TIL] 20221229 리액트 함수네이밍 규칙/ 자바스크립트 콜스택, 메모리힙 구조/ 리액트 불변성/ git stash / 탭 사이에 통신하는 법/ Broadcast channel api  (0) 2022.12.29
[TIL] 20221214 javascript closure/ scroll fade in out 효과/ 2023 웹 디자인 트렌드  (0) 2022.12.14
'TIL' Related Articles more