Joon's Space

Form 게시글을 입력하고 submit 할 Form을 생성한다. // Home.js const Home = () => { const [nweet, setNweet] = useState(""); const onSubmit = (event) => { event.preventDefault(); }; const onChange = (event) => { const { target: {value}, } = event; setNweet(value); } return ( ); }; export default Home 게시글을 입력하고, 제출 버튼을 클릭하여 앞서 입력해서 제출한 정보글들을 저장할 공간이 필요한데, 이때 firebase의 database를 사용한다. Cloud Firestore firebase의 Clo..

※ nomadcoder twitter clone coding 강의 참고 React + Firebase setup - React 프로젝트 생성 npx create-react-app 프로젝트명 - firebase 모듈 설치 npm install firebase - Firebase 프로젝트 생성 src/firebase.js을 생성하여 홈페이지에서 생성된 firebaseConfig를 저장하고 initiallizeApp으로 실행 // src/firebase.js import * as firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AU..

H2 데이터 베이스 - 개발이나 테스트 용도로 가볍고 편리하게 사용할 수 있는 DB https://www.h2database.com H2 Database Engine (redirect) H2 Database Engine Welcome to H2, the free SQL database. The main feature of H2 are: It is free to use for everybody, source code is included Written in Java, but also available as native executable JDBC and (partial) ODBC API Embedded and client/server mo www.h2database.com 보통 실무에서는 mysql 같은 ..

스프링 빈 등록하기 - MemberController, MemberService, MemberRepository class에 각각 @Controller, @Service, @Repository를 붙여 주면, 자동으로 의존관계가 등록이 된다. (컴포넌트 스캔 방식) -> main app이 돌아가는 하위 패키지에서만 자동으로 찾아서 등록 DI에는 필드 주입, setter 주입, 생성자 주입 3가지가 있는데, 의존관계가 실행중에 동적으로 변하는 경우는 거의 없으므로 생성자 주입을 권장. package hello.hellospring.controller; import hello.hellospring.service.MemberService; import org.springframework.beans.factory..

비즈니스 요구사항 정리 - 데이터 : 회원 ID, 이름 - 기능 : 회원 등록, 조회 - 아직 데이터 저장소가 선정되지 않음 웹 애플리케이션 계층 구조 - 컨트롤러 : 웹 MVC의 컨트롤러 역할 - 서비스 : 핵심 비즈니스 로직 구현 - 레포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리 - 도메인 : 비즈니스 도메인 객체 회원 도메인 domain 패키지 생성 -> Member class 생성 hello/hellospring/domain/Member package hello.hellospring.domain; public class Member { private Long id; private String name; public Long getId() { return id; } publ..

프로젝트 생성 yarn init yarn init git init git init git remote add origin https://github.com/jyojun/movieql git commit -m 'setup' git branch -M main git push -u origin main graphql server setup graphql-yoga 패키지 설치 yarn add graphql-yoga ※graphql-yoga : graphql 서버를 쉽게 셋팅할 수 있게 만들어진 패키지 graphql을 사용하면서 해결되는 문제들 -> graphql을 처음 사용하면서 왜 graphql 을 사용하는지에 대해 물어본다면 알아야 할 다음 두가지 개념은 'over-fetching', 'under-fetch..

로그인 페이지 디자인 (TailwindCSS) // login.tsx import React from "react"; export const Login = () => { return Log In Log In ; }; 사용한 class들 flex : flexbox - items-center : 세로축에서 위치를 가운데로 위치하게 함 - justify-center : 가로축에서 위치를 가운데로 위치하게 함 bg-gray-800 : 배경색을 gray 800 단계로 설정 (100 ~ 900 진하기) text-gray-800 : 글자색을 gray 800 단계로 설정 text-center : 글자를 가운데로 배치 mt-5 : margin top을 5로 설정 (mt : top, mb: bottom, mr: right..

Local State ? local state 는 local storage ( HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되어도 그대로 남아있음. ) 에 state 값을 저장해서 사용 할 수 있는 것. LogIn & LogOut Authentication // Apollo.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; export const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new InMemoryCache({ typePolicies: { Query: { fields: { isLoggedIn: { read() { return f..