Web Service42 [영화 웹 서비스 만들기] #5. State ~3.9까지의 강의 역대급으로 긴 호흡이라 집중이 잘 안되는 것 같기도하고 길어서 전체 코드 대신에 부분 적으로 코드를 보도록 하도록 하자. setCounter을 설정해서 원하는 값으로 변경해주자. 이때 setCounter는 이전 값을 이용해서 현재 값을 계산해 내는 것 이기 때문에, setCounter를 다르게 설정해 줄 수 있다. 1. 직접 값 설정 setCounter(counter+1); 정해진 값으로 나옴. 2. 함수 전달 setCounter((current) => current+1); 현재 값을 가지고 계산을 해야 한다면, setCounter 안에 함수를 넣자. 이렇게 한다면 다음 state 값이 현재 값을 바탕으로 나온다. 즉, 함수가 언제나 현재 state를 얻을 수 있도록 해줄 것이다. 결.. 2022. 3. 21. [Next.js] Vercel 오류 및 Next.js 구조 Next.js로 프로젝트를 만든 후에 Vercel로 배포하려고 했는데 계속 에러가 났다... npm run dev로 하면 local로는 열리는데, 배포할 때 오류가 생겼다. 구글링해서 하라는 거 다 했는데도 되지 않아서 왜지? 싶었다. 고치려고 노력했으나 되지 않았고, 그냥 무시하고 진행했다. 그러다가 오늘 할 거 다 해서, 다시 한번 시도했는데, 드디어 에러를 해결했다. 정말 간단한 실수때문에 일어난 일이었는데, 헛짓거리를 했기에 나같은 사람이 다시 없길 하는 바람에서 글을 작성한다. ~intro는 여기까지~ npm run build --prod 명령어 입력하면, 어디서 오류가 났는지 알려주고, 친히 링크까지 알려준다. 링크들어가서 오류 해결하는게 제일 빠른 방법 page-without-valid-co.. 2022. 3. 19. [영화 웹 서비스 만들기] #4. setState ~3.3까지의 강의 State는 기본적으로 데이터가 저장되는 곳이다. 전체코드 사용자에게 변화를 줬다는 걸 보여주려면 render를 호출해주면 된다. render가 최초로 호출될 때, Container 함수를 넣어주면 된다. 렌더링(rendering) html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다. React에서 저장하고 자동으로 re-rendering을 배우는 방법을 배워보자. const [counter,setCounter] = React.useState(0); useState 사용했을 때 배열 하나를 주는데, 배열 첫번째요소 우리가 담으려는 data 값(=counter)이고, 두번째 요소는 data 값을 .. 2022. 3. 19. [영화 웹 서비스 만들기] #3. JSX ~2.6까지의 강의 JSX는 자바스크립트를 확장한 문법이다. 기본적으로 리액트 요소를 만들 수 있게 해주고, html에서 사용한 문법과 흡사하다. 앞에서 배운 것과 비교해보자. createElement const h3 = React.createElement( "h3", { id:"title", onMouseEnter: ()=> console.log("mouse enter"), } , "Hello, I'm a span" ); JSX const Title=( console.log("mouse enter")}> Hello I'm a title ); createElement const btn = React.createElement( "button", { onClick:()=>console.log("i'm cli.. 2022. 3. 14. [영화 웹 서비스 만들기] #2. 바닐라JS와 리액트JS의 비교2, 버튼 ~2.4까지의 강의 버튼 만드는 것 부터 바닐라JS와 차이가 난다. vanilla.js Total clicks: 0 Click me #1과 동일한 코드 버튼 만들고 따로따로 해줘야 한다. React.js createElement에 html 선택(h3, button, div 등)하고 이벤트 등록하면 버튼이 생성된다. -> 앞으로 안 쓰지만 그래도 알아두기는 할 것! 처음에 들었을 때는 뭔 소리야;; 했는데 확실히 이해하면서 들으니까 html보다 훨씬 더 간편하다는 것을 깨닫는 중.. 2022. 3. 14. [영화 웹 서비스 만들기] #1. 바닐라JS와 리액트JS의 비교 프로젝트를 본격적으로 하기 전, ReactJS 복습이 필요하다고 생각해 다시 듣기로 결정 ! 이번에는 제발 끝까지 블로그 쓰기를 바란다... ~2.2까지의 강의 처음에는 바닐라랑 비교를 한다. vanilla Total clicks: 0 Click me 간단한 과정은 이렇다. html을 작성 -> 자바스크립트에서 버튼을 가져옴 -> 클릭이벤트 감지(addEventListener) -> 이벤트 함수에서 이벤트를 업데이트 -> html 업데이트 React React 이기는 하지만, 먼저 스크립트로 불러와서 한다. 여기서 react~는 엔진역할이고 UI를 만들고, react-dom~은 html 바디에 넣어주는 역할이라고 한다. ReactDom.render()에서 render는 React element를 가지고 .. 2022. 3. 14. 이전 1 ··· 3 4 5 6 7 다음