묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ant icon 질문있습니다
import { GithubOutlined } from "@ant-design/icons"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; const Wrapper = styled.div` height: 80px; padding: 0px 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff4f4; `; const LoginWrapper = styled.div` display: flex; flex-direction: row; `; const LoginBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; const SignBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; margin-left: 10px; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; export default function LayoutHeader(): JSX.Element { const router = useRouter(); const onClickLogo = (): void => { void router.push("/boards/page"); }; const onClickLogin = (): void => { void router.push("/boards/login"); }; const onClickSign = (): void => { void router.push("/boards/sign"); }; return ( <Wrapper> <GithubOutlined style={{ fontSize: "50px" }} onClick={onClickLogo} /> <LoginWrapper> <LoginBtn onClick={onClickLogin}>로그인</LoginBtn> <SignBtn onClick={onClickSign}>회원가입</SignBtn> </LoginWrapper> </Wrapper> ); }다음과 같이 코드를 작성했을때 다음과 같은 에러 메시지가 나오는데 rev 에 어떤 속성을 줘야되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
버전 관리에 대한 궁금증이 있습니다.
react가 18버전으로 업그레이드 되었지만 실무에서는 안전한 17버전을 쓰고 next는 12.1.0 버전 react는 17.0.2 버전을 쓴다고 하셨는데, 이러한 정보들은 어디서 얻을 수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
비밀번호 수정 기능에 관해 궁금한 점이 있습니다.
마이페이지에서 비밀번호 수정 기능을 구현 중에 있습니다.현재 비밀번호와 새로운 비밀번호를 입력하고 뮤테이션을 날릴 때에는 새로운 비밀번호만 넣어서 저장을 하는 것으로 이해를 했습니다. 기존 비밀번호의 체크는 백엔드에서 이루어지는 과정이 따로 없는 것 같아서요. 제가 가볍게 생각해보기로는 loginUser api를 활용해서 체크를 해야하나 싶은데요, 현재 비밀번호 체크 로직이 이 과정에서 구현 가능한지 아니면 추가로 다른 기능이 있어야 가능한건지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파일 이동을 윈도우에서 사용법도 알고 싶습니다
우분투와 맥북 기준 말고윈도우에서는Alt -alt shift -이 두가지를 어떻게 사용 하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchPointTransactionsOfBuying API에서 특정 정보만 불러와지지 않습니다.
안녕하세요 강사님.마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다.fetchPointTransactionsOfBuying API로 구매내역을 조회하는데 판매자의 이름이 불러와지지 않습니다.. const FETCH_POINT_TRANSACTIONS_OF_BUYING = gql` query fetchPointTransactionsOfBuying($search: String, $page: Int) { fetchPointTransactionsOfBuying(search: $search, page: $page) { _id impUid amount balance status statusDetail useditem { _id name price seller { _id # name # email } buyer { _id name email } soldAt } createdAt } } `;useditem.seller._id까지는 조회가 되는데 name과 email은 조회가 되지않습니다.혹시나 해서 buyer 정보를 불러왔는데 buyer도 _id만 조회가 되고 name과 email는 조회가 되지 않습니다.위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
서버 배포 후 생기는 보안오류 문제
이렇게 pm2로 client, server를 둘다 실행 시켰고, 맨 처음 client만 실행했을 때는 포트 80번이 3000번으로 잘 우회되어 보여졌는데 서버 실행 부분을 따라하면서 pm2로 서버를 실행시킨 후 부터 보안오류가 떠서 사이트 접근이 막혔습니다..이러한 보안 오류가 떴습니다. 이후, EC2 인스턴스 퍼블릭 IPv4 DNS주소로 들어가기만 하면 저런 경고 사이트가 뜹니다.ㅠㅠ어떻게 해결할 수 있을까요?..아래에 작성한 코드 첨부 했습니다. server package.json 파일의 scripts 부분 코드 입니다. "scripts": { "start": "ts-node src/server.ts", "start:production": "env-cmd -f .env.production ts-node ./src/server.ts", "dev": "env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts", "test": "echo \"Error: no test specified\" && exit 1", "typeorm": "typeorm-ts-node-commonjs" }, server의 .env.production 파일입니다. (token시크릿 키는 제외시킨 부분)PORT=4000 NODE_ENV=production APP_URL=http://ec2-54-81-196-163.compute-1.amazonaws.com:4000 ORIGIN=http://ec2-54-81-196-163.compute-1.amazonaws.com 추가적으로, pdf 파일에는 백엔드 서버 실행 다음 부분에 백엔드 서버와 데이터 베이스 도커를 통해 연결하기 파트가 있던데 해당 부분은 영상 제작에서 제외시키신 건가요? 아니면 배포 영상 쪽 말고 다른 영상에서 찍으신거면 어떤 영상에서 확인 가능한지 알려주시면 감사하겠습니다..!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
상태관리 질문 있습니다!
안녕하세요 용주님swr 대신에 React-query랑 Recoil로 상태관리를 하고 있는데, map에 대한 data를 setMapInfo에 저장하고 있고, Markers에서 mapInfo에 대한 값을 useRecoilValue로 가져오고 있는 상황입니다. const [mapInfo, setMapInfo] = useRecoilState(mapState) const initializeMap = () => { const mapOptions = { center: new window.naver.maps.LatLng(...initialCenter), zoom: initialZoom, minZoom: 9, scaleContorl: false, mapDataControl: false, logoControlOptions: { position: naver.maps.Position.BOTTOM_LEFT, }, } let map = new window.naver.maps.Map(mapId, mapOptions) mapRef.current = map setMapInfo(map) } 그런데 계속 아래와 같이 Type error가 발생하고 있는 상황입니다. 어떤 문제 때문에 발생하는지 알 수 있을까요? 수업과 무관한 질문이여서 죄송합니다! ㅜ참고로 @types/navermaps : 3.6.5 버전입니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제
infor_box를 css에서 인식?을 못하는데 html 어디에 문제가 있는걸까요?ㅠㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
husky 설치과정을 잘 모르겠습니다
영상에 나오는 것 처럼 따라하게 되면 npx husky install 부분에서 다음과 같은 오류가 나오게 되고 자료 집에 주신것처럼 husky ver4로 할 때 package.json 설정한 후에 어떻게 해야 될지 잘 모르겠습니다
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
swr에 대한 질문입니다. (용어 관련)
안녕하세요용어에 대한 이해 차원에서 질문드립니다.useMap이나 useStore 훅에서 map이나 store에 대한 정보를 전역상태로 관리한다라고 표현하시는데요. 이 부분에 대한 질문입니다.제가 알고 이해하고 있는 바를 먼저 말씀드리면, SWR은 같은 키값로 받아온 값은 다시 요청하지않고 기존의 캐싱된 값을 반환하는 것으로 알고 있습니다. 그래서 같은 키값으로 요청을 하게 되면 결국 캐싱된 값을 사용하게 되는 것이구요. 이러한 과정을 전역상태로 관리한다라고 표현하시는 것으로 이해했는데 맞을까요??[참고] SWR은 데이터의 효율적인 로딩과 캐싱을 위한 라이브러리로서 주로 서버 상태 관리와 데이터 동기화 측면에서 활용되는것이기에 전역상태 관리라고 하면 약간의 혼란을 야기하는 면이 없지 않아 있는 것 같습니다.(redux나 기타 다른 client side에 대한 전역상태 관리와 비교하여...) → 이 부분은 개인적인 생각이기에 참고만 해주셔도 괜찮을거 같습니다. 😅좋은 강의 감사합니다. 🙇🏻
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생해요!
git push origin master 입력시 위와 같은 오류가 나옵니다..! 확인부탁드립니다ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드자료 어디있나요? 매번 없네요.
이 강의에 불만이 한두개가 아닌 사람입니다.훈훈한 javaScript 타이머 만드는 부분 듣고있는데 제가 코드를 잘못 썼는지 작동이 안되는데요.코드를 비교해 보고싶어도 코드만 따로 올린게 없는 건지, 제가 못찾는건지 모르곘네요.만약 코드만 따로 올려놓은게 없다면 인강 처음부터 돌려보면서 하나하나 비교해야 하는건가요?심지어 html 코드자료 올려놓은거 복사해서 붙여넣었더니 class 이름이 강의랑 달라서 어이가 없었네요.자료좀 똑바로 올려주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
HTML 예치금 충전표
안녕하세요! 열심히 강의 듣고 있는데 HTML 수업에서 예치금 충전표 관련해서 따로 내용이 없는데 노션에는 나오더라구여! 예치금 충전표 관련 강의는 어디있는건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
mysql의 다른 schema(database) 를 참조하는 경우에는 어떻게 ...
시퀄라이즈로 모델 구성시 하나의 database 를 참조하는 방식인데요 서브쿼리로 다른 database(mysql 의 schema)의 테이블을 참조하는 경우에는 다음과 같이 query() function으로 풀어서 요청하기도 하는가요..? db.sequelize.query('select a.name, b.score from schemaA.Users a Left join schemaB.Score B on a.userid=b.userid')
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
swagger 사용
강의에서 제공해주시는 swagger를 사용하여 axios, rest-api로 게시글 post를 테스트 하고 싶습니다. 어떠한 url로 axios.post() 안에 작성해야할 지 모르겠습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-02-graphql-mutation
안녕하세요 강의 잘 듣고있습니다.04-02-graphql-mutaion/index.js부분에서 이부분 이유에 대해서 잘 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux 상태값 문의드립니다
진도가 잘 안나가네요아직 redux에서 헤매고 있습니다. 페이지 이동 시 버튼을 통해 이동 시에는 state 값이 유지가 되는데 직접 localhost:3060/profile 를 타이핑해서 들어가게 되면 상태값이 유지가 되지 않습니다.원래 그런걸까요..?<Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item> <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item> 유지가 되게 해주려면 어떤 방식으로 가져가야 할까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 24 유효성 검사
섹션 24 에서 빈값 처리를 구현하는것을 보여주셨는데요.html5 에서 제공하는 유효성 검사 <input type="text" required />위와같이 사용하는것과의 차이점이 뭘까요 ??
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
react-netflix-clone 작성 후 github에 배포 후 브라우저 접속 시 콘솔 에러입니다.
https://metlin-72.github.io/react-netflix/ 접속 시 아래와 같이 에러가 납니다.===========================================================metlin-72.github.io/:1 GET https://metlin-72.github.io/static/js/main.5bcb49d4.js net::ERR_ABORTED 404metlin-72.github.io/:1 GET https://metlin-72.github.io/static/css/main.10fc3cf1.css net::ERR_ABORTED 404manifest.json:1 GET https://metlin-72.github.io/manifest.json 404manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.===========================================================뭘까요? 여러번 반복해서 똑같이 따라했는데 안되네요.도움 부탁드립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 배포시 빌드 안되는 문제
ec2 우분투에서 npm run build:production 명령어를 입력하면,> client@0.1.0 build:production> env-cmd -f .env.production react-scripts buildCreating an optimized production build...이 상태에서 더 이상 진행되지 않고 멈춰있습니다.ctrl+c로 중단했다가 다시 빌드해봐도 동일한데 어떻게 해결할 수 있을까요?