묻고 답해요
150만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결GraphQL: REST API를 대체할 기술
자료 관련 문의
안녕하세요 강사님 Netflix DGS 강의를 보고 우선 이 강의부터 수강하고자 찾아왔습니다다름이 아니라 팀원들에게 공유하면서 학습을 하고 싶은데 혹시 이 강의와 DGS 강의 ppt 자료가 있다면 조심스럽게 요청드려도 될까요? gyeongjae.h.dev@gmail.com DGS라는 걸 아예 인지도 못하고 있었는데 정말 오랜만에 신선한 느낌이라서 기분이 좋습니다 좋은 지식 공유 잘 습득하겠습니다 감사합니다 🙏
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
404에러 문의드립니다
버튼눌러서 게시글 조회하면 404에러뜨는데 뭐가 문제인지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
tailwindcss 오류관련 문의 드립니다 ㅠㅠ
버젼이 달라서인지.. CNA 했을 때tailwind.config.js 파일이 없었습니다.강의에서는 원래부터 존재하던데..그래서 어떻게어떻게 추가를 했는데.Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.라는 에러가 끝나지를 않네요 ㅠGPT한테 열심히 물어봤는데 도저히 해결이 안돼서 문의드립니다.밑은 제가 설정해둔 코드입니다.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx,html,css}", // 필요한 파일들 포함 "./app/**/*.{js,ts,jsx,tsx}", // Next.js의 `app` 폴더 추가 "./components/**/*.{js,ts,jsx,tsx}", // 컴포넌트 폴더 추가 ], theme: { extend: { colors: { 철수가좋아하는색깔: "#3498db", // 나만의 부트스트랩 만들기 영희가좋아하는색깔: "green", }, }, }, plugins: [], }; postcss.config.jsmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; globals.css/* @import "tailwindcss"; */ @tailwind base; @tailwind components; @tailwind utilities; 로 해도 안되고,@import "tailwindcss"; 도 안됩니다...
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
저도 tailwind.config.js 가 없네요..
이거 관련해서 한번 정리해주시면 좋을거같습니다. ㅠㅠ인터넷에서 찾아보고 gpt한테도 물어봤는데 해결방법을 못찾겠네요.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
숙제 문의드립니다
require 왜 오류가 나는지 알 수 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
2분 44초 질문
무슨말씀이신지 이해가 안가요.ㅠㅠ가운데정렬을 편안하게 해주려면 span 을 이용하는 이유가 와닿지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
homework에 관한 강의는없나용?
homework에 관한 강의는없나용?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
문의드립니다.
기존 수강자 새로운강의 쿠폰 발급 받을 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
버그 어떻게 고치는지 아시나요?
플레이그라운드 쓸때 저 상자가 계속 유지되고 없어지지 않습니다 ㅠㅠ방법있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
tailwind.config.js 설치가 안됐어요 ㅠ
Next.js 버전때문인지 tailwind.config.js가 설치가 안되고 posts.config.mjs가 설치가 됐는데 이게 맞나요 ,,?
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문있습니다 !
typescript 버전 코드를 보고 있는데 package.json에 module:common.js로 되어있는데 어떻게 Import 구문을 사용할 수 있는지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
accessToken 저장 방식에 대해 질문 드립니다.
zustand에 저장과 cookie 저장에 대해 보안적으로는 cookie가 더 안전하다고 들었습니다. xss 공격에는 HttpOnly를 통해 해결할 수 있지만 반환된 accessToken을 js로 접근하지 못하다 보니 저장을 할 수 없는 문제가 있지만secure을 통해 https에서만 요청가게 할 수 있으며, sameSite를 통해 csrf의 공격에 방어할 수 있다 해서 secure, sameSite를 사용해 accessToken을 쿠키에 저장하는게 더 좋은 방법이라 생각 했는데 어떤 방식을 주로 사용하나요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
앱권한설정 화면이후 api작동 (아이폰)
안녕하세요. 새로 올려주신 강의를 흥미롭게 듣고 있습니다. 저는 아이폰을 이용해서 테스트 중인데, 안드로이드와는 좀 다른 움직임이 있어서 질의드립니다. 권한 설정화면 Link되면 저희가 구성한 하이브리드 앱이 웹뷰로 더 이상 연결되지 않는것처럼 보입니다. 이 부분 어떻게 해결할수 있을까요?그리고 권한 설정화면으로 이동하여 권한을 수정한 후 제거하고 ( 해당 화면은 권한을 설정한다고 해서 사라지거나 하지 않습니다 ) expo로 돌아오면 active가 들어와야 하는데 그렇지 않습니다. 코드에 setInterval을 줬으니 뭔가 주기적으로 수행하지 않을까 싶어서 로그를 줘봤으나 전혀 구동하지 않았습니다. 여러가지 테스트를 해보았는데, 앱권한 설정페이지로 이동하는 쿼리인 openDeviceSystemForSettingSet을 호출하면 앱의 권한 화면이 Link되고, 그러면서 기존의 하이브리드 앱이 웹뷰로 연결되지 않는것 같습니다. 제 코드가 잘못되었나 싶어서 setInterval을 없애고 fetch의 순서를 바꿔봤습니다. openDeviceSystemForSettingSet을 맨뒤에 배치해봤을때는 모든 결과가 잘 들어왔습니다. 그러나 6-2와 같이 openDeviceSystemForSettingSet를 먼저 호출하고 이후에 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet의 fetch를 수행하려 하면 작동하지 않습니다. 인공지능에게 문의하니 상태 구독을 하라고 하여 아래와 같이 구독을 mobile의 index.tsx에 추가하였습니다. React.useEffect(() => { const subscription = AppState.addEventListener("change", (nextAppState) => { if (nextAppState === "active") { console.log("✅ 앱이 다시 활성화됨. WebView에 메시지 전송!"); webviewRef.current?.postMessage("APP_ACTIVE"); } }); 그리고 page.tsx에는 app이 active가 되면 이를 받아올수 있도록 함수를 구성하고 그 안에서 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet를 받아오도록 변경했습니다. useEffect(() => { const handleMessage = (event) => { if (event.data === "APP_ACTIVE") { console.log( "🔄 WebView에서 APP_ACTIVE 메시지 수신! fetchApp 다시 실행" ); checkPermissions(); } }; window.addEventListener("message", handleMessage); return () => { window.removeEventListener("message", handleMessage); }; }, []); const checkPermissions = async () => { try { console.log("📡 위치 권한 상태 확인 요청"); const result = await fetchApp({ query: "fetchDeviceLocationforPermissionSet", }); const status = result.data.fetchDeviceLocationforPermissionSet.status; webviewlog(` 위치 권한 상태: ${status}`); const appStateResult = await fetchApp({ query: "fetchDeviceSystemForAppStateSet", }); const isForeground = appStateResult.data.fetchDeviceSystemForAppStateSet.isForeground; webviewlog(` 앱 활성화 상태: ${isForeground}`); } catch (error) { console.error(" fetch 요청 실패:", error); } }; 이렇게 하니 앱이 활성화되면 이벤트 리스너를 통해 결과가 전달되어져 오기는 합니다.강의에서 해주셨던 setInterval설정이 훨씬 간편하지라 아이폰에서 구성하려면 어떻게 해야할지 어떤 이유로 이렇게 되는지 궁금하여 질의드립니다. 2. 그리고, 원두님이 안드로이드를 통해 보여주신 것과 같이 허용함을 다시 묻지 않는데 이런 설정을 별도로 추가해야 하는걸까요? 제가 뭔가 누락한 건지 모르겠습니다. 원두님은 관련코드를 구성하지 않으셔도 사용에 대한 질의가 나타나는데, 저의 경우는 권한 설정기능이 바로 띄워집니다. 일반적인 앱들을 사용하다보면 권한 허용 질의 이후(모달창??)에 허용을 누르고 , 권한설정을 한 후 지도로 들어가고 그렇게 구성되는데 그런 구성이 누락되어 , 웹뷰 연동이 안되는것일까
-
미해결DGS: NETFLIX가 스프링 부트로 대용량 트래픽을 처리하는 방법
LazyInitializationException JPA 오류 발생
안녕하세요. Burger님 Netflix-DGS 강의 잘 보고 있습니다. GraphQL 사용 시, Lazy 로딩 오류가 발생하는데요. AllOpen을 사용해서 Hibernate가 Kotlin에서 프록시객체를 생성할 수 있게 열어뒀음에도 불구하고 LazyInitializationException이 발생하고 있습니다.원인을 모르겠어서 질문 남깁니다. FetchType을 EAGER로 바꾸면 사실 단일 조회는 가능하나. 단순히 EAGER로 바꿔서 정상적으로 조회를 한다해도.. 이 방법이면 성능상 문제가 될 수 있는 가능성이 있을 것 같아서 LAZY 로딩으로 해결하고 싶습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
tailwindCss 버전 업그레이드로 인한 질문
안녕하세요! next.js 설치 완료후 package.json을 확인해보니테일윈드가 3.4.1 버전이 아닌 4.0.14 버전이 설치 되어있음을 확인했습니다.강의 내용과 다른점이 있어 node_modules , yarn lock 삭제후 버전 다운그레이드를 시도해보았지만 자꾸 에러가나서.. 테일윈드 독스를 찾아 새로운 버전을 적용시켰어요https://tailwindcss.com/docs/installation/framework-guides/nextjs 다만 기존 강의에서는 tailwind.config.js 에서 변수를 설정하는 법을 알려주셨는데..그 방법에 대해서는 해결방법을 찾지 못하였습니다. 나만의 변수를 만들어 다양한 컴포넌트에서 재사용하는 방법이 테일윈드의 강의의 쟁점이라고 생각해서. global.css에 변수를 만들어 컴포넌트 스타일에 적용시키는 방법으로 비슷하게는 진행해 보았는데이렇게 해도 되는 사항 일까요? 또한 강의 후반부에 @layer로 utilities를 만들어 스타일을 적용시키는 부분에서스타일 자체는 먹지만, 테일윈드 자체에서 제공해주는 반응형 명령어에는 적용이 안돼요 ㅠㅠ좋은 방법이 있을까요.....
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
학습한 내용 이미지와 코드를 블로그에 올려도 되나요??
학습한 내용 이미지와 코드를 블로그에 올려도 되나요??
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[JS 03-1-1] 스크롤-스크롤 실습 관련 질문입니다.
window.scrollTo({ top: 0, behavior: "smooth" }); 제 화면은 왜 부드럽게 스크롤 이동이 안되는걸까요? behavior 빠졌을 때와 차이가 없어보여요.. 사용 브라우저는 크롬입니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 수정 함수 바인딩이 안되는 것 같습니다.
import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지함수가 작동을 안하는 것인지updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
피그마 링크
안녕하세요 ~수업 듣기 시작하고 싸이월드 만들기 1탄에서 피그마가 나오는데 예제자료를 보면서 할수 있는 피그마 링크가 어디에 있는지요 ?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
padding 과 box-sizing 질문
14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?
주간 인기글
순위 정보를
불러오고 있어요