kth990303의 코딩 블로그

이번엔 에러는 아니지만, 원하는대로 프로그램이 돌아가지 않는 현상이다. 일기장 프로그램을 만들기 위해 아래와 같은 임시데이터를 만들었다고 하자. 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...

typescript로 리액트 코드를 작성하여 props를 넘겨주는 과정에서 아래 에러가 발생했다. js에선 타입을 지정해주지 않아 간단히 해결되지만, ts는 타입을 명시해주어야 했기 때문에 이러한 에러가 발생하는 것이다. 넘겨주려는 dummyList는 아래와 같다. 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..

js로 작성한 코드들을 ts로 변화시키는 작업을 하고 있다. useRef는 js나 ts나 큰 변화는 없다. 우리는 이번 포스팅을 통해 보다 똑똑하게 useRef를 사용해보도록 하자. useRef란? 간단하게 useRef가 무엇인지부터 짚고 넘어가보자. useRef는 꽤 많은 상황에서 쓰인다. 컴포넌트에서의 어떠한 DOM을 선택해야 할 때 쓰이기도 하고, 컴포넌트 내부에서 다룰 수 있는 변수를 만들어야 할 때에도 쓰인다. 전자의 경우는 예를 들어 특정 input, textarea 등의 태그에 focus를 줘야하는 경우에 쓰이고, 후자의 경우는 setState로 다루지 않는 변수들 (예를 들면 비동기 처리를 할 때 쓰이는 setTimeOut, setInterval에서 id를 담아 중복클릭을 방지할 때 쓰이는..

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