알다시피 웹사이트 내 유저 이름, 글 등 유저의 데이터를 영구적으로 안전하게 저장하고 싶으면 Database에 저장한다Database에 종류는 여러가지가 있는데, 그 중 관계형, 비관계형 데이터베이스가 있다.관계형 데이터베이스는 데이터를 엑셀처럼 표에 저장한다.데이터

이렇게 생긴 cart-item 하나를 컴포넌트로 만들어 쉽게 반복 사용할 수 있다.이렇게 만들어주고,이렇게 추가해주면 원하는 개수만큼 생성할 수가 있다.위에 만든 것처럼 아무데나 대충 만든건 server component가 된다.server component는 html

새로운 프레임워크 next.js를 배워보려고 한다. 왜? client-side rendering 말고 server-side rendering가 유행하고 있기 때문이라고.client-side rendering : 브라우저에서 html을 실시간으로 만듦server-side

지난 번에 작성했던https://velog.io/@fairytale779/TIL-html2canvas를 이용해서 쉽게 구현하였다세팅은 위 게시글에 적혀있으니 넘어가고, 함수는 다시 적어보자면 이렇다querySelector를 이용해서 두 가지를 만들어주었다그래서

Parsing error: 'import' and 'export' may only appear at the top level. 어디에 괄호를 빼먹었겠거니... 했는데 (정답)에러설명도 길고 export 근처에 }를 넣어봤는데도 쉽사리 고쳐지지 않았음...무슨 말인고 하

지난 번에 이미지 사이즈를 지정했더니불러온 사진들이 비율 상관없이 찌부가 되는 것들을 막고자 새로운 기능을 공부해보았따.공식 github: https://github.com/ricardo-ch/react-easy-cropnpm install react-eas

input 을 통해 이미지를 업로드를 하는 과정에서, 발생 되는 오류이다이미지를 정상적으로 업로드 한다면 문제가 없으나, 이미지를 선택하는 창 까지 띄운 상태에서 취소를 하게 되는 경우이미지 파일 업로드 input에 걸려 있는 함수는 그대로 작동을 하게 되나, 실제 파

스파르타 코딩클럽에서 무료로 css,html 강의를 풀어줬는데,이건 그냥 간단한 html,css니 듣지 않고 여기서 영감을 얻어... 리액트로 인생네컷 만들기를 해봤따.반나절이면 간단히 끝낼 줄 알았는데, 이런 저런 복병을 마주쳐 결국 게시글도 두 개로 나뉘게 됨 ^\

업그레이드된 작업을 위해 이미지 업로드를 미리보기 / 삭제까지 구현하는 방법을 알아보도록 한다!이 모든 것은 나의 빌드업이 될 것이야... 🙄파일을 업로드할 input 버튼 / 올린 파일의 이미지 미리보기FileReader를 선언하여 업로드한 파일 객체를 변수에 담음

이걸 아직도 헷갈리는 나를 위해 정리를 해본다쉽게 이해하기 위해 웹디자인 기능사 공부할 때 폴더를 가져왔음동일한 위치에 저장되어 있기 때문에, "파일명.확장자" 로 기입해주면 된다.index.html 기준으로 밑에 있는 파일/ 이미지들을 불러오기 위한 경로는./ : 현

css 강의 하나를 듣다가, 화면을 캡처해서 저장하는 것을 원해서서버 없이도 가능한지 구글링 해보다가 html2canvas를 알게 되어서 정리해보려고 한다.npm install --save html2canvasimport html2canvas from "html2can

npx create-react-app --template typescript Kakao Developer 등록하기 개발자 어플리케이션 등록하기 : https://developers.kakao.com/console/app 앱 키 얻기 '내 어플리케이션 ' 에 들어가

동물의 숲에 요즘 푹 빠져사는데, 내가 좋아하는 걸로 뭔가를 만들어보면 더욱 흥미가 생길 거 같아서 일단 냅다 동물의숲 api가 있나 찾아보았다. API 불러오기 > https://api.nookipedia.com/ 여기서 api key를 요청한다고 폼을 작성

다크모드는 꼭 프로젝트 시작시에 고려해주기로 하쟈타입스크립트 + 리액트 앱과 스타일 컴포넌트 설치하기npx create-react-app my-app --template typescriptnpm i @types/styled-components style-reset은 브

다크모드를 구현하던 중... 맞이한 에러...나는 사용도 안한 타입이 에러가 났다고 ..Uncaught TypeError: Cannot read properties of null (reading 'useContext')react.development.js:209 War

만들어 보고 싶은 것을 인터넷에서 발견했는데, 그게 class로 만들어졌다는 것도 보고... 또 타입스크립트를 공부하면서 class 알긴 알지만 너란 녀석 내 동료가 되기엔 아직 많이 친하진 않은 거 같아 오늘 본격적으로 알아가는 사이가 되어보려고 한다. 그리고 타입스

이렇게 함수를 지정해주면 에러가 난다.타입스크립트는 여러 개의 타입을 이용할 때타입을 확정지어주지 않으면 까다로운 타입스크립트는 오류를 내기 때문에, narrowing을 꼭 해주어야 한다.이럴 때 해결하는 방법이 narrowing이나 assertion을 이용하는 건데,

클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경"의 조합을 말합니다. 쉽게 말해, 어떤 함수(outer) 내부에 선언된 함수(inner)가 바깥 함수(outer)의 지역변수(outerVariable)를 참조하는 것이 함수(outer)가 종료된 이후에도 계속

메뉴는 헤더에서 메뉴버튼을 누르면 내려오는 부분을 말하며,보통 4개의 메인메뉴와 각각 4개씩의 서브메뉴로 구성되어있다.모양은 가로형1,2,3/ 세로형1,2 ... 로 되어 있음. (일단 A~C유형에서는..)하나씩 만들어보면서 적어놓겠음!전체 메인을 감싸는 ul -> 그