Study29 [노마드코더] 바닐라 JS로 그림 만들기 - project setup https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co html 셋팅 - html파일에서 코드창에 ! + enter 해주면 자동완성 Live Server - vscode의 확장프로그램 - 설치해주면 화면 오른쪽 하단에 'Go Live' 라는 글자 생성 -> 클릭하면 자동으로 html 파일 열림 - 여기서 HTML파일 이름은 꼭 index.html 이어야 함 => 가장 큰 장점은 서버가 자동으로 새로고침 되어서 코드 수정사항이 바로 연동 2023. 8. 22. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - coin tracker https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 이번 강의에서는 암호화폐들과 그 가격을 나열하는 화면을 만들게 된다 이때, useEffect를 사용! -> 페이지나 앱을 들어왔을 때는 로딩 메세지 보이게 -> 코인들이 나열되면 로딩 메세지 숨김, 코인들을 리스트로 보여줌 (useEffect는 component의 시작에서만 어떠한 것을 실행되도록 해줌) import { useEffect } from "react"; import { useState } from "react"; function App() { //로딩 메시지 const [loa.. 2023. 2. 22. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - To do list(2) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co map함수란? - 간단하게 말하면 array를 변형시켜주는 함수 - return하는 값이 어떤건지 간에 그 값이 새로운 array가 되는 것 - 이 함수는 array의 각 item들을 한번씩 동작해 거쳐갈 것 - 이때, item대신 다른 변수명을 넣어도 무방함 - 첫번째 argument는 value, 두번째 argument는 index(number) ex) //item들을 모두 :)로 변경 ['hi', 'hello'].map(() => ":)") //item들을 모두 대문자로 변경 ['hi.. 2023. 2. 3. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - To do list (1) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co import { useState } from "react"; function App() { //string const [toDo, setToDo] = useState(""); //array const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { .. 2023. 1. 31. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - cleanup https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co import { useState, useEffect } from "react"; function Hello() { useEffect(() => { console.log("im here!"); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {s.. 2023. 1. 31. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - CRA https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co //Button.js import PropTypes from "prop-types"; function Button({ text }) { return ( {text} ); } Button.propTypes = { text: PropTypes.string.isRequired, }; export default Button; PropTypes Checking 1. PropTypes install -> 터미널에 'npm i prop-types' 입력 후 엔터 2. Button.js 첫번째줄에 'im.. 2023. 1. 19. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - create react app https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co create-react-app? - ReactJS 어플리케이션을 쉽게 만들 수 있는 방식 - 많은 스크립트들과 많은 사전설정들을 사전에 준비해줌 ex) 개발 서버에 접근 / Auto-Reload(자동 재실행) / 어플리케이션 안에 CSS를 즉각적으로 포함 create-react-app 사용을 위한 사전 셋팅 - node js 설치(콘솔창에 node -v로 버전 확인) - npx 설치 1. 콘솔창을 연다 2. 'npx create-react-app 폴더이름' 입력 후 엔터 3. happy h.. 2023. 1. 18. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - prop types https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co React는 parameter를 잘 못 넘겨도 확인 할 수 없는 문제점이 존재 -> 이 문제점의 해결방안으로 나온 것이 PropTypes 모듈 React prop-types - prop의 type이 잘못되었을 때 알려줌 (콘솔창에 warning 띄워줌) - .isRequired : 필수조건 2023. 1. 17. [노마드코더] ReactJS로 영화 웹 서비스 만들기 - Props https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co Props란? - 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방식 - 부모에 props를 사용하면, 자식 컴포넌트의 인자로 객체가 들어가게됨 => 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리하여 재사용 가능 (만들었던 컴포넌트가 변화를 조금씩만 주면서 반복적으로 쓰이는 것이라면 props를 사용하는것이 좋음) React Memo란? - 특정 컴포넌트가 다시 리렌더링 되는것을 원하지 않을 때 (단, prop이 변경되지 않는 선에서) ex) 첫.. 2023. 1. 17. 이전 1 2 3 4 다음
