개발하고 싶은 초심자

오늘은 회의와 함께 라이브 세션 팔로업, 그리고 계속 해결하지 못했던 수정 기능 구현을 드디어 해냈다. 사실, 제일 기본적이면서도 간단하다고 생각했던 CRUD라 이렇게까지 오래 걸렸다는 게 너무 황당하지만, 시간이 오래 걸린 만큼 주변의 조언을 조금씩 구해가며, 내가 이해를 하면서 해결을 했다는 것에 의의를 두고 있다. 이만큼 오래 걸려 결국 해냈으니, 다음에 비슷한 상황이 오면 금방 해결할 수 있으리라 생각하면서 또 해야 할 일들을 수행하는 거지. 개발을 시작하면서 나의 기초가 얼마나 얕았는지를 다시금 깨닫게 되었다. 항상 들었던, '눈으로 읽었을 때 '이거 아는 거야!'라고 생각이 드는 순간 그건 모르는 것'이라고... 정말 맞는 말인 것 같다. 분명히 나는 react의 state&props 개념을 ..

(자세한 설명은 mdn Date.prototype.toISOString()에서 확인 가능) new Date() 함수를 console.log()로 찍어보면 Fri Nov 25 2022 22:13:26 GMT+0900 (한국 표준시) 같은 형식으로 나온다. 하지만 대부분 사람들이(아닐 수도 있지만) 원하는 형태는 yyyy-MM-dd 처럼 년도-월-일의 형태일 것이다. 잘 몰랐을 때는 나도 그냥 new Date()만 사용했었는데, 우연찮게 유데미에서 리액트 관련 강의를 보다가 toISOString()함수를 사용하는 것을 보게 되었다. 바로 적용해보았다. const getDate = (date) => { return date.toISOString().slice(0, 10); } 이렇게 사용할 수 있다. 뒤에 붙..

react를 배울 때 항상 들었던 말. react를 배울 때 state&props 없이는 아무것도 못한다. 리액트의 꽃이다. 이번에 개발하면서 절실하게 느끼고 있다. 특히, 수강생 때 props라는 개념이 정확하게 뭔지 이해할 수가 없었는데, 이번에 실질적으로 내가 사용해보면서 알아가고 있는 것 같다. 내가 원하는 그림은 글을 수정할 때 등록했던 데이터가 게시판에 그대로 나오고, 그 내용을 바탕으로 수정할 수 있는 것이었다(사실 정확하게 게시판을 만든 것은 아니었으나, CRUD를 구현하는 것은 같기 때문에 제일 이해가 쉬울 것 같은 게시판으로 작성함). 그런데 등록한 데이터가 화면에 뜨지 않은 상태로 나왔다. 심지어 나는 날짜를 선택하는 기능도 있었기 때문에, new Date() 함수를 사용하는 과정에서..

오늘은 취업 후 처음으로 몸 상태가 가장 안 좋은 날이었다. 다행히 코로나는 아니었지만, 기침이 많이 나와 목이 아프고 약 기운에 정신이 멍해졌다. 하지만 나에게는 아직도 끝낼 일들과 수행할 일들이 많이 있었기 때문에 병원만 잠시 다녀오고 바로 업무를 시작했다. 윈도우 ec2와 우분투 가상 머신을 활용한 배포는 시간이 너무 오래 걸리는 데다 에러가 너무 많이 나와 결국 성공하지는 못했다. 대신 수강생 시절, tailwind를 배우며 vercel로 배포해보는 시간이 있었던 것이 생각났다. vercel로 리액트 배포하기를 시도했고, 결론적으로는 성공했다. 처음에는 배포는 성공했지만 화면이 나오지 않았고, 콘솔 네트워크창을 보며 서버에서 데이터를 받아오지 못한다는 것을 알 수 있었다. 왜 데이터를 받아오지 못..

1. add environment variables 제일 처음 vercel에 배포를 했을 때, 조회 화면이 제대로 뜨지 않고 request url의 형태가 http://나의vercel배포주소/undefined/내가지정한params 의 형태로 떴다. 처음엔 내가 지정해준 주소는 .env의 서버 주소인데, 왜 내가 vercel로 배포한 도메인이 앞에 나올까 감이 잡히지 않았다. 다행히 지금의 나에게는 도움을 요청할 사람들이 많이 생겼기 때문에, 물어봤다. 물론, 그 전에 구글링을 선행하긴 했지만 내가 원하는 대답은 제대로 나오지 않았다. 도움을 요청한 결과, 내가 처음 작성했던 코드는 axios.post(`${process.env.REACT_APP_URL}/post`, { ...이하 생략 }) ... 이하 ..

(레퍼런스 링크) Vercel로 배포를 시도해서, 도메인을 들어가 페이지를 들어가려 했을 때 하얀 화면이 뜨면서 콘솔에 찍힌 에러 메시지였다. 레퍼런스 링크를 참조하여 해결할 수 있었다. 나는 객체를 맵핑해주려고 map을 사용했기 때문에, Array.from()메소드를 사용하여 해결하였다. 해당 내용에 나오는 메소드들에 대해 다시 정리해보는 시간이 있어야 할 것 같다.

오늘 플렉스에 들어갈 일이 생겨 잠깐 들어갔다가, 내가 입사한 지 93일째라는 것을 알게 되었다(제목의 일수는 주말을 따지지 않고 작성하니 65일이지만). 벌써 내가 입사한 지 3달이 조금 넘었다는 건가. 다음주면 100일이라는 사실이 놀라웠다. 처음 입사했을 때 다짐했던 것들이 무색하게, 나는 지금 잘 하고 있는 것인가 하는 생각이 들었다. 감상은 감상이고, 지금 당장 해야할 것들이 많기 때문에 오늘 하루도 일에 묻혀 지낸 것 같다. 오전에는 개발 작업과 함께 학습을, 오후에는 회의와 함께 프로젝트 관련 킥오프 일정을 잡았다. 프로젝트 퍼널에 들어오면서 할 일이 많을 것이다 라는 말을 계속해서 실감하고 있다. 나이브하게 '할 일 없어서 헤매는 것보다는 많은 게 낫지' 라고 생각했는데. 물론 그 생각을 ..

React에서 Select Box를 구현하려고 했을 때, select태그를 사용하는 방법도 있지만 mui를 활용하여 css도 깔끔하게 구현하는 방법을 사용해보았다. 먼저 select 태그를 활용하여 select box를 만든 예시이다. 1. select태그를 사용하는 방법 const fruit = ['grape', 'apple'] const A = () => { const [value, setValue] = useState(''); ... const handleChange = (e) => { setValue(e.target.value); } } return ( ... {fruit.map((el) => ( {el} ))} ... ) useState로 상태변경함수를 하나 지정해준 후, 배열의 요소에 맞추어 ..