Code Monkey home page Code Monkey logo

planet's Introduction

🙌 Hello, I'm Minji.

minji's blog

  • I have been coding since 2019 september.🍂
  • I wanna be a ✨fullstack developer.
  • I'm into coding and build something.🥰💖
  • I'm making an effort to write TIL in blog everyday.

🌳 Languages and Tools

👩🏻‍💻 Github Status

minji's github stats Top Langs

Finally If you wanna know detail more, visit blog please.

It is more important to be prepared to climb on the treadmill everyday than to do your best one day. 
어느 날 하루 기울이는 노력보다 다음 날, 그다음 날도 눈을 뜨면 러닝머신 위에 올라갈 각오가 되어 있는 것이 더 중요하다.

planet's People

Contributors

minji9360 avatar

Watchers

 avatar

planet's Issues

GET http://localhost:4000/src/img/blue2.jpg 404 (Not Found)

오류 문구

GET http://localhost:4000/src/img/blue2.jpg 404 (Not Found)

상황

첫 화면에 임시로 이미지를 넣고 싶어 추가했는데 브라우저에서 이미지가 보이지 않고, 개발자모드에서 확인 시 해당 오류 발생
경로 관련 수정했으나 해결되지 않음
해당 이미지를 유저가 업로드하여 변경 가능하도록 하는 기능을 추가할까 고민중인데 db 연동하여 이미지를 가져오면 해결되지 않을까 생각중
우선 scss 완료 후, 기능 넣고 db 연동하여 이미지 가져오는 것을 해봐야겠다.

webpack_env 관련 오류 발생

에러 문구

'WEBPACK_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:assets: `WEBPACK_ENV=development webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev:assets script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MINJI\AppData\Roaming\npm-cache\_logs\2020-12-02T22_07_30_587Z-debug.log

상황

webpack을 사용하기 위해 npm 설치
개발용과 배포용을 나누기 위해 package.json script 속성에
"dev:assets": "WEBPACK_ENV=development webpack",
"build:assets": "WEBPACK_ENV=production webpack"
작성 후 저장
npm run dev:assets와 npm run build:assets 두 명령어 모두 같은 에러 메시지 출력

SyntaxError: Cannot use import statement outside a module

오류문구

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
C:\Users\MINJI\Desktop\project\greenday\src\init.js:1
import "./db.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

ReferenceError: __dirname is not defined

에러문구

file:///C:/Users/MINJI/Desktop/greenday/src/app.js:17
app.set("views", path.join(__dirname, "views"));
                           ^

ReferenceError: __dirname is not defined
    at file:///C:/Users/MINJI/Desktop/greenday/src/app.js:17:28
    at ModuleJob.run (internal/modules/esm/module_job.js:139:37)
    at async Loader.import (internal/modules/esm/loader.js:179:24)

상황

view 폴더를 현재 디렉토리 안에서 찾지 않고 계속 바깥에서 찾는 오류 발생
app.js에 아래 코드를 추가하면 될까 싶어 추가했더니 __dirname을 찾지 못한다는 오류가 발생했다.

app.set("views", path.join(__dirname, "views"));

Error: Failed to lookup view "home" in views directory "C:\Users\MINJI\Desktop\greenday\views"

에러 문구

