묻고 답해요

postman

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

postman 설치후 빈화면을 보여주라고 하시는데 저는 선생님이랑 다른 화면이 나오는데 어떤메뉴로 들어가야 하나요?

• node.js
• Next.js
• react
• seo
• next.js
• graphql
• nodejs

useNavigate 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

게시판 보면서 수정했는데 오류가 사라지지 않습니다. 어떻게 수정하면 될까요? (LoginPage.js) (index.js) (App.js) (발생하는 오류) 도와주시면 감사하겠습니다...ㅠㅠ

• nodejs
• node.js
• react

main.js 파일의 import 부분에서 오류가 납니다.

해결됨

Vue.js 시작하기 - Age of Vue.js

main.js 파일의 import 부분에서 오류가 납니다. 이미 사전에 동일한 질문이 있길래 똑같이 적용시켜보려했지만 윈도우 10 환경이라 그런지 저에게는 우측하단에 ESLint를 변경하는 버튼이 없더라고요.. 어떻게 해결해야 할까요..?

• vue.js
• javascript
• vuejs

user_reducer.js 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

해당 오류를 찾아보니까 함수에 이름을 지으라고 하는데 강사님께서는 함수 이름 없이 잘 실행되는데 왜 그렇게 되나요? 함수 이름의 문제가 아니라 다른 문제가 있어서 오류가 발생하는건가요?? 잘 하다가 이부분에서 막혔습니다...

• nodejs
• node.js
• react

npm i vs npm add

미해결

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

현재 Swagger를 활용한 API-Docs 생성 수강중 입니다. 21분 36초에 npm add 로 설치하는데 npm i 와 npm add 의 차이를 앞부분에서 설명해 주셨을까요? 기억이 왜 안날까요?

• node.js
• express
• javascript
• tdd
• nodejs
• rest-api
• nestjs
• docker
• NestJS

LexicalEnvironment와 VariableEnvironment에 대해 궁금합니다.

미해결

1.variable Environment가 Lexical Environment의 snapshot이며 outerEnvironmentReference는 함수가 선언될 당시 Lexical Environment를 참조한다고 하였습니다... 그렇다면 variable Environment를 참조하는 것과 같지 않은지가 궁금합니다. 2.variableEnvironment의 environmentRecord는 선언된 식별자를 LexicalEnvironment의 environmentRcord는 선언된 식별자를 포함해 let과 const 등까지 포함하는지 궁금합니다.. 3.ThisBinding이 variableEnvironment나 LexicalEnvironment의 environmentRecord에 속해 있는 게 아니라 따로 떨어져있는게 맞는지가 궁금합니다...

• javascript
• js

실행 컨텍스트와 클로저에 대해 질문드립니다.

해결됨

코어 자바스크립트

안녕하세요 클로저에 대해 명확한 이해가 되지 않아서 질문 드립니다. 전역, outer, inner 함수가 있다고 가정할 때, outer 함수가 실행되면, outer의 LexicalEnviroment이 생길것이고, 그 내부에는 enviromentRecord와 outerEnviromentRef 가 생길 것입니다. enviromentRecord에는 inner 함수도 포함이 될 것이고, inner 함수는 outer 함수 내부에서 선언되었으므로, inner 함수의 [[Enviroment]] 슬롯은 outer 컨텍스트의 LexicalEnviroment를 참조할 것입니다. 따라서 outer컨텍스트가 종료 되어도 inner함수의 [[Enviroment]] 슬롯이 outer 컨텍스트의 LexicalEnviroment를 참조하고 있기 때문에 GC 의 대상이 되지않고, (outer컨텍스트가 없어진 후에) inner 컨텍스트가 생성되어도 정상적으로 inner의 outerEnviromentRef가 outer의 LexicalEnviroment를 참조할 수 있을 것입니다. outer LexcialEnviroment는 enviromentRecord와 outerEnviromentRef를 참조하고 있으므로, 이 두 객체는 없어지지 않아야 할 것 같은데, 강의 5:15 에서 outer의 enviromentRecord와 outerEnviromentRef는 a:1 을 제외하고 모두 제거 되고 있습니다. 제 생각에는 참조의 과정을 따라가면 객체 내부의 프로퍼티가 남는게 아니라 객체(enviromentRecord나 outerEnviromentRef 그 자체) 가 남아야 할 것 같은데, 저렇게 일부를 제외하고 다 지워지는 이유가 있을까요? a와 inner 는 outer enviromentRecord에서 참조하고 있고, enviromentRecord와 outerEnviromentRef는 LexcialEnviroment에 의해 참조되며 LexcialEnviroment는 다시 inner 함수의 [[Enviroment]] 또는 inner 컨텍스트의 outerEnviromentRef에 의해 참조 되고 있으므로, 다 살아남아야 하는 것이 아닌가 생각됩니다.

• javascript

시퀄라이즈 관계메소드를 두번 사용하는 경우

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음 다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..

• react
• node.js
• redux
• express
• nodejs
• next.js
• Next.js

백엔드 질문

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고 프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데 그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면 그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요? 만약 브라우저 -> 백엔드 이면 백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서 백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고 모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데 제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요? 강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.

• Next.js
• express
• node.js
• react
• nodejs
• next.js
• redux

로그아웃 후에도 계속 쿠키가 존재합니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요! 로그아웃 후 계속 auth/me후 계속 req에서 쿠키가 존재해서 문의 남깁니다! application탭에서 쿠키는 잘 삭제가 되고 네트워크 탭에서도 logout이 성공적으로 이루어지는데 reload하면 바로 auth/me가 계속 200코드와 함께 user가 전달됩니다. 콘솔에도 찍어봤는데 계속 req에 쿠키가 같이 전달되고 있어서 요. 서버도 껐다 켜보고 했는데도 계속 그래서 문의드립니다! client/src/context/auth.tsx client/src/components/NavBar.tsx server/src/middlewares/auth.ts server/src/routes/auth.ts

