kth990303의 코딩 블로그

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를 익히는 중이다. 음... 난 백엔드니까 이건 안해도 되지 않을까? 하는 마음도 있긴 했는데, 학교 수업 프로젝트에서 프론트 쪽도 좀 건드려보고 싶기도 하고, 내가 나만의 프로젝트를 나 혼자 만들 수 있으려면 프론트도 잘할 줄 알면 좋고, 뭐 아무튼 단..

예전에 '운동일지 다이어리'를 친구랑 같이 만들다가, 어쩌다가 흐지부지된 프로젝트가 있다. (안좋게 끝난 건 아니다. 서로 각자의 공부를 해야될 것 같다고 결론이 났다.) https://kth990303.tistory.com/190?category=886864 10월동안 잠깐 이 프로젝트를 중단하기로 했다. 이 프로젝트는 협업 프로젝트이기 때문에 내 일정 뿐만 아니라 친구 일정도 중요한데, 친구가 중간고사 끝나고 재정비를 가진 후 11월부터 프로젝트를 해야할 것 같다고 하여 10월 동안은 이 프 kth990303.tistory.com 요즘 헬스하면서 열심히 운동을 뛰고 있던 나에겐 좀 안타까운 상황... 그래서 좀 더 공부한 다음에, 저 프로젝트를 혼자 풀스택으로 해보려고 리액트와 rest api 스프링..

useState를 사용하면 프로젝트 규모가 커지기 시작할 때, state가 너무 많아지거나 부모와 자식 컴포넌트 간 관계가 굉장히 복잡한 경우가 존재한다. 이런 경우에 부모-자식 관계를 관리해주는 리덕스를 이용하거나 useReducer, contextAPI, dispatch를 사용한다고 한다. 이번 포스팅에서 틱택토를 만드는 과정의 일부를 통해 reducer, action, 그리고 dispatch에 대해 알아보도록 하겠다. 참고로 이번 포스팅은 조현영님의 React 웹게임 기본강좌 https://youtu.be/ccKoutCkbao 를 수강하면서 복습 용으로 작성하는 것이다. 틱택토에 필요한 states를 useState가 아닌 useReducer로 useState를 사용할 땐 관리하는 state들을 모..

리액트 공부를 하던 도중 아래 에러가 발생했다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 근데 정말 신기한 점은 컴포넌트명에 딱히 오타가 없어보인다는 점이다. 리액트에서 디버깅을 시도했는데, 브레이크포인트를 아무리 앞쪽으로 잡아도 바로 저 에러부터 뜨니까 너무 답답했었다. 그런데 알고보니 정말 간단한 곳에 문제가 있었다. 틱택토 컴포넌트를 다른 파일에서 쓸 수 있도록 export default TicTacToe; 를 해놓았으니, 받을 때도 import로 받았어야 했는데 require로 받아버렸다. 그래서 안되는..

원래는 BE는 스프링으로, FE는 타임리프로 열심히 프로젝트를 하고 있었다가, 비동기 처리 부분에서 타임리프의 한계를 느껴 java 공부는 잠시 뒤로 하고 리액트를 주구장창 파고 있는 중이다. 자바스크립트가 하다보면 재밌는데, 자바랑 너무 느낌이 다른 언어라 아직은 익숙치 않다... (자바가 꼰대언어라면, 자바스크립트는 미쳐 날뛰는 잼민이같은 느낌이랄까...) 아무튼 그래서 리액트 공부도 하고 있고, 스프링도 다루고 있으니 한번 둘을 연동해보는 환경세팅 포스팅을 작성해보면 좋을 것 같아 포스팅을 작성한다. 요구 선행지식 - 간단한 리액트 / 자바 지식 및 MVC 구조 리액트와 스프링을 연동하는 것이니, 당연히 리액트가 뭔지, 스프링이 뭔지 정도는 알아야 한다. 스프링을 할 줄 아려면 java 프로그래밍 ..

+) 22.01.31. 추가 1. Object여서 length를 사용하지 못해 undefined로 뜨는 경우는 아래 포스팅 참고! 2. 배열을 넘겨줬는데 왜 length를 쓰면 undefined로 뜨는지 의문사하는 경우도 아래 포스팅 참고! https://kth990303.tistory.com/254 [typescript] JS에서 length가 undefined로 뜨는 현상 고치기 객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도. kth990303.tistory.com 이 포스팅은 리액트 훅(useState..

아직 useState를 구현한 건 아니고, api 이동이나 화면 구현정도만 한 것이긴 한데 일단은 올려본다. 우선 색깔, 디자인을 담당하는 CSS는 아직 입히지 않았으며, 아직 화면만 구성해둔 상태라 운동을 저장한다고 실제로 DB가 변경되거나, 화면이 변경되지는 않는다. (갈 길이 멀다...) 참고로 앞으로의 목표는 이렇게 생겼다. 로그인 기능은 11월 달 예정이다. 그 전엔 workListCalender.js, todayWorkList.js, addTodayExercise.js 위주로 구현할 듯하다. 파일명만 봐도 대충 무슨 파일인지 느낌이 올 것이다. "/" API 우선은 홈으로 들어가면 저 달력 모양 캘린더가 뜨도록 구현할 생각이다. 초록색은 운동을 한 날, 빨간색은 운동을 안한 날. 아마 아래 블..

우선 firebase 연동하기 전에, react 감을 익히기 위해서 아래 이슈를 처리하기로 했다. view components를 작성해주세요. 달력 컴포넌트 -운동추가 컴포넌트에서 날짜와 진행한 운동을 추가해주면, 그 날짜에 운동을 진행했는지 구별해주는 달력 컴포넌트 를 작성.그 날짜에 어떤 운동을 했는지는, 그 날짜를 클릭하여 운동추가 컴포넌트로 넘어갈 수 있도록 하면 될듯. -CSS, firebase DB 연동은 지금 하지 않아도 괜찮음. 운동추가 컴포넌트 -운동 리스트 컴포넌트에 기록될 운동을 추가해주는 컴포넌트를 작성할 것. -CSS, firebase DB 연동은 지금 하지 않아도 괜찮음. 간단한 기능을 갖춘 틀을 작성해준다고 생각하면 될 것 같습니다. 이후 세부기능 및 디테일은 다음에 추가하면 ..