FrontJin

기획 주제를 세우는 데 정말 오래 걸렸다. 스터디 아이디어와 튜터님들까지 합세하여 불같은 토론을 한 결과 스터디 종합 서비스로 정해졌다.최소 기능을 정하고 페이지를 분리하고 역할을 나눴다. 그런데 스터디 그룹 페이지가 정확히 어떤 느낌인지를 모르겠다는 의견이 나와서 디자인 제외하고 기능만 보기 위한 와이어프레임을 간단하게 만들었다.  자진해서 맡는 리더는 처음이라 팀원들을 챙긴다고 챙겼는데 잘 챙겼는지는 모르겠다. 그치만 팀 분위기가 좋고 팀원들이 편하게 떠드니까 잘 챙긴 것 같다. 토론을 통해서는 만장일치가 나올 수 없다고 생각해 투표를 하려고 했는데, 튜터님이 토론을 통해 모두가 설득되어야 한다고 해서 기획 아이디어를 정하는 데 정말 오래 걸렸다. 오래 걸렸지만 모두가 필요성을 느껴서 하는 아이디어가..

팀 과제(가취뽀) 중 Vintz 튜터님에게 가서 진행상황 보고를 했다. 이력서 페이지에 포인트를 걸고, 그 포인트만큼 차감되는 기능을 구현해야 해서 zustand를 설정하고 있다고 했다. 그런데 튜터님이 zustand를 꼭 써야 하냐는 질문을 하셨다. 그러게. 왜 써야 한다고 생각했지?일단 나의 이유는point state를 여러 곳에 써야 하니까(이력서 페이지, 포인트 상점 페이지 두 곳이지만)Next.js는 App router 라서 props를 어떻게 전달해야 할 지 모르겠음이 두 가지였는데, 병연님은 serverside에서 그냥 point를 가져오면 되지 않나? 라고 하셨다. 듣고 보니 그것도 그런 것 같은게 두 페이지만이라 굳이 zustand를 써야 하나 싶긴 했다.그렇지만 이야기를 하다 보니 확장..

1. 문제 발생포인트 지급 로직 구현을 위해 supabase 데이터를 업데이트 하는 과정에서 문제가 발생했다. 아무리 해도 supabase 데이터가 update가 되지 않는다. 2. 접근 - 문제 해결 2-1. 일단 console을 찍어 어디가 작동을 안하는지 알아봤다.//ssr 또는 csr'use client';import { createClient } from '../../utils/supabase/client';import { useEffect, useState } from 'react';const PointStorePage = () => { const supabase = createClient(); const [points, setPoints] = useState(0); useEffect((..

매니저님께 제의가 왔다. 이번 발제 때 블로그에서도 소개했던 시리즈에 나왔던 1시간마다 보고하며 시간 관리하는 방법을 발제 때 수강생들에게 소개하는 것이 어떠냐고 하셨다. 나는(약간의 젭 포인트를 제시하고) 흔쾌히 받아들였다.  이제 발표하는 게 크게 긴장되지는 않는다. 하지만 준비하는 부분에서 튜터님들에게 설문조사를 돌렸는데, 이 공부법이 많이 활성화되면 튜터링에 지장이 갈 까봐 걱정하는 의견을 받아 그게 좀 부담스럽긴 했다. 많이 생각을 해 봤는데, 일단 나의 역할은 공부법을 소개하는 역할까지라는 것을 명확히 인지하고 사람이 몰리고 어쩌고 하는 상황은 생각하지 않기로 했다. 사실 거기까지 생각했는데 그건 매니저님들의 역할이지 내 역할은 아닌 것 같다. 발표는 성황리에 끝났다. 내 방식을 변형해서 차..

1. 문제 발생 코딩을 잘 하던 중 useSearchParams에 문제가 발생했다. ReadonlyURLSearchParams' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다. 2. 해결 방안 고민 -. es2015 이상의 target이라는 것을 보니 version 문제 같다는 생각을 했다.  - useSearchParams가 TypeScript에서 사용이 안 되나 싶어서 확인도 해 봤는데, 그건 아니었다.  - 짧게 고민을 마치고 구글링으로. 3. 문제 해결 - 간단한 구글링을 통해 문제 해결 방안을 찾았다.  - tsconfig.json에서 target을 ES2015 이상으로 설정한다.{ "compile..

Vintz 튜터님과 두번째 토론. 주제는 서버 사이드 캐싱과 클라이언트 캐싱의 차이점과 Next.js에서의 활용법이었다. 근데 내용이 너~무 어려워서 제대로 공부를 못 해 갔는데, 토론을 하다 보니 Next.js 부분은 강의를 찍으신 Chancellor튜터님께 직접 가는 게 나은 것 같아 튜터님과 Chancellor 튜터님 방이 비자마자 달려갔다. 질문을 드리자마자 너무나 완벽한 정리를 술술 설명해 주셨고 기억이 날아가기 전에 정리를 해 두려고 한다. 1. 캐싱 - 한번 불러온 데이터를 효율화를 위하여 서버나 브라우저 사이드에 저장해주고 빠르게 불러올 수 있도록 하는 프로세스.  - Next.js에서는 하고 싶은 기능에 따라 서버 사이드 캐싱/클라이언트 사이드 캐싱 중 더 적절한 옵션을 선택해서 진행한다..

오늘 스탠다드반 강의 직후, 튜터님이 질문을 내고 참여 사람들 중 핀볼을 돌려 랜덤으로 세 명이 대답한 후, 맞추면 상품을 주는 퀴즈 실습 세션 가 진행되었다. Next.js를 공부하면서 희미하게 알고 있던 점을 콕콕 집어주는 내용이 도움이 많이 되어서 블로그에 정리해 두려고 한다.  *모범 답변은 수강생들의 답변을 총정리하여 재구성함. 1. 라이브러리와 프레임워크의 차이는 무엇이고 어떤 장단점이 있나요? 라이브러리(ex.리액트)는 제어권이 개발자에게 있고, 프레임워크(ex.넥스트)는 제어권을 프레임워크가 가지고 있다. 라이브러리는 개발자가 필요할 때 호출하여 사용하는 도구 모음집이고, 가볍다는 장점이 있지만 직접 (react-router-dom과 같은 것들) 가져와야 한다. 프레임워크는 따로 사용 시..

스파르타 강의를 들으면서 4가지 렌더링 방식(SSG, CSR, ISR, SSR)을 배웠다. 그런데 SSR을 배우는 과정에서 SSR는 사용자와 상호작용되지 않는다고 이해했고, 그걸 튜터님한테 말씀드렸는데 hydration이라는 것이 끝나면 상호작용이 가능하다고 하셨다. 이어 hydration에 대해 공부하고 공부한 내용을 토론하자고 말씀을 주셔서 개발 아티클들을 몇 개 뒤져보고 내가 이해한 내용을 기록하려고 한다.  1. 정의 SSR(Server Side Rendering)에서, 서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다. 서버에서 index.html 파일을 제공하고 곧이어 자바스크립트 파일을 제공하는데, 브라우저에서는 html 파일을 미리 로드하고 자바스크립트 파일..