Joon's Space

스프링 빈 등록하기 - 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..

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..

패키지 설치 npx create-react-app nuber-eats-frontend --template=typescript create react app 은 template을 가지고 있는데, typescript를 사용하기 때문에 위와 같이 작성해 준다. ※ App.test.tsx 파일의 "cannot use JSX" 오류는 tsconfig.json 파일에서 "jsx" 부분을 "react-jsx" -> "react"로 수정해준다. (버전이 맞지 않아서 버그가 발생했던 것.) TailwindCSS TailwindCSS는 부트스트랩과 같이 CSS 프레임 워크이다. TailwindCSS는 utility-first CSS framework라고 원문에서 설명되어 있는데, tailwind는 엄청 긴 css file..

React Hooks 란? react의 state machine에 연결하는 기본적인 방법. Hooks를 사용하면 기존의 class 방식을 더 이상 사용하지 않고, 함수형 프로그래밍 방식을 사용한다. useState // App.js import { useState } from "react"; import "./styles.css"; export default function App() { const [item, setItem] = useState(1); // state 초기값을 1로 설정해줌. const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hello {item} Sta..