173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
const subs = await AppDataSource.createQueryBuilder() .select( `s.title,s.name,${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); 위의 코드에서 백틱 ``과 따옴표들 '', "" 사용방식들에대한 기초적인 지식을 쌓으려면 어떻게 검색해보면될까요? 일단 제 나름대로 접근식으로는 .from이나 .orderBy 이런건 typeORM 문법인거같아서 찾아보니 문서에는 백틱은 안적혀있는거같고 따옴표로만 작성해준거같아서요.. 혹시 변수가 들어가있으면 ``를써주는게맞나요? 근데 .orderBy부분에서 `"postCount"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서..
react nodejs postgresql docker typescript Next.js 클론코딩
반가우면반갑다고해
2023-01-03T05:54:01.669Z
댓글 1
좋아요 1
조회수 417
미해결
함수형 프로그래밍과 JavaScript ES6+ 응용편
좋은 강의 정말로 감사합니다. 당연히 아시겠지만, 모든 엘리먼트에 이벤트 리스너를 다는 것 보다, 부모에 이벤트 핸들링을 위임하는 방식이 코드 작성량도 적고 메모리 사용량도 적은것으로 알고 있습니다. 추후 강의 개편을 하실 때, 이 내용을 강의에 넣어주실 수 있을까요?
Huichan Lee
2023-01-03T02:32:51.192Z
댓글 1
좋아요 2
조회수 621
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
정하일
2023-01-02T15:20:32.264Z
댓글 1
좋아요 0
조회수 408
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vscode 터미널에 index.js 콘솔을 출력하려고 따라 작성했는데 node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인 식되지 않습니 다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십 시오. 위치 줄:1 문자:1 + node index.js + ~~~~ + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 이런 오류가 나면서 콘솔이 나타나지 않는데 이유 알 수 있을까요?
node.js js javascript react javascript nodejs
J K
2023-01-02T10:21:30.737Z
댓글 2
좋아요 0
조회수 2381
미해결
함수형 프로그래밍과 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에 바로 호출되기 때문에, 유명함수를 가진 함수로 리팩터링하신 것 같은데 위와 같이 이해한 게 맞을까요?
모르고리즘
2023-01-02T01:25:55.788Z
댓글 1
좋아요 1
조회수 598
해결됨
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
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")); 선생님께서 풀어주신 방식이랑 너무 달라, 이 방식도 효율적인지 확신이 안서서요. 제 코드 한 번 확인 부탁드리겠습니다.
Eunji Lee
2023-01-01T13:42:09.392Z
댓글 1
좋아요 0
조회수 356
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
profile의 저장되어있는 first_name의 키 값을 찾아내려고 하니깐 해당 오류가 발생합니다. 어떻게 접근해서 가져와야할까요?
2023-01-01T11:35:44.009Z
댓글 1
좋아요 0
조회수 318
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { try { const cookie = req.headers.cookie; console.log(req.headers.cookie); // 쿠키가 없다면 에러를 보냄 if (!cookie) throw new Error('Missing auth token cookie'); // 쿠키가 있다면 그 쿠키를 이용해서 백엔드에서 인증 처리하기 await axios.get('/auth/me', { headers: { cookie } }); return { props: {} }; } catch (error) { // 백엔드에서 요청에서 던져준 쿠키를 이용해 인증 처리할 때 에러가 나면 // login 페이지로 이동 res.writeHead(307, { Location: '/login' }).end(); return { props: {} }; } }; axios.get에 파라미터로 헤더.쿠키 로 넣어준걸까요? 근데 순서대로 코드가 동작하게되면 if문에 걸려서 영원히 쿠키가 없어 페이지가 로그인페이지로 이동될텐데 제가 잘못생각한걸까요? 두번쨰로 리턴 props:{}로 해주신 이유에대해서 궁금합니다. 다른식으로 그냥 return; 이렇게 작성하고 끝내도 괜찮을까요?
react nodejs docker typescript postgresql 클론코딩 Next.js
반가우면반갑다고해
2023-01-01T08:20:05.360Z
댓글 1
좋아요 0
조회수 499
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 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; }
회원가입 과제 HTML/CSS javascript css 정렬 코드 공유
최다니엘
2022-12-31T13:27:49.797Z
댓글 1
좋아요 2
조회수 3751
미해결
Node.js로 웹 크롤링하기
puppeteer waitFor 이제 못쓰나요? 자동완성어로도 안 만들어지고, 예제처럼 반영도 안돼요 waitForTimeout 이걸 써야 반영되는데, 이것도 이제 지원안한다는 문구가 뜨네요
puppeteer nodejs 웹-크롤링 javascript
김형
2022-12-31T06:24:30.977Z
댓글 2
좋아요 1
조회수 575
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요? 개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요? 덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
2022-12-31T01:55:08.142Z
댓글 1
좋아요 0
조회수 401
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
장고 4.0때부터 이상에서는 CSRF_TRUSTED_ORIGINS를 수정해줘야한다고 들었습니다. 그런데 수정하고서도 여전히 csrf 토큰 오류가 발생하네요.
2022-12-30T14:18:46.585Z
댓글 1
좋아요 0
조회수 1023
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
지금은 pickle에서 장고 모델 지원되는거 같습니다!! json은 여전히 Not Serializable 에러 뜹니다 신기해서 공유드립니다
luxleo
2022-12-30T06:27:50.930Z
댓글 1
좋아요 2
조회수 430
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요 멘토님. 알려주신대로 무한스크롤 부분을 구현하였는데, 브라우저에 떠있는 꽃무늬 ReactQuery 마크를 클릭해야 무한스크롤이 구현됩니다. 그리고 상품리스트 페이지는 그냥 할때는 구현이 안되고, 희한하게 관리자페이지의 상품리스트는 구현이 100개 상품중 60번? 정도까지만 되다 안되다 합니다. 혹시 브라우저의 문제가 있는걸까요? 재남님 깃헙리포지토리를 보며 10번정도는 코드에러가 있나 확인해봤지만 문제가 없는거 같아서요! 혹시 어떤 원인이 있을 수 있을까요?
박정호
2022-12-30T03:33:26.890Z
댓글 1
좋아요 0
조회수 355
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
윈도우11 home을 사용하고있고 C:\html 경로에서 docker run 명렁어를 입력하였습니다. 혹시 틀린 부분이 있을까요? 위 방법으로 해결은 되었습니다. 다만 무슨차이가 있는것이고 왜 문제가 발생한지 모르겠어요 그리고 또하나 질문이 있습니다. docker run으로 실행하였을때 위에 이미지 처럼 뜨게되는데 이 상태에서 컨트롤 + c / 컨트롤 + d를 입력해도 명령이 종료가 되지않는데 어떻게 종료할 수 있을까요?
yezi9733
2022-12-29T05:44:30.359Z
댓글 1
좋아요 0
조회수 896
미해결
함수형 프로그래밍과 JavaScript ES6+
안녕하세요, 강사님 :) 강의내용에서 age<20, take(3) 처럼 3개만 뽑는 경우엔 지연성으로 인해 3개만 뽑고 뒤에 배열들은 탐색하지 않겠지만 age<20의 사용자를 모두 뽑는 경우엔 이렇게 지연성으로 하나 일반 map,filter를 사용하나 성능상에 차이가 없는 것이죠?
2022-12-28T10:04:17.735Z
댓글 1
좋아요 0
조회수 372
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
antd 디자인 홈페이지에서도 똑같이 from 'antd'에서 가져오는데 최신버전이라 안먹히는것인지 Comment가 안불러와지네요. 자동완성도 지원이 안되고요
yezi9733
2022-12-28T06:13:30.833Z
댓글 1
좋아요 3
조회수 948
해결됨
[코드캠프] 훈훈한 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]); } };
권새롬
2022-12-28T00:33:45.851Z
댓글 1
좋아요 4
조회수 485
해결됨
[코드캠프] 시작은 프리캠프
사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다
2022-12-27T13:39:33.811Z
댓글 1
좋아요 0
조회수 590
미해결
[리뉴얼] React로 NodeBird SNS 만들기
const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post ); 위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?
Next.js react nodejs redux express
mkp0131
2022-12-27T09:00:09.532Z
댓글 2
좋아요 2
조회수 603
