173만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 강의 3분 30초 이후부터 컴포넌트 창에 들어가서 DiaryList 컴포넌트의 DiaryItem들을 확인하는 장면이 나와있습니다. 강사님의 화면에서는 키값들이 0부터 잘 출력되지만 저는 아래와 같이키값들이 20부터 39까지 출력됩니다. useEffect를 건들이기 전 일기를 추가하는 부분에서는 키값들이 0부터 잘 출력되는 것을 보아 이번 강의에서 건들인 부분이 문제인것 같아 강사님이 올려주신 App.js 코드를 복붙하여 실습해보아도 해당 현상이 일어납니다. 그 이유를 알 수 있을까요?
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ.. scrollMove 라는 함수 매게변수에 moveY가 있는데요. moveY가 움직이는 y값이라고 하셨잖아요 그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠? moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 Ubuntu 운영체제를 듀얼부팅으로 22.04.01 버전으로 사용하고 있고, 강의를 듣기 위해 mongodb 설치를 진행하려고 합니다. 그러나 현재 강의의 notion에서 올려주신 설치 과정을 그대로 진행했는데 6번 명령어를 실행 후 이와 같은 오류가 발생했습니다. 설치과정 sudo apt-get install gnupg wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add - lsb_release -dc echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list (jammy버전이라 fosal에서 jammy로 변경했습니다.) +추가(jammy가 아닌 forsal로도 진행을 해 봤고, 6.0버전으로도 진행해봤는데 같은 에러가 떴습니다...) sudo apt-get update sudo apt-get install -y mongodb-org 오류 메시지 몇몇 패키지를 설치할 수 없습니다. 요청한 상황이 불가능할 수도 있고, 불안정 배포판을 사용해서 일부 필요한 패키지를 아직 만들지 않았거나, 아직 Incoming에서 나오지 않은 경우일 수도 있습니다. 이 상황을 해결하는데 다음 정보가 도움이 될 수도 있습니다: 다음 패키지의 의존성이 맞지 않습니다: mongodb-org-mongos : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-server : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-shell : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 E: 문제를 바로잡을 수 없습니다. 망가진 고정 패키지가 있습니다. 구글링 해본 결과 libssl1.1이 깔려있지 않아서 그렇다는 걸 확인했는데 우분투 22.04 버전은 libssl3이 이미 깔려있어 중복 설치는 좋은 해결 방법이 아니라는 것을 확인했습니다. 그래서 또 다르게 설치할 수 있는 방법이 있을지 질문드립니다.
해결됨
타입스크립트 입문 - 기초부터 실전까지
타입을 유니온 타입으로 선언할 경우, 해당 타입은 A, B 타입의 교차 속성에만 접근 가능한 것으로 이해하고 있습니다 그래서 function fn(): string | number { // do something } const val = fn(); val.toFixed(2) // type error 에서 val 의 타입이 string과 number의 교차 속성만을 가진 타입이라서 toFixed가 타입 오류를 내는 것으로 이해하고 있습니다. 질문 드리고 싶은 것은, 특정 함수가 A 타입인 값이나 또는 B 타입인 값을 반환할 수 있다고 가정할 경우, 반환된 값을 변수에 할당하여 사용할 때 A 타입의 모든 속성 또는 B 타입의 모든 속성에 접근 할 수 있도록 하고자 한다면 반환 타입을 어떻게 선언해야 하는지 궁금합니다. 단순히 or 로 생각해서 유니온타입을 설정하면 교차 속성에만 접근이 되니 타입 오류가 발생하게 되어 어떻게 해야 할지 모르겠습니다.
미해결
타입스크립트 입문 - 기초부터 실전까지
app.js 의 소스 2행의 코드가, 최초로 clone 후 받아온 소스와 강의에서 진행되는 코드가 서로 다릅니다. 강의에서는 디폴트가 /users 입니다. 하지만 실제 repository 에는 /users/1 로 단일 객체로 가져옵니다. 영상 내에서 해당 항목에 대한 명시적인 소스 수정 부분도 없어, 그 부분을 인지 못하고 나머지 부분만 영상대로 따라하면서 수정하면 제대로 강의를 진행을 할 수 없습니다. 자잘한 부분이기는 하지만, 이런 부분은 당연히 적용되어야 하는 부분 같습니다. step by step 으로 따라가는 걸 전제로 하는 게 아닐까요?
해결됨
처음 배우는 리액트 네이티브
styled components 삭제하고 재설치 및 json파일 도확인했는데 버전 호환성 문제 떄문인지 계속 터집니다 styled 관련된 코드를 지우면 정상작동합니다 원인이 무었일까요>? ㅠㅠ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost :3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
미해결
함수형 프로그래밍과 JavaScript ES6+ 응용편
좋은 강의 정말로 감사합니다. 당연히 아시겠지만, 모든 엘리먼트에 이벤트 리스너를 다는 것 보다, 부모에 이벤트 핸들링을 위임하는 방식이 코드 작성량도 적고 메모리 사용량도 적은것으로 알고 있습니다. 추후 강의 개편을 하실 때, 이 내용을 강의에 넣어주실 수 있을까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vscode 터미널에 index.js 콘솔을 출력하려고 따라 작성했는데 node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인 식되지 않습니 다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십 시오. 위치 줄:1 문자:1 + node index.js + ~~~~ + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 이런 오류가 나면서 콘솔이 나타나지 않는데 이유 알 수 있을까요?
미해결
함수형 프로그래밍과 JavaScript ES6+
수업 내용 코드를 캡쳐해왔는데요. 최초에 promise가 동작하도록 아래와 같이 코드 작성을 하셨고, 아래 코드는 위 코드에서 Promise.resolve(a+100) 이후에 Promise chain을 타게 되어, 연속적으로 비동기가 일어나며 성능저하가 일어난다고 하셨는데요. Promise.resolve(a+100) 이후 acc에 할당되는 값이 acc.then(acc => f(acc,a)); 가 되다 보니까 결국 acc.then(acc => f(acc,a)).then(acc => f(acc,a)).then...then...; 위와 같이 계속 thenable 하게 chaining이 되고, 그 결과 promise는 microstack 이기 때문에 microstack queue <-> callstack 사이에 task 이동으로 인해 부하가 생겨 성능 저하가 발생한다. 하지만 코드 내에 호출되는 일반 함수의 경우 callstack에 바로 호출되기 때문에, 유명함수를 가진 함수로 리팩터링하신 것 같은데 위와 같이 이해한 게 맞을까요?
해결됨
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
function solution(s: string, t: string) { let answer = 0; t = t.split("").sort().join(""); for (let i = 0; i < s.length; i++) { const slideStr = s.slice(i, i + t.length); console.log(slideStr); if (slideStr.split("").sort().join("") === t) answer++; } return answer; } console.log(solution("bacaAacba", "abc")); 선생님께서 풀어주신 방식이랑 너무 달라, 이 방식도 효율적인지 확신이 안서서요. 제 코드 한 번 확인 부탁드리겠습니다.
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다. <!-- test.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
미해결
Node.js로 웹 크롤링하기
puppeteer waitFor 이제 못쓰나요? 자동완성어로도 안 만들어지고, 예제처럼 반영도 안돼요 waitForTimeout 이걸 써야 반영되는데, 이것도 이제 지원안한다는 문구가 뜨네요
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요? 개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요? 덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
미해결
함수형 프로그래밍과 JavaScript ES6+
안녕하세요, 강사님 :) 강의내용에서 age<20, take(3) 처럼 3개만 뽑는 경우엔 지연성으로 인해 3개만 뽑고 뒤에 배열들은 탐색하지 않겠지만 age<20의 사용자를 모두 뽑는 경우엔 이렇게 지연성으로 하나 일반 map,filter를 사용하나 성능상에 차이가 없는 것이죠?
해결됨
[코드캠프] 훈훈한 Javascript
강의에서는 1부터 시작하는데 저는 intervalID가 5부터 시작합니다 원인이 뭘까요ㅜㅜ const starter = function () { container.style.display = "flex"; messageContainer.style.display = "none"; counterMaker(); // setInterval함수가 1초 딜레이가 있기 때문에 counterMaker()를 먼저 실행해서 딜레이 없앰 const intervalID = setInterval(counterMaker, 1000); intervalIdArr.push(intervalID); console.log(intervalIdArr); }; const setClearInterval = function () { for (let i = 0; i < intervalIdArr.length; i++) { clearInterval(intervalIdArr[i]); } };
해결됨
[코드캠프] 시작은 프리캠프
사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에 반응형 관련 강의도 있을까요 ㅠㅠ? gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ 비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기존 방식인 <button onClick={handleEdit}>수정 완료</button> 대신에, <button onClick={() => {onEdit(id, localContent)}}>수정 완료</button> 가 안되는 이유는 무엇인가요?
해결됨
[코드캠프] 훈훈한 Javascript
어디에 가야 볼수있나요?
