본문 바로가기

분류 전체보기141

[React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet 협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa.. 2022. 11. 24.
[Git & GitHub] 깃허브로 협업하기 - (3) git graph, fetch, pull, branch, switch, checkout, merge 명령어 사용하기 지난 번에 협업 repo에서 새 프로젝트를 clone한 것에 이어서, git-flow에 대한 브랜치 규칙과 commit 규칙까지 설정하였다. [Git & GitHub] 깃허브로 협업하기 - (1) Organization, clone 이번에 참여하게된 향수 프로젝트에서 새로운 FE 주니어 개발자 분이 합류하게 되면서 깃을 사용한 협업이 반드시 필요한 상황이 되었다. 지금까지는 혼자 프로젝트에 add - commit - push 하는 과정 junvelee.tistory.com 이번에는 git fetch로 현재까지 작업내용을 불러와 git graph를 확인하고, 해당 브랜치의 변경사항을 pull 한 후, 이어서 기능별 브랜치를 생성해 작업한 후 해당 기능별 브랜치에 add - commit - push 하는 과.. 2022. 11. 23.
[Git & GitHub] 깃허브로 협업하기 - (2) Git-flow(branch, commit Convention) FE 개발자 분과 함께 앞으로의 협업을 위한 Git-flow를 설계하였다. FE 팀은 2명이기 때문에 git-flow 전략이라고 하기엔 비교적 간단하지만 Branch 설정과 Commit Convention을 함께 설정하였다. 규모가 큰 프로젝트일 경우 아래 우아한 형제들의 Git-flow 전략을 참고하면 효율적으로 프로젝트를 관리할 수 있을 것이다. 우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그 {{item.name}} 안녕하세요. 우아한형제들 배민프론트개발팀에서 안드로이드 앱 개발을 하고 있는 나동호입니다. 오늘은 저희 안드로이드 파트에서 사용하고 있는 Git 브랜치 전략을 소개하려고 합 techblog.woowahan.com 1. Branch 규칙 1. branch 설정 main,.. 2022. 11. 23.
[Git & GitHub] 깃허브로 협업하기 - (1) Organization, clone 이번에 참여하게된 향수 프로젝트에서 새로운 FE 주니어 개발자 분이 합류하게 되면서 깃을 사용한 협업이 반드시 필요한 상황이 되었다. 지금까지는 혼자 프로젝트에 add - commit - push 하는 과정으로 진행하였기 때문에 별다른 문제 상황이 없었지만 이제는 다른 개발자분과 협업하게 된 이상 깃 사용범위를 확장시켜야 하기 때문에 여러가지 깃 명령어를 공부하면서 협업에 꼭 필요한 깃 사용법을 숙지하려고 한다. 1. Github에서 협업용 단체(Organization)를 생성 우선 Github에서 협업용 단체(Organization)를 생성한다. 현업에서는 주로 Organization을 이용하여 협업을 진행한다고 한다. 내 프로필을 클릭하여 > your organizations 에서 확인할 수 있다. .. 2022. 11. 23.
[React] 웹팩(Webpack)에 대한 이해 ✨웹팩(Webpack)이란 무엇인가? 웹팩(Webpack)이란 "JavaScript를 위한 정적 모듈 번들러" 이다. 그렇다면 모듈은 무엇이고, 번들러는 또 무엇일까? 이 둘의 개념부터 알아보자. 모듈(module)이란 ? 자바스크립트에서 모듈은, 어떤 특정 기능과 관련된 JavaScript 코드들(함수)로 이루어진 있는 하나의 파일을 말한다. 자바스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 파일을 여러개로 분리하여 모듈화 하는 등의 다양한 시도를 하게 되었고, 대표적으로 AMD, CommonJs(Node.js에서 사용 - requre(), module.. 2022. 11. 18.
[React] Create-React-App없이 React 개발 환경 셋팅하기 Create-React-App React를 처음 배우면서, 항상 CRA(Create-React-App)를 사용하여 리액트 앱을 생성하였다. React로 개발을 시작하기 위해서는 웹팩(Webpack), 바벨(Babel), 번들러(Bundler), 로더(Loader), 플러그인(Plugin), 린트(Eslint), dependencies와 devDependencies 등등 하나하나 배우고 설정해야 할 기술들이 굉장히 많은데 리액트 초심자로서 이것들을 일일히 다 숙지하고 프로젝트를 시작하기에는 실질적으로 힘들기 때문이었다. Create-React-App의 장점은 CRA로 앱을 생성하면 보편적으로 개발자들이 많이 사용하는 라이브러리 등이 대부분 셋팅 되어있기 때문에, 이후 추가적으로 필요한 라이브러리 등만 설치.. 2022. 11. 17.
728x90
반응형