FrontEnd (96) 썸네일형 리스트형 vuex에서의 mapState, mapGetters, mapActions의 사용에 대하여 전역상태를 관리하는 vuex에서의 mapState, mapGetters, mapActions의 사용에 대하여 mapActions 함수는 특정 모듈에서 액션들을 가져와서 컴포넌트 내에서 직접적으로 사용할 수 있도록 해줌. 예시로 다음과 같은 코드에서 export const layoutMethods = mapActions('layout', ['changeLayoutType', 'changeLayoutWidth', 'changeLeftSidebarType', 'changeTopbar', 'changeLoaderValue']) mapActions함수는 layout이라는 모듈에서 중괄호 안에 있는 엑션들을 가져와서 layoutMethods라는 객체가 만들어 지는 것! 마찬가지로 다음과 같은 코드에서 mapS.. 바벨, 웹팩의 역할에 대해(By GPT) 바벨(Babel)은 주로 최신 JavaScript 코드를 구형 브라우저나 환경에서도 호환되게 변환(트랜스파일링)해주는 도구입니다. 바벨의 주요 역할과 기능은 다음과 같습니다: 1. 최신 JavaScript 문법 지원바벨은 최신 ECMAScript 표준(예: ES6, ES7 등)에서 도입된 새로운 문법과 기능을 구형 JavaScript 환경에서도 사용할 수 있도록 변환합니다. 예를 들어, 화살표 함수, 클래스, 템플릿 리터럴, 비동기 함수 등의 최신 문법을 ES5 또는 그 이하 버전의 JavaScript로 변환합니다.2. 플러그인 시스템바벨은 플러그인 시스템을 통해 다양한 기능을 추가할 수 있습니다. 각 플러그인은 특정 문법 변환을 수행하며, 필요한 플러그인만 선택하여 사용함으로써 커스터마이즈가 가능합니.. Vue 기본문법 회사 프로젝트 중 필요한 Vue문법을 잘 설명한 블로그가 있어 글 남긴다.https://cjw-awdsd.tistory.com/33중간에 오타가 있는데, 아래에서 v-bind5. 입력 폼 연결v-bindv-bind를 통해 input에서 입력한 값을 프로퍼티에 저장가능하다. 다양한 예제를 아래와 같이 다 입력해놨다. 입력한 문자열을 표시하는 예제 input model : {{input_model}} input lazy model : {{input_model2}} textarea model : {{textarea_model}} disabledd checkbox .. 리액트에서 자주쓰는 if문 작성패턴 5개 선임연구원님이 나에게 리엑트에서는 태그를 대상으로 어떻게 조건문을 구성하는지 물어보셨다. 당시에는 알고있었지만 막상 그렇게 질문을 받으니 알고있는 것도 제대로 답하지 못하였다. 아래는 어떻게 리엑트에서 if문이 구현되는지를 보여주는 5가지 예이다. 실제로 나는 그렇게 React를 깊게 공부해 보지는 않아 앞에 3개 방법이 익숙하다. 리액트에서 자주쓰는 if문 작성패턴 5개 1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; }} 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다.우리가 자주 쓰던 자바스크립트 if문은return () 안의 .. 간단한 CSS속성과 대응되는 값 정리 1. flex-direction: 자식 아이템들의 배치 방식과 관련된 속성이다. 값으로 row가 오면 왼쪽부터 오른쪽으로 차례로 배치되고, 값이 column이면 위에서 부터 아래로 배치된다.2. justify-content: 콘텐츠 항목 사이와 주위에 가로 공간을 분배하는 방법을 정의한다. 가로 축을 기준으로 좌우에 대한 정렬과 연관됨.flex-derection이 row(가로 배치)일때는 왼쪽에서부터, column(세로배치)일때는 위에서 부터정렬된다.다음은 justify-content속성의 값으로 올 수 있는 것들이다.space-between아이템들의 "사이(between)"에 균일한 간격을 만들어준다.ex) space-around아이템들의 "둘레(around)"에 균일한 간격을 만들어준다.justify.. 타입스크립에서의 props 타입스크립트를 쓰지 않으면 propTypes라는 패키지를 다운 받아서 Menu.propTypes ={ } 형식으로 해주면 되지만 타입스크립트에서는 그냥 propTypes다운 받을 필요없이 interface Props{ } 를 쓰면됨. 기본적으로 propTypes는 타입을 확인하여 오류를 줄여주기 위해 사용한다. 즉, PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.관련글: https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95 .. [CSS] 단위 관련 관련영상: https://www.youtube.com/watch?v=SmzghM3l228 % 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 한다.예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 된다. em과 rem이란? em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위(em은 element의 약자)이다. 예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이다.1.5em = 24px(16*1.5) 이다. 추가로, rem 이란 em 앞에 R이 붙는다. 이것은 Root의 약자로, 최상위라는 뜻이다. 그래서 그냥 가장 상위인 html 태그에 .. react-cookie 사용하기 작품을 진행하던 중 사용자 정보를 다른 페이지에서 활용할 일들이 생겨 방법을 고민해봤다.우선 기존에는 Redux를 이용하여 사용자가 로그인을 완료하면 Redux에 저장한 후 그 데이터를 활용하려 했다.그러나, 이 방법의 심각한 문제점은 새로고침을 하면 Redux의 정보가 모두 날아간다는 것이었다.따라서 사용자 정보를 로컬 브라우저에 담아야 했고, 쿠키를 생성하여 사용하기로 했다쿠키를 다음과 같이 알고있다.웹 서버가 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일 하지만 쿠키에는 토큰에 관한 정보를 넣을 수도 있다. 즉 토큰을 쿠키처럼 사용할 수 있는 것이다. cookie를 설정 및 사용하.. 이전 1 2 3 4 ··· 12 다음
