성공을 즐기자

UI를 잘 만들었다! >    현재 카운트 부분 : Viewer.jsx 버튼 부분 : Controller.jsx 자! 이제 기능을 만들어보자  하고 싶은 게 뭔지는 화면만 봐도 아시죠?  아래 숫자가 적힌 버튼을 클릭하면 그에 맞게 위에 있는 현재 카운트  숫자가 변하는 것입니다.   그러면 숫자가 바로 바로 변해야하니까는 ... state로 만들어야할것같아요. 왜냐하면 바로 렌더링을 해주니까요  그러면 어디에 state로 변수를 만들어야할까요??  저도 처음에는 카운트가 적혀있는 숫자 컴포넌트인 Viewer라고 생각했는데요.정답은 바로 !!!!  App.jsx ( 부모 jsx) 입니다.  왜냐하면 컴포넌트 간에 데이터를 전달하는 방법은 아시죠?? 바로 props 인데여  props는 부모, 자식 컴포넌..

이전 글에서 이어서 시작합니다...!  vite를 이용한 프로젝트 만들기를 진행했었습니다. 그래서 local 띄우는것까지 완료!  이제 counter 프로그램을 만들기 위한 컴포넌트들을 만들어 볼까용? 1. 컴포넌트 폴더를 src 폴더 밑에 만들어주세요 그리구 이름은 Viewer.jsx 입니다.  사진에는 없지만 Counter.jsx 도 만들어줍니다.    아차...차 컴포넌트 첫번째 글자는 대문자로 해야하는거 아시져 ?  2. 간단하게 viewer  만들기   이렇게 하고 App.jsx 에서 로 넣어주면 ~  4.  Viewer 컴포넌트 확인 확인이 잘 되시죠?  5.  APP에서 Viewer, Controller 컴포넌트 호출 ! css 적용 하나 없이 그냥 쌩 button, h1 을 이용해서 만들..

1. 프로젝트를 만들어줍니다. 2.  생성 설정  프레임워크는 리액트, 그리고 자바스크립트를 선택해줍니다.  이렇게 쉽게 끝났습니다. ㅎ.ㅎ 콘솔창에서 알려준대로 잘 따라 작성해줍니다.~    3. 리액트 앱 띄우기  무난히 성공~ 쉽다!   들어가보면 이렇게 뜹니다!

이번 블프에 25% 할인 쿠폰을 주길래... 덥썩 구매했다.    정가 48,400원에 할인받아서 36,300 원!!  원래 신입은 자기계발에 돈 아끼는거 아니랬다.. 열심히 공부해서 실력 키워보자 !    react, nextjs 공부하려고 합니다. 지금 회사에서 대부분 js를 다루다보니 프론트쪽이 더 흥미가 감

next.js 를 하다가 오류가 발생했다.       Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error Expected server HTML to contain a matching in .   이런 에러인데 해결법은 챗gpt한테 물어보았다.      HTML 표준에서 li 태그는 ul 또는 ol 태그 안에서만 사용해야 한다고 하네요.. 그런데 flowbite에서 복붙해온 html에는 p 태그 안에 li 를 쓰고 있었습니다. 그래서 에러가 났던 것이었어요..

localhost:3000 에서 제 사이트가 잘 보이죠 ?    그런데 이 사이트를 다른 사람도 볼수있도록 만들고 싶다면 ? 어떻게 해야할까요 ? 바로 포트포워딩입니다!    cmd -> ipconfig를 입력해줍니다.    그러면 이렇게 IPv4 주소 , 기본 게이트웨이 의 주소들이 보입니다.  여기서 Ipv4주소의 ip를 3000 포트번호에 연결해서 들어가보면 ?  잘나오는 것을 확인할수있답니다~  그런데 이 ip로 접속하는 것은 제 와이파이와 같은 접속일 때만 유효합니다.  그렇다면 어떻게 해야할까요?      아까 주소에서 마지막 숫자를 1로 변경해줍니다.  그러면 이렇게 와이파이 사이트로 들어갑니다.   저는 iptime 공유기를 사용하고 있어서 이렇게 뜹니다! 로그인을 잘 해주시면 이런 화면이..

1. 레포지토리 생성 먼저 레포지토리를 생성해볼게요.  new 버튼을 눌러 레포지토리를 생성해줍니다!    적당히 리포지토리 이름과 설명을 적고하단에 create Repository를 눌러 만들어줍니다.    2. 로컬과 연결    3. 명령어 입력 터미널에서 해당 플젝위치에 들어가준다.  git init git commit -m "커밋 제목" git remote add orign  git push origin main       4. 커밋 완료!   https://github.com/dumi33/firstNext GitHub - dumi33/firstNext: next.js 프로젝트입니다.next.js 프로젝트입니다. Contribute to dumi33/firstNext development by c..

1. Node.js 설치 https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org -> 다운로드 노드JS -> msi 파일을 눌러 설치를 해줍니다.  다 next를 누르고 설치하면 finish가 나옵니다.  node-v 명령어로 설치된 버젼을 확인할 수 있습니다!  혹시 nodejs 버젼충돌 문제가 난다면 ? (TypeError: Class extends value undefined is not a constructor or null)-> 참고 https://velog.io/@keynene/ErrorNodejs-N..

이 문제는 npx create-next-app 을 실행하려다 발생하였다.   아마 node.js 버젼문제 인것같은데 삭제했다가 다시 깔아도 문제가 해결되지않았다.   그러다 쉽게 문제가 해결되었다. https://github.com/npm/cli/issues/6971 [BUG] npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\userName\AppData\Roaming\npm' · Issue #6971 · npm/cliIs there an existing issue for this? I have searched the existing issues This issue exists in the latest npm version I am ..

axios -> 뷰에서 권고하는 promise기반의 http 통신 라이브러리  ajax (Asynchronous Javascript And Xml)-> 비동기적인 webApplication의 제작을 위한 웹개발 기법      vue에서 http통신을 하기위해서는 axios를 주로 사용하도록 권고하고 있습니다.  axios는 오픈소스로https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.jsPromise based HTTP client for the browser and node.js - axios/axiosgithub.com 이 깃허브 주소에서 확인하실수있습니다.    깃헙..