react
트위터 클론 코딩 #3 Nweeting
트위터 클론 코딩 #3 Nweeting
2021.10.01노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다. 3 NWEETING 3.0 Form and Database Setup / 양식과 데이터베이스 설정 Firebase > Firestore Database 3.1 Nweeting! / 느위팅! Firebase의 Cloude Database(Firestore Database)는 NoSQL database이기 때문에 유연하고 사용하기 쉽다. NoSQL database에는 다음과 같은 분류로 나뉜다. Collection : 폴더와 같은 역할, 한 데이터베이스에는 여러개의 Collection이 존재할 수 있다. Document : 폴더 안에 있는 문서와 같은 역할, 한 Collection에는 여러 개의 Document가 존재할 수 있다. 결론적으로..
트위터 클론 코딩 #2 Authentication
트위터 클론 코딩 #2 Authentication
2021.10.01노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다. 2.0 Using Firebase Auth / Firebase 인증 사용하기 특정 폴더 기준으로 상대 경로로 import 하는 방법 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } CRA Absolute Imports Firebase 설정 수정 인증 관련 값을 가져오기 위해 Firebase 설정 수정 ⚠️ 강의 영상 이후로 firebase가 v9.0으로 업데이트하면서 기존 코드와 호환이 안되는 경우가 있어서 v9.0를 사용하는 경우 아래 코드로 진행 // Import the functions you need from the SDKs you need import { init..
트위터 클론 코딩 #0 Introduction ~ #1 Set up
트위터 클론 코딩 #0 Introduction ~ #1 Set up
2021.09.08노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다. 0.0 Welcome! / 환영합니다! 강의에서 구현할 Firebase를 이용하여 가능한 기능 이메일, 비밀번호을 이용한 인증 회원가입 로그인 구글 소셜 로그인 깃헙 소셜 로그인 실시간 처리 트윗 보내기 파일 업로드 프로필 수정 트윗 수정하기 트윗 삭제하기 심지어 모든 기능을 백엔드 코드 작성없이 할 수 있다. 사이트를 만드는 데 가장 많이 드는 시간이 CSS 작업일 정도 ㅎㅎ 0.1 Requirements / 요구사항 해당 강의를 듣기 전에 들어야 할 강의 코코아톡 클론 코딩 - HTML, CSS, Github ReactJS로 영화 웹 서비스 만들기 - ReactJS Fundamantals 초보를 위한 React JS - React R..
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
2021.02.01내가 데이터 고자라니! 😣 2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했다. 회사에서는 백/프론트 가리지 않고 하고는 있지만 그래도 나는 프론트엔드를 더 잘 알고 좋아하는 프론트엔드 가이이다. 그러나 모든 프론트엔드 개발자들이 알고 있듯, 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있다! 그것은 바로 "보여줄 데이터가 없다는것" 😂 Open API를 찾아나서는 여정 🛣 이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용해서더 많이 더 적게같은 프로젝트도 진행했다. 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 해왔다.그런데 Open API를 찾는 것..
Next.js에 Tailwind CSS 적용하기
Next.js에 Tailwind CSS 적용하기
2021.01.21Tailwind CSS Tailwind CSS는 Bootstrap과 흡사한 UI 프레임워크 입니다. Tailwind CSS는 커스터마이징이 가능한 저수준 CSS 프레임 워크로, 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공합니다. 대부분의 UI 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다. 하지만, 사이트를 사용자가 지정한 디자인으로 제작하고 싶은 경우에는 많은 제약이 따릅니다. Tailwind CSS는 HTML을 떠나지 않고도 커스터마이징 가능한 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공합니다. npm/yarn을 통해 Tailwind 의존성 설치하기 Tailwind CSS 패키지를 프로젝트에 설치합니다. npm을 사용하는 경우 # Nex..
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
2020.12.03해당 글은 제가 DEVIEW 2020의 발표 영상 DEVIEW 2020 - React 개발이 이렇게 쉬웠나? (Feat. Next.js)을 보면서 문서화 및 제 의견을 추가한 글입니다. 0.React 개발이 이렇게 쉬웠나? (Feat. Next.js) 1. UI Library React / UI 라이브러리 리액트 리액트를 이용한 개발은 처음에는 모든 것을 해결해줄 만능 해결책을 가진 것 같이 느껴진다. 그러나 프로젝트의 규모가 커지고, 계속 사용할 수록 리액트를 이용한 개발의 어려운 점들이 등장한다. 1. UI Library React에서는 현재 리액트 개발이 어려운 이유와 이를 설명하기 위해 리액트와 리액트 개발에 대해 소개하려한다. 1.1 커져가는 React 생태계 리액트는 꽤나 과거부터 2020년 ..
Next.js에서 Apollo Client 사용하기
Next.js에서 Apollo Client 사용하기
2020.11.14Apollo Client @apollo/client 라이브러리를 이용합니다. Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 query할 수 있는 GraplQL 클라이언트입니다. 데이터를 가져오고 변조하는 것 이외에도, Apollo는 query와 그 결과를 분석하여 클라이언트 사이드 캐시를 구성하며 이를 통해 추가 query와 mutation이 실행될 때 최신 상태로 유지되게 합니다. Next.js에서 Apollo Client 사용하기 SSR을 할 수 있는 Next.js 프레임워크에서 Apollo Client를 사용하는 방법이 여러가지 있다. next-with-apollo라는 라이브러리가 유명하지만 아쉽게도 최신 스펙인 getServerSideProps나 getStaticProps를 정..
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
2020.03.15👋 들어가며 오늘은 필자가 간단한 프로젝트를 시작할때마다 사용하는 React와 TypeScript를 이용한 보일러플레이트를 소개하고자한다. 해당 보일러플레이트의 링크는 다음과 같다. react-typescript-boilerplate 🏗 기본구조 기본은 create-react-app의 타입스크립트 템플릿 기본적으로 create-react-app의 타입스크립트 템플릿 기반이다. 해당 템플릿은 다음 커맨드로 설치할 수 있다. npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript global-styles.ts 전역으로 쓰이는 CSS 파일은 global-styles.ts라는 파..
리액트에서 새로고침을 해야 함수가 작동하는 경우
리액트에서 새로고침을 해야 함수가 작동하는 경우
2020.03.02문제 webstomp-client라는 라이브러리를 이용중인데 Opening Web Socket... 위 콘솔만 찍히고, 소켓에 연결이 안되는 버그가 있었습니다. 그런데, 새로고침 이후에는 제대로 연결이 되었습니다. 해결 여러 삽질을 한 결과, react-router-dom의 의 props인 history를 이용한 코드가 문제였습니다. history.push("/"); react-router-dom의 경우 SPA(Single Page Application)에서 CSR(Client Side Routing)을 구현하기위한 라이브러리이기 때문에 history.push("/")를 이용해 url이 변경된 것처럼 보이지만, 실제로는 변경되지 않은 상태입니다. 따라서 실제로 url을 변경하기 위해서, 여기에서는 아래의..
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[Next.js] Next.js 시작하기
[Next.js] Next.js 시작하기
2020.01.15🤔 Next.js란? 단일 페이지의 자바스크립트 애플리케이션을 만드는 것이 꽤나 어려운 일이라는 것을 다들 알고 있을 것이다. 다행히도, 우리에게는 다양한 선택지의 프레임워크와 라이브러리가 있다. 그럼에도 불구하고 원하는 애플리케이션을 만들 수 있기까지는 상당한 러닝커브가 있다. 우리가 배워야 할 것들은 CSR(Client Side Rendering), 페이지 레이아웃, API 등이다. 그것만 있는가? 특정 페이지는 SSR(Server Side Rendering)이 필요할 수 있다. 따라서 우리는 더 간단하지만, 수정하기 쉬운 어떤 것이 필요하다. PHP를 이용했을 때, 웹 앱이 어떻게 만들어지는 지 생각해보자. 파일을 만들 것이고, PHP 코드를 작성하고, 간단하게 배포하면 된다. 라우팅에 대해서 그렇..