173만명의 커뮤니티!! 함께 토론해봐요.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요 강의 잘 수강하고 있습니다. django_components를 사용할 때 template 에서 {% component_js_dependencies %}로 js 로드시 해당 script를 async, defer로 로드할 수 있는 방법이 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 리액트랑 타입스크립트 강의 완강하고 강사님께 더 배우고 싶어서 찾아보다가 타사에 리액트 + next.js 강의가 있더라구요. 그런데 커리큘럼을 보니 리액트 부분은 제가 수강한 리액트 강의랑 거의 흡사한 것 같고 거기에 추가로 next.js 부분만 공부하고 싶은데 강사님이 7월 ~8월 중에 next.js 강의를 낸다고 하신 게 있어서요 ㅠ 혹시 next.js 강의가 늦게 나올까요 ㅠ? 미리 강사님의 리액트 + next.js 강의를 들어도 되나요? (현재 리액트 강의나 추후 나올 next.js 강의와 겹치는 부분은 없는지...등)
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
'Generating TypeScript Types' 강의에서 supabase.ts 생성할 때 나오는 코드 색상이 영상에서 나오는 색상하고 달라요. 저는 모두 흰색으로 나와서 가독성이 떨어지더라구요. 익스텐션이라던지 테마라던지 등등 구글링해서 나오는건 모두 건드려봤는데 바뀌지 않았습니다. 이건 어떻게 하면 되나요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git username을 먼저 정하고 gitHub에 가서 계정을 만들었는데 유저네임 작명 규정때문에 같은 유저네임을 사용하지 못했습니다. 이게 혹시 문제가 될까요? 이미 커밋에 작성자 정보를 입력하고 저장한 상태인데 어떻게 하면 좋을까요?
미해결
코드로 배우는 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) : 기초부터 실전까지
해결되었습니다
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
음수 끼리 더해 보고 싶어서 해봤습니다. 근데 결과가 0이 나와서 질문 드립니다. 혹시 숫자가 잘못 나왔나 해서 콘솔 로 확인 해봤는데 숫자는 우선 잘 된것 같습니다. 무엇이 문제인걸까요? -3 + -5 도 결과 값이 2 가 나옵니다. 계산할때 중괄호가 없어서 그런걸까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
질문: 1.ts-node로 이어나가도 괜찮을까요? 2. outdated 명령어 쳐보니 버전이 강의에서 한두개 추가설치했지만, 이제 빨간 글씨로 10개 정도 다 버전 업그레이드를 요구했습니다.제가 고쳐나가면서 나아가보면될지 궁금합니다. ㅡㅡㅡㅡㅡㅡㅡㅡ 상황: 몇주전 타입스크립트를 다른 강의로 시작했습니다.최근 환경설정에서 ts-node 사용시 오류가 계속 떠서 그 강의가 tsx 사용을 권장했고, tsx로 입문했습니다.그래서 ts-node로 잘돌아갈지 의문입니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
파일 저장 시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다. 라고 질문 올렸는데 다른 분이 답 주시고 강사님께서 답을 안 해주셔서 질문드립니다. 사진을 지워서 지난글을 봐주실 수 있나요 슬래쉬 두 번 쓰는거는 불편한데, 설정으로 어떻게 안 되는건가요? 줄바꿈 한거는 합쳐버리고, 한줄로 있던거는 나눠버립니다.
해결됨
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
우선순위 큐 강의를 재미있게 보았는데, 큐와 우선순위큐가 먼저 실행 되는것을 실행하는 차이말고는 똑같은것 같은데 구현 코드는 힙 자료구조를 사용 하시더라고요! 그렇다면 힙과 우선순위 큐가 비슷하고 우선 순위 큐가 큐랑 비슷하니까 힙과 큐도 비슷한건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
결제를 구현하는 중인데 여기 프로젝트에서 결제 과정이 로그인 한 후에 그 아이디로 포인트 충천 API를 날려서 포인트를 충전후 상세 페이지에서 결제버튼 클릭시 포인트가 충분하면 성공 포인트가 부족하면 실패 이런식으로 만들어져야 하는 건가요??
해결됨
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); } 제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요? 실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요? 만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
시간: 9:00 Q. ‘비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 “비밀번호를 입력하세요” 경고 메시지가 노출된다’ 를 테스트 할 때, 비밀번호가 입력하지 않은 상태인지 확인하는 부분은 없어도 되는 건가요?? 비밀번호를 입력하는 요소가 null 인지 확인하는 테스트는 없어도 되는 건가요??
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
Q1. 장바구니, 구매 버튼 클릭 시 해당 상품의 이름을 cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist) 상품 이름을 직접 입력하는데, (통합 테스트에서 모킹 데이터를 사용한다면 모킹 데이터는 직접 설정하기 때문에 가능하지만), 실제 api를 사용하면 첫번째 상품 데이터가 변경할 수도 있기 때문에 실패할 수도 있기 때문에 다르게 작성해야 하지 않을까요?? 질문 드립니다 Q2. 로그인을 커스텀 커맨드에서 설정해서 session을 사용해 설정해서 테스트할 때, 웹에서는 로그인 성공/실패 여부는 확인할 수 없는 것 아닌가요?? 로그인이 실패하게 되면 로그인 관련 테스트는 모두 실패하게 되는데 그냥 이 결과로 로그인 성공/실패 확인을 하는 건가요??
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
Q. cy.intercept()는 회원 가입 요청에 대한 성공/실패 응답을 모킹해서 받는데, 이 때 의도하는 코드는 1번이지만 응답이 정해져 있기 때문에 2번처럼 틀린 요청으로도 결과는 똑같이 나오게 될 거라고 생각됩니다. 실제 응답이 아니라 응답을 정해 놓고 전달하기 때문에 실제 동작과 다를 수도 있어서 이 부분은 '실패, 성공 시 문구 노출'이 나타나는 동작이 있다는 document 로만 이해해도 될까요?? 1 성공 데이터 요청 -> 성공 데이터 응답 실패 데이터 요청 -> 실패 데이터 응답 2 실패 데이터 요청 -> 성공 데이터 응답 성공 데이터 요청 -> 실패 데이터 응답
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
도커까지 진행했는데 제 깃허브에 따로 저장하지않고 진행하다가 하드가 고장나서 다 날려버렸네요 ... ㅜ 없으면 어쩔수 없지만.... 아 그리고 가상머신에서 우분투 설치해서 해도 될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(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;
해결됨
모던 자바스크립트 딥다이브 스터디
“49장. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축”에 “브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수도 있으나, 앞서 설명한 바와 같이 ESM을 사용하는 것은 문제가 있다.” 라는 구절이 있습니다. 하지만 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정하는 부분에 대한 구체적인 설명이 없어, 구글링을 통해 몇 가지 해결책을 찾아 시도해 보았지만 제가 제대로 이해하지 못하고 적용하지 못했는지 기대했던 대로 동작하지 않습니다. 혹시 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수 있는 방법을 알 수 있을까요?
