본문 바로가기

전체 글139

[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.
[React] UUID - Date.now(), random()없이 고유한 key값 생성하기 리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui.. 2022. 11. 6.
[HTML5] Input pattern으로 유효성 검사하기 HTML5 태그 pattern 정규 표현식 모음 1. 숫자만(공백x) 2. 대소문자 3. 소문자 4. 대소문자 or 숫자 5. 소문자 or 숫자 6. 소문자 && 숫자 && 8~16자리 숫자 (아이디 유효성검사) 7. 소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 8. 대소문자 && 숫자 && 특수문자 && 8~16자리 숫자 (패스워드 유효성검사) 2022. 11. 2.