성공을 즐기자

오늘은 UI 만들기 마지막편입니다.  먼저 List.jsx를 만들어줍니다. 하단에 있는 Todo...들이 보이죠 ? 여기를 만들거에요    import "./List.css";import TodoItem from "./TodoItem";const List = () =>{ return Todo List🍀 }export default List; TodoItem은 따로 컴포넌트로 빼줍니다.     import './TodoItem.css';const TodoItem = () =>{ return ( Todo... Date ..

안녕하세요  지난 시간에 이어서 투두리스트를 만들어보겠습니다.       1. Header 파란 글씨 만들기  오늘 날짜를 위 사진처럼 파란색으로 만들어볼게요  오늘 날짜를 h1태그로 나타내줍니다. {new Date().toDateString()} import "./Header.css"const Header = () =>{ return 오늘은 🔥 {new Date().toDateString() } }export default Header; 그러면 파란 글씨를 적용할 부분은 className이 Header인 태그 안에h1 태그 입니다.   그러면 Header.css에는 어떻게 적으면 될까요?  className이 Header 이고 그 아래에 h1 태그이다. .Head..

안녕하세요 리액트로 투두리스트를 만들어봅시다.    만들어볼 TodoList는 다음과 같습니다! 이 글은 한입크기 리액트 인프런 강의를 기반으로 합니다.    1. 요소 간격 Gap (css) 주기  우선 Header, Editor, List 이렇게 3개의 컴포넌트를 만들어줍니다.  자 이렇게 3개의 컴포넌트를 App.jsx에서 호출해줍니다.그리고 이것들을 묶는 div 태그가 있죠 ?여기에 CSS를 적용해줄거에요  왜냐하면 각 요소별로 간격을 주고 싶기때문이죠  className은 Css 파일에서 . (점) 으로 제어할수있어요 .App.css에 들어가서 className이 App인 요소들의 css를 수정하여봅시다.   display : flex는 유연하게 요소의 배치 조절을 가능하게 합니다. flex-d..

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..