KBW's cosmos

개요 몇 개월 전 진행한 외주에 대한 경험을 기록해두고자 한다. 외주를 부탁한 곳은 모 신도시 소재의 개인 카페였다. 해당 카페에서는 고객 프로모션 마케팅으로 쿠폰을 발행하고 있었는 데, 11번 주문하면 1회 무료 음료를 제공하는 식이었다. 문제는 고객의 수가 늘어나면서 고객의 정보를 찾기 어려워졌다는 것이다. 이곳은 아마스빈처럼 고객이 쿠폰을 소지하게 하는 것이 아니라 매장에서 직접 쿠폰을 보관하고 관리하는 방식이었는데 고객의 수가 1000명 가까이 되다보니 주문 시 금방금방 찾아 쿠폰을 적립해주기 어려워졌고 특히 동명이인의 경우 어떤 정보가 해당 고객의 정보인지 파악하기 어려워졌다. 이러한 이유로 필자에게 외주를 요청하였고 디자이너와 함께 클라이언트의 요구사항에 맞춰 디자인 및 개발까지 완제품으로 프..

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

interface MemberInfoTextProps { isBold: boolean; fontSize: string; fontColor: string; textAlign: string; } export const InfoText = styled.p` font-weight: ${props => props.isBold ? "bold" : "normal"}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; text-align: ${props => props.textAlign}; ` 위와 같이 interface로 props의 속성들을 정의해주고 괄호 안에 이 interface를 넣습니다. 그리고 ${}로 props를 받은 뒤..

우선 위와 같이 public 폴더안에 폴더를 만들고 이미지 파일을 넣어준다. 그리고 위와 같이 경로를 설정해주면 아주 쉽게 불러올 수 있다!

useHistory를 이용해서 페이지를 이동할 때 아래와 같이 작성할 수 있다. history.push("/main"); 하지만 만약 이미 main페이지에 있다면 이미 main페이지기 때문에 이동하지 않는다. 이때, 새로고침을 하게 해주고 싶다면 아래 코드를 사용하면 된다. window.location.replace("/main")

매개변수가 들어갈 필요가 없는 경우에는 버튼 이렇게 함수 이름만 넣으면 된다. 근데 매개변수가 들어가야 할 경우에는 버튼 이렇게 바로 괄호치고 넣으면 안된다. 화살표 함수를 사용해 넣어줘야한다. exampleFunc("parameter")}>버튼

(※ 2학년 2학기 데이터베이스 수업의 팀 프로젝트다.) 5명이 한 팀이 되어 작업하였으며 프론트엔드 3명, 백엔드 2명으로 작업하였다. 필자는 프론트엔드를 맡아 영화 페이지, 영화 세부페이지를 작업하였고 기말 최종 발표를 진행하였다. 프론트는 React로 작업하였고 Styled Component, Material UI를 이용했다. 백은 Django로 작업하였다. 중간 과제 때 만든 데이터베이스 스키마를 이용해 물리적 데이터베이스를 만들고 swagger api를 이용해 axios로 백엔드에서 데이터를 받아와 하드코딩이 아닌 서버와 연동하여 작동하는 웹사이트를 만들었다. VCS로는 GitHub를 사용하였고 Trello의 칸반보드를 사용하며 효율적으로 작업하였다. 아래는 데이터베이스 수업 기말 최종 발표 시..

버튼 위와 같이 태그가 있다고 할 때, 기존의 React라면 아래와 같이 style을 inline으로 넣을 수 있다. 버튼 하지만 Styled Component를 이용하는 경우 이렇게 넣으면 아래와 같이 오류가 난다. Styled Component를 사용하는 경우 아래와 같이 중괄호를 두번 쳐주고 사용해줘야한다. 버튼 속성 이름은 그냥 써주고 속성 값은 ' '으로 감싸준다. (;) 세미콜론은 붙이지 않는다. 만약 스타일을 여러 개 넣는다면 아래와 같이 (,)로 구분해주면 된다. 버튼 추가로 margin-top이나 background-color의 경우 속성 이름에 (-)하이픈이 들어가기 때문에 오류가 난다. 이 경우 아래와 같이 카멜표기법으로 적어주면 된다. 버튼

공식문서를 보면 위와 같이 불친절하게 쿼리문을 사용하지 않고 문서의 ID를 이용해 삭제하는 코드를 소개한다. 하지만 문서의 ID를 사용하지 않고 쿼리문을 사용해 조건에 맞는 문서를 찾은 다음, 그 문서를 삭제하고 싶을 수도 있을 것이다. 그런 경우 아래의 코드를 사용하면 된다. const deleteExample = async () => { const q = query(citiesRef, where("capital", "==", true)); const data = await getDocs(q); if (data.docs.length !== 0) { await deleteDoc(data.docs[0].ref); } } 예시 코드이다. 원하는 조건에 맞추어 query를 짜주고 getDocs로 데이터를 받아..