오물오물 개발일기

🤷‍♀️ 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 "./..

😮 코로나 확진자 급증과 함께 마주한 에러? 취업을 위해 GOC 프로젝트를 마무리한지 어언 3달.. 확진자다시 급증하며 1000명 이상의 확진자가 나오고있다. 열심히 만들었던 프로젝트였기에 가끔 들어가며 에러가 있는지 없는지 확인하던 찰나에 오랜만에 버그를 만났다. 뭘까.. 확진자 차이가 많이나서 표시를못하나.. 최대 숫자가 정해져있는걸까? 일단 침착하게 콘솔을 한번 찍어보았다. 원인은 바로 차트에 hover를 하게되면 확진자 수가 나오게되는데 4자리가 될경우를 대비해서 변환을 시켜놨던게 문제였다. .toLocaleString()를 지워주고 테스트를 해보니 정상으로 돌아왔다. 해당 사이트가 궁금하다면?

🙏 조건부 렌더링이란? 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다 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 ..

🤷‍♀️ 에러와 마주하다.. - 호스팅 해둔 GOC 사이트의 국내 종합 데이터 현황에 Error가 발생 하였다. 해당 데이터는 시도별 현황과 같은 OPEN API를 사용 하기 때문에 API서버의 문제라면 양쪽에 에러가 떠야하지만 국내 종합 데이터 현황에만 문제가 있었다. - 그래도 혹시나 하는 마음에 먼저 postman에서 확인을 하였다. - 문제를 찾기 위해 디버깅을 시작하였고 범인은 바로 server쪽의 Route파일이 문제였다. - 해당 API는 당일부터 7일전 즉, 총 8일간의 데이터를 받아오고있었다. 얼핏 보기엔 문제 없이 잘 구하는듯 하였다. 하지만 문제는 4월 1일이 된 현재, 3월에서 4월로 달이 변경되면서 생겼다. - 당일의 날짜를 구하는데에는 정상적이였지만 문제는 7일전의 날짜를 구하는..

💡 React의 useState()는 비동기인가요 동기인가요? - 네, 이 질문은 제가 면접에서 들은 질문입니다. React를사용하면서 당연하듯 찍어서 쓰던 useState().. 비동기인가요? 라는 질문에 많이 당황했습니다. 때문에 적어보는 useState()는 과연 동기일까? 비동기일까? 🙏 결론부터 말하자면 - useState()의 setState는 이벤트 핸들러 내에서 비동기적으로 동작합니다. 즉, 하나의 이벤트 핸들러 내에서 setState가 여러번 호출된다면, 일괄적으로 업데이트하고 렌더링을 합니다. 이는 뚜렷한 성능 향상을 만들어냅니다. 🙄 그럼 왜 그럴까요? - React는 DOM을 직접 조작하는 대신 Virtual DOM을 이용해 조작됩니다. 이를 기반으로 state가 변경이 되면 re-..

💡 두개의 request는 어떻게 처리하지? - 프로젝트 중 '코로나백신'에 관한 글들을 받아오기 위해 네이버와 다음의 api를 사용하여 받아오기로하였다. 하지만 한페이지에서 두개의 request 를 요청하는 방법을 몰랐었기 때문에 따로 요청을 했었다. 🎇 해결(Axios의 multiple request) - 역시나 방법은 있었다. 해결법은 Axios의 multiple request 기능이 있었고 간단하게 사용이 가능하였다. - 두개의 데이터가 형태에 따라 배열로 들어올경우 아래와 같이 한개의 배열로 사용하면 된다.

🔒 인증키 보안 - 이전 글에서 공공데이터포털 API를 사용하기위해 인증키를 발급받고 사용을 했었다. 2021.03.09 - [React/React + Node.js(Express)] - ✨ 공공데이터포털 API 이용하기 (with XML to JSON) ✨ 공공데이터포털 API 이용하기 (with XML to JSON) 🎁 모듈설치 - 먼저 express에서 데이터를 받아오기 위해 request 모듈을 설치한다. - 이후 xml데이터를 json타입으로 변환하기 위해 xml-js 모듈을 설치한다. 💡 실전 !! - 먼저 공공데이터포털에서 제 baegofda.tistory.com - 하지만 사용을 위한 인증키는 외부에 노출을 막기위해 직접적으로 깃허브에 올라가는일을 막을 필요가 있다. 때문에 인증키를 숨기..