오물오물 개발일기

👏 컴포넌트 분리하기 컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다! 1. 상태 관리(state) 상태 관리를 위한 state를 선언하겠습니다. React에서는 React Hooks에서 제공하는 useRef, useState를 이용하여 state들을 관리합니다. React 인풋의 값을 참조하기 위해 useRef()를 이용하여 Input에 ref={inputRef}를 선언합니다. 또 인풋 값을 바인딩하..

👏 컴포넌트 분리하기 컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다! 1. 컴포넌트 분리하기 (Button) 가장 기본적이면서도 중요한 컴포넌트를 먼저 분리해보도록 하겠습니다. 먼저 버튼(Button) 컴포넌트를 분리합니다. React // Button.jsx import React from "react"; import styled from "styled-components"; const Button..

👏 TODO 예제 시작 ! 이번 포스팅부터는 아래의 간단한 TODO의 코드를보며 Vue에 대해 알아가볼 예정입니다. #간단주의 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 ! 👀 특징 먼저 React와 Vue 코드의 차이점들을 간단하게 코드의 형태로 알아보겠습니다. React의 통상적인 형태는 아래와 같습니다. import React, { useRef, useState } from "react"; import styled from "styled-components"; import Button from "../components..

✨ 시작하기 앞서 ! 오랫동안 멈춰있던 포스팅을 시작하기 위해 Vue 입문을 위한 간단한 포스팅을 시작할 예정입니다. 작성된 Vue 입문의 글들은 React와 비교하며 작성될 예정입니다 ! 또한 Node.js, npm과 yarn이 설치되어있다는 전제로 진행합니다. 💾 설치 및 프로젝트 생성하기 React와 Vue 모두 CLI 기반의 설치를 지원합니다. React의 경우 손쉽게 시작할 수 있게 해주는 React의 CRA를 설치합니다. npm install -g creat-react-app # OR yarn global add creat-react-app # 제대로 설치되어있는지 확인 create-react-app --version 이후 프로젝트 생성을 위한 CRA 명령어를 실행합니다. yarn create..

🤷‍♂️ 어쩌다 만난 그대.. Vue 이번에 이직을 하게되며 React.js가 아닌 Vue.js기반을 사용하게 되었다. 더 나아가 검색최적화(SEO)를 위해 Nuxt.js를 도입할 예정이다 ! 때문에 알아보는 간단 React와 Vue 차이점을 알아봅시다. 👏 React는 라이브러리이고 Vue는 프레임워크이다. 라이브러리와 프레임워크 차이를 모르신다면? 네, 가장큰 차이점은 React는 라이브러리이고 Vue는 프레임워크입니다. 여기서 뜻하는 바는 React는 라이브러리인 만큼 자율성이 높아 구현하는 개발자들 특성에 따라서 구현, 구조의 차이가 있습니다. React는 JSX라는 문법으로 구현하지만 문법 내부에서 JS를 통하여 구현하는 자율도가 높은 반면 Vue는 Template형식으로 정해져있는 문법으로만 ..

🤷‍♀️ 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()를 지워주고 테스트를 해보니 정상으로 돌아왔다. 해당 사이트가 궁금하다면?