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...

es2021 강좌의 틱택토 구현 요구사항대로 만들어보고 있는데, 이번 포스팅에서 얘기할 내용은 강의와 다르게 알고리즘 및 코드를 짜다보니 강의코드와 완전 다른 코드가 되어버렸다... 그래도 시간복잡도 및 코드길이가 충분히 좋기 때문에 걱정할 필요는 없어보인다. (다만, 알고리즘은 강의코드보다 아주약간 더 어려울수도?) 지난 포스팅은 아래와 같다. https://kth990303.tistory.com/188 [VanillaJS] 바닐라js로 틱택토를 만들어보자 바닐라js로 틱택토를 만들면서 기본기를 다져보자. 틱택토는 오목과 룰이 동일하나, 가로, 세로, 대각선 중 한 방향으로 5개를 자기 것으로 칠해야하는 오목과 달리, 3개만 자기 것으로 칠해도 되 kth990303.tistory.com 컴퓨터의 턴을 ..

사실 프론트 프레임워크를 다룬다면 querySelector는 거의 쓰이지 않지만, 바닐라js를 다룬다면 꽤나 자주 보게 될 querySelector에 대해 알아보자. 프론트 프레임워크를 배울거라고 querySelector 안배우겠다고 하면 안된다. 결국 프론트 프레임워크도 바닐라js 기반으로 만들어진 것이기 때문에 바닐라js를 어려워하면 프론트 프레임워크를 잘 다루지 못할 확률이 매우 높기 때문이다. (내가 그래서 지금 다시 바닐라 복습하고 있다 ㅠㅠ) 그리고 바닐라js에서 querySelector는 꽤나 자주 보이는 함수이다. 우선 이 코드에서 다양한 태그를 선택해볼 것이다. 1번째 참가자 제시어: 입력 F12를 눌러 Chrome Console에서 여러가지 실험을 해볼 것이다. querySelector..

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

안녕하세요 오늘은 Node.js에 대한 얘기를 해보려 합니다. Node.js를 배우기 전에, 노드를 배우면 무엇을 할 수 있는지, 노드가 어떻게 돌아가는지, 노드를 배우기 전 선행지식이 뭘지 간단하게 알아보려고 합니다! Node.js? 흔히 '노드'라고 불리는 Node.js는 자바스크립트 활용도가 높아지면서 생겨났습니다. 노드 또한 자바스크립트 언어의 일종인데요, 그동안 자바스크립트로 동적인 웹 페이지를 만들고, 웹서버 기능을 다른 곳 (ex. apache tomcat)에서 빌려왔다면, 노드는 서버 환경에서 작동하는 자바스크립트여서 웹서버 환경을 우리가 javascript로 제작할 수 있습니다! 즉, 노드를 배우면 실제로 작은 홈페이지, 회원가입, 게시판 기능들을 실행할 수 있는 겁니다~ 왜냐? 서버 기..