[인프런 리액트] 비주얼 스투디오에서 프로젝트 만들기

*이 글은 인프런 '오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1'를 보고 학습한 내용을 기록한 글입니다. 비주얼 스투디오를 이용해서 프로젝트를 만들고 실행해볼 수 있다. 1. 새 프로젝트를 만든다. ClientApp 폴더의 public src 구조는 create-react-app으로 만든 구조와 동일한 구조다. 즉 frontEnd는 여기에 들어있는걸로 보면되고 나머지는 backEnd로 보면 된다. 이렇게 만들면 visualStudio 또는 .net Core 로 시작을 하면 풀스택으로 시작할 수 있다. 백엔드를 .net Core가 아닌 다른 기반으로 시작해도 된다. 2. 노드 모듈 관련된 것 설치(npm install) 앞의 포스팅의 create-react-app으로 만든 것과는 다른 점..

• format_list_bulleted Programming/react
• · 2022. 1. 31.
• textsms

[인프런 리액트] 리액트 기초 작업환경 구축

*이 글은 인프런 '오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1'를 보고 학습한 내용을 기록한 글입니다. 책으로 공부하다가 한계를 느꼈다... 못따라가겠는건 둘째치고 너무 재미읍써 역시 인강이 최고인가... 작업환경 구축부터 시작! 1. 다운받아준다. https://visualstudio.microsoft.com/ko/vs/ Visual Studio 2022 | 무료 다운로드 Visual Studio에서 코드 완성, 디버깅, 테스트, Git 관리, 클라우드 배포를 사용하여 코드를 작성합니다. 지금 무료로 커뮤니티를 다운로드하세요. visualstudio.microsoft.com https://nodejs.org/en/ Node.js Node.js® is a JavaScript runti..

• format_list_bulleted Programming/react
• · 2022. 1. 30.
• textsms

[리액트 교과서] JSX 없이 React를 해보자 "Hello World!"

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX를 사용하지 않고 자바스크립트만 이용해서 작성해보는 코드! JSX가 뭔지도 잘 모르겠지만 일단 따라해본다. JSX 없이 React를 시작하는 이유 * 브라우저는 일반적인 자바스크립트만 실행할 수 있기때문에 자바스크립트로만 React 코드를 작성하는 방법을 안다면 유용할 것이다. 이 방식으로 시작하는 이유는 jsx는 필수사항이 아니고 React를 위한 표준은 자바스크립트라는 점을 확인하기 위함이다. -- Hello World 뷰를 위한 React 코드를 작성한다. React 엘리먼트를 직접 에 렌더링하지 않는 이유 -> 다른 라이브러리나 를 조작하는 브라우저 확장 프로그램과 충돌하는 것을 방지하기 위함 라이브러리를 HTML 파일에 추가하면..

• format_list_bulleted Programming/react
• · 2022. 1. 26.
• textsms

[리액트 교과서] SPA와 React

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 단일 페이지 어플리케이션 single-page applications, SPA 입사 후 첫 프로젝트 파견 전에 본사에서 SPA 게시판을 만들어보라는 과제를 받았었다. 어찌저찌 만들긴 했는데 내가 만든건 진정한 SPA 형태가 아니니 나중에 다시 공부를 해보라는 피드백을 받았었다. 당시에도 SPA는 처음 들어보는 형태였던지라 무척 생소했었다. 그리하여 책의 흐름을 따라 정해보고자 한다. SPA 아키텍처는 서버보다는 클라이언트 즉, 브라우저 측에 로직이 더 많은 팻 클라이언트(fat client or thick client)다. SPA는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결한다. 1. 사용자가 새로운 페이지를 열..

• format_list_bulleted Programming/react
• · 2022. 1. 25.
• textsms

[리액트 교과서] react?

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 첫번째 프로젝트에서 풀스택(?)으로 일을 하며 든 의문점이 있다. 각자의 업무가 주어진 페이지에서 큰 틀 안에 자잘자잘한 코드를 작성하다보니 A업무단에서 쓰여진 코드가 B업무단에서 필요할때 그 코드를 복사 - 붙여넣기를 하다보니 고쳐야하는 부분이 생기면 어느 한군데에서 고치고 그걸 다시 복사 - 붙여넣기를 하는 너무나도 쓸데없는 짓을 반복하는 것이다. 시간에 쫒겨 마구잡이로 일을 할 때는 그냥 지나쳤는데 끝나고 나니 현타가 몰려왔다. 이게 진정한 프로그래밍이 맞나? 생각하던 차에 다른 언어를 배우며 공부를 해봐야겠다 싶었다. 리액트는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. 리액트는 강력한 UI 라이브러리다. 모든 기능은 물론..

• format_list_bulleted Programming/react
• · 2022. 1. 24.
• textsms