프로그래밍 일기 — React를 알아보자 1

배우는 자(Learner Of Life)
5 min readJan 14, 2024

--

반응(React)형 웹의 선도 기술

반응형 웹의 필수 기술인 React에 대해 배워볼 시간이다(1).

드디어 C#의 기초과정이 끝났다. 기초과정은 끝났지만, C#을 활용해서 내가 앞으로 배운 지식을 어떻게 활용할지는 나에게 달렸다. 내 앞으로 끝없는 도로가 새롭게 펼쳐진 느낌이다. 다시 출발선에 섰다는 생각으로 새로운 모험을 한다는 마음가짐을 가지게 되었다.

현재 내가 배우는 과정은 Building React and ASP.NET MVC 5 Applications인데, 풀스택 과정으로써 백엔드 부분인 C#만을 다루는 것이 아니라, 프론트 기술인 React도 다룬다. 내가 지난 부트캠프에서 백엔드 Java와 Spring을 배울때에도, 프로젝트를 할 시간이 주어졌는데 프론트를 아예 다루지 못하는 상태에서 하려니 여간 불편하고 어려운게 아니었다. 웹 기술은 백엔드와 프론트로 이루어져있기에 하나라도 부족하면 절대로 사용자 입장에서 제대로된 서비스를 경험할 수 없다. 백엔드 개발자 입장에서도 내가 백엔드단에 작성한 로직이 정말 잘 구현되었는지 테스트할 길이 없다. 그렇기에 백엔드를 한다고해서 프론트엔드를 아예 몰라서도 안되고, 반대의 경우도 마찬가지다. 내가 C#과 .NET Core 등으로 구현한 백엔드 기술을 반드시 브라우저상에서 테스트하기위해서는 최소한의 프론트를 구현해야하는 것은 필수적이다. 그렇기에 어느정도 프론트 기술을 배워야할 필요가 필연적으로 생길 수 밖에 없다.

따라서 오늘날 반응형 웹 기술의 핵심인 React에 대해 학습해보려한다. 이번 기회를 통해서 내가 지난 부트캠프에서 제대로 배우지 못한 프론트 기술에 대해 알아보고, 백엔드를 넘어서 전체적인 풀스택 웹 개발에 대해 더 폭넓게 이해하는 기회로 삼을 생각이다.

JavaScript부터 배우기

React를 배우기에 앞서 현재 모든 웹 기술의 근간인 JavaScript부터 이해하고 넘어가는 것이 중요하다. React역시 JavaScript언어를 기반으로 만들어진 프레임워크에 가깝기 때문이다. 마치 Java를 먼저 배워야 Spring을 알 수 있고, C#을 알아야 .NET Framework혹은 .NET Core를 알 수 있는 것과 같다.

JavaScript

  • 1995년 Brendan Eich에 의해 개발되었고, 처음 출시했을 때 “Mocha”라는 이름을 부여했으나 이후 “LiveScript”로 변경되었고, 최종적으로 NetScape에서 효과적인 마케팅을 이유로 “JavaScript”라는 이름을 가지게했다.
  • 상호작용이 용이하고 역동적인 웹사이트를 만들기위해 생겨난 프로그래밍 언어이다.
  • 웹 브라우져 상에서 주로 실행되나, JavaScript 엔진을 사용하는 다른 장비나 서버에서도 실행될 수 있다.
  • 브라우져마다 조금씩 성격이 다른 개별적인 JavaScript엔진이 있다. 예를 들어 Chrome에는 V8, Firefox에서는 SpiderMonkey, 긔고 Internet Explorer는 Chakra를 사용한다.

JavaScript 수행 가능 작업

  • HTML/CSS 조작
  • 유저 이벤트 처리
  • Form의 검증
  • 유저 상호작용 기능 적용
  • HTTP 요청 생성
  • 데이터 저장 및 조작

JavaScript 환경 설정

JavaScript 개발에 필요한 구성 요소는 아래와 같다.

  • core editor
  • 웹 브라우져
  • JavaScript 엔진

JavaScript 코드 실행 방법

  1. VSCode 터미널 상에서 실행

코드를 입력후 아래와 같이 node {javascript 파일 명} 으로 터미널상에서 실행

터미널 상에서 node 명령어를 통해 프로그램을 실행하는 방법

2. 브라우져 개발자 도구(Developer Tool)상에서 실행

브라우져의 개발자 도구(Developer Tool)에서 직접 console.log() 명령어를 통해 결과를 보는 방법

개발자 도구에서 Console.log()를 통해 실행하는 방법

3. HTML 페이지를 만들어 브라우져 상에서 실행

HTML 웹 페이지를 만들어 실행하는 방법( ! 를 VSCode에서 입력하면 기본적인 HTML틀을 바로 입력할 수 있다.) HTML 파일의 경로를 카피해 브라우져에 붙여넣기 하면 된다.

HTML 파일을 이용해 브라우져 상에서 실행한 모습(아직 아무것도 없어서 텅빈 페이지이다.)

추가 참고 자료

참조:

(1) https://pixabay.com/images/search/react/

--

--

배우는 자(Learner Of Life)
배우는 자(Learner Of Life)

Written by 배우는 자(Learner Of Life)

배움은 죽을 때까지 끝이 없다. 어쩌면 그게 우리가 살아있다는 증거일지도 모른다. 배움을 멈추는 순간, 혹은 배움의 기회가 더 이상 존재하지 않는 순간, 우리의 삶은 어쩌면 거기서 끝나는 것은 아닐까? 나는 배운다 그러므로 나는 존재한다. 배울 수 있음에, 그래서 살아 있음에 감사한다.

No responses yet