Hello, MobXMobX은 Redux가 메인이었던 상태관리 생태계에 천천히 경쟁자로 자리 잡았습니다. 이것이 우연일까요? MobX는 정말쉽고, 정말 강력합니다. 그리고 React와 함께 사용 되었을 때 이 강점들은 더욱 강력해집니다. 상태관리 솔루션이 꽤 중요해진

아토믹 디자인이란?아토믹 디자인은 쉽게 말하면 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식을 의미한다. (즉, 컴포넌트 중심의 디자인 패턴인 것)Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에

Next.js 빨리 배우기이 포스팅은 Next.js에서 제공하는 공식 튜토리얼을 기반으로 하였습니다.빠르게 Next.js를 배워봅시다.Next.js란?기본적으로는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 녀석입니다. 맨바닥부터 SPA의 환경을 하

styled-componentReact CSS-in-Js관련 라이브러리중에서 가장 인기가있다. 자바스크립트 파일 안에서 CSS를 작성하는 형태이다. 그렇기때문에 .css/.scss 파일을 만들지 않아도 된다.시작하기$ yarn add styled-component문법문

Git에서 한 branch에서 다른 branch 합치는 방법 중 하나로, 말 그대로 main을 초기의 main이 아닌 업데이트 된 main으로 rebase하여 commit 내역을 깔끔하게 관리할 수 있는 방법이다. Git에서 한 브랜치에서 다른 브랜치로 합치는 방법은

🙋 프로젝트 소개숙박 예약 사이트 Air BnB 클론 프로젝트팀구성 : 프론트엔드 4명, 백엔드 2명(프론트엔드는 경민님, 양효님, 수명님 나 그리고 백엔드는 승호님, 창곤님이 고생해주셨다)기간 : 2020.11.02 - 2020.11.13 (2 weeks)사용기술

과거에 리액트 함수형 컴포넌트(Functional Component)는 클래스 컴포넌트(Class Component)와 달리 state나 life cycle method들을 사용할 수 없어 Stateless Component라고 불렸으며 단순히 props를 받아서 렌더

API key 받기홈페이지에 구글 지도를 넣기 위해서는 가장 먼저 API key를 받아야 한다.Google Maps Platform에 들어간다.시작하기를 누른다.원하는 제품을 선택하고 프로젝트를 선택한다.결제 정보를 입력 하라고 하는데 결제 되는 것이 아니라 로봇인지

목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식을 말한다.꼭 게시판처럼 1~10 페이지가 있는 형식 뿐 아니라 인스타그램 처럼 가장 하단으로 스크롤이 내려왔을 때 새로운 데이터를

라우트의 경로에 특정 값을 넣어서 해당 페이지로 이동할 수 있게 하는 것 React는 그 자체로는 라우팅 기능을 갖고 있지 않아서 React-router와 같은 라이브러리를 사용해서 라우팅을 구현한다. 그리고 React Router에서는 두 가지 방법을 통해 유동 라우

🙋 프로젝트 소개 숙박 예약 사이트 Stay Folio 클론코딩 프로젝트 팀구성 : 프론트엔드 4명, 백엔드 1명 (지연님, 보라님, 수연님, 지훈님 그리고 나!) 기간 : 2020.10.19 - 2020.10.30 (2 weeks) 사용기술 Front-End

본격적으로 팀 프로젝트에 들어가면서, 자주 사용하는 git 명령어를 정리해보자!git init : 새로운 git 로컬저장소를 생성git clone 'url' : remote 저장소 가져오기git status : 작업 디렉토리에 변경된 파일 보기git log : 변경 이

먼저 Java Script로 인스타그램을 클론 코딩 한 뒤, react를 통해서 인스타그램을 다시 클론코딩하게 되었다. 사용한 도구 및 기술 구현한 기능 로그인 Validation 댓글달기 댓글 좋아요 및 삭제 버튼 Nav bar에 아이디 검색 기능 반응형 웹,

약 열흘간 진행된 instagram clone 프로젝트, Westagram 팀 프로젝트 후기를 기록하려 한다 🙋

지금의 나는 wecode라는 코딩 부트캠프 2주차(+추석연휴 1주)의 코린이다. wecode에 오기 전 혼자서 공부한 시간을 합친다면 나는 이제 겨우 코딩을 배운지 3개월차이다. 이 시점에서 나는 어떠한 개발자가 되고 싶은지에 대해서 이야기 해보고자 한다. 우선, '

Spread 연산자는 ...을 사용해서 나타내며, 대상을 개별 요소로 분리시키는데, 문법의 대상은 iterable 해야 한다.

promise란? > promise는 JavaScript 의 비동기 처리에 사용되는 객체이다.

JavaScript의 Callback 함수는, 다른 함수의 인자로 이용되는 함수로, 어떠한 이벤트가 발생한 후 인자로 전달된 함수가 다시 호출되는 것을 말한다.

React는 Facebook에서 만든 것으로 사용자 인터페이스(UI)를 위한 JavaScript의 library이다.리엑트를 선택한 가장 큰 이유 중 하나는, 생태계가 잘 구성되어 있다. 많은 사용자들 덕에 다양한 학습자료를 쉽게 찾아볼 수 있다. 또한 페이스북에서 개

allow function은 ES6에서 나온 문법이다. ES6가 무엇인지 잠깐 짚고 넘어가자면, > ES는 ECMA Script의 줄임말로, ECMA Script는 JavaScript를 표준화 시키려고 탄생한 것이다. 현재는, ES10버전까지 나왔고 주로 쓰이는 것