(2023.06.25) 소소한 til을 적어보고자 한다. 1. CRA 버전 확인 : 터미널에서 create-react-app --version 업그레이드 된 CRA를 사용하려면 react-scripts를 업그레이드해줘야 한다 2. form 태그 안의 button : 디폴트로 버튼 클릭시 submit이 된다. 즉 reload가 되는데 이걸 막기 위해선 button type을 button으로 하면 된다. 3. chatGPT 코드 인터프리터 : 더욱 막강한 인공지능이 등장했다. 기존 chatGPT보다 코드를 더 잘짜는 기능인데 파일을 업로드해서 요청할 수 있고 본인 스스로 학습하고 생각해서 답을 준다고 한다(왠만한 개발자보다 잘 짠다고 함). 이로써 개발자들은 코드만 짜면 되는게 아니라 코드의 전체적인 설계,..

(2023.06.24) 바야흐로 클라우드 시대다. 물리 서버를 설치,운영하는데는 많은 비용과 시간이 필요하다. 개인이나 기업이나 클라우드 서비스를 사용하면서 서비스 개발에 집중할 수 있게 됐다. 누구나 사용할 수 있는 퍼블릭 클라우드 서비스가 있다. 대표적으로 aws, azure, gcp이다. 보험플랫폼 회사에 다닐때 인프라를 gcp를 썼다. 각 서비스의 장단점을 알아보면, aws는 서비스 종류가 굉장히 많다. 하지만 각 서비스를 결합하는 부분이 쉽지 않다. azure는 유명 it대기업들과 파트너십을 맺었으며 end to end 솔루션이 잘되어 있다. 하지만 코로나때 용량 부족 이슈가 있었고 개인에게는 상대적으로 가격이 비싸다(end to end 솔루션은 서로 다른 서비스를 연결할 때 여러 단계를 거치지..

(2023.06.23) js의 중요한 개념인 이벤트 루프. js는 한번에 한가지 일을 처리할 수 있는 '싱글 스레드' 언어이다. 하지만 동작하는 걸 보면 동시에 여러 일을 처리하는 것처럼 보인다. 이유는 바로 js가 동작하는 환경 때문이다. js는 브라우저와 node.js라는 환경에서 동작하는데 여기에 있는 '이벤트 루프'라는 기능이 있어서다. 이벤트 루프는 콜스택과 이벤트큐라는 저장소를 계속 확인하면서, 콜스택이 비어 있고 이벤트큐에 대기중인 함수가 있으면 콜스택으로 보낸다. 그리고 콜스택의 함수는 실행된다. 즉, 이벤트 루프는 js가 여러가지 일을 할 수 있게 한다. 좀 더 자세한 내용은 다음에 정리해야겠다.

(2023.06.22) 사용자의 입력을 받아서 처리하는 프론트엔드에서 input은 뗄레야 뗄 수 없는 태그다. input을 다룰때 js없이 html, css로만 처리하는 방법이 있다. 1) 사용자가 반드시 input에 입력을 해야하고 2) 그렇지 않으면 border-color를 빨간색으로 표출해야 할때 아래와 같이 하면 된다. input:invalid { border-color: red; }

(2023.06.21) react로 styled-components를 쓰다가 에러를 만났다. props로 데이터를 전달해서 다양한 컬러를 표현하는 box컴포넌트를 만들려고 했다. 그런데, looks like an unknown prop is being sent through to the DOM 이런 에러가 나왔다. 한참을 찾았는데 답은 버전문제였다. styled-components 버전이 6이었는데 이걸 5로 바꾼 다음에 하니까 잘 작동했다.

(2023.06.20) 개발하다가 터미널에서 서버를 껐는데(Ctrl+C) 작동이 안되면 강제로 꺼야 한다. // 포트 3000에 해당하는 pid 확인 lsof -i:3000 // 포트 죽이기 kill -9 [pid]