173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 효율적인 테스트를 위해 상태 관리는 상위 컴포넌트에 응집해서 관리하는것이 좋다고 하셨는데 컴포넌트가 캡슐화 되어있으면 서로 상호 작용하는 컴포넌트지만 동일한 상태 조회를 각 컴포넌트에서 독립적으로 하게되는 경우도 있을거 같습니다. 이런 경우는 테스트에 용이하도록 구현 코드를 수정해야하는지, 아니면 번거롭더라도 그대로 테스트 코드를 작성해야 하는지 궁금합니다. 애초에 컴포넌트 설계를 잘못했다고 판단해야 할까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
데이터는 어디에 저장이될까요? 도커컨테이너에 저장이되는걸까요? 만약에 이 강의를 완강하고 제 컴퓨터로 서버를 만들어 돌린다고했을때 보통 데이터는 어디에 저장하는걸 추천하시나요? 도커컨테이너에 저장 하드디스크에 저장하고 주기적으로 aws s3에 업로더해준다.
미해결
Next + React Query로 SNS 서비스 만들기
Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고 , 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식 으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. ) 주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. vercel를 통한 배포를 위해 설정을 하던 중 In which directory is your code located? ./ 이 부분에서 엔터를 눌러서 넘어가려 했는데 엔터를 누르자 Error: Your Team encountered an unknown problem. Please reach out to our support team for details. 이런 에러가 뜨면서 진행이 막히고 있습니다. 혹시 해결 방법을 알려 주실 수 있으신가요?
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
퀴즈 - 중복된 숫자 방지 조건문 (빈 객체 사용) const duplicateNumbers = {}; for (let number of myNumbers) { if (duplicateNumbers[number]) { return alert('중복된 숫자를 입력했습니다.'); } duplicateNumbers[number] = true; } >> 이게 정답일까요? 아직 수업순서대로는 객체를 안배운 상태여서ㅠㅠ for(let i =0; i<myNumbers.length; i++) { if(!myNumbers.includes(myNumbers[i])) { return alert("중복된 숫자를 입력했습니다."); } } 이렇게 해봤는데 자기를 포함한 상태여서 계속 true로 되서 중복 검사가 안됩니다ㅠ 6강 말고 7강을 먼저 듣고 6강을 들어야 될까요?
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
'특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다' 테스트 실행시 변경점이 있는 price를 '$4,045.00'과 같이 직접 입력하셨는데요. 이 부분을 formatPrice(809*4) 이런식으로 하면 formatPrice에 변경점이 생겼을 때도 테스트가 깨지지 않고 검증할 수 있고, 작성하기 더 쉬워보인다고 생각하는데요. 혹시 그렇게 하지 않은 이유가 따로 있을까요 ? (독립성을 보장한다던가..) 아래의 '특정 아이템의 수량이 1000개로 변경될 경우 "최대 999개 까지 가능합니다!"라고 경고 문구가 노출된다' 테스트의 cartValidationMessages.MAX_INPUT_VALUE 값도 마찬가지입니다 !!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
graphql-upload 버전 13.0.0으로 강의와 똑같이 맞춰줬는데도 에러가납니다 ㅠ_ㅠ 혹시 해결방안이있을까요? 계속 검색중인데 힘드네유.. 혹시나 제가 해결했다면 해결했다고 댓글달겠습니다 해결했다는 댓글이 없으면 계속해서 트라이중인거니 댓글로 도와주시면 너무 감사하겠습니다
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
혹시 +, -와 같은 기호는 textContent가 인식을 못하나요? 처음 입력 시 - 입력이 가능하도록 코드를 짜보려고 했는데 계산 시 문제는 없는데 result창에 기호가 뜨질 않네요
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요 1분 코딩님. 영상에 6:10에 zMove 변수의 값을 설정할 때 0 - 1 의 비율이 너무 작은 수 이기 때문에 * 1000 을 해주신다고 하셨는데요. houseElem 요소가 0 - 1000vw 만큼 이동해야 하기 때문에 * 1000을 해주신것이 아닌지 여쭙습니다. 만약 0 - 1 로 가능하다면 배수로 사용해야 한다고 생각이들고 0- 100 으로 가능하다면 %로 사용할 수 있지 않을까 하는 생각에 질문합니다. 실제로 값을 작게 사용했을 때 조금밖에 움직여지지 않는 현상을 테스트 해봤습니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 ㅎㅎ 강의 너무 잘 듣고있습니다. use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ 설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 , 그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내에서 mockData 를 id: 3 까지 만들고, useRef 초기값을 3 으로 주었는데, 이렇게되면 onCreat 가 처음으로 호출됐을 때 최초 생성된 일기가 id를 3으로 가지게되고(후위증감연산자로 그 다음 생성된 일기부터 id가 4로 생성됨), 이미 만들어져있는 3번일기랑 id값이 같아지게 됩니다. 그래서 최조 생성된 일기를 onUpdate 해주었을때 수정내용으로 바뀐 최초 생성된 일기, 수정내용으로 바뀐 3번일기 이렇게 똑같은 내용 으로 2개가 생기는 상황이 발생합니다. 따라서 useRef 초기값을 4 로 주는게 맞지않나 문의드립니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다. 다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ 이렇게해서 생성을 진행했구요. 잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요 npm error code EACCES 그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
저는 이전엔 윈도우에서 yarn이 아닌 npm을 통해 패키지를 설치해왔었습니다. 최근 맥으로 OS를 바꿨고 강사님이 알려주신대로 yarn을 설치를 해서 사용을 하려고 했으나 몇몇 다른 점 및 문제점이 생겼습니다. 첫째로 yarn init시에 강사님처럼 엔터를 치는 과정이 생략되고 바로 init이 완료되는가 하면 추가로 .yarn 폴더, .editorconfig, .pnp.cjs 등 여러 다른 파일들이 생성됨과 동시에 node_modules 폴더가 생성되지 않았습니다. 또한 package.json파일은 생성되었지만 package-lock.json 파일이 생성되지 않았습니다. 또한 yarn add express를 명령어로 입력하여 package.json 파일에 dependencies에 분명이 express가 추가가 되었고 2_express_server.js 파일에서 express를 require해와서 쓸 때도 자동완성도 잘 되었습니다. 근데 node 2_express_server.js 를 통해 서버를 실행해보면 express라는 모듈을 찾을 수 없다고 계속 나옵니다. 이게 yarn의 문제인지 아니면 그냥 버전의 차이때문에 설치하는 방법이 달라진건지 궁금합니다. 일단 현재 npm install을 통해 진행을 하곤 있지만 강사님께서 계속해서 yarn을 이용해 패키지를 설치하실 예정으로 보이시길래 웬만하면 저도 yarn으로 설치하면서 강사님을 따라하는게 더 좋을 것 같아 질문드립니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
시작은 프리캠프의 노션에서 내리다보면 피그마 바로가기가 있는데 링크를 타고 들어가면 파일을 열 수 없다고만 나옵니다. 어떻게 해야하나요?
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
(사진)
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
CRUD 실습 - 2 중 문의사항이 있어 작성합니다. 제가 실수로 이전 CREATE 에서 두번 실행하는 바람에 현재 제 DB에 데이터가 중복으로 들어갔습니다. 그리고 현재 UPDATE를 하였을 때 데이터가 한 건만 수정되는 것을 확인하였습니다. 원래대로라면 '김현수'라는 이름을 가진 데이터가 2건이기 때문에 2건 모두 바뀌어야 하는 거 아닐까요? 왜 1건만 변경되는 지 문의드립니다.
해결됨
Next.js 시작하기
const response = await axios.get(`http://localhost:4000/products/${id}`); 로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나 npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms 이라는 에러가 나옵니다. 이 파일들을 호출하는 이유가 무엇인가요..?
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 몇가지 의문이 있어 질문 드립니다. 올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데, className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요? getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요? 아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다. Header쪽에 <DrawerClose> <Logo/> </DrawerClose> 이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요. 혹시 useState를 사용하신 이유가 있을까요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
웹 애니메이션을 위한 GSAP 가이드 Part.02에 advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게 파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까 해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다. 혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
