전체 글

[nextjs] 특정 컴포넌트를 정확히 클라이언트에서만 렌더링하기

useEffect useEffect는 클라이언트에서만 실행하도록 되어있다. import { useEffect, useState } from 'react'; import 대충 클라이언트에서만 실행할 수 있는 컴포넌트 from 'ASDF'; export default function Test() { const [isClient, setIsClient] = useState(false); useEffect(() => { setIsClient(true) }, []) return ( {isClient && } ) } 서버 사이드에서는 useEffect가 실행되지 않으니 isClient가 항상 false이고, 대충 클라이언트에서만 실행할 수 있는 컴포넌트가 실행되지 않는다. typeof 서버사이드에서는 window ..

[django + react] social login 장고 + 리액트 + 카카오 로그인

미흡한 부분이 많습니다. 많은 지적 부탁드립니다. 😀 이번에 사이드 프로젝트를 진행하며 로그인하는 부분이 필요했고, 카카오 로그인만 진행하기로 했다. 전체적으로 진행했던 과정은 다음과 같다. [react] kakao 에 로그인 요청 - 카카오 로그인페이지로 이동됨 카카오 로그인 페이지에서 로그인 [django] code 를 받음 [django] 받은 code 를 사용하여 kakao 에 token 요청 [django] 받은 token 을 사용하여 kakao 에 유저정보 요청 [django] 유저 정보를 가지고 디비에 유저가 등록되어 있지 않으면 회원가입 후 로그인 디비에 유저가 등록되어 있으면 로그인 [django] 로그인 할 때 access token 과 refresh token 을 발급하고, 쿠키에 저..

[React] Suspense와 React-query의 onSuccess

프로젝트에 suspense를 적용하기를 하는 도중 에러가 발생했다.(정확히 에러는 아니고 버그?) const { data: chatRoom, isLoading } = useChatRoomQuery(chatRoomId, { enabled: isLoggedIn && !!chatRoomId, cacheTime: 0, onSuccess: (data) => { setNewChatLog(data.data.chatRoom.messages); }, }); onSuccess가 실행 되었음에도 불구하고 newChatLog에 데이터가 없었다. 이는 Suspense를 적용하면서 생긴 문제인데. Suspense의 동작 순서와 관련이 있다. Suspense mount Main mount (1) Main의 useQuery(api)..

this

this 실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장된다. 실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장된다. 그 밖에는 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다르다. 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 ㄸ애문에 혼란의 여지가 없거나 많지 않다. 그러나 자바스크립트에서의 this 는 어디서든 사용할 수 있다. 상황에 따라 this 가 바라보는 대상이 달라지는데, 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 엉뚱한 대상을 바라보는 경우도 있다. ! 상황에 따라 달라지는 this 자바스크립트에서는 기본적으로 실행 컨텍스..

2022.04.22 Daily 회고

오늘 한 일 - 모의 면접 세션 준비하기(3주차 브라우저의 동작 원리 / HTTP / 네트워크) - 프로젝트 잠깐 - 그룹회고 느낀 점 - 면접은 항상 어렵다 - 나도 따라서 열심히 해봐야겠다 현재 나의 상태 - 잠깐 쉬었다가 다시 시작

[python] SWEA - 12052. 부서진 타일

🤔문제 해결 쉬운 그리디 문제 이중 포문을 활용해서 격자의 타일을 하나씩 선택 깨진 타일을 만났을 때 오른쪽, 아래, 오른쪽아래대각선이 깨져있는지 확인 깨져있지 않다면 NO 또는 인덱스 에러가 발생하면 NO 깔끔하게 마무리 된다면 YES 💻소스 코드 T = int(input()) def is_right(grid): for i in range(N): for j in range(M): if grid[i][j] == '#': try: if grid[i + 1][j] == grid[i][j + 1] == grid[i + 1][j + 1] == '#': grid[i][j] = grid[i + 1][j] = grid[i][j + 1] = grid[i + 1][j + 1] = '.' else: return 'NO' ..