본문 바로가기
  • 삽질하는 자의 블로그
2. Next.js 와 next-auth 의 실행 순서에 관하여 단순한 코드가 있다. next-auth 의 useSession 을 사용하여, 로그인한 유저의 데이터값을 가져오고 데이터값을 활용하여 fetch 를 하는 코드이다. const MyTestResults = (props: { userId: string | null | undefined }) => { const { userId } = props;// 페이지에서 useSession 을 통해, 로그인한 유저의 아이디를 넘겨받는다. const [userResultData, setUserResultData] = useState(); useEffect(() => { (async () => { const userData = await fetch("/api/get-user-test-data", { method: "POST".. 2023. 2. 6.
1. Google OAuth 액세스 차단됨 : 승인 오류 내용 The OAuth client was not found. 이 앱의 개발자인 경우 오류 세부정보를 참고하세요. 401 오류: invalid_client 원인 Google OAuth 페이지에서 CliendId, Client Secret 이 허용되지 않았다. 해결 1. https://console.cloud.google.com/projectselector2/apis/dashboard?hl=ko&supportedpurview=project (구글 디벨로퍼 API 서비스) 에 접속하여, API 를 만들고, 사용자 인증정보를 발급받고 사용해야한다. 2. 자신의 환경변수가 들어있는 파일에, GOOGLE_CLIENT_ID 와 GOOGLE_CLIENT_SECRET 이 올바른지 확인한다. 3. auth 의 Provi.. 2023. 2. 4.
17. 이벤트에 함수 여러 개 동작시키기 함수 여러개 달고싶다면 중괄호 안에 함수를 실행시키고 ; 를 통해 구분시키면된다. onClick = {()=> { 함수1(); 함수2(); 함수3(); } } 예시 { setEditMode(null); setEditTodo(""); }} > 2023. 2. 4.
1. ReferenceError: window is not defined 페이지 안에 window 객체를 참조할 수 없다고 한다. const DogsPage = () => { const testResult = window.localStorage.getItem("test-result"); if (testResult === null || testResult === "undefined") { router.replace("/"); } Next.js 는 getServerSideProps 를 사용하지 않더라도, 기본적으로 SSR을 사용하여 통해 pre-render 하는 기본적인 동작방식을 가지고 있다. Next.js 를 pre-render 할때, HTML 을 생성한 다음, 클라이언트로 보낸다. 이때 사용자가 페이지를 방문하면 HTML 을 로드한 다음 수화(페이지가 상호작용 할 수 있도록.. 2023. 2. 4.
8. MongDB의 쿼리조건 : [ 특정 string 포함 조건], [ or 과 and 의 조건] MongDB 에 접근해 값을 가져올것이다. 1. 특정 string 이 포함되어 있는 조건 2. 여러개의 특정 stiring 들 이 하나라도 포함되어 있다면 가져오는 조건 3. 특정 string 이 전부 포함되어야만 가져오는 조건 MongDB 의 매뉴얼을 보자 https://www.mongodb.com/docs/manual/reference/operator/query/regex/ $regex — MongoDB Manual Docs Home → MongoDB Manual This page describes regular expression search capabilities for self-managed (non-Atlas) deployments. For data hosted on MongoDB Atlas,.. 2023. 2. 3.
7. useCallback 을 이용한 fetch ( 비동기함수 ) 사용하기, useEffect 초기 렌더시 내부함수 사용 금지하기 useCallback 은 memoization 을 통해, 의존성 배열이 바뀌지 않는다면, 새 함수를 생성하지 않고, 기존 함수를 다시쓰는 최적화 기능을 제공한다. 물론, memoization 에도 비용이 발생하기 때문에, 복잡하지 않은 함수의 경우 썩 큰 효과를 누리지는 못한다.(고한다.) 일단 연습겸, fetch 를 하는 함수에 사용해보았다. 1. useCallback Hook을 통한, 비동기함수의 생성 const getDogsDataHanlder = useCallback(async () => { const fitDogs = await fetch("/api/dogs", { method: "POST", body: JSON.stringify({ personality: fitArray, size: size .. 2023. 2. 3.
6. SASS, @for 과 @if 를 활용한, 스타일링 지정 테스트 페이지를 작성할때 const TestNumberTesting = () => { const allNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; const numberTestCards = allNumbers.map((selected) => ( {selected} // 각 값마다 다른 style ... 처럼 각 값마다 className = { styles.number__1 } className = { styles.number__2 } className = { styles.number__3 } className = { styles.number__4 } ... 처럼 다른 스타일을 지정해야 했다. 참고 : "string" 으로 되어있는 값을 s.. 2023. 2. 3.
5. localStorage 에 대하여. [ WEB API ] 로컬스토리지를 사용해보자. 로컬스토리지는 저장가능 용량이 무한하고, 온갖 종류의 데이터를 전부 저장할 수 있으며 도메인 별로 저장한다는 특징을 가지고 있다. 또한 로컬스토리지에는 "문자열" 만 저장할 수 있다. 뭘 저장해도 전부 "string" 이 된다. 쿠키나 세션스토리지와는 달리 브라우저를 종료해도 사라지지 않는다. 로컬스토리지의 사용방법 setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 갯수 key() - index로 key값 찾기 단순하지만, 중요한 한가지는 value 를 저장할때 "원시값" 과 "객체, 배열" 의 차이가 존재.. 2023. 2. 3.
5. POST 를 이용한 데이터 가져오기, 로컬스토리지에 저장하기 2023년 02월 15일 수정 나는 정말로 멍청이다. Dynamic API Routes (동적 API 라우트) 가 있는데 굳이 클라이언트에서 POST 요청을 해서 값을 받으려했다. https://nextjs.org/docs/api-routes/dynamic-api-routes API Routes: Dynamic API Routes | Next.js You can add the dynamic routes used for pages to API Routes too. Learn how it works here. nextjs.org API 라우트를 동적으로 만들어서 해당되는 값을 export default function handler(req, res) { const { pid } = req.query res... 2023. 2. 3.
최명식 - 원티드 프리온보딩 인턴십 숏에세이 1. 지원하고 싶은 참가기업은 어디인지 참가하고 있는 모든 기업이 훌륭한 기업이지만, 제 개인적인 관심사가 가장 잘 맞는 "라이크어로컬" 에 먼저 지원하고 싶습니다. 평소 여행을 좋아하고, 여행지에 대한 큰 관심을 가지고 있어 "라이크어로컬" 에 가장 큰 관심이 쏠렸습니다. 또한, 저는 데이터를 정리하고 글을 남기는 습관을 가지고 있습니다. 그로인하여 평소 토이프로젝트로 정보를 전달하는 서비스를 주로 개발하고 있어, 저와 잘 맞는다는 생각이 들었습니다. 여행지의 정보성 데이터와 각종 이벤트, 그리고 여행상품을 다루고 있는 "라이크어로컬" 에 먼저 지원하고 싶습니다. 2. 프리온보딩 인턴십에서 본인이 얻고 싶은 것 저는 DOCS 와 UDEMY 를 비롯한 강의사이트를 보며 독학을 하였습니다. 장점으로는 필요.. 2023. 2. 2.
4. Redux-toolkit을 사용해 "비동기함수(fetch)" 를 이용한 DB 의 값 받아와서 넣기 + Thunk 생성자 + action.ts 클라이언트는 서버(api) 에게 요청을 하고, 서버(api) 는 DB의 값을 받아 응답한다. 좋다. 클라이언트는 그 값을 받을 수 있다. 문제는 매번, 필요할때마다, 모든 페이지에서 서버에게 요청해 그 값을 받아올 것인가? 아니면 받아놓고, 열심히 props 전달을 통해 그 값을 앱 전역에 퍼뜨릴 것인가? 둘다 정답은 아닐 것이다. 그것이 내가 전에 했던 크나큰 실수이자, 엄청나게 느려진 반응속도를 낳게한 주범이었다. 이번에는 서버로부터 응답받은 그 값을 Redux-toolkit 의 store 에 넣고, 앱 전역에서 사용할 것이다. React 를 사용하면서 Redux-toolkit 의 action 생성자를 통해 비동기함수를 다루어보았다. 정확히는 비동기함수를 사용가능하게 하는 action 을 통해 Fir.. 2023. 1. 29.
3. DB의 데이터를 fetch - "API" 를 통한 GET 과 "사전 데이터페칭"을 통한 GET Next.js 는 ServerSide 에서 사용 가능한 Code 를 제공한다. 클라이언트 측에서는 할 수 없는 DB 와 소통하는 코드가 아주 대표적이다. 서버측코드는 일반 클라이언트측 자바스크립트 코드와는 다르게 유저들에게 노출되어있지 않다. 기본적으로 유저들에게 숨겨져있으며 따로 볼 수 없다. 사전 데이터 페칭을 제공하는 getStaticProps 나 getServerSideProps 를 통해, 코드 내에서 직접적으로 서버측 코드를 사용 할 수 있고, pages 의 api 폴더 내에, 자신이 직접 서버측 코드를 만들어 클라이언트측에서 fetch 를 통해 서버에 요청 할 수도 있다. 기본적으로 REST API 를 하기 위해, 독립적으로 node(서버) 와 react(클라이언트) 를 운영하지만 Nextjs.. 2023. 1. 28.

티스토리툴바