173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Vue 3 시작하기
강사님 강의 잘 듣고 있습니다! 다음 강의를 들으려고 하는데요 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 이 강의는 이제 쿠폰이 제공되지 않는건가요? 양식을 기입했는데 쿠폰이 모두 소진됐다고 떠서요!
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5강까지는 문제없이 보였는데 6강부터 수파베이스 관련된 마지막 강의까지 화면이 검정색으로 아무것도 안보이는데 혹시 저만그런건가요?? 이런적이 처음이라 어떻게 해야할지 모르겠어요 수파베이스 다음 강의부터는 또 잘 나오는거 같아요 지금 그냥 건너뛰고 뒤에 강의 듣고있는데 또 비슷한 현상이 나타나네요 ;;;;;;;; 화면이 까맣게 안나오고 목소리만 들려요,,,
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
강사님 수업 정말 잘 듣고 있습니다. 단순한 궁금증이 생겨 문의드립니다. Local Storage는 어디에 있는 걸까요? 어떤 저장소를 사용하는 것인지 알고 싶네요
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
17강에서 class도 함수로 인식한다 라고 하셨고 포맷도 함수와 같다고 생각되는데, 어떻게 구별해서 사용해야 하나요? 언제 클래스를 써야하고, 언제 함수를 써야하는지가 잘 인식되지 않아서요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ModuleNotFoundError: No module named 'distutils' 이런 에러가납니다. 구글링해보면 파이썬 버전관련해서 얘기를하던데.. 갑자기 파이썬이 튀어나오니까 당황스럽습니다 ㅜㅜ 풀 에러코드는 다음과 같습니다. $ docker-compose build Traceback (most recent call last): File "/usr/bin/docker-compose", line 33, in <module> sys.exit(load_entry_point('docker-compose==1.29.2', 'console_scripts', 'docker-compose')()) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/bin/docker-compose", line 25, in importlib_load_entry_point return next(matches).load() ^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/importlib/metadata/__init__.py", line 205, in load module = import_module(match.group('module')) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/importlib/__init__.py", line 90, in import_module return _bootstrap._gcd_import(name[level:], package, level) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "<frozen importlib._bootstrap>", line 1387, in _gcd_import File "<frozen importlib._bootstrap>", line 1360, in _find_and_load File "<frozen importlib._bootstrap>", line 1331, in _find_and_load_unlocked File "<frozen importlib._bootstrap>", line 935, in _load_unlocked File "<frozen importlib._bootstrap_external>", line 995, in exec_module File "<frozen importlib._bootstrap>", line 488, in _call_with_frames_removed File "/usr/lib/python3/dist-packages/compose/cli/main.py", line 9, in <module> from distutils.spawn import find_executable ModuleNotFoundError: No module named 'distutils' 다음은 제가 작성한 docker-compose.yaml입니다. # docker-compose.yaml version: '3.7' services: my-backend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker my-database: image: mysql:latest environment: MYSQL_DATABASE: 'mydocker' MYSQL_ROOT_PASSWORD: 'root' ports: - 3306:3306 혹시 고수님들 이 문제에대한것을 알고계신다면 답변주세요.. 혹시나 제가 해결했을 경우 댓글에 해결완료라고 제가 적겠습니다.. 도움이 필요합니다.. 오늘 하루종일 mysql 로컬 연결 에러와, 지금 이 에러에 강의진도를 못나가니 심신미약상태가 되어버렸네요..
미해결
Next + React Query로 SNS 서비스 만들기
Next.js는 라이브러리에서 보내는 요청까지 캐싱해버리는데, export const dynamic = 'force-dynamic' 해당 문구를 page.tsx에 넣어주면 해당 페이지에서 보내는 모든 요청을 캐싱하지 않음 . => export const dynamic = 'force-dynamic'를 적용한 page.tsx 는 써드파티 라이브러리의 백엔드 요청 캐싱을 무시한다. 또한, 모든 요청을 캐싱하지 않기 때문에 react query나 fetch 함수의 요청도 모두 캐싱을 하지 않는다. 라고 이해했는데 잘 이해한 것인지 모르겠어서 질문 올리게 되었습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
페이지 이동후 url에 상품 id도 잘출력되고 graphql에 조회해봐도 제대로 조회가되는데 vscode로 실행하면 variables에서 null값이 출력되는데 아무리 찾아봐도 어디가 문제인지 몰라서 질문드립니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
일단 현재 라우팅수업 진행중입니다! 매 섹션 강의를 다 듣고나서 해당섹션 학습자료 복습 후 퀴즈와 포트폴리오 과제실습을 진행하는데 퀴즈와 포트폴리오를 진행할때마다 배웠던 코드구동원리는 이해는 했지만 실습할때마다 코드구성이 정확히 기억나지않아서 매번 이전 자료를 보면서 해당코드는 따라치고 조립하는 경향이있는데 이런식으로 공부해도 되는지 의구심이 들어서 질문드려요 가급적이면 코드구성도 다 외워서 아무것도 보지않고 해내는게 제일 바람직할까요?
해결됨
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Vue에서 router link 사용시 같은 url 이면 새로고침이 안되는데 어떻해야죠
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
카운터만드는 부분은 이해가 갔는데 토글 만드는 부분에서 이런식으로 현재 state를 뒤집는것과 무슨 차이가 있는 건지 잘 이해가 가지 않습니다. const onToggleModal = () => { setIsOpen((perv) => !prev); }; const onToggleModal = () => { setIsOpen(!isOpen); };
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
처음에 터미널 열어서 아무 블로그에서 나오는대로 설치하고 로그인도하고 잘했던거같아요. 근데 강의 따라하면서 dbeaver-ce에 연결이안되서 내가 설치를 잘못했나 싶어서 검색해서 mysql 지웠습니다. 근데 리눅수 우분투 App Center에 mysql치면 나오는게있길래 mysql-shell mysql-server 두개를 설치후, mysql -u root -p 를하면 ERROR 2002 (HY000): Can't connect to local server through socket '/run/mysqld/mysqld.sock' (2) 이런 에러가 나옵니다. 다시 재설치를위해서 sudo apt-get install mysql-server 명령어를 입력하면 몇몇 패키지를 설치할 수 없습니다. 요청한 상황이 불가능할 수도 있고, 불안정 배포판을 사용해서 일부 필요한 패키지를 아직 만들지 않았거나, 아직 Incoming에서 나오지 않은 경우일 수도 있습니다. 이 상황을 해결하는데 다음 정보가 도움이 될 수도 있습니다: 다음 패키지의 의존성이 맞지 않습니다: mariadb-client-core : 충돌: virtual-mysql-client-core mysql-community-server-core : 의존: libaio1 (>= 0.3.93) 하지만 설치할 수 없습니다 추천: mecab-ipadic-utf8 하지만 %s 패키지를 설치하지 않을 것입니다 E: 오류, pkgProblemResolver::Resolve가 망가졌습니다. 고정 패키지때문에 발생할 수도 있습니다. 이렇게 터미널에 나옵니다. 마리아db를 설치한적도없는데 왜 충돌나는건지 잘 모르겠네요.. 혹시 제가 겪은거 겪고 해결해보신분 계실까요?ㅠㅠ
미해결
Next.js 시작하기
안녕하세요, 강사님 좋은 강의 감사합니다!! 시간 가는지 모르고 빠르게 완강을 하게 되었습니다.API Routes 부분이 조금 헷갈려, 이 부분에 대한 궁금증이 생겨 질문을 남기게 되었습니다.Next.js를 사용하여 API 라우트를 통해 클라이언트에서 서버로 직접 데이터베이스나 외부 서버에 접근하여 클라이언트 단에서 사용할 수 있다는 것을 알게 되었습니다. API 라우트를 통한 외부 서비스 URL 숨기기 서버의 env 사용, 외부 서비스 안전하게 접근. 일반, 서버 DB에 접근해서, 사용하는 것보다 어떤 부분에서 장점이 있는지 크게 와닿지 않아서, 혹시 조금 더 구체적인 실무에서의 API Routes를 활용하는 예시를 좀 더 자세하게 알 수 있을까요? 이를 사용했을 때 서버 DB에 직접 접근했을 때 얻는 것에 비해 가질 수 있는 장점과 단점에 대해 알고 싶습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 개인 프로젝트에서 백엔드 먼저 개발 후 프론트를 Next로 개발하면서 강의를 통해 next-auth를 접했는데요. 저는프론트에서 로그인을 하면 해당 로그인 request가 서버로 전달되고, 서버에서 jwt access, refresh token을 발급해프론트에 전달하고 저장하는 기존의 서버 로그인 방식으로 설계를 하였습니다. 또한 서버의 protected request에 대해 위에서 발급한 access token을 활용하여 유효한지 검증 후 진행하도록 하고자 하는데요. next-auth부분을 보며 현재의 공식 문서와도 조금 다르고 제가 원하는 방식과 통합하여 구현이 가능한지 잘 이해가 안가더라구요ㅠ 혹시 이러한 방식으로도 서버에서 얻은 jwt토큰을 next-auth에 삽입이 가능할까요? 대략적인 흐름은 어떻게 진행될까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
섹션 2 HTML & CSS 기본 그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요? 컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고 게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데 수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다
미해결
인터랙티브 웹 개발 제대로 시작하기
강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶 ❤ 화살표함수란 ? 함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨. 정리 Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨 화살표 함수 ver. run = () => { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run); }; Bind 메소드 ver. run() { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run.bind(this)); }
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; // 숙제 몇개 인지 확인하는 count this.length = 0; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) if (node.value === value) throw new Error(`이미 해당 ${value}가 존재 합니다`); // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); } this.length++; } #search(node, value) { if (!node) return null; if (node.value > value) { return this.#search(node.left, value); } else if (node.value === value) { return node; } else { return this.#search(node.right, value); } // if (node.value > value) { // // 더 작은값 찾을때 // if (!node.left) { // return null; // } // if (node.left.value === value) { // return node.left; // } // return this.#search(node.left, value); // } else { // if (!node.right) { // return null; // } // if (node.right.value === value) { // return node.right; // } // return this.#search(node.right, value); // } } search(value) { if (!this.root) return null; if (this.root.value === value) { return this.root; } return this.#search(this.root, value); } #remove(node, value) { if (!node) { // 제거 할 값이 bst에 존재하지 않는 경우 return null; // 지울 값이 존재 안하면 null return } if (node.value === value) { // 자식 입장 // 지울 값을 찾은 경우 if (!node.left && !node.right) { this.length--; // leaf return null; } else if (!node.left) { // 왼팔만 없는 경우 return node.right; // 왼팔이 없는 경우 자기 왼팔 대신 오른팔을 쓰라고 return 해줌 } else if (!node.right) { // 오른팔만 없는 경우 return node.left; // 오른팔 없는 경우 자기 오른팔 대신 왼팔을 쓰라고 return 해줌 } else { // 양팔 다 있는 경우 let exchange = node.left; while (exchange.right) { exchange = exchange.right; } const temp = node.value; node.value = exchange.value; exchange.value = temp; node.left = this.#remove(node.left, exchange.value); return node; } } else { // 부모 입장 if (node.value > value) { node.left = this.#remove(node.left, value); return node; } else { node.right = this.#remove(node.right, value); return node; } } } remove(value) { // 1. leaf(양팔 다 없음) -> 제거 // 2. leaf x, 왼팔이 없다 -> 오른팔 끌어올린다 // 3. leaf x, 오른팔이 없다 -> 왼팔 끌어올린다 // 4. leaf x, 양팔 다 있다 -> 왼팔에서 가장 큰 애와 바꾼다, leaf를 지운다 this.root = this.#remove(this.root, value); // return 숙제 length return 하기 return this.length; } } const bst = new BinarySearchTree(); bst.insert(8); bst.insert(10); bst.insert(3); bst.insert(1); bst.insert(14); bst.insert(6); bst.insert(7); bst.insert(4); bst.insert(13); console.log(bst.length); // 9 console.log(bst.remove(8)); // 8 bst.search(7); bst.search(5); console.log(bst.remove(4)); // 7 console.log(bst.remove(15)); // 없는 값을 지운다면 현재 length return 7 숙제 정답일까요? 제발 ㅠㅠ 🙏
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
마지막, 삭제 버튼 테스트 Q. 삭제 버튼을 누르면 TableRow가 사라지니까 queryByText('text').not.toBeInTheDocument() 를 사용해서 유무를 확인 하셨는데 getByText('text').not.toBeInTheDocument() 를 사용해서 해당 텍스트가 있는 요소가 없으면 에러가 나타나도록 유도해서 테스트 검증할 수도 있지 않나요?? 가능은 한건지, 권장이 되지 않는건지 질문 드립니다
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) if (node.value === value) throw new Error(`이미 해당 ${value}가 존재 합니다`); // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) } } search(value) {} remove(value) {} } const bst = new BinarySearchTree(); bst.insert(8); //bst.insert(8); // Error: 이미 해당 8가 존재 합니다 bst.insert(10); //bst.insert(10); // Error: 이미 해당 10가 존재 합니다 bst.insert(3); //bst.insert(3); // Error: 이미 해당 3가 존재 합니다 bst.insert(1); //bst.insert(1); // Error: 이미 해당 1가 존재 합니다 bst.insert(14); //bst.insert(14); // Error: 이미 해당 14가 존재 합니다 bst.insert(6); //bst.insert(6); // Error: 이미 해당 6가 존재 합니다 bst.insert(7); //bst.insert(7); // Error: 이미 해당 7가 존재 합니다 bst.insert(4); //bst.insert(4); // Error: 이미 해당 4가 존재 합니다 bst.insert(13); //bst.insert(13); // Error: 이미 해당 13가 존재 합니다 숙제 코드 정답일까요?
해결됨
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) } } search(value) {} remove(value) {} } const bst = new BinarySearchTree(); bst.insert(8); bst.insert(10); bst.insert(3); bst.insert(1); bst.insert(14); bst.insert(6); bst.insert(7); bst.insert(4); bst.insert(13); 영상 따라 했는데 안되면 해당 코드 참고 해보세용!
