묻고 답해요

수업 ppt 자료 받고 싶습니다

해결됨

팀 개발을 위한 Git, GitHub 입문

안녕하세요 강사님 강의 잘 듣고 있습니다! 중간중간 복습용으로 강의 ppt를 받고 싶습니다 siksik2259@naver.com 이 메일로 보내주시면 감사하겠습니다!

• git
• github
• 버전관리시스템

테스트 실행이 안되는 문제..

미해결

2시간으로 끝내는 프론트엔드 테스트 기본기

공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument() 를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요? 구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다. 노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..

• react
• jest
• 소프트웨어-테스트
• Cypress
• storybook
• chatgpt

강의자료 부탁드립니다!

해결됨

팀 개발을 위한 Git, GitHub 입문

수업 이해가 잘되어서 강의자료보고 나중에 다시 깃을 쓸 때, 참고하고싶습니다!! n9805h@naver.com 입니다!!

• git
• github
• 버전관리시스템

리스트 번호 클릭시 current가 항상 0입니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션 3. 리액트와 API서버 통신 - 목록처리(1) 학습중인데요. serverData를 console.log로 찍어보면 current가 항상 0입니다. 어디서 확인해야할까요?

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

productRepository.selectList 호출시 이미지 리스트를 List객체로 반환되는 방법을 알고 싶습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

productRepository.selectList 호출시 이미지 리스트를 List객체로 반환되는 방법을 알고 싶습니다. 아래의 코드를 보면 이미지리스트는 한개(pi.ord=0)만 가져오는데요. imageList의 모든값이 List객체에 담겨 Page<Object[]>에 포함되는 방법을 알고 싶습니다. Page<Object[]> result = productRepository.selectList(pageable); @Query("select p, pi from Product p left join p.imageList pi where pi.ord = 0 and p.delFlag = false") Page<Object[]> selectList(Pageable pageable);

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

slack 초대 부탁 드립니다~

해결됨

코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

kjh950601@gmail.com 입니다. 감사합니다.

• git
• github
• 버전관리시스템

mocking과 spy함수가 헷갈립니다.

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

mocking과 spy함수가 조금 헷갈립니다. 아래와 같이 정리하면 될까요? - spy 함수 : 빈 함수인데, vitest에서 이 함수를 감지하고 있고 함수가 call 되었는지, 인자는 무엇이었는지 검증하는 가짜 함수. - mocking : 종속성이 있는 라이브러리를 복사해두고, 그 중 사용해야 할 함수나 기능을 spy 함수로 대체하여 call 했는지 검사할 수 있는 프로세스. 그러면 mocking 자체는 spy 함수 없이 사용하는 것은 의미가 없다고 보면 될까요?

• javascript
• react
• 소프트웨어-테스트
• vitest

로그인 버튼 클릭시 500에러 발생

미해결

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

