오물오물 개발일기

🤷‍♀️ Flux 란? Flux는 MVC 모델의 단점을 보안하기 위해 만든 페이스북에서 발표한 패턴(pattern)입니다. React, Redux의 디자인 패턴이기도 합니다. 이러한 Flux 패턴에 영감을 받아 Vue에서는 Vuex를 만들어서 사용합니다. 🙄 MVC 패턴 ? MVC(Model View Controller) 패턴은 "무엇을 할지"(Model) 내부 비지니스 로직을 처리하고, "무엇을 보여줄지"(View) 유저에게 화면을 보여주기 위함을 처리하고, "어떻게 처리할지"(Controller) 사용자의 요청을 받아서 어떻게 처리하고 보여줄지 Model과 View를 요청합니다. *Java MVC2 😥 MVC 한계 MVC(Model View Controller) 패턴에는 Model과 View가 양방향..

🤷‍♀️ Routing(라우팅) 이란? 라우팅은 프로세스인데 우리가 네트워크에서 있는 traffice의 path를 선택하는 프로세스이다. 즉, 네트워크에서 url를 이용했을때 어떤 데이터를 받아올지 결정해주는것 홈페이지에 들어왔을때 -> www.baegofda.com/ 회원가입을 눌렀을때 -> www.baegofda.com/register 로그인 페이지로 들어갔을때 -> www.baegofda.com/login 프로필 페이지로 들어갔을때 -> www.baegofda.com/profile 와 같이 어떤 페이지를 보여줄것인지 결정하고 도와주는것 React-Router 말고도 Reach-Router, Next.js등의 대안이 있습니다. 🙄 Why ? React 뿐만아닌 Vue, Angular, Svelte등은..

🙏 Context API란? 리액트 16.3부터 정식 릴리즈된 컴포넌트의 레벨과는 상관없이 props를 자유롭게 사용가능하게하는 Hooks이며 state management입니다. 1. 😋 맛보기 아래와 같은 컴포넌트 구조를 가진 사이트가 있다고 가정하여봅시다. state의 value값을 보여주는 컴포넌트는 F와 J라고 가정하고 값을 변화시키는 이벤트는 G 컴포넌트에서 발생한다는 가정 할 경우 value는 F컴포넌트까지 해당 value를 사용하지도 않는 A,B라는 컴포넌트의 props를 거쳐야합니다. handleSetValue()또한 A, B, E 컴포넌트동안 props를 전달받아야 최종 G컴포넌트에 전달이 됩니다. 이러한 문제점을 해결 해주는 Hooks가 바로 Context API입니다. Context..

🙏 useEffect란? class Component의 Lifecycle처럼 functional Component에서 Hook을 사용하여 특정 상황에 작업 처리를 가능하도록 해줍니다. 1. class Component Lifecycle 먼저 상대적으로 잘 사용하지는 않지만 이해를 위해 class Component의 Lifecycle를 알아보겠습니다. 사진에서 추가적으로 React 17.0버전 이후 componentWillMount()와 componentWillUpdate()는 폐기되었습니다. 👀 코드로 알아보기 전체의 파일 구조는 아래와 같습니다. 📂 src>App.js 테스트를 위하여 App.js의 코드는 아래와 같습니다. import { useState } from "react"; import "./..

🙏 조건부 렌더링이란? 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다 1. 조건부 렌더링 조건부 렌더링을 사용하여 원하는 문구를 보여줄 수 있습니다. 👀 코드로 알아보기 파일 구조는 아래와 같습니다. 📂 src>App.js 테스트를 위하여 App.js에서 Hello 컴포넌트로 name, isLoggedIn이라는 props를 넘겨줍니다. import "./App.css"; import Hello from "./components/Hello"; function App() { return ; } export default App; 📂 src>components>Hello.jsx 간단하게 props를 destructuring 하여 name을 사용한다면 아래와 같이 사용이 가능합니다. import ..

🎁 모듈설치 - 먼저 express에서 데이터를 받아오기 위해 request 모듈을 설치한다. - 이후 xml데이터를 json타입으로 변환하기 위해 xml-js 모듈을 설치한다. 💡 실전 !! - 먼저 공공데이터포털에서 제공해주는 샘플코드를 이용하여 코드를 작성해준다. - 테스트할 해당 페이지의 라우터파일에 코드를 작성한다. - 라우팅을 해줄 server.js와 데이터를 요청할 리액트 파일또한 수정해준다. - 결과를 확인하면 문서에 명시되어있는데로 xml데이터타입으로 들어온다. - 우리는 JSON타입의 데이터를 원하기 때문에 변환을 위한 xml-js모듈을 사용해야한다. - xml-js모듈을 사용하기 위해 라우터 파일의 내용을 수정한다. - 수정 후 확인을 하면 JSON타입으로 정상적으로 변환이 되었다.

💼 사전준비 - 국내의 공공데이터포털에서 API를 사용하기 위해서는 API키를 요청해야한다. 공공데이터포털 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr - 국내 코로나 현황에 관한 데이터를 사용하기위해 '코로나 현황' 을 검색한다. - 원하는 데이터를 클릭하여 들어가면 해당 API에 관한 내용들이 있으며 활용신청을 해야한다. - 로그인 후 활용신청을 누르면 간단한 신청서(?)를 작성하면 API키가 발급된다. - 승인은 바로 되나 발급 받은 키를 사용하려면 1~2시간 뒤에 사용이 가능하다. - 받은 인증키를 사용하여..

🎉 React + Node.js(Express) 연동하기 (2) - 리액트와 노드서버간의 데이터를 주고 받기 위해서는 프록시 모듈을 설치해야한다. - 또 데이터 통신을 위한 방법중 Fecth API대신 Axios 라이브러리를 사용하기위해 설치를 해야한다. 프록시와 CORS? 🤬 CORS? 그게 뭔데 ! 첫 만남.. 😔 - 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 pos baegofda.tistory.com - 먼저 프록시 설정을 위해 client의 src에 setupProxy.js를 생성한다. - 모듈 설치를 위해 yarn add http-proxy-middleware 명령어..

💡 Express ? - Express.js, 또는 Express는 Node.js를 위한 웹 프레임워크의 하나이다. javascript를 이용하여 프론트와 함께 백엔드를 구축하여 서버-클라이언트를 모두 개발할 수 있다. 참고 : Express 개념정리 Node.js, Express 개념정리하기 반갑습니다. 오늘은 Node.js, Express의 개념에 대해서 간략히 알아보도록 하겠습니다. Node.js의 개념 구글의 크롬 V8 자바스크립트 엔진을 기반으로한 비동기 IO 를 지원하는 고성능네트워크 서버이 ithub.tistory.com 🕶 준비하기 - 기본적으로 node.js가 설치되어 있어야 한다. (확인법 : Terminal에서 node -v 후 확인) 참고 : Node.js 설치하기 Node.js N..

첫 만남.. 😔 - 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 postman에 테스트를 해보았다. - postman으로 데이터가 들어오는것을 확인하고 react에서 axios를 이용하여 데이터를 불러보았다. - 하지만 항상 그렇듯 쉽게 되는일은 없는것 같다. CORS (Cross-Origin Resource Sharing) Policy? - 교차 출처 리소스 공유라는 기능으로 실행중인 웹 어플리케이션이 서로 다른 출처의 리소스에 request할 때 보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다. https://developer.mozilla.org/ko/docs/W..