이안의 평일코딩

yarn이 설치되어 있다면 터미널에서 아래와 같이 입력하여 타입스크립트 프로젝트용 기초환경을 설정한다. $yarn create react-app 프로젝트폴더명 --template typescript 나는 TS-TodoList를 프로젝트명으로 하여 생성했다. 위와 같이 tsx파일로 타입스크립트 리액트 프로젝트 기본 셋팅 성공!

웹은 Client와 Server로 나누어진다. Client는 요청을 보내는 역할을 하고 Server는 요청을 보고 알맞은 응답을 해준다. 그리고 Client는 그 응답을 바탕으로 DOM에 그린다. (css처리 + javascript로드) 이 과정을 반복한다. 웹의 발전으로 수많은 요청과 응답을 처리해야 되기 때문에 Server 부하, Client도 페이지 깜빡임이 나타남. Ajax라는 기술을 통해 일부분만 정보를 가져올 수 있게 되고 더 나아가 SPA라는 개념이 등장한다. SPA(Single Page Application) SPA는 url을 움직이더라도 html을 새로고침하지 않는 것이다. React는 SPA를 지원하는 라이브러리이며 Client Side Rendering 방식으로 동작한다. Server..

이벤트란?클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것을 말한다. 이벤트 리스너, 이벤트 핸들러는 어떤 이벤트 발생 시 처리하는 함수이다. 자주 사용되는 DOM이벤트로 click(마우스 왼쪽 클릭), contextmenu(마우스 오른쪽 클릭), keydown(키보드 누를 때), keyup(키보드 뗄 때), submit, focus 등이 있다. 이벤트 등록 방법 인라인 방식 (inline)이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다. 단점은 HTML 코드에 자바스크립트를 추가해서 코드가 섞여 유지 보수에 좋지 못하다는 점이다.Click프로퍼티 방식 (Property)인라인 방식의 단점을 보완하여 자바스크립트 코드에 프로퍼티 등록 방식이다. 하나의 이벤..

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다. 쿠키(Cookie) 개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다. 로컬 스토리지(Local Storage) 가볍지만 기능이 많지 않고 단순히 key(키):value(값..

드디어 React로 쇼핑몰 프로젝트를 완료하여 Heroku를 통해 배포에 성공했다. 구글링이나 유튜브에 Heroku 배포에 대해선 너무나도 많은 자료가 있지만 업데이트 부분에는 잘 다루지 않아서 나도 추후에 볼겸 참고용으로 써본다. 즉, 이 글은 이미 1차로 deploy가 된 후에 업데이트 된 build를 어떻게 다시 배포하는가에 대해서 쓴 글이다. build 먼저 위와 같이 해당 프로젝트의 터미널에서 빌드를 해준다. npm run build Heroku에서 deploy하기 heroku login 위와 같이 입력하면 q를 제외한 아무 키나 누르면 Heroku 로그인할 수 있는 인터넷 새창이 뜬다. git add . git commit -am "메세지입력" git push heroku main 순서대로 입..

평소와 같이 vscode에서 git에 커밋후 푸쉬하였는데 아래와 같은 오류가 떴다. error: failed to push some refs to 'git@github.com:ianlee92/music-buff.git' 해결 방법 git push origin +main 강제로 푸쉬해주면 오류없이 잘 업로드된다.

집이나 회사에서 작업하다가 카페 또는 다른 IP로 접속한 경우 연결이 안되는 경우가 있다. 그 경우, 몽고DB 사이트에서 아이피를 추가만 해주면 손쉽게 연결이 가능하다. Network Access IP 추가하기 먼저 MongoDB 웹사이트에 로그인하여 들어갑니다. www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real ..

단위 , 콤마 찍기 (단위변환).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 리액트 예시 import React, {useEffect, useState} from 'react' import UserCardBlock from './Sections/UserCardBlock'; function CartPage(props) { const dispatch = useDispatch(); const [Total, setTotal] = useState(0) //(중략) let calculateTotal = (cartDetail) => { let total = 0; cartDetail.map(item => { total += parseInt(item.price,10) * it..