분류 전체보기71 NPM과 Yarn의 옵션 차이점 분석: -D, --dev, -P 옵션 활용하기 쇼핑몰 프로젝트 세팅을 하다가 -D (npm에서의 --save-dev) option에 대해서 궁금증이 생겨 찾아 보던 중 yarn 과 npm에서의 사용법 차이가 있다는 것을 발견 하였다. 먼저, -D option 이란 모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것을 뜻한다. npm의 경우, -D, --save-dev 명령어를 통해 설치 할 수 있는 반면 yarn의 경우, --dev, -D 명령어를 통해 설치 할 수 있다. 이외에, npm 에서는 -P 명령어를 통해 dependencies 항목에 설치한 모듈과 버전을 넣을 수 있는 반면 yarn 에서는 -P 명령어를 사용할 경우 peerDependencies 항목에 설치한 모듈과 버전을 넣을.. 2023. 1. 4. [ JavaScript ] 프로그래머스 치킨쿠폰 문제 설명 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 문제 해설 몫과 나머지를 이용한 문제이다. 1. coupon / 10 => 몫1 + 나머지1 2. (몫1 + 나머지1) / 10 => 몫2 + 나머지2 3. if ( 몫 + 나머지 2023. 1. 4. Tailwindcss / Customizing-colors Tailwindcss customizing-colors 기능에 대한 정리 Tailwindcss customizing-colors 기능 이란? 사용한 이유 사용 방법 좋은점 Tailwindcss customizing-colors 기능 이란? tailwind에서 색상이름을 원하는 대로 지정해서 사용 할 수 있게 해 주는 기능이다. 사용한 이유 portfolio 프로젝트를 하며 atomic 패턴을 적용하여 폴더구조를 짜고 button, input ... 과 같은 atoms의 경우 여러 프로젝트에서 가져다 쓸수 있도록 만들어 두었다. 그 경우 다른 Style부분에서는 문제가 될 것이 없었지만 색상과 같은 경우에는 프로젝트마다 다 다르게 될 것인데 각 컴포넌트에서 색상을 다 찾아내서 일일이 바꾼다는것이 너무 불편.. 2022. 12. 3. [ JavaScript ] Nullish 병합 연산자 '??' Tabs 컴포넌트를 만들며 적용한 nullish 병합 연산자 개념정리 Nullish 병합 연산자 '??'란? 사용한 이유 사용 방법 Nullish 병합 연산자 '??' 란? 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 즉, nullish라는 이름과 같이 null과 같은 그에 상응하는 값을 말한다. 사용한 이유 Tabs컴포넌트를 만들며 Index의 초기값이 0으로 고정되어 있는 것이 아니라 제어 할 수 있게끔 기능을 구현 하고 싶었고, 그 경우 초기값을 무조건 0으로 설정하게 아니라 외부에서 주입되는 index값이 없을 경우에만 0이 되도록 구현을 해야 했다. 사용 방법 Tabs.context.tsx const .. 2022. 12. 3. Styled-Components / Override Tab 컴포넌트를 만들며 적용한 styled-components override 개념정리 styled-components override란? 사용한 이유 사용 방법 좋았던 점 styled-components override란? 이미 생성된 스타일을 재정의 할 수 있는 방법이다. 사용한 이유 이미 만들어 놓은 버튼컴포넌트의 variant-ghost 스타일을 사용하여 탭을 만들어 보고싶었다. 사용 방법 Tab.tsx const StyledTab = styled(Button)` &.active { ${tw`text-black`} } &:not(.active) { ${tw`text-slate-500`} } `; 좋았던 점 기존의 만들어둔 스타일을 가져와서 바꾸고자 하는 스타일만 재정의 해서 사용 할 수 있다는 .. 2022. 12. 3. [ React ] React.isValidElement(), React.Children.map() Tabs 컴포넌트를 만들며 적용한 React API 두가지 개념 정리 React.isValidElement( ) 란? React.Children.map( ) 란? 사용한 이유 및 사용 방법 React.isValidElement( ) 란? 앨리먼트를 인자로 받아 대상 객체가 React 앨리먼트인지를 검증한 후 Boolean 값으로 true 또는 false를 반환 해 준다. 즉, 리액트 앨리먼트를 검증하고 확인하기 위해 사용하는 React API 이다. React.Children.map( ) 란? javascript의 map( ) 과 유사하지만 다른점은 map( )의 경우 첫번째인자로 callback 함수를 받고, React.Children.map( )의 경우 첫번째 인자로 children 두번째 인자로 c.. 2022. 12. 3. [ React ] Context Tabs 컴포넌트를 만들며 적용한 React Context 개념 정리 React Context란? 사용한 이유 사용방법 좋았던 점 React Context란? React컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 단계마다 일일이 props로 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 공유할 수 있도록 고안된 방법이다. 사용한 이유 Tabs 컴포넌트를 구현하기 위해서 Tab를 클릭함에 따라 바뀌는 인덱스값을 통해 Tab과 일치하는 인덱스의 TabPanel을 보여줘야했다. 따라서 바뀌는인덱스 값과 onChange함수를 Tabs컴포넌트 내에서 전역으로 관리할 필요성이 생겨 Context를 사용하게 되었다. One Two Three one! two! three! 사용 방법 리액트 패키지에서 cre.. 2022. 12. 3. Utility Types TypeScript Utily types 4가지 정리 Partial Required Pick Omit Omit export interface ButtonProps extends React.ButtonHTMLAttributes { size?: 'sm' | 'md' | 'lg'; variant?: 'fill' | 'outline' | 'ghost'; ellipse?: boolean; leftIcon?: ReactNode; rightIcon?: ReactNode; colorScheme?: 'white' | 'point'; } export interface IconButtonProps extends Omit { icon?: ReactNode; } 만들어둔 Button 컴포넌트에서 key를 가져와 아이콘만 들어가.. 2022. 12. 3. 이전 1 ··· 5 6 7 8 다음
