Grace's Tech Blog

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 5. State & Lifecyclev 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 6. Handling Events 에 대해서 정리해볼 것이다. React의 주요 개념들 6) Handling Events 앞에서 정리한 순서대로 ' react 개발환경 설치 → Component 제작 → Props의 사용 → state의 사용' 등을 해서 이런 결과창을 띄우는 것 까지 했다고 가정해보자. 그런데 아무런 event를 등록 해주지 않아서, 리스트에 각각의 링크를 클릭 하더라도 아무 일도 일어나지 않는다. 그래서 지금부터는 R..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 5. State & Lifecycle 에 대해서 정리해볼 것이다. React의 주요 개념들 5) State & Lifecycle 1. State 이전 Component와 Pros를 정리한 포스트에서 " name='Sara', name='Grace'에 해당하는 props는 읽기 전용값으로, 함수 component나 클래스 component 모두 component의 자체 props를 수정해서는 안 된다. 그래서 React에서는 State를 통해 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 필요성과 소개 및 React의 주요 개념 중 1. 기본틀, 2. JSX(JSX으로 Element생성:React.createElement()) , 3. Element (생성된 Element를 DOM으로 rendering: ReactDOM.render()) 에 대해서 알아보았다. 이번에는 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해볼 것이다. 1. React의 주요 개념들 4) Component와 Pros ① Component란? component는 props라는 입력을 받아서 React element를 return 하는..

1. What is React? 1) React란? React는 Component(하나의 의미를 가진 독립적인 단위 모듈 - 쉽게 말해 나만의 HTML 태그)를 사용하는 사용자 인터페이스를 만들기 위한 프론트엔드 라이브러리이다. 그러니까 주요 단어가, Component, 사용자 인터페이스(UI), 라이브러리 이다. 먼저 사용자 인터페이스는 사용자와 프로그램이 정보를 주고받기 위해 사용자와 프로그램이 상호작용하는 프로그램의 일부분이다. 그리고 라이브러리란, 특정 기능에 대한 API(도구/함수)를 모은 집합니다. (동기이신 SH님께서 쉽게 정리해주신 글을 참고하면) 미리 만들어 둔 여러가지 템플릿을 모아둔 저장소이다. ※ 프레임워크와 라이브러리의 차이점은 여기에.. 그럼 Component는? 위에서 언급했듯..

1. CommonJS 프로그램이 복잡하고 길어질수록 이를 부품화해서 여러 파일에 분리한다면 간결해지고, 다른 여러 프로그램에서도 그 부품을 가져다 쓸 수 있을 것이고, 코드의 재사용성도 높일 수 있다. 이렇게 여러 파일에 분리하는 것을 모듈화라고 하며 각 부품에 해당하는 조각조각의 코드들은 모듈이라고한다. 이번 Sprint를 진행하면서 본격적으로 많은 파일들을 생성하고 모듈로써 사용하는 것을 해보았다. 이 모듈과 관련된 것이 CommonJS이다. "using the CommonJS APIs and then run that application across different JavaScript interpreters and host environments. - CommonJS 공식홈페이지" CommonJS..

이전 Sprint에서는 Node.js를 이용한 서버 구축을 해보았습니다. 그러나 코드가 복잡해지면 이렇게 계속 if문이 계속 되는 코드가 매우 힘들어질 것입니다. 이런 상황에서 코드의 복잡성을 낮춰주고, 웹 애플리케이션을 구현하는 과정에서 공통적으로 요구되는 일들을 대신해주는 것이 프래임워크라고 합니다. https://wikibook.co.kr/article/what-is-expressjs/에서는 Node.js의 핵심 모듈만 이용해서 중요 앱을 작성한다면 HTTP 요청 본문 파싱 쿠키 파싱 세션 관리 URL 경로와 HTTP 요청 메서드를 기반으로 한 복잡한 if 조건을 통해 라우팅을 구성 데이터 타입을 토대로 한 적절한 응답 헤더 결정 하는 과정을 지속적으로 반복해야 하는 반면, Express.js는 이..

지금까지의 내용을 정리하면, "Client는 요청하는 주체 - API가 이 요청/응답을 정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 규약에 맞게! - Server는 응답하는 주체이다. Client가 Server로부터 요청에 대한 응답(데이터같은..)을 받아서 이를 보여줄때 JavaScript를 사용한 비동기 통신으로 데이터를 주고받는 기술인 AJAX가 있으며, 이때의 Server는 Javascript로 프로그래밍을 하면, 컴퓨터가 알아들을 수 있도록 해주고, 비동기적으로 작동하는 Node.js를 사용해서 구축한다. " 입니다. node.js를 사용하려고 설치를 하면 이와 함께 번들링 되어있는 여러가지 모듈이 있으므로 require문법을 이용해서 불러서 사용할 수 있습니다. 이 중 대표적인 모듈이..

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/ HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Interaction With Server Sprint에서는 Client와 Server 통신에 관한 개념을 배우고, (이미 잘 구축되어있는 Server가 있어서)fetchAPI를 이용하여서 Client를 구축 하고, 서버에 GET, POST요청을 보내고 그 응답 결과를 이용해 화면을 구성하고 변경하는 것에 대해 배웠다. 이번 Server&Node Sprint에서는 node.js를 이용하여 이미 잘 구..

1. Why We Use Fetch 저번에는"Client는 요청하는 주체 - API가 이 요청/응답을 정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 규약에 맞게! - Server는 응답하는 주체, Client가 Server로부터 요청에 대한 응답(데이터같은..)을 받아서 이를 보여줄때 JavaScript를 사용한 비동기 통신으로 데이터를 주고받는 기술인 AJAX" 까지 알아보았습니다. 1) AJAX AJAX를 통해서 서버의 자원을 요청하고 chaining방식으로 요청을 처리할 수 있지만 조금은 복잡한감이 있다고 합니다.(저는.. AJAX나 fetch나 다 어려워보이는건 마찬가지..) 간단 예시) $.ajax({ url: 'http://example.com', method: 'GET', dataTy..

본격적인 웹개발에 들어갔습니다. (서버 구축에 대해서는 뒤에서 배우게 될 것이고,) 지금은 서버와 잘 통신하는 Client 페이지를 만들것이고, 이에 필요한 것을 배워보는 단계로, 이해한 것을 정리하도록 하겠습니다. 1. 개념 웹 서비스 아키텍쳐는 크게 다음과 같이 구성되어 있습니다. Client는 User가 보는 부분이며, 이들과 상호작용을 담당하고 Server는 리소스 요청과 응답에 대한 처리를 담당, Database는 리소스를 저장합니다. 그리고 이번 주제의 핵심인 '서버와 잘 통신하는 Client 페이지'를 만들기 위해서 중점을 두어야 할 개념들은 browser server API HTTP Ajak 입니다. 이에 대해서 정리해보겠습니다. 1) Client Client는 Server에게 데이터를 요..