전체 글18 Vanilla JS와 ReactJS의 비교 #2 Vanilla JS HTML 먼저 만들고, Javascript 가져와 HTML 수정 방식 Click me React JS Javascript 시작 이후 HTML이 됨. (HTML을 이 페이지에 직접 작성하지 않고, 그대신 javascript 코드 사용) React JS와 react-dom React JS (= 엔진) 어플리케이션 interactive하게 만들어주는 라이브러리 element를 생성하고 event listener를 더하는 것을 도와준다. react-dom react element를 html에 두는 역할과 html로 바꾸는 역할을 한다. 규칙 createElement로 argument를 만들때는 유효한 html태그면 가능하다. property에다가 id, style, event listener.. 2023. 1. 23. [React] Uncaught SyntaxError: Unexpected token '<' (at jsx.html:57:7) 오류가 발생한 원인 브라우저가 JSX를 이해하는 것은 아니라서 이런 에러가 발생합니다. 브라우저는 JSX를 invalid라고 생각합니다. JXS는 기본적으로 같고 아래와 같이 코드를 작성을 했다면 아래와 같이 코드를 변환시켜야 합니다다. Babel을 사용하여 변환을 시켜줍니다. Babel은 코드를 변환시켜주는 것입니다. 즉, JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것입니다. 해결방법 Bable standalone을 이용해서 다운을 받으면 오류가 사라집니다. 위와 같이 script에 추가하여 해결했습니다. * 주의사항 script type으로 된 태그 안에 컴포먼트를 작성하지 않으면 똑같은 오류가 납니다! * + script에 적은 건 script에서 확인이 가능하고 변환이 된 코.. 2023. 1. 22. [React] npm start 에러 팀원이 푸쉬한 것을 풀 받고 비쥬얼코드 종료하고 다시 열어 npm start를 진행했는데 오류 발생,,, 해결방법 1. npm install을 한 후 다시 npm start를 해보기 2. npm install -g react-scripts 하고 다시 npm start 해보기 3. paclage.json 파일에 script 명령어에 start 스크립트 명령어 추가 4. error code 1에러 메세지가 나오면 package-lock.json과 package.json의 webpack을 지운 상태에서 npm install 해보기 * npm install시 “Cannot read property ‘mach’ of undefined 에러가 나오게 되면 package-lock.json을 지우고 다시npm inst.. 2023. 1. 22. [React] Minified React error #200; / Target container is not a DOM element. Minified React error #200;가 나면 먼저 오류 코드 안에 있는 링크에 들어가서 확인하기 위와 같은 페이지와 함께 "Target container is not a DOM element."라는 오류 메세지 확인하기 오류가 발생한 원인 DOM에 렌더링 시 return하고자 하는 element를 찾을 수 없어서 발생했습니다. 해결방법 js 파일에서 가져오고자 하는 element 의 id 와 렌더링 될 element 의 id 를 맞춰주면 오류가 해결이 됩니다. 그래서 저는 아래 코드와 같이 작성을 했는데 오류가 발생하여 아래와 같이 return 할 argument를 수정해줬더니 오류가 해결되었습니다 결론 나의 오류 원인 : container로 묶은 span, btn을 한번 더 return을 해.. 2023. 1. 22. 6. element 가지고 오는 방법 1. getElementsByClassName 클래스 이름으로 정의하여 가져오는 경우 element를 한번에 가지고 와야할 경우 사용함 array로 가지고 올 수 있음 const hellos = document.getElementsByClassName('hello'); console.log(hellos); //hello라는 클래스를 가지는 element가 여러개가 html에 정의가 되어있고 이건 array로 구성이 되어 있다 2. getElementsByTagName tag name을 가지고 element들을 가지고 오는 경우 array로 가지고 올 수 있음 const title = document.getElementsByTagName('h1'); console.log(title); //h1 태그로 되어.. 2023. 1. 18. 5. 자바스크립트 기초 2 doucument html을 가리키는 객체, 브라우저에 이미 존재하는 object이다. consloe에 document라고 치면 html파일이 나온다 이용해서 javascript에서 html 코드 내용들을 변경 할 수 있다 document.title = 'hi'; getElementById 함수를 통해 id로 element를 가져올 수 있다 html body에 있는거를 부를 때 사용됨 document.getElementById('title'); document.dir element의 내부를 보고 싶을 때 사용함 Grab me 1! const title = document.querySelector('div.hello:first-child h1'); console.dir(title); 스타일 바꿀 수 있음 .. 2023. 1. 18. [JavaScript]Cannot set property 'innerText' of app.js:3 null innerText를 가지고 있는 id 또는 class와 같은 변수가 존재하지 않으니 이 변수 안에 있는 innerText를 호출하지 마십시오라는 뜻 해결방법 존재하지 않는 변수를 찾아 그 변수를 추가하거나 이름을 수정하면 됨 참고 노마더 코드 바닐라js 강의 중에 언급 2023. 1. 18. 4. Prompt prompt 사용자에게 메세지가 써져 있는 창을 띄어 값을 입력받을 수 있게 한다. const ageAge = prompt('how old are you?'); console.log(ageAge); 타입변환 typeof : 문자열로 타입변환 parseInt : 문자 -> 숫자로 타입변환 (숫자인지 알 수 있고, 크기비교를 할 수 있음) console.log(typeof ageAge); console.log(parseInt(ageAge)); 결과값으로 숫자인지 아닌지 판단 isNaN boolean형으로 number이면 flase로 아니면 true로 값을 반환해줌 && 그리고 true || true === true, | false || true, true || false, false || false === .. 2023. 1. 18. 3. function function 너를 계속 반복해서 사용할 수 있는 코드 조각 argument(인수) : function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법 function 명 옆 ()은 variable이다. 그리고 funtion에서만 존재함 *variable이고 funtion에서만 존재함 function sayHello(name0fperson, age) { console.log('Hello my name is ' + name0fperson + ' ' + age); //Hello my name is nico 10 } sayHello('nico', 10); sayHello('nico', 0, 0, 0, 0, 0, 0); //오류 안나고 위와 같이 출력된다. //console.log(age).. 2023. 1. 18. 이전 1 2 다음
