1. 개요지난 포스팅에 언급했듯. 다른 컴포넌트를 담는 div 컴포넌트는 어떻게 구현하는지 포스팅해보겠다. 2. 코드지난 포스팅에선 const Container = React.createElement("div", null, [title, btn]);이런식으로 컴포넌트들을 배열로 가져와서 랜더링 했지만 JSX에서는 개발자가 정의한 컴포넌트를 태그로 불러올 수 있다. 이렇게 개발자가 정의한 컴포넌트를 '', ''로 가져올 수 있다. 여기서 페이지를 열어보면?이렇게 에러가 쫘르륵 나오게되며, 당연히 페이지에는 나와야할 텍스트와 버튼이 나오지 않는다. 에러가 발생한 이유가 무엇일까? 2-1 Arrow Function자바스크립트에는 애로우 함수 (Arrow Function)라는 개념이 있는데, 이..
1. 개요JSX는 자바스크립트를 확장한 문법이다. JSX를 사용하지 않는 리액트 문법은 HTML과 매우 흡사하다. 그래서 JSX를 사용하면 개발자 입장에서는 매우 편하게 리액트를 개발할 수 있다. 2. 코드비교JSX를 사용하지 않은 코드와 사용한 코드를 비교해보자.// JSX 적용 전 // JSX 적용 후 코드를 비교해보면 알 수 있듯, JSX를 사용하면, 자바스크립트 언어에서 HTML 태그를 작성하듯이 페이지를 만들 수 있다. 이렇게 되면 개발자들은 HTML 만들듯이 자바스크립트의 기능도 구현할 수 있는 것이다. 여기서 주의할 점은 자신이 만든 컴포넌트는 무조건 대문자로 시작해야한다. 3. babel위 JSX 적용 코드를 자세히 보면 babel이라는 단어가 보일 것이다. 이는 JSX 문법을..
1. 서론최근 이직한 회사에서 스프링부트 뿐만아니라 리액트를 사용해야할 수도 있다고해서 리액트를 간단히 공부하고 있다. 리액트를 접하면서 처음 맞아본 에러(시작하자마자 에러남 ㅋㅋ)를 소개하고 해결한 방법을 포스팅하려한다. 2. 에러발생리액트를 사용하기 위해 노드js (Node.js) LTS 버전을 설치하고, 리액트를 프로젝트 폴더에 주입하기 위해 npx 명령어를 사용했을때, npx create-react-app 프로젝트명npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다.자세한 내용은 ...에러가 났다. 권한 문제일 수 있다고하여 권한을 수정해보려 했으나, 회사 PC라 조심스럽기도 하고.. 권한을 바꾸지 않아도 해..
1. 서론필자는 전 직장에서 개발업무를 하였지만, 올드하고 단순한 기술스택으로 성장이 멈춰있는 상태였다. 그래서 실제 배포를 목적으로 하는 B2C 서비스 (백엔드 어플리케이션)를 사이드 프로젝트로 진행하고 있는데, 실무 레벨의 코드와 개발 지식, 대용량 트래픽 처리 등을 마주할 수 있는 환경이 아니었고, 그로 인해 성능을 고려하지 못한 프로젝트를 진행하고 있었다. 그러다 우연히 판교에 갈 일이 생겼는데, 그 때 보았던 if kakao 2024 홍보 포스터... 빅테크 개발자들의 개발 문화와 지식을 배워갈 수 있는 좋은 기회가 될 것 같아 신청했다. 2. 본격적인 후기신청 후 약 2주 뒤 if kakao 알림톡으로 참가확정 톡이 왔다.원래 이런거 신청하면 진짜 당첨 안되는 편인데.. 이번엔 운이 정말 ..