inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

배포하신 깃헙 auth.ts signOut 질문입니다

해결됨

Next + React Query로 SNS 서비스 만들기

https://github.com/ZeroCho/z-com/blob/master/src/auth.ts#L16 배포하신 깃헙에서 궁금한점이 생겨서 질문드립니다 1. signOut에서 백엔드로 로그아웃 요청만 보내고 authorize()처럼 쿠키값을 set해주지 않았으니 connect.sid는 남아있는게 맞나요? 2. next auth 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
andante 댓글 2 좋아요 0 조회수 207

[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

해결됨

[React 2부] 고급 주제와 훅

안녕하세요. 강사님! 학습 중에 궁금한 점이 생겼는데, 제가 이해하고 있는 내용이 맞는지 궁금해 질문 드립니다! const obj1 = { a: 1 }; const obj2 = { a: 1 }; const obj3 = obj1; console.log(obj1 === obj2); // false console.log(obj1 === obj3); // true 자바스크립트에서 객체나 배열을 비교할 때 기본적으로 참조를 비교하는 것으로 알고 있습니다. 즉, 1번에서 두 객체가 같은 값을 가지고 있으나 메모리 주소가 달라 false를 출력하고, 2번에선 같은 메모리 주소를 참조해 true를 출력하는 것으로 알고 있습니다 여기서부터 제가 궁금했던 내용입니다! 캐시된 filteredPosts를 사용해 렌더링하는 경우를 가정했을 때 : const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag]); filteredPosts는 useMemo를 통해 filterPosts 함수로 생성된 배열을 클로저 공간에 넣어두고, posts와 tag가 변경되지 않는다면 항상 똑같은 값을 FilteredPosts로 전달 => <FilteredPosts posts={filteredPosts} /> const FilteredPosts = MyReact.memo(({ posts }) => { ... } // FilteredPosts는 캐시된 filteredPosts를 memo 함수로 전달 => function memo(TargetComponent) { return (nextProps) => { ... const [prevValue, prevProps] = TargetComponenet.memorizedState; if (prevProps === nextProps) { return prevValue; } ... } } 그럼 여기 전달된 nextProps(캐시된 filteredProps)는 당연히 같은 메모리를 참조하니 깊은 비교 없이 참조 비교만으로도 비교가 가능하지 않나? 싶었습니다. filteredPosts는 결과적으로 useMemo로 캐시되어있고, 새로 생성된 배열이 아니니 메모리 주소가 동일해 prevValue가 리턴되지 않을까? 했는데 아니더라구요.. useMemo를 통해 filteredPosts 배열의 참조는 동일하게 유지되고 있는건 맞는데, { posts: filteredPosts } 이렇게 FilteredPosts 컴포넌트에 전달되는 props 객체가 매번 새로운 객체로 생성돼서 그런건가? 싶은데 이게 맞는지 궁금해서 질문 드립니다..

  • react
  • React-Context
  • react-hooks
  • react-router
  • react-component
고지민 댓글 1 좋아요 0 조회수 154

3차 y축으로 올라오는 갤러리제작

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

3차 y축으로 올라오는 갤러리제작에 관한 질문입니다 이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요 Concierge 글자가 올라오면서 이미지가 올라오고 두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는 이런건 안될까요?

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
김김김 댓글 2 좋아요 0 조회수 171

Execution failed for task ':app:checkDebugDuplicateClasses'. 에러 해결

미해결

따라하며 배우는 리액트 네이티브 기초

강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면 gradle.properties 파일에 아래 부분을 추가해보세요 android.useAndroidX=true android.enableJetifier=true

  • react
  • react-native
  • expo
mhlee 댓글 1 좋아요 0 조회수 357

저는 왜 EOFException이 아니라 SocketException이 발생할까요 ?

미해결

김영한의 실전 자바 - 고급 2편, I/O, 네트워크, 리플렉션

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 강의를 쭉 들으면서 ServerV3, V4를 키고 ClientV3,4 를 강제 종료시키면 영한님은 EOF 오류가 뜨는데 저는 Socket 오류가 발생합니다. 제가 잘못한건지 아니면 상황에 따라 다른건지 궁금합니다.

  • java
  • 네트워크
  • 객체지향
ppj2130 댓글 2 좋아요 1 조회수 336

form으로 put, patch, delete 요청이 안되는걸로 알고있습니다.

미해결

Next + React Query로 SNS 서비스 만들기

form으로 put, patch, delete 요청이 안되는걸로 알고있는데 그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
ChangJun.dev 댓글 1 좋아요 0 조회수 164

Putty에서 nginx를 vi로 수정할때 오류

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../ 에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가 요

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
김태훈 댓글 3 좋아요 0 조회수 325

EX1번문제

미해결

김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 영한쌤이랑 다르게 int sum= a + b + c; 을 생각못하고 리턴값으로 결과는 똑같이 얻었는데 영한쌤과 과정이 다르니 틀렸다고 봐야겠죠?.. 가능하다면 쌤이랑 다르게 int sum = a + b + c;를 작성하지 않은 것에 대한 단점도 알고 싶습니다ㅠㅠ 어렵네요..

  • java
  • 객체지향
whydoubleon 댓글 1 좋아요 0 조회수 136

mysql과 선생님의 깃허브 코드연결

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님께서 올리신 완성본 코드를 깃허브에서 다운받아서 결과를 보고싶은데, 지도상에 음식점들의 핀이 뜨지 않습니다 ㅠ 아마 sql상에 더미 데이터들이랑 연결이 안되어서 그런것같은데 지도상에 마커들이 뜨게 하려면 어떻게 해야할까요 도와주세요

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
김태훈 댓글 1 좋아요 0 조회수 206

동적인 데이터를 SSR로 처리할때 초기 로딩 속도에 관하여 질문드립니다!

해결됨

한 입 크기로 잘라먹는 Next.js

Next.js로 사전 렌더링을 하여 서버에서 html을 채워서 클라이언트에 응답해줄때 초기로딩 속도가 빨라진다는 개념은 이해가 됩니다. 다만, 제가 확인하고 싶은 부분은 다음과 같습니다. Next.js로 SSR을 구현할때 API 요청과 같이 서버에서 동적인 데이터를 통해 html을 채워서 응답하는 경우에는 요청마다 서버에서 JS를 실행해야 할 것입니다. 이 경우에 CSR보다 초기 로딩 속도가 빠르다고 장담할 수 있나요? (FCP, TTI 모두 어떤 상황에서든 우세할까요?)

  • react
  • typescript
  • next.js
TAESUN 댓글 2 좋아요 0 조회수 285

프로젝트 오픈 시

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 설명해주시는대로 따라서 받았는데 이렇게 받으니까 build.gradle이 없어서 그냥 프로젝트 오픈했거든요?? 이렇게 해도 되는건가요 ㅠㅠ?? 프로젝트 오픈해도 gradle같은건 없는데 ㅠㅠ

  • java
  • spring
  • mvc
  • spring-boot
soy 댓글 4 좋아요 0 조회수 316

nodemon 실행오류

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

[nodemon] 3.1.7 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: js,mjs,cjs,json [nodemon] starting node index.js [nodemon] app crashed - waiting for file changes before starting... 다음과 같은 오류가 발생하는데 어떻게 해결해야하나요 ㅠ

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
김태훈 댓글 2 좋아요 0 조회수 257

쿠키 저장이 되지 않습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

auth.ts에서 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) console.log(token) //쿠키 저장 res.set("Set-Cookie", cookie.serialize('token', token)); return res.json({user, token}); token은 잘 찍히고 요청 헤더에 포함되어 있는데 TypeError serialize 부분에서 에러가 뜨고 실제 응답 에러가 납니다.... 쿠키 저장이 안되는 것 같습니다. serialize가 undefine 되었다는데 위에 const token으로 제대로 선언되고 출력까지 잘 되는데 이유를 모르겠습니다...

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 258

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