Error: Failed to lookup view "home" in views directory "C:\Users\MINJI\Desktop\greenday\views"
    at Function.render (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\response.js:1012:7)
    at home (file:///C:/Users/MINJI/Desktop/greenday/src/controllers/planController.js:1:39)
    at Layer.handle [as handle_request] (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\MINJI\Desktop\greenday\node_modules\express\lib\router\index.js:275:10)

상황

.gitignore, package.json과 같은 파일을 제외한 프로젝트 관련 코드들을 src 디렉토리에 넣고 정리했다.
views 디렉토리도 마찬가지였는데, 자꾸 src 바깥 디렉토리에서 views 디렉토리를 찾는 오류가 발생한다.
경로가 잘못된 것 같아서 아래 코드도 app.js에 추가해보았지만 해결되지 않았다.

app.set("views", path.join(__dirname, "views"));

Uncaught ReferenceError: toggleForm is not defined at HTMLAnchorElement.onclick

오류 문구

Uncaught ReferenceError: toggleForm is not defined
    at HTMLAnchorElement.onclick (VM28406 :1)
onclick @ VM28406 :1

상황

a 링크를 클릭하면 home.js에 있는 toggleForm() 함수가 호출되어 특정 class를 토글하는 기능을 구현하고 싶었다.
a 링크에 onclick으로 함수를 호출하도록 했더니 해당 오류가 발생했다.

해당 링크에 class를 주고 home.js에 class.addEventListener("click", toggleForm);을 추가해주면 오류 없이 정상적으로 동작한다.
하지만 다른 페이지로 이동했을 때 이동한 페이지에서 addEventListener의 요소를 찾을 수 없다는 오류가 발생한다.

Uncaught TypeError: Cannot read property 'addEventListener' of null

(webpack으로 js 파일을 통합하다보니 다른 페이지에서 동일한 class가 없어 찾지 못한다는 오류가 발생하는 것이 아닐까 추측)

onclick 기능을 활용하여 오류없이 동작하고 싶어서 방법을 찾고 있다.

CastError: Cast to ObjectId failed for value "" at path "_id" for model "Plan"

오류 문구

CastError: Cast to ObjectId failed for value "" at path "_id" for model "Plan"
    at model.Query.exec (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\query.js:4358:21)
    at model.Query.Query.then (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\query.js:4450:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  messageFormat: undefined,
  stringValue: '""',
  kind: 'ObjectId',
  value: '',
  path: '_id',
  reason: Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters
      at new ObjectID (C:\Users\MINJI\Desktop\greenday\node_modules\bson\lib\bson\objectid.js:59:11)
      at castObjectId (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\cast\objectid.js:25:12)
      at ObjectId.cast (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\schema\objectid.js:279:12)
      at ObjectId.SchemaType.applySetters (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\schematype.js:1110:12)
      at ObjectId.SchemaType._castForQuery (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\schematype.js:1545:15)
      at ObjectId.SchemaType.castForQuery (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\schematype.js:1535:15)
      at ObjectId.SchemaType.castForQueryWrapper (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\schematype.js:1512:20)
      at cast (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\cast.js:331:32)
      at model.Query.Query.cast (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\query.js:4759:12)
      at model.Query.Query._castConditions (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\query.js:1841:10)
      at model.Query.<anonymous> (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\query.js:2098:8)
      at model.Query._wrappedThunk [as _findOne] (C:\Users\MINJI\Desktop\greenday\node_modules\mongoose\lib\helpers\query\wrapThunk.js:16:8)
      at C:\Users\MINJI\Desktop\greenday\node_modules\kareem\index.js:370:33
      at processTicksAndRejections (internal/process/task_queues.js:79:11)
}

상황

원래 feedback upload가 잘 되었는데 몇 가지 파일을 수정하고 나니 해당 오류가 발생했다.
title을 추가했을 때 문제가 생긴 것 같아 수정했지만 그게 문제가 아니어서 원인을 찾는 중

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval'...

에러 문구

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script 
in the following Content Security Policy directive: "script-src 'self'".

    at Object../assets/js/main.js (main.js:35)
    at __webpack_require__ (main.js:58)
    at main.js:79
    at main.js:81
./assets/js/main.js @ main.js:35
__webpack_require__ @ main.js:58
(anonymous) @ main.js:79
(anonymous) @ main.js:81

상황

설정 완료 후 서버 돌리고 localhost로 접속했는데 js 파일이 적용되지 않고 개발자 모드 console에 해당 오류가 발생

ReferenceError: require is not defined

오류 문구

(node:304) ExperimentalWarning: The ESM module loader is experimental.
file:///C:/Users/MINJI/Desktop/greenday/build/init.js:3
require("./db.js");
^

ReferenceError: require is not defined
    at file:///C:/Users/MINJI/Desktop/greenday/build/init.js:3:1
    at ModuleJob.run (internal/modules/esm/module_job.js:139:37)
    at async Loader.import (internal/modules/esm/loader.js:179:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node build/init.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MINJI\AppData\Roaming\npm-cache\_logs\2020-12-23T18_24_35_322Z-debug.log

상황

build하기 위해 package.json 파일의 scripts에 명령어 추가 후 npm start 명령어 실행했더니 해당 오류 발생

Uncaught Error: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):

에러 문구

Uncaught Error: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/src/img/blue.jpg' in 'C:\Users\MINJI\Desktop\greenday\src\assets\scss'
    at finishWithoutResolve (C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:362:15
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (C:\Users\MINJI\Desktop\greenday\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:1)
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (C:\Users\MINJI\Desktop\greenday\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (C:\Users\MINJI\Desktop\greenday\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Users\MINJI\Desktop\greenday\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at processResult (C:\Users\MINJI\Desktop\greenday\node_modules\webpack\lib\NormalModule.js:583:19)
    at C:\Users\MINJI\Desktop\greenday\node_modules\webpack\lib\NormalModule.js:676:5
    at C:\Users\MINJI\Desktop\greenday\node_modules\loader-runner\lib\LoaderRunner.js:397:11
    at C:\Users\MINJI\Desktop\greenday\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (C:\Users\MINJI\Desktop\greenday\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Users\MINJI\Desktop\greenday\node_modules\css-loader\dist\index.js:155:5)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at eval (webpack:///./assets/scss/styles.scss?:1:7)
    at Object../assets/scss/styles.scss (http://localhost:4000/static/main.js:35:1)
    at __webpack_require__ (http://localhost:4000/static/main.js:58:41)
    at eval (webpack:///./assets/js/main.js?:2:75)
    at Object../assets/js/main.js (http://localhost:4000/static/main.js:22:1)
    at __webpack_require__ (http://localhost:4000/static/main.js:58:41)
    at http://localhost:4000/static/main.js:79:11
    at http://localhost:4000/static/main.js:81:12

상황

이미지를 추가했는데 계속 이미지 404로 보이지 않음
404 오류라서 경로 문제인줄 알고 경로 수정하고, app.use()로 정적 경로 추가해줬지만 해결되지 않음
F12로 개발자 모드 들어갔더니 해당 오류 발생

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure stylesheet '<URL>'.

오류 문구

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure stylesheet '<URL>'. 
This request has been blocked; the content must be served over HTTPS.

상황

폰트 stylesheet를 추가한 것이 적용이 안되면서 개발자도구에서 해당 오류가 발생
내 컴퓨터 server를 돌려 localhost 주소로 확인할 때는 폰트가 적용되고 오류가 없음

Plans 페이지 기능

주요 기능

  • DB에 저장된 할 일 날짜에 맞게 불러오기
  • 슬라이드 인덱스 버튼(요일) 추가 > 추가했다가 삭제
    (일요일부터 시작하던 걸 어제 날짜부터 시작하도록 해서 무조건 첫 페이지에 오늘 날짜가 나와서 필요성을 느끼지 못 함)
  • 할 일 상세 내용 볼 수 있도록

보조 기능

할 일 관련

  • 일주일치(혹은 원하는 요일) 할 일 미리 저장해두고 새로운 주가 시작될 때 자동으로 불러오기 혹은 버튼 클릭 시 불러오기
  • 이모티콘(현재는 불) 클릭 시 입력 form이 위로 슬라이드되면서 추가 내용 입력받기 또는 modal창으로 입력창 띄우기
  • 수정 시 아래 입력 창에 값을 불러와서 수정할 수 있도록
    (현재는 할 일 리스트에서 입력창이 나타나서 수정하는 방식)
  • 할 일 기간 정하면 해당 기간동안 매일 자동으로 등록
  • 낮과 밤 선택하여 등록하면 구분해서 출력하도록

분류 관련

  • 버튼 클릭 시 일상 카테고리로 toggle 될 수 있는 기능
    > toggle 대신 select box 형식으로

목표 관련

  • 오늘의 한 마디 추가 기능
  • 이 페이지의 목표 추가 기능
  • 하루에 하나만 추가할 수 있도록
    이미 추가된 상태에서는 수정만 가능하도록 (목표 누르면 아예 수정 창이 뜨도록)

피드백(코멘트) 관련

  • 완료 체크된 버튼에 한해 피드백 추가 기능
  • 피드백 추가 후에는 수정만 가능(버튼도 수정 버튼으로 변경)
  • 피드백은 계속 펼쳐진 상태
  • 피드백 추가 후에는 할 일 완료 버튼 비활성화

가능하면 추가할 기능

  • 로딩 시 현재 날짜에 맞는 위치에서 시작
  • 할 일 입력 시 새로고침되면서 슬라이드가 일요일로 돌아가는 현상 해결 > AJAX
  • D-Day 설정 기능 (설정 시 이 페이지의 목표에 출력)

해결할 오류

  • 손님으로 연결될 때, plans 페이지 뜨지 않음(sentence 관련 20번째 line 오류)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.