kth990303의 코딩 블로그

NestJS는 nodejs (javascript) 진영에서 매우 유명한 백엔드 프레임워크이다. 공식 문서에서 nestjs는 typescript를 완전히 지원하며 OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)를 결합했다고 소개하고 있다. 또, NestJS를 통해 nodejs 진영에서 애플리케이션 아키텍처를 제공해줄 수 있게 해주기 위한 철학을 가지고 있다고 하며, Angular에서 영감을 많이 받았다고 한다. 실제로 module과 같은 개념이 있는 것을 보면 Angular에서 영감을 받았다는 점이 팍팍 느껴진다. 즉, JVM 생태계 언어에서 Spring 프레임워크가 있다면 no..

fetch 함수를 이용하면 새로고침 없이 api를 호출하여 http 요청을 보내고 응답을 받아올 수 있다. 이번 포스팅은 스프링으로 개발된 백엔드 코드의 api를 호출하여 json 객체를 fetch 함수를 이용하여 응답을 받아보는 걸 배운 과정을 기록할 것이다. 과정 속에서 내가 발생시킨 어이없는 실수, 멍청한 실수들을 기록해두어, 다음엔 실수하지 않도록 하기 위함이다. 꼭 백엔드 환경이 스프링+자바가 아니더라도 상관없다. 참고로 fetch 공식 문서는 아래 링크에서 확인가능하다. https://ko.javascript.info/fetch fetch ko.javascript.info fetch 함수 - GET 아래와 같은 응답을 보내주는 api가 있다. @GetMapping("/rooms") public..

이번엔 에러는 아니지만, 원하는대로 프로그램이 돌아가지 않는 현상이다. 일기장 프로그램을 만들기 위해 아래와 같은 임시데이터를 만들었다고 하자. const dummyList = [ { id: 1, author: 'author1', content: 'content1', emotion: '5', created_date: new Date().getTime(), }, { id: 2, author: 'author2', content: 'content2', emotion: '4', created_date: new Date().getTime(), }, { id: 3, author: 'author3', content: 'content3', emotion: '3', created_date: new Date().getTi..

객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도록 하자. 도대체 왜 length만 이런 것일까? 그 이유는 여기서 알 수 있었다. 요약하자면 js에선 배열과 문자열에서만 length 속성이 있고, Object에선 length 속성이 없어서 그런 것이었다! https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/ JavaScript에서 객체 길이 가져 오기 JavaScript에서 객체의 길이를 얻는 다양한 방법을 보여줍니다. www...

javascript로 프론트를 다루는 분들이라면 초보시절에 왜 에러가 뜨는지 몰랐다가 undefined가 전달되는 경우라든지, 타입이 잘못 전달됐다든지 하는 경우를 굉장히 많이 겪었을 것이다. 나도 요즘 이러한 경우가 많아 굉장히 많은 고통을 겪었으며, 내가 만약 js를 잘하게 돼서 에러가 하나도 없다고 하더라도, 팀원들과의 협업 과정을 위해서, 또는 배포 후 프로그램이 오작동하는 경우를 막기 위해서라도 ts를 익혀야할 필요성을 느껴서 typescript를 익히는 중이다. 음... 난 백엔드니까 이건 안해도 되지 않을까? 하는 마음도 있긴 했는데, 학교 수업 프로젝트에서 프론트 쪽도 좀 건드려보고 싶기도 하고, 내가 나만의 프로젝트를 나 혼자 만들 수 있으려면 프론트도 잘할 줄 알면 좋고, 뭐 아무튼 단..

자바스크립트로 작업을 하던 중 아래 에러가 발생했다. property면 객체 변수를 의미하는 것일텐데, 대체 뭘까 하고 찾아보았다. Uncaught SyntaxError: Invalid shorthand property initializer 문제 상황 및 해결 객체 변수 지정을 : 가 아닌 =로 하고있었다. name: ''이 아닌 name='' 사실 몇번째줄 에러인지 알려주기도 했고, property initializer(객체 변수 초기화(지정))이 올바르지 않다길래 대략 느낌은 왔지만, 순간적으로 =를 :로 비슷하게 보기도 했고, 너무 쉬운부분이다보니 대충 넘어간 것 같기도 하다. const hero={ name='', lev:1, maxHp:100, hp:100, xp:0, att:10, }; 위 코..

리액트를 하면서 js 기본을 좀 더 갈고닦아야할 필요성을 느껴서 다시 javascript es2021 기본 강좌를 들어보고 있다. 즉, 이 포스팅은 조현영님의 es2021 강좌의 내용을 듣고 기록하고 복습하는 용도로 작성한 것이다. 모든 강의를 포스팅하진 않을 것 같고, 기록해둘만한 내용이나, 시간이 좀 괜찮을 때 포스팅할 듯하다. 우리가 흔히 인터넷을 하다 보면 이 창을 한번쯤은 봤을 것이다. 우린 이제 javascript로 이 창을 띄우는 방법을 이번 포스팅을 통해서 배울 것이다. 참고로 이 창을 띄우는 방법은 한가지가 아니다. 총 3가지가 존재하는데, 용도에 따라 다 다른 함수를 가진다. Prompt 사용자에게 값을 전달받기 위한 함수이다. 아까 위에서 본 이미지가 바로 prompt 창으로 띄워준 ..