20230621 TIL

Fact

• 웹프 응용 Router 연결~
• 삼프제 원팁 모임

 

Feeling

사실 며칠간 가족들이 해줬던 말이 마음을 떠다녔다. 내가 잘못 살아온 것 마냥 모욕적인 말을 끊임없이 하는데 개월이 쌓이며 견딜 수 없기도 했다. 그래도 무던히 넘기려고 열심히 살수록 수령에 빠지는 기분에 자주 토로하던 언니에게 무척이나 미안했다.

 

Findings 

웹프 응용

• frontend 서버 실행 : npm start
• npm install @material-ui/core 해결법
  • npm install @material-ui/core --save --legacy-peer-deps
  • 이러면 갑자기 다운이 된다!!(왜 될까,,.,.)

---

295page 로그인 페이지 만들기까지 완료~

• userDTO 만들러 감.. 머쓱

	implementation ("org.springframework.boot:spring-boot-starter-security")
	implementation ("org.springframework.boot:spring-boot-starter-web")
	implementation("io.jsonwebtoken:jjwt:0.9.1")

• 걍 복붙 중인데 fetch가 안된다네….

401에러 해결!! → webSecurityconfig 추가~

token이 왜 null이 뜨지?

• signup은 token null 맞음!!!
• signin
• chy@world.com { "token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIyYzk0YzE1Njg4ZGQ4N2U5MDE4OGRkODg0MzFlMDAwMCIsImlzcyI6ImRlbW8gYXBwIiwiaWF0IjoxNjg3MzQ0MDgwLCJleHAiOjE2ODc0MzA0ODB9.HUz7hYDZWDKAjdmKfPVKAb9toOJLxY9WFVU3R7xypqNUuSIrkxEZ4qu9kaD4ODIpdmLjsWVTFMKG-vptIZyKZA", "email": "chy@world.com", "username": null, "password": null, "id": "2c94c15688dd87e90188dd88431e0000" }

backend 완성

---

프엔 다시 시작

Unhandled Rejection (SyntaxError): Unexpected end of JSON input

• 문제점 : Unhandled Rejection (SyntaxError): Unexpected end of JSON input
• 일단 이거 재껴~~~

import { API_BASE_URL } from "../app-config";
const ACCESS_TOKEN = "ACCESS_TOKEN";

export function call(api, method, request) {
  let headers = new Headers({
    "Content-Type": "application/json",
  });

  // 로컬 스토리지에서 ACCESS TOKEN 가져오기
  const accessToken = localStorage.getItem("ACCESS_TOKEN");
  if (accessToken && accessToken !== null) {
    headers.append("Authorization", "Bearer " + accessToken);
  }

  **let options = {
    headers: headers,
    url: API_BASE_URL + api,
    method: method,
  };**
//여기에서 options를 json으로 제대로 못 건네주고 있다고 함.
  if (request) {
    options.body = JSON.stringify(request);
  }
  return fetch(options.url, options)
    .then((response) =>
      response.json().then((json) => {
        if (!response.ok) {
          // response.ok가 true이면 정상적인 리스폰스를 받은것, 아니면 에러 리스폰스를 받은것.
          return Promise.reject(json);
        }
        return json;
      })
    )
    .catch((error) => {
      // 추가된 부분
      console.log(error.status);
      if (error.status === 403) {
        window.location.href = "/login"; // redirect
      }
      return Promise.reject(error);
    });
}

export function signin(userDTO) {
  return call("/auth/signin", "POST", userDTO).then((response) => {
    if (response.token) {
      // 로컬 스토리지에 토큰 저장
      localStorage.setItem(ACCESS_TOKEN, response.token);
      // token이 존재하는 경우 Todo 화면으로 리디렉트
      window.location.href = "/";
    }
  });
}

export function signout() {
  localStorage.setItem(ACCESS_TOKEN, null);
  window.location.href = "/login";
}

• nav bar 만들기~~→ 어케 된지는 몰랑 >.<

var navigationBar = (
      <AppBar position="static">
        <Toolbar>
          <Grid justify="space-between" container>
            <Grid item>
              <Typography variant="h6">Goods</Typography>
            </Grid>
            <Grid>
              <Button color="inherit" onClick={signout}>
                로그아웃
              </Button>
            </Grid>
          </Grid> 
        </Toolbar>
      </AppBar>
    );

• 글리치 해결~!

	/* 로딩중일 때 렌더링 할 부분 */
    var loadingPage = <h1> 로딩중.. </h1>;

    var content = loadingPage;

    if (!this.state.loading) {
      content = goodsListPage;
    }

 

 

이것만 해결해줘~!

×

Unhandled Rejection (SyntaxError): Unexpected end of JSON input

(anonymous function)

C:/Users/hyeonyeong/Desktop/term prj/workspace/workspace/src/service/ApiService.js:26

This screen is visible only in development. It will not appear if the app crashes in production.Open your browser’s developer console to further inspect this error.

Affirmation

오늘 목표

• [x] 웹프 응용

내일 목표

• [ ] 웹프 응용 에러 고치기
• [ ] 프문 자소서 내기