전체 글71 [ JavaScript ] 자바스크립트의 핵심: 스코프와 렉시컬 스코프 완벽 이해하기 클로저나 호이스팅 개념을 공부하려고하니 스코프 개념이 빠지지 않고 나왔다. 렉시컬스코프, 스코프, 전역스코프, 지역스코프, 함수스코프, 블록스코프 ... 여러 스코프 개념이 복합적으로 등장했고 그에 대한 이해가 기본이 된 상태여야 다른 개념을 이해할 수 있겠다는 생각이들어 이참에 확실하게 스코프 개념을 정리 해 두고자 글을 쓴다. 개념이해를 확실히 하기전에 포함관계를 한눈에 확인 가능하면 이해가 쉬워지겠다는 생각이 들어 위 이미지와 같이 도식화 해 두었다. 1. 스코프와 렉시컬스코프 이해하기 스코프란 무엇일까? 스코프는 참조대상 식별자, 쉽게 말해서 변수명•함수명을 찾아내기 위한 규칙이다. 일반적으로 스코프는 중첩된 구조를 형성하는데 동작방식을 설명하자면, 내부 스코프는 외부 스코프에 접근할 수 있지만,.. 2023. 5. 19. [ WebFrontend ] styled-components의 동작방식을 통한 호이스팅의 원리 이해 호이스팅이란? 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. -함수형 자바스크립트 프로그래밍- 호이스팅의 개념은 여러번 듣고서 알고는 있었지만 실제로 호이스팅을 사용한 적이 없다는 생각에 어렵게만 다가왔던 개념이었다. 그런데 문득, 사실을 나도 모르게 호이스팅을 이용해서 코드를 지금까지 짜 왔다는것을 깨달았다. 스타일 작업을 할 때 주로 styled-components를 이용해서 작업을 해 왔었는데, 함수컴포넌트의 아래에 스타일을 정의 하는 방법으로 나도 모르게 이미 호이스팅을 사용하고 있었다는 생각이 문득 들었다. 위 코드와 같이 StyledButton이 선언 된 곳은 버튼컴포넌트의 아래인데 에러를 발생시키지 않고 코드를 실행 할.. 2023. 4. 20. 리덕스 툴킷(Redux Toolkit) 설정 기본 가이드: 설치부터 사용까지 단계별 정리 리덕스 툴킷 세팅 후, 다음 세팅시 참고하기 위해 순서를 정리 해 보았다. 1. 먼저, 터미널에서 yarn add @reduxjs/toolkit react-redux 을 해주어 리덕스 툴킷을 설치 해 준다. 2. root 경로에 store 폴더를 생성, 위 와 같이 configureStore 함수를 만들어 준다. 초기상태에서 reducer는 빈오브젝트 상태로 남겨주면 된다. 3. store를 Provider를 통해 앱에 공급 해 준다. 4. Store폴더 안에서 CounterSlice 함수를 생성 해 준다. 5. 이후, 2번에서와 같이 아까 만들어 둔 store/index.ts에 reducer를 추가 해 주면, 리덕스 툴 킷 세팅이 끝난다. 6. useAppDisatch와 useAppSelector를 사.. 2023. 1. 5. 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 ··· 3 4 5 6 다음
