AI Platform / Web

npm run build react 배포를 위해 빌드 시 다음과 같은 에러가 발생 할 수 도 있다. 이는 nodejs 버전이 높아서 생기는 문제다. 해결책 1 pakage.jsn을 변경한다. // 변경 전 "start": "react-scripts start" // 변경 후 "start": "react-scripts --openssl-legacy-provider start" 해결책 2 terminal에 다음과 같이 쳐준다. export NODE_OPTIONS=--openssl-legacy-provider 이러한 해결책은 안전하지 않은 SSL로 실행중임을 의미하므로, 실행은 할 수 있지만, 근본적인 문제 해결은 못아니라고 할 수 있다. 따라서 가능하면 node 버전을 낮춰서 빌드를 진행하면 될 것이다.

react를 통해 컴포넌트를 만들어 볼까 한다. 복잡한 이론 없이 최소의 중요한 것만 적어보겠다. 심화 내용은 필요 시 다른 좋은 참고 서적을 참고하기 바란다. https://han-py.tistory.com/395 위의 단계(react 시작)부터 빠르게 우리는 여기 까지 왔다. (보는데 2분도 안걸리니 보고 오면 좋다.) 1. 개념 기본적으로 html을 해 보신 분들이 이 글을 보고 있을 것이다. 사실 html으로 웹으로 만들어도 된다. 그러나 react 라이브러리를 쓰는 이유는 무엇일까? 단지 현업에서 많이 사용해서? 내가 생각하는 이유는 간단하다. html 만 사용하는 것보다 편하기 때문이다. 그렇다면, 무엇이 편할까? .html 파일에 코드를 작성하는 경우 굉장히 길어지고 유지보수 재사용성이 어렵..

우리는 아래의 url에서 프로젝트를시작하는 방법을 알아보았다. 2021.11.01 - [Web/React] - [react web] 시작하기 처음시작하면 아래와 같이 파일 구조가 보인다. 그리고 npm start를 사용하면, 아래와 같은 화면이 뜬다. 이제 프로젝트 시작하기 위한 첫 setting에 대해 알아보자 app.js에 들어가면 아래와 같다. 먼가 많아 보인다. 필요 없는 것을 깔끔히 지우면 아래와 같이 된다. 끝이다. hi를 넣어보자. 이렇게 하면 기본 준비가 다 된것이다. 물론 파일 정리를 깔끔해게 해도된다. 하지만, 초보자 기준으로는 핵심은 화면이고 화면정리는 app.js에서 하는 것을 우선적으로 이해를 한 후에 파일 정리를 하면 된다. 추가로 중앙 정렬만 CSS를 추가해 주면 아래와 같다...

실습 기준으로 빠르게 리액트의 기본을 알아가자. 프로젝트를 진행한 기준으로 사용한 기술들을 정리하려 한다. 신입 개발자나 취준분들에게 많은 도움이 될 것이다. before starting > 시작전 아래의 방법을 cmd에 친다. 버전이 안뜬다면, 기본적으로 설치를 진행하자. $ node -v $ npm -v $ npx -v 설치가 됐다면, 아래의 명령어로 web을 만들기 위한 리액트를 시작할 수 있다. $ npx create-react-app base0 $ cd base0 $ npm start $ npx create-react-app base0 이 명령어는 base0이라는 프로젝트를 시작한다는 말이다. base0 대신 사용하고 싶은 프로젝트명을 사용하면 된다. $ cd base0 base0이라는 생성된 ..

들어가기전에 react는 뷰js나 앵귤러가 프레임워크인 점과 다르게 react는 라이브러리다. 따라서 자유도가 높다는 점을 진지하고 진행하자. JSX를 사용이유는 여기를 눌러서 확인하고 오자. JSX란, 문자도 HTML도 아닌 JavaScript의 확장 문법이다. 변수선언방법은 아래와 같다. const element = Hello, world! 위의 생겨먹은것을 보면 전반적으로 const로 변수를 선언하니 javascropt같은 냄새가 난다. 그러나 뒤의 h1 태그들을 보면, HTML인것 같다. 즉, 위의 태그 문법은 문자열도 아니고 HTML도 아니다. 바로 JSX이다. JSX는 JavaScript의 모든 기능이 포함되어있다고 볼 수 있다. 이전 글에서 sandbox에서 react에대한 기초를 알아 봤다..

0. 들어가면서 즐거운 마음으로 react관련 글을 적어보려한다. 가능하면 실습을 통해 따라하면서 자연스럽게 익힐 수 있도록 준비해 보려한다. 기본적으로 프런트엔드는 웹과 앱이 있는데 우선을 웹을 기준으로 작성을 시작해 보겠다. 리액트를 들어가기 전에 자바스크립트로 워밍업을 한다고 생각하면 된다. 들어가기 전에 간단히 개념만 잡고 가겠다. 기본적으로 WEB에서 우리가 눈에 보이는 각각을 element라고 한다. 그리고 DOM이란 브라우저(컴퓨터)가 이해하는 element의 원형이다. 즉, element를 논리적으로 말하면 DOM이라고 한다. 물론 한번에 이해 안될 것이다. 괜찮다. 먼가 화면에 보여지는것을 element라고 하기도 하고 DOM이라고 하기도 하는구나라고 생각하고 그냥 넘어가자. 우리는 바닐..

React element에서 이벤트를 처리하는 방식과 DOM element에서 이벤트를 처리하는 방식을 비교하면서 알아보자. - React의 이벤트는 소문자 대신 camelCase를 사용한다 - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. HTML Activate Lasers React Activate Lasers React에서는 false를 반환해도 기본 동작을 방지 할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다. 새 페이지를 여는 링크의 기본 동작을 방지하기는 코드를 비교해 보자 HTML Click me React function ActionLink() { function handleClick(e) { e.preventDefault(); console...

React 컴포넌트 안의 state와 생명주기 개념을 알아보고 캡슐화를 해보자. 아래의 예시는 ReactDOM.render()를 사용하여 렌더링 된 출력값을 변경하는 것을 알아보았다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); 위의 코드를 캡슐화 해보자 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } funct..