172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
저는 책이 없이 강의만을 통해 학습중입니다. 강의 중간중간 코드를 복사해서 오시더라구요 ~ js같은 경우는 따라치는것에 대해 어려운 부분이 있는데 혹시 어쩔 수 없는 부분인 걸까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다. 일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다. 또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다. 순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다. 서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다. 백엔드 내부 코드는 다음과 같습니다. const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다. const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ``` 그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다. Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다. 근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다. 액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요 근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다. 근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다.. 그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요. 어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다. 읽어주셔서 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해결되었습니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
질문: 1.ts-node로 이어나가도 괜찮을까요? 2. outdated 명령어 쳐보니 버전이 강의에서 한두개 추가설치했지만, 이제 빨간 글씨로 10개 정도 다 버전 업그레이드를 요구했습니다.제가 고쳐나가면서 나아가보면될지 궁금합니다. ㅡㅡㅡㅡㅡㅡㅡㅡ 상황: 몇주전 타입스크립트를 다른 강의로 시작했습니다.최근 환경설정에서 ts-node 사용시 오류가 계속 떠서 그 강의가 tsx 사용을 권장했고, tsx로 입문했습니다.그래서 ts-node로 잘돌아갈지 의문입니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
파일 저장 시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다. 라고 질문 올렸는데 다른 분이 답 주시고 강사님께서 답을 안 해주셔서 질문드립니다. 사진을 지워서 지난글을 봐주실 수 있나요 슬래쉬 두 번 쓰는거는 불편한데, 설정으로 어떻게 안 되는건가요? 줄바꿈 한거는 합쳐버리고, 한줄로 있던거는 나눠버립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
결제를 구현하는 중인데 여기 프로젝트에서 결제 과정이 로그인 한 후에 그 아이디로 포인트 충천 API를 날려서 포인트를 충전후 상세 페이지에서 결제버튼 클릭시 포인트가 충분하면 성공 포인트가 부족하면 실패 이런식으로 만들어져야 하는 건가요??
해결됨
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); } 제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요? 실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요? 만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
axios요청을 통해 서버에서 데이터를 불러오고 그 데이터를 화면에 보여줄 때 아래와 같은 방식을 사용하고 있습니다. 그런데 이러면 isLoading이 true일때 잠깐 화면에 보이는 loading이 맘에 안들어서요.. 이렇게 안하면 data를 찾을수 없다고 에러가 뜨고.. isLoading state로 관리하는 것 말고는 방법이 없을까요? import { useState, useEffect } from 'react'; import axios from 'axios'; const MyComponent = () => { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); setData(response.data); } catch (error) { setError(error); } finally { setIsLoading(false); } }; fetchData(); }, []); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> {data ? ( <div>{data}</div> ) : ( <div>No data available</div> )} </div> ); }; export default MyComponent;
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문. 예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
.Header .header_center { justify-content: center; } .Header .header_left { justify-content: flex-start; } .Header .header_right { justify-content: flex-end; } .Header { justify-content: space-between; } 이렇게 해도 같은 결과가 나오는데 두 코드 차이점이 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 유저정보를 모달창으로 보여주게 하기위해 아래와같이 user를 사용해서 적용했었습니다. 처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더) 그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서 혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다! 📦@modal ┣ 📂(.)promise ┃ ┗ 📂form ┃ ┃ ┗ 📜page.tsx ┣ 📂(.)tester ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂user ┃ ┗ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┗ 📜page.tsx ┗ 📜default.tsx 시도했던 방법은 1. page.tsx에서 직접 generateMetadata를 사용. layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기 여유되실때 확인해주시면 정말 감사하겠습니다!
해결됨
Next.js 시작하기
안녕하세요, 강의 잘 보고 있습니다. React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다. 그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다. 선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
taliWindcss를 사용해서 클래스네임에 작성을하고 마우스를 가져다 대면 75% 이런식으로 나온다고 하셨는데 아무것도 안나오는데 어떻게 하나요? 이 부분 강사님처럼 모양 바꾸고 싶은데 어떻게 하나요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
Form 컴포넌트를 신규로 만들어서 기존 컴포넌트에서 가져왔는데 강의에서는 오류가 표시가 되지만 저는 오류가 나타나지 않아서 현재, Form.js 파일에는 오류가 없는걸로 나오는데 어떻게 해야 하나요?
해결됨
Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요. Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다. 커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
https://github.com/jaewonhimnae/%20boilerplate-mern-stack this is not the ~~~~~ 없네요 자료를 다운받을 수 없는 것인가요?
미해결
Next + React Query로 SNS 서비스 만들기
next14에서 배포 시 페이지는 클라이언트 컴포넌트를 명시한 상태에서 next build를 실행시에 fetch 에러가 나오는데 next를 배포시에는 백엔드서버가 항상 켜져있어야되나요?
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 1
안녕하세요! 이제 막 강의를 듣고 있는 배정규라고 합니다. 아코디언 강의를 듣고나니 UI 컴포넌트 개발뿐만 아니라 자바스크립트와 프론트엔드 개발의 실무 팁까지 배울 수 있겠다라는 기대감이 생기네요 🙂 질문은 toggleItem 함수를 클로저를 활용해서 개선을 해주셨는데요, 왜 클로저로 개선을 해주셨는지가 궁금합니다. 클로저를 활용했을 때와 이전 함수와 비교했을 때 어떤 이점이 생기는지 크게 와닿지가 않아서요. 왜 toggleItem 함수를 클로저를 활용해서 개선해주셨는지 궁금합니다 😃
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
수업에서 처럼 이렇게 코드를 작성했을 때는 오류가 발생하는데 placeholder를 넣으면 에러가 나지않습니다. 왜그런지 알 수 있을까요?!
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 배포테스트할때 클라이언트에서 api호출하면 쿠키가 전달되지 않고있습니다. 클라이언트에서는 credentials: 'include'를 적용했고 const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/setting`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userSettingObj), }); if (response.ok) { const sessionUpdateInfo = await response.json(); await updateSession(sessionUpdateInfo); router.push('/'); } 서버에서는 const express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const usersRouter = require('./routes/users'); const db = require('./models'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공') }) .catch(console.error); passportConfig(); if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); } else { app.use(morgan('dev')); } app.use( cors({ origin: ['http://localhost:3000', 'whatisyourmbti.com', 'http://43.201.56.221'], // true or * // access-control-allow-origin가 true된다. --> 다른 도메인끼리 api 요청 credentials: true, // access-control-allow-credential가 true된다. --> 다른 도메인끼리 쿠키 전달 method: '*', }) ); // 프론트에서 보낸 정보를 req.body에 넣어준다. 순서 중요! app.use(express.json()); // json 형식으로 보냈을때 데이터 처리해줌 app.use(express.urlencoded({ extended: true })); // form submit으로 보냈을 때 데이터 처리해줌 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } })); app.use(passport.initialize()); app.use(passport.session()); app.use((req, res, next) => { console.log('Session ID:', req.sessionID); console.log('Cookies:', req.cookies); console.log('Signed Cookies:', req.signedCookies); next(); }); app.get('/', (req, res) => { res.send('hello express'); }); app.get('/api', (req, res) => { res.send('hello api'); }); app.use('/post', postRouter); app.use('/posts', postsRouter); app.use('/user', userRouter); app.use('/users', usersRouter); app.listen(80, () => { console.log('서버 실행 중!'); }); credentials: true, 쿠키옵션을 설정해주었는데 0|app | Session ID:---------------------------- U8DRuillNv2DBRmexmO1mZZ7fGJeWXCw 0|app | Cookies:------------------------------- [Object: null prototype] {} 0|app | Signed Cookies:------------------------ [Object: null prototype] {} 이런식으로 쿠키값이 전달되고 있지 않아서 유저 정보가 필요한(로그인 확인)로직에서 401에러가 떨어지게 됩니다. app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } })); 위부분들을 검색해보고 바꿔보기도 했는데, 잘안되더라구요. 클라이언트의 ip는 http://43.201.56.221입니다. 쿠키는 로그인 후 프론트서버에서 브라우저에 삽입해주고 있습니다. console.log(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login ---------------------login api`); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...credentials }), } ); // 프론트서버에서 백엔드서버의 로그인 토큰을 받아온것. 토큰은 문자열이라서 // cookie라이브러리로 객체로 만들어준다. let setCookie = authResponse.headers.get('Set-Cookie'); console.log('set-cookie', setCookie); if (setCookie) { const parsed = cookie.parse(setCookie); console.log(parsed, '---------------parsed cookie'); // 브론트서버에서 브라우저에 쿠키를 심어준다. // 프론트서버에 쿠키를 심으면 안된다! 왜냐하면 프론트서버는 서버라서 공용이다. // 여러 브라우저가 전부 프론트서버르 바라본다. 개인정보 유출 문제 발생할 수 있다. cookies().set('connect.sid', parsed['connect.sid'], parsed); // parsed = 나머지 옵션들 } console.log(authResponse, '--------------------------------authResponse'); let user = await authResponse.json(); console.log(user, '--------------------------------user'); // console.lo(authResponse); if (!authResponse.ok) { return null; } // return user object with the their profile data return { ...user, email: user.email, name: user.nickname, image: user.image, id: user.id, } } catch (err) { console.error('로그인 에러', err); } 그리고 cors에러는 발생하지 않고있습니다. 혹시 수정해야할 코드나, 참고해야할 부분이 있다면 알려주시면 감사하겠습니다.