아래 질문 관련입니다. server.ts origin 부분을 강사님처럼 다음과 같이 작성하면 header 오류가 납니다. const origin = process.env.ORIGIN; app.use(cors({ origin, credentials: true })) 근데 아래처럼 const origin을 다음과 같이 환경변수를 거치지 않고 명시하면 헤더 오류 대신 500 오류가 나면서 토큰이 생성되지 않습니다. (로그인 페이지에서 로그인 시) const origin = 'http://localhost:3000'; app.use(cors({ origin, credentials: true })) 서버에서 process.env.ORIGIN, process.env.JWT_SECRET을 찍어봤을땐 잘 나오는데... 이 이유로 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) 이 명령줄이 제대로 실행되지 않는 걸까 싶어 process.env.JWT_SECRET를 'super_secret'으로 바꿔봐도 똑같은 증상입니다. 확실하진 않지만 이 때문에 토큰 생성에 오류가 생겨서 500 에러가 뜨는 것인가 싶은데 어떻게 해결하면 좋을까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 615

스니펫 관련질문

미해결

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

이거 근데 log이렇게 치면 console.log(''); 이렇게 되야되는거 아닌가요? 이상하게 안되네요 console.log(); 이렇게 밖에 스니펫이 안되는데 '$1' 에서 '' 이부분은 왜 씹히는거죵?ㅠㅠ

  • HTML/CSS
  • javascript
  • 반응형-웹
  • tailwindcss