• node.js
• Next.js
• 클론코딩
• nodejs
• typescript
• postgresql
• 클론코딩
• react
• next.js
• docker

노션과제에 대한 질문있습니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

혹시 과제 풀이를 볼수 있는곳이 있을까요?

• node.js
• nodejs
• tdd
• javascript
• docker
• express
• nestjs
• rest-api
• NestJS

authentication error 발생 해결책 문의드립니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

관련 에러를 찾아보니 ip주소를 0000이나 내 컴퓨터 ip를 입력해봐서 해결한 경우를 보았으나 제 경우는 해결되지 않습니다. 어떻게 해결할 수 있을까요? 아래 오류 코드입니다. MongoServerError: bad auth : authentication failed at Connection.onMessage (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:227:30) at MessageStream.<anonymous> (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:60:60) at MessageStream.emit (node:events:513:28) at processIncomingData (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:125:16) at MessageStream._write (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:33:9) at writeOrBuffer (node:internal/streams/writable:392:12) at _write (node:internal/streams/writable:333:10) at Writable.write (node:internal/streams/writable:337:10) at TLSSocket.ondata (node:internal/streams/readable:766:22) at TLSSocket.emit (node:events:513:28) { ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' } }

• react
• node.js
• nodejs

NGINX에러

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

vi /etc/nginx/sites-available/default 수정 전에는 정상 작동합니다. 그런데 아래와 같이 수정하면 에러 발생합니다.

• html/css
• aws
• git
• javascript
• rest-api
• HTML/CSS
• mysql
• github

선생님 key 값에 괄호표기법 쓰는 이유가 뭔가요?

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target .name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target .name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요? [ e.target.name ] 왜 이렇게 써야하는지 궁금합니다. 위에선 괄호없이 string으로 썼는데

• nodejs
• javascript
• node.js
• react

getInitialProps 과 getServerSideProps에 대해서 질문드립니다!

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다

• rest-api
• graphql
• react

개인 블로그 정리

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요 선생님 혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??

• Next.js
• redux
• react
• tdd
• next.js
• typescript

yarn generate 에러

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?

• node.js
• Next.js
• nodejs
• seo
• react
• next.js
• graphql

파이참 gutter 색상이 너무 궁금합니다.

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;

• python
• docker
• react
• django

8:24분경 코드 오류나서 수정하셨는데!

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

8분 20초경 오류나서 코드를 수정하셨는데, case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, }; 코드 주석부분 왜 추가하신건가요..? const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], }); dummy데이터 구조를 보면 Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!

• nodejs
• node.js
• redux
• express
• react
• next.js
• Next.js

함수 관련 질문 입니다.

해결됨

[코드캠프] 훈훈한 Javascript

<!DOCTYPE html> <html lang="ko"> <head> <title>D-day</title> <script> const dateFormMaker = function () { const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; //const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; //console.log(inputYear, inputMonth, inputDate); }; const counterMaker = function () { const targetDateInput = dateFormMaker(); //console.log(targetDateInput); const nowDate = new Date(); console.log('nowDate!!!!', nowDate); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; const remainingDate = Math.floor(remaining / 3600 / 24); const remainingHours = Math.floor(remaining / 3600) % 24; const remainingMin = Math.floor(remaining / 60) % 60; const remainingSec = Math.floor(remaining) % 60; console.log(remainingDate, remainingHours, remainingMin, remainingSec); } </script> </head> <body> <input id="target-year-input" class="target-input"/> <input id="target-month-input" class="target-input"/> <input id="target-date-input" class="target-input"/> <button onclick="counterMaker()" class="btn">버튼</button> </body> </html> '함수의 리턴' 강의 영상에서 위와 같은 코드로 디데이 카운터를 만들었는데요. 제 생각에는 dateFormMaker 함수안에 있는 내용들을 굳이 왜 함수로 묶어야 할까 싶어서 <!DOCTYPE html> <html lang="ko"> <head> <title>D-day</title> <script> const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; const counterMaker = function () { const nowDate = new Date(); console.log('nowDate!!!!', nowDate); const targetDate = new Date(dateFormat).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; const remainingDate = Math.floor(remaining / 3600 / 24); const remainingHours = Math.floor(remaining / 3600) % 24; const remainingMin = Math.floor(remaining / 60) % 60; const remainingSec = Math.floor(remaining) % 60; console.log(remainingDate, remainingHours, remainingMin, remainingSec); } </script> </head> <body> <input id="target-year-input" class="target-input"/> <input id="target-month-input" class="target-input"/> <input id="target-date-input" class="target-input"/> <button onclick="counterMaker()" class="btn">버튼</button> </body> </html> 이렇게 만들고 실행시켜보니 콘솔 창에 아래와 같이 뜨더라구요 함수안에 넣지 않았으니까 index 파일이 실행되자마자 const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; 위 부분이 실행이 된 것이고, 그래서 input 창에 아직 내용을 입력을 하지 않았으니 value 값을 읽을 수 없다고 뜨나보다 라고 생각하고 input 창에 값을 입력하고 버튼을 눌러보니 counterMaker is not defined 이런 오류가 뜨는데, counterMaker 함수는 정의되어 있는데 왜 정의되어 있지 않다고 뜨는 것인지 궁금합니다.

• javascript
• 함수