아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 500에러가 발생합니다. 9090 서버 포트는 잘 켜져있다고 뜨고, 코드 올리겠습니다. <auth.ts> import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import KakaoProvider from "next-auth/providers/kakao"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { // credentials 안에 id창에서 입력하는 정보다 담겨있음 const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, //next-auth의 credentials에는 username, password로 고정되어 있어서 이를 바꿔줌 }), }); //로그인 실패시 if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), //kakao로그인을 사용할때 // KakaoProvider(), ], }); <LoginModal.tsx> "use client"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; export default function LoginModal() { const [id, setId] = useState(""); const [password, setPassword] = useState(""); const [message, setMessage] = useState(""); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(""); try { await signIn("credentials", { username: id, password, redirect: false, }); //kakao, naver로 바꿀 수 있음 //client 일때는 next-auth/react의 signIn을 사용 //server 일때는 @/auth의 signIn을 사용 router.replace("/home"); } catch (error) { console.log(error); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } <middleware.ts> export { auth as middleware } from "./auth"; export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; <route.ts> export { GET, POST } from "@/auth"; 에러 내용 : TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor at reqWithEnvURL (webpack-internal:///(rsc)/./node_modules/next-auth/lib/env.js:15:12) at httpHandler (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:139:139) at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63815 at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/server/lib/trace/tracer.js:133:36 at NoopContextManager.with (/Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062) 너무 길어서 다 올릴수는 없네요 에러내용을

• react
• next.js
• react-query
• next-auth
• msw

afterlogin beforelogin 로그인 분기처리 질문

미해결

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

안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지?? 2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.

• react
• next.js
• react-query
• next-auth
• msw

MacOs, PostgreSQL16 설치, pgAdmin 4에서 connection 오류

미해결

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

비번 확실히 틀리지 않았는데 계속 오류 뜨길래, 완전 삭제후 다시 설치해서 비번 쉬운걸로 다시 설정하고 입력해도 계속 비번오류 뜹니다.

• react
• next.js
• react-query
• next-auth
• msw

chilrdren, modal의 보여지는 원리가 제가 이해한 것이 맞을까요?

미해결

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

안녕하세요 제로초님. 인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저 <Link href='/i/flow/signup' className={styles.signup}> 를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx 에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에 /i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?

• react
• next.js
• react-query
• next-auth
• msw

왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

/src/.env 파일에 VITE_SOME_KEY = 123 이렇게 설정하고, App.jsx에 function App() { return( <> {import.meta.env.VITE_SOME_KEY} <Counter/> </> ) } export default App; 이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..

• HTML/CSS
• javascript
• react
• node.js
• chatgpt

2-3 진행 중 에러 발생

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

2-3 강의 중 12분 쯤에 Send를 누르면 200 OK가 떠야한다고 하셨는데 저는 500 에러가 발생합니다! package com.jyujyu.review.api; import com.jyujyu.review.service.TestService; import lombok.AllArgsConstructor; import lombok.Getter; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @AllArgsConstructor @RestController public class TestEntityApi { private final TestService testService; @PostMapping("/test/entity/create") public void createTestEntity( @RequestBody CreateTestEntityRequest request ) { testService.create(request.getName(), request.getAge()); } @AllArgsConstructor @Getter public static class CreateTestEntityRequest { private final String name; private final Integer age; } } package com.jyujyu.review.api; import com.jyujyu.review.service.TestService; import lombok.AllArgsConstructor; import lombok.Getter; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @AllArgsConstructor @RestController public class TestEntityApi { private final TestService testService; @PostMapping("/test/entity/create") public void createTestEntity( @RequestBody CreateTestEntityRequest request ) { testService.create(request.getName(), request.getAge()); } @AllArgsConstructor @Getter public static class CreateTestEntityRequest { private final String name; private final Integer age; } } package com.jyujyu.review.repository; import com.jyujyu.review.model.TestEntity; import org.springframework.data.jpa.repository.JpaRepository; public interface TestRepository extends JpaRepository<TestEntity, Long> { // Long -> TestEntity에 @Id가 있는 필드의 자료형을 작성한다. } package com.jyujyu.review.model; import jakarta.persistence.*; import lombok.Getter; @Getter @Table(name = "test") @Entity public class TestEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; public TestEntity(String name, Integer age) { this.name = name; this.age = age; } public TestEntity() { } public void changeNameAndAge(String name, Integer age) { this.name = name; this.age = age; } } plugins { id 'java' id 'org.springframework.boot' version '3.2.2' id 'io.spring.dependency-management' version '1.1.4' } group = 'com.jyujyu' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } repositories { mavenCentral() } configurations { compileOnly { extendsFrom annotationProcessor } } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' testImplementation 'org.springframework.boot:spring-boot-starter-test' compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' runtimeOnly 'com.h2database:h2' } tasks.named('test') { useJUnitPlatform() } server.port=8081 spring.h2.console.enabled=true spring.h2.console.path=/h2-console spring.h2.console.settings.web-allow-others=true spring.datasource.driver-class-name=org.h2.Driver spring.datasource.url=jdbc:h2:mem:rss spring.datasource.username=sa spring.jpa.hibernate.ddl-auto=create spring.jpa.show-sql=true 알려주신대로 코드를 작성하고 포스트맨에서 Send를 눌러도 500 Internal Server:Error 라고 뜨네요 ㅠ 원인을 찾아봐도 안보여서 여쭙습니다..! 참고로 포트는 8081이 맞습니다 혹시 파일 필요하실까봐 링크 첨부했습니다 https://drive.google.com/file/d/1W65YQNY5rOGjWuqr-ntff7_QuTWz4eDw/view?usp=sharing

• spring
• git
• docker
• spring-boot
• jpa
• github

홈 화면 화살표 버튼 눌렀을때 1월에서 2월로 안 가고 3월로 갑니다 나머지 달은 잘 작동합니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary

• javascript
• react
• node.js

리액트 셀렉트 박스 질문드려요

미해결

import React, { useState } from 'react'; import { Button } from "../../ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "../../ui/dialog"; import { Input } from "../../ui/input"; import SelectBox from "./SelectBox"; function UserRegistrationButton() { const [id, setId] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [ip, setIp] = useState(''); const [selectedAuthority, setSelectedAuthority] = useState(""); const items = [ { value: '1', label: '일반' }, { value: '2', label: '마스터' }, ]; const handleDataChange = (newData) => { setSelectedAuthority(newData); }; const handleSubmit = () => { console.log({ id, name, password, confirmPassword, ip, selectedAuthority }); }; return ( <Dialog> <DialogTrigger asChild> <Button className="w-full">사용자 등록</Button> </DialogTrigger> <DialogContent className="w-full max-w-2xl"> <DialogHeader> <DialogTitle className="text-variant-h4-bold">사용자 등록</DialogTitle> </DialogHeader> <div className="grid gap-5 py-3"> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 아이디 </div> <Input id="userId" className="col-span-8" value={id} onChange={e => setId(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 이름 </div> <Input id="name" className="col-span-8" value={name} onChange={e => setName(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 </div> <Input id="password" className="col-span-8" type="password" value={password} onChange={e => setPassword(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 확인 </div> <Input id="confirmPassword" className="col-span-8" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 권한 </div> <SelectBox className="col-span-8" items={items} onDataChange={handleDataChange} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 접속 IP </div> <Input id="IP" className="col-span-8" value={ip} onChange={e => setIp(e.target.value)} /> </div> </div> </div> <DialogFooter> <div className='flex justify-center gap-5'> <DialogClose asChild> <Button onClick={handleSubmit} size="xxl">등록</Button> </DialogClose> <DialogClose asChild> <Button variant="secondary" size="xxl">취소</Button> </DialogClose> </div> </DialogFooter> </DialogContent> </Dialog> ); } export default UserRegistrationButton; import React, { useState, useEffect } from 'react'; import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, } from '../../ui/select'; interface SelectBoxProps { className?: string; items: { value: string; label: string }[]; onDataChange: any; } const SelectBox: React.FC<SelectBoxProps> = ({ className, items, onDataChange }) => { const [selectedValue, setSelectedValue] = useState(""); const sendDataToParent = (payload) => { onDataChange(payload); console.log(payload, selectedValue) }; return ( <Select> <SelectTrigger className={className}> <SelectValue placeholder="권한을 선택하세요." /> </SelectTrigger> <SelectContent> {items.map(item => ( <SelectItem key={item.value} value={item.value} onClick={() => sendDataToParent(item.label)}> {item.label} </SelectItem> ))} </SelectContent> </Select> ); }; export default SelectBox; 제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요 셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요

• react

SPA, MPA, 리액트 Hooks 등의 개념 어디서 참고하시나요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.

• javascript
• react
• node.js

로고가 안보여요

해결됨

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

로고가 안보여서 여기저기 파일 들쑤셔보니깐 오류문구가 뜨는걸 발견했습니다. 이게 로고가 안보이는 이유인지는 잘 모르겠는데 오류가 보이니 고치고 싶은데 어떻게 고치는지 모르겠습니다. gpt도 유용한 정보를 안주네요 허허...

• 블로그
• github

강의자료부탁드립니다

해결됨

팀 개발을 위한 Git, GitHub 입문

강의 잘 보겠습니다 강의자료 부탁드립니다 whdudgms123@naver.com

• git
• github
• 버전관리시스템

웹사이트 ip주소 확인 어떻게 하는지 질문 드립니다.

해결됨

포트폴리오 초간단 배포하기

안녕하세요 강의 듣고 제가 직접 실습 해본 것 관련해서 질문 드립니다. http://raw.githack.com 으로 호스팅을 해봤는데요, 여기로 호스팅을 한 웹 사이트의 ip주소는 어떻게 확인할 수 있나요?

• linux
• github
• nginx

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

미해결

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

제가 이해한 바가 맞는지 질문드립니다. 질문1. 마커를 찍을 시: 1. 주소를 좌표로 변환 2. 해당 좌표를 마커로 지도에 표시 의 처리 순서가 보장되어야 하므로, async await를 이용한 비동기처리를 해준 것이 맞나요? 질문 2. 비동기처리를 해주기 전에도 마커는 잘 찍혔는데, 그 말은 즉 주소를 좌표로 변환하고-> 좌표를 마커로 표시하는 순서로 코드가 실행되었다는 것 아닌가요? 그렇다면 api가 비동기적으로 이루어진다는 말이 잘 와닿지 않아서 질문드립니다. 감사합니다!

• HTML/CSS
• javascript
• aws
• git
• mysql
• rest-api
• github