리액트
트위터 클론 코딩 #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..
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년 ..
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
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라는 파..
[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의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
2019.01.31🐶 리액트(React)를 이용해 이모지 빙고게임 만들기 🐶 노마드 코더 슬랙을 둘러보던 중, 빙고 게임을 과제로 만드시던 분이 빙고 검증에 대한 구현을 질문하셨다. 처음에는 Codesandbox에 돌아가는 코드를 만들어서 보여드리면 어떨까 생각하다가, "내 사이드 프로젝트로 좋을 것 같은데?"라는 생각에 바로 당일 빙고게임 사이드 프로젝트 작업을 시작했다. 컴포턴트(Component)화 시작하기에 앞서 생각났던 프로젝트가 바로 리액트 공식 문서에서 제공하는 튜토리얼인 틱택토 게임이었다. Board와 Squrare로 컴포넌트화 되어있던게 빙고에 적용하기 딱이였고, 똑같이 Board와 Square라는 컴포넌트를 만들어서 진행했다. 함수구현 빙고에서 구현해야할 함수는 다음과 같다. 1. 특정 칸 클릭시 해당 ..
[⚛React] React 기본 개념
[⚛React] React 기본 개념
2018.12.26🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..
React로 WYSIWYG 에디터 뭘로 시작하지?
React로 WYSIWYG 에디터 뭘로 시작하지?
2018.12.20커뮤니티 형태의 사이트를 만든다면, 글 작성 및 댓글 작성을 구현 할 때 필연적으로 고민하게 되는 부분 어떤 WYSIWYG를 쓸 까? 그런 분들에게 추천드릴만한 제가 직접 사용해 본 React에 맞는 WYSIWYG에 대해서 설명해보겠습니다. WYSIWYG(위지위그)란? 모두 대문자로 이루어졌으니 무언가의 약어라는 뜻인데, 바로 'What You See Is What You Get, 보는 대로 얻는다'라는 뜻으로 말 그대로 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. - 위키피디아 커뮤니티 형태의 사이트에서는 글을 작성하는 곳에서 이 위지위그 에디터들이 사용됩니다. 간단하게 글자를 굵게 만드는 것부터, 이미지 삽입, 동영상 삽입, 특정 정보 삽입까지 복잡한 역할..