nonoa846 댓글 1 좋아요 0 조회수 159

26강 updateUser request id값이 안들어옵니다.

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

private final UserServiceV2 userService; jpa로 설정한 이후 putMapping에서 id값이 0으로만 들어옵니다. 코드는 json원시값보고싶어서 httpRequest 로 테스트한 상황입니다. (로그는 Raw JSON Body: {"id":0,"name":"333"}) db 데이터, 등록, 삭제 모두다 잘동작하고 id만 client에서 받아오질 못하는 것 같습니다. postman으로 json값 정상적으로 요청하면 작동도 잘되구요. UserServiceV1 인 jdbctemplate를 이용한 방식도 파라미터 정상적으로 넘어와서 잘동작합니다. 이유를 모르겠습니다.

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
wisdfire 댓글 3 좋아요 0 조회수 108

ppt 자료다운이 이상합니다.

미해결

2. 웹개발 코스 [JAVA 개발언어]

자료 다운받아 압축을 풀면 ppt가 아닌 이상한 파일들이 있습니다.

  • java
jinu0513 댓글 3 좋아요 0 조회수 136

querydsl 처음 설정 후 테스트코드 돌려보는데 오류 원인을 모르겠어요

미해결

실전! Querydsl

JPAQueryFactory queryFactory = new JPAQueryFactory(em); 부분에서 Cannot resolve constructor 'JPAQueryFactory(EntityManager)' 오류가 생기는데 원인을 모르겠어요 아래는 현재 설정입니다. 스프링 생성 build.gradle 소스 plugins { id 'java' id 'org.springframework.boot' version '3.3.5' id 'io.spring.dependency-management' version '1.1.6' //querydsl 추가 id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { toolchain { languageVersion = JavaLanguageVersion.of(17) } } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' //querydsl 추가 implementation 'com.querydsl:querydsl-jpa' annotationProcessor 'com.querydsl:querydsl-apt:5.0.0:jpa' implementation 'mysql:mysql-connector-java:8.0.33' // MySQL 드라이버 최신 버전 사용 implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0' // 쿼리 파라미터 로그 표시 (성능에 영향을 줄 수 있음) // runtimeOnly 'com.mysql:mysql-connector-j' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform-launcher' } tasks.named('test') { useJUnitPlatform() } //querydsl 추가 시작 def querydslDir = "$buildDir/generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } //querydsl 추가 끝 테스트코드 package study.querydsl; import com.querydsl.jpa.impl.JPAQueryFactory; import jakarta.persistence.EntityManager; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.transaction.annotation.Transactional; import study.querydsl.entity.Hello; @SpringBootTest @Transactional class QuerydslApplicationTests { @Autowired EntityManager em; @Test void contextLoads() { Hello hello = new Hello(); em.persist(hello); JPAQueryFactory queryFactory = new JPAQueryFactory(em); // QueryDSL 쿼리 테스트 } }

  • java
  • jpa
  • querydsl
  • spring
테렌 댓글 2 좋아요 0 조회수 759

animation이벤트 질문이요!

미해결

인터랙티브 웹 개발 제대로 시작하기

window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..! <script> const ballElem=document.querySelector('.ball'); window.addEventListener('click', function(){ ballElem.style.animation='ball-ani 1s 3 forwards'; }); ballElem.addEventListener('animationend',function(){ ballElem.classList.add('end'); }); ballElem.addEventListener('animationiteration',function(){ console.log('반복'); }); </script>

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
minisnake 댓글 1 좋아요 0 조회수 85

인기 태그

인프런 TOP Writers

주간 인기글