[크래프톤 정글 3기] 1/3(수) TIL

09:14 입실
프론트 기본 UI완성
백엔드 기능 추가(파일 첨부, 좋아요)

TypeORM

외래키 생성

  @ManyToOne(() => Post)
  @JoinColumn()
  post: Post;

ManyToOne만 설정하면 참조 관계만 설정된다.
JoinColumn을 해야 외래키가 생긴다.

의존성 주입

자꾸 이상한 의존성 넣어놓고 안 된다고 찾고 있었음.

  constructor(
    @InjectRepository(Post)
    private readonly postsRepository: Repository<Post>,
    @InjectRepository(Comment)
    private readonly commentsRepository: Repository<Comment>,
    @InjectRepository(User)
    private readonly usersRepository: Repository<User>,
  ) {}

DI시에 정확하게 주입했는지 확인해보기
(엔티티 잘못 설정하는 등 문제)

환경변수

next에서는 서버, 클라이언트에서 모두 환경변수 쓰려면 접두어 NEXT_PUBLIC 추가해야 함.

NEXT_PUBLIC_SERVER_API=http://localhost:3000

전역 상태 관리

외부 라이브러리 안쓰고 context api로 구현해서 provide감싸는 거 연구 중

구현 성공..

context를 만들고 context에 provider를 연결시켜서 값을 조작함. 그리고 이 provider를 layout.tsx에 감싸면 내부의 모든 컴포넌트에 context를 전달할 수 있음.

useRouter

"use client";

import { AuthContext } from "@/contexts/AuthContext";
import { useContext } from "react";
import { useRouter } from 'next/navigation'

export default function LogoutPage() {
  const router = useRouter();
  const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);

  sessionStorage.removeItem("accessToken");
  sessionStorage.removeItem("refreshToken");
  setIsLoggedIn(false);

  router.push("/");
}

props

컴포넌트가 여러 단계에 걸쳐 있을 때 props를 변수와 함수를 계속해서 내려주는 거 구현해 봄.

댓글 입력 창 구현할 때 아래 컴포넌트에 연속으로 props내려 보냄.

PostPage -> PostDetailCard -> CommentInput

React는 vue와 다르게 양방향 바인딩이 아닌 단방향 바인딩이라서 따로 양방향 바인딩 처리를 해줘야 하는 게 조금 불편하지만 익숙해지면 큰 문제는 아닐 것 같음.

JSX(TSX)

HTML 태그처럼 보이지만 사실 전혀 무관함.
그래서 HTML 속성이나 문법이 일부 다른 경우도 있음.
JSX는 태그처럼 보이는 이 유사 태그(?)를 JS로 바꿔줌.

export function InterviewForm({ onSubmit, answer, setAnswer }) {
  return (
    <form onSubmit={onSubmit}>
      <div className="form-control">
        <textarea
          name="answer"
          placeholder="답변을 입력해주세요."
          className="textarea textarea-bordered textarea-primary"
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
          rows={10}
        ></textarea>
      </div>
      <div className="form-control mt-2">
        <input type="submit" value="답변 제출" className="btn" />
      </div>
    </form>
  );
}

컴포넌트로 나눠서 개발하는 이유를 확실히 체감함!
컴포넌트 간 통신이 번거롭긴 하지만, context로 전체 상태를 관리하거나 props를 적당히 잘 내려주는데 익숙해지면 괜찮을 듯!