오물오물 개발일기

로컬로 원격에있는 브랜치 가져오기 $ git remote update $ git branch -r $ git checkout -t origin/원하는 브랜치브랜드 이름변경 $ git branch -m 이전이름 변경될이름브랜치 삭제하기 (로컬) $ git branch -d 브랜치 삭제하기 (원격) $ git push origin --delete 브랜치 생성 $ git branch branch-name// 또는 $ git branch child-name parents-name// 또는 따올 브랜치에서 $ git branch 생성할브랜치이름브랜치 생성후 바로 체크아웃 $ git checkout -b branch-name생성한 브랜치 원격 저장소에 저장하기 $ git push -u origin branc..

🤷‍♀️ 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등은..

🙏 Sass(Syntactically Awesome Style Sheets)? Sass는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 높여줍니다. 💡 CSS pre-processor(CSS 전처리기) ? CSS를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다. Sass, Less, PostCSS, Stylus etc... 1. 💾 셋팅하기 Sass를 사용하기위해 node-sass를 설치합니다. yarn add node-sass 이후 Sass를 사용하기위해 css파일의 확장자명을 .scss를 사용하여 생성합니다. 💡 .sass 와 .scss Sass가 처음 릴리즈 되었을때는 .sa..

🙏 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..