안녕하세요!현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다.정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ)물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!!그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다.또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다.요약하자면 다음과 같습니다.:API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요?API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요?userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라...약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪좋은 강의 감사드립니다. 좋은 하루 되세요!

깃을 클론하려다 키체인 문제가 쉽게 해결되지 않아서 다운받아 압축을 풀고 Visual Studio Code에서 폴더에 접근하였습니다. 이후 common 폴더에서 npm install을 하였더니 아래와 같은 에러가 발생했습니다. 그래서 npm audit fix --force를 실행하였는데 (sudo 붙여서도 확인) 아래같은 로그가 뜨네요..이후 그냥 npm run serve로 실행시켜보려고 했는데 아래와 같은 타입 에러가 발생했습니다.이래저래 방법을 찾아보다가 현재는 아래 네 개의 항목이 설치가 안되는 것 같은데 혹시 어떻게 해결하면 좋을까요? 

제가 모르는 부분이나 이해가 안 되는 부분을 구글링을 통해 찾아 보는 편인데 구글링 할 때마다 예제에 var이 나와서 구글링 했을 때 이해가 좀 힘든 상황입니다지금 강의를 함수 3편까지 본 상태인데 var을 설명해 주시는 부분이 따로 있을까요? 아니면 이 강의에선 var을 다루지 않는 건가요?

hyunwooji@jihyeon-uui-MacBook-Air emotiondiary % npm install -g servenpm WARN config global --global, --local are deprecated. Use --location=global instead.npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/servenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/serve'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyunwooji/.npm/_logs/2023-02-19T07_24_53_420Z-debug-0.log  구글링 해봣을때는 npm 업데이트 문제인거같다고로 찾아서npm update 도 해봣는데 전혀 해결되지 않고 더 꼬이고 있는거같습니다.. 완강을 앞두고 좌절중이네요ㅠ 오늘 다 완강하고 싶었는데 도저히 해결이 안되어 질문남깁니다 감사합니다!!

안녕하세요.지금 강의를 여러번 돌려보고 천천히 생각하는데도전혀 이해가 되지 않습니다 ㅠ // 2. _get 만들어 좀 더 간단하게 하기 console.log( _map( _filter(users, function(user) { return user.age >= 30; }), _get('name'))); // function(user) { return user.name}여기 코드에서 _get('name')에 인자가 더 들어가야되지않나여??...예시들 중에서var user1 = users[0]; console.log(user1.name); console.log(_get(user1, 'name')); console.log(_get('name')(user1)); var get_name = _get('name'); console.log( get_name(user1) );여기서 보면 _get('name')(user1)이라고 썼는데_map에서 사용했을때 어떻게 저렇게 동작이 되는지 잘 이해가 안되네요 ㅠ 설명 좀 부탁드리겠습니다 ㅠ다른 질문들 보니 저랑 같은 생각하시는 분께 답변이차근차근 생각해보라고 되어있는데 계속 봐도 이해가 안가서 다시 질문올립니다 ㅠ

8080으로 안되서 검색해서 이것저것 해봐도 안되길래 8090으로 하니까 되는데 8090을 써도 상관 없나요?

[모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기3] 12:10 부분에서, header 의 CSS 값 중 top :0 인 것은 이해가 되는데,left :0 으로 설정한 이유는 잘 모르겠습니다.이미 width:100% 로 설정해서 좌우에 딱 맞게 설정된것으로 이해했는데, 여기에다가 또 left:0 을 해서 중앙이 아닌 좌측 정렬을 하는 이유가 있는걸까요? 

변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.

안녕하세요.모바일 3D 입체 카드 제작 강의 최종 완성본 파일을 아이폰에서버튼을 클릭하고 확인했을 때 아래의 이미지처럼 에러가 발생을해서 아이폰에서는해당 화면을 확인할 수가 없습니다. 서버에 올려서도 확인 해봤는데 동일합니다.

 제가 사용중인 우분투 버젼입니다.몽고 디비 설치를 노션 자료에 있는대로도 설치를 해보고, 삭제하고 공식문서에 있는대로도 설치를 해봤는데(노션에는 공개키가 server-5.0 으로 되어있고 공식 문서는 server-6.0 으로 되어있더라구요)설치 후에 실행을 해보면 [fail] 이 뜨면서 실행이 되지 않네요.구글링해서 여러가지 방법 따라해봐도 계속 fail 이어서 질문글 올립니다.추가로 이상한 점은 mongod --version 이라고 치면버전이 나오는게 아니라 Illegal instruction 라고 나옵니다.++구글에 mongod --version Illegal instruction 라는 키워드로 검색을 해서 https://info-orgs.blogspot.com/2021/10/how-to-install-mongodb-v44-mongodb.html이 글을 보고 몽고 디비 4.4 버전을 설치해봤는데mongod --version 이라고 치면 이제 버전이 나오긴 하는데 여전히 실행은 실패하네요.$ service mongod start * Starting database mongod /etc/init.d/mongod: 136: ulimit: error setting limit (Operation not permitted) /etc/init.d/mongod: 142: ulimit: error setting limit (Operation not permitted) start-stop-daemon: start-stop-daemon: unable to open pidfile '/var/run/mongod.pid' for writingunable to set gid to 121 (Permission denied) (Operation not permitted) start-stop-daemon: child returned error exit status 2

인프런 블로그에 학습일기로 해당 강의 속 문제와 문제풀이 내용을 공개로 올려도 되나용??

강의를 따라서 simplediary 코드를 작성해보는데 첫번째 일기 id가 계속 20으로 떠서 제가 코드를 잘못 적은 부분이 있나, 싶어 codesandbox에 올려주신 코드를 붙여넣기 해도 제 브라우저에서는 계속 id가 20 - 39로 생성이 되더라구요.그래서 뭐가 문젠가 싶어서 봤는데 강의 버전의 npm은 프로젝트 생성시 index.js 코드가 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );이렇게 생성이 되는데 제가 설치한 8.19.3 npm 버전에서는const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );이렇게 생성이 됩니다.src에 App.js와 컴포넌트 코드들만 수정했다가 index 코드도 강의 버전대로 수정을 하니 해결이 되던데, 제가 보기엔 두 코드가 그렇게 다르지 않은 것 같은데 왜 다른 결과가 나오는지 궁금합니다. 

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

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

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

안녕하세요클로저에 대해 명확한 이해가 되지 않아서 질문 드립니다. 전역, 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에 의해 참조 되고 있으므로,다 살아남아야 하는 것이 아닌가 생각됩니다.  

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

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

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

 <!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 함수는 정의되어 있는데 왜 정의되어 있지 않다고 뜨는 것인지 궁금합니다.