어떻게 하면 React.js에서 값이 바뀔 데이터를 담아줄 수 있을까? useState()를 활용하면 React.JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있다. useState() 코드 예시 const data = React.useState();를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타난다. undefined는 data이고 f는 data를 바꿀 때 사용하는 함수이다. React.useState() 함수는 초기값을 설정할 수 있다. 즉, undefined -> 초기값 , f -> 그 값을 바꾸는 함수이다. React.useState() 배열에서 보통 데이터에는 counter처럼 원하는대로 붙이고 f는 set 뒤에 데이터 이..
createElement React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다. 하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자. createElement를 쓸 때 첫 번째 argument는 root에 들어갈 HTML 태그이며, 두 번째 argument는 props가 포함된 object, 세 번째 argument는 content이다. ※ chatGPT의 createElement에 대한 설명도 첨부한다. React.createElement(type, [props], [...children]) type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 ..
현재 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의를 듣고 있습니다. https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 강의를 따라가면서 create-react-app을 사용하기 위하여 Node.js를 설치하고 명령 프롬프트에서 원하는 폴더로 이동해서 'npx create-react-app .'을 입력했지만, 자꾸 오류가 떴다. 그래서 처음에는 Node.js 버전이 문제인가 싶어서 버전 16으로 다운그레이드도 해보고, 학교 와이파이라서 그런가 싶어서 집으로 이동해서 다시 설치도 해보았다. 하지만 오류는 고쳐지지 않았다. np..
밑 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의 중 일부 내용을 포함하고 있습니다. React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다. (밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 이 강의을 듣다보면 Super Converter를 만들게 되는데, Super Converter는 React의 State를 활용해서 시간/분 , 킬로미터/마일 중 변환하고 싶은 것을 골라 데이터를 입력하면 변환을 시켜주는 프로그램이다. 코드 실행..
저번 시간에는 CSS 강의를 듣고 퀴즈도 풀어봤다. 2023.07.04 - [프로그래밍/프론트엔드] - [CSS] 얄코의 CSS 강의를 듣고 [CSS] 얄코의 CSS 강의를 듣고 지난 번 스터디에서는 HTML 강의로 생활코딩님의 유튜브를 들었다. 2023.07.01 - [프로그래밍/프론트엔드] - [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 오랜만에 quickchabun.tistory.com 2023.07.05 - [분류 전체보기] - [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 저번에는 HTMl 퀴즈를 풀어보았다. 2023.07.02 - [프로..
저번에는 HTMl 퀴즈를 풀어보았다. 2023.07.02 - [프로그래밍/프론트엔드] - [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. 프론트엔드 스터디를 하면서 강의를 다 듣고 나면, w3schools라는 사이트에서 관련 문제들을 풀어보기로 정하였다. https://www.w3schools.com/quiztest/default.asp W3Schools Quizzes W3Schools offers free online tutorials, r quickchabun.tistory.com 이번에는 CSS 퀴즈를 풀어보았다. 저번과는 다르게 25문제 밖에 되지 않았는데, 과연 결과는? 그래도 이 정도면 꽤 잘 본거 같은데?라는 생각이 들..
저번에 프론트엔드 스터디를 하면서 HTML 퀴즈를 풀면서 복습을 했었다.(밑의 링크 참고) 2023.07.02 - [프로그래밍/프론트엔드] - [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. 프론트엔드 스터디를 하면서 강의를 다 듣고 나면, w3schools라는 사이트에서 관련 문제들을 풀어보기로 정하였다. https://www.w3schools.com/quiztest/default.asp W3Schools Quizzes W3Schools offers free online tutorials, r quickchabun.tistory.com 예제를 풀어보면 더 좋을 것 같아서 검색을 하던 중 좋은 예제를 제공하는 사이트를 찾았다. ht..
