분류 전체보기

[ReactJS]노마드코더 리액트 기초-01.리액트란?

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. React.js란? 리액트 홈페이지에 들어가면 "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 문구가 적혀 있다. 즉 리액트는 프론트엔드 라이브러리이다. React는 컴포넌트 기반으로 데이터를 컴포넌트에 보내면 설계에 따라 UI가 만들어져 사용자에게 보여준다. React를 사용하지 않아도 HTML, CSS를 사용하여 웹페이지를 만드는데 문제가 없다. 하지만 동적인 데이터를 UI에 보내기 위해 복잡하고 많은 상태를 관리해야 한다. 쉽게 말해 DOM를 변형시키기 위해서 특정 DOM을 선택하고 특정 이벤트가 발생하는 것에 대한 변화를 주는데 만약 웹 애플리케이션의 규모가 커지면 직접 DOM을 조작하기에는 ..

우아한테크코스 3기 프리코스 최종 미션(9) - 회고

2020년 12월 19일 오후 1시부터 6시까지 최종 테스트를 본 후기를 간략하게 가볍게 남겨본다. 우아한테코스 3기 프리코스 회고 코로나 19의 여파로 이번 시험은 온라인으로 치러졌습니다. 시험 시작 전 핸드폰으로 ZOOM 화상회의에 접속해서 신분증 검사를 했고 시험 시간 내내 줌을 통한 시험 감독이 이루어졌습니다. 줌을... 처음 접했던... 다른 지원자분들의 키보트 치는 소리가 아직까지 생생하게 들리듯 하네요 하하하... 집중이 전혀 안돼서 폰을 만지작만지작 소리를 어떻게 줄이지? 10분 동안 고민을 했던 것 같습니다. 결국 문의를 보냈는데 코로나 X%$!%@$&!%^@ 원래였으면 오프라인 시험인데... 핸드폰 소리를 줄여도 보고 설정도 들어가보고 이것저것 하다 제 귀가 감당할 정도의 소음의 크기가..

우아한테크코스 3기 프리코스 최종 미션(8) - View-ResultView.js

InputView에서 입력 받은 데이터를 MainController에서 원하는 형태로 데이터를 바꾸어 ResultView에 전달한다. //MainController.js onSubmit(input_info) { /* ... */ this.ResultView.render({ result: result.join(" ▶︎ "), option: option === "distance" ? "최단거리" : "최소시간", ...this.getTotalDistanceAndTime([...result]), }); } 테이블 표 구현 import View from "./View.js"; export default class ResultView extends View { constructor() { super(); this..

우아한테크코스 3기 프리코스 최종 미션(7) - View-InputView.js

전에 MVC패턴에서 View를 다시 한번 생각해보면 Model, Controller에 대해 알지 못하고 화면에 데이터를 저장을 하지 못하며 변경된 화면요소에 대한 처리를 위해 Controller에게 통보를 해야한다. 우선 InputView와 MainController을 연결하고 화면을 렌더링 해야한다. class View는 해당 요소를 파라미터로 받아 화면을 구현한다. import View from "./View.js"; export default class InputView extends View { constructor() { super(); this.tag = "[InputView]"; } setup(el) { this.init(el); this.el.innerHTML = this.render();..

우아한테크코스 3기 프리코스 최종 미션(6) - View

화면을 구현하기 앞서 각 화면 컴포넌트들의 최상위 부모 객체를 만들어야 한다. 화면에서 각 컴포넌트들을 분리하고 MainController에서 이벤트를 처리하는데 메소드를 재사용하고 유지보수를 위해 View.js 부모객체를 만든다. - View 클래스를 살펴보면 이벤트 발생시 init(el)메소드가 해당 element를 파라미터 값으로 받아서 초기화 한다. - on메소드는 해당 요소에 대한 이벤트 리스너를 설정한다. - emit메소드는 해당 이벤트가 발생할 때 원하는 이벤트를 실행시켜서 데이터를 보내를 수 있다. 나름 설명을 한다고 글을 섰지만 설명하는게 어렵다...다음 글들을 포스팅하면서 어떻게 사용되는지 설명하도록 하겠습니다. View.js export default class View { const..

우아한테크코스 3기 프리코스 최종 미션(5) - App 설정

파일 구조 . ├── docs │ └── README.md ├── images │ ├── dijkstra_example.png │ ├── path_result.gif │ └── path_result.jpg ├── index.html └── src ├── app.js ├── controllers │ └── MainController.js ├── models │ └── data.js ├── utils │ └── Dijkstra.js └── views └── View.js index.html은 app.js을 실행한다. app.js이 애플리케이션을 실행시키는 파일이다. app.js에서 로직을 실행시키기 위해 src/controllers/MainController.js 모듈을 import 한다. app.js에서는..

우아한테크코스 3기 프리코스 최종 미션(4) - 데이터초기설정

미션내용을 보면 주어진 데이터로 초기 설정을 해야 한다는 내용이 있다. 그림으로 나타내면 이런 지하도 모습을 볼수 있다. 그리고 미션 내용 중 출발역과 도착역은 연결되어 있지 않으면 경로를 조회할 수 없다는 예외처리가 있으나 주어진 데이터는 모두 연결되어 있어서 연결되지 않은 라인을 추가했다(시험 볼때는 추가 안했습니다) 데이터 초기화 models/data.js data.js에 역 이름이 담겨져 있는 stations, 라인의 정보를 담은 lines, 각 연결되어 있는 역끼리의 거리와 시간을 담은 sections 변수를 초기화 한다. export const stations = [ "교대", "강남", "역삼", "남부터미널", "양재", "매봉", "양재시민의숲", "상암", "홍대", "홍대입구", ];..

우아한테크코스 3기 프리코스 최종 미션(3) - MVC패턴

MVC 패턴이란? Model, View, Controller 역할 및 규칙 MVC패턴으로 미션하기 참고 MVC패턴이란? Model, View, Controller의 약자로 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴 중 하나이다. 디자인 패턴이란? 소프트웨어를 개발하는 중에 발생했던 문제점들을 정리하여 자주 발생하는 문제들을 해결하기 위해 규칙을 정해 놓은 개발 방법으로 모듈이나 기능을 재사용하고 같은 규칙으로 인해 팀원들 간의 소통을 원활하게 해주는 것을 말한다. 이렇게 만들어진 MVC패턴을 자세히 알아보면 Model : 애플리케이션의 데이터, 자료, 사용자가 필요로 하는 데이터를 의미하고 DB의 테이블과 대응된다. View : 사용자에게 보여주는 User Interface를 의미한다. Cont..