오물오물 개발일기

😇 CSS Never... 개발자들의 고민은 가지각색이겠지만 대부분의 고민은 이름 짓기가 가장 고민이 크다. 변수, 함수명, 클래스명 등등.. 프론트엔드 입장에선 CSS를 작업해야 하는 경우 CSS 클래스명에 대한 고민도 크다. CSS 클래스명을 소홀히 하게되면 하나의 엘레멘트를 수정하게 되었을 때 사이드 이펙트로 다른 엘레멘트도 의도치 않게 수정하게 된다. 때문에 대안으로 나왔던 방법들이 BEM, OOCSS, SMACSS 같은 CSS 방법론들이다. 하지만 이러한 방법론들을 쓰더라도 클래스명을 짓는 데에 대한 시간적 고민은 해소되지는 않는다. 최근 작업하면서도 팀 내엔 프론트엔드는 2명밖에 없는데 작업량은 너무 많았다. 시간적 여유가 없는 입장에서 손꼽은 건 기능 개발과 별개로 CSS작업을 하는 시간이 ..

👏 컴포넌트 분리하기 컴포넌트 분리하기에 앞서 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..

👏 컴포넌트 사용하기 ! 먼저 import와 state선언을 알아보겠습니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 ! 1. import 먼저 전체 컨테이너가 될 Todos라는 페이지 컴포넌트를 임포트하는 방법입니다. React React 프로젝트의 App.js에 import는 아래와 같이 파일 상단에 import를 합니다. // App.js import Todos from "./pages/Todos"; function App() { return ; } export default App; Vue Vue 프로젝트의 App...

👏 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형식으로 정해져있는 문법으로만 ..