분류 전체보기 (359) 썸네일형 리스트형 vuex에서의 mapState, mapGetters, mapActions의 사용에 대하여 전역상태를 관리하는 vuex에서의 mapState, mapGetters, mapActions의 사용에 대하여 mapActions 함수는 특정 모듈에서 액션들을 가져와서 컴포넌트 내에서 직접적으로 사용할 수 있도록 해줌. 예시로 다음과 같은 코드에서 export const layoutMethods = mapActions('layout', ['changeLayoutType', 'changeLayoutWidth', 'changeLeftSidebarType', 'changeTopbar', 'changeLoaderValue']) mapActions함수는 layout이라는 모듈에서 중괄호 안에 있는 엑션들을 가져와서 layoutMethods라는 객체가 만들어 지는 것! 마찬가지로 다음과 같은 코드에서 mapS.. [React] 의존성 다량 추가후 npx webpack serve명령어 입력시 컴파일 시간이 오래 걸리는 이유에 대하여 왜 의존성을 많이 추가했을때 npx webpack serve명령어 입력시 한참 걸렸을까? 내생각: socket과 관련된 여러가지 의존성도 wepback.config.ts의 babel(최신코드를 구식코드로 바꾸어주는 역할)관련 영역에 따로 설정이 필요할 것이다. 이 설정을 하지 않아서 npx webpack serve명령어를 입력해도 제대로 로딩되지 않았을 것이다. 실제로 매번 npx webpack serve를 입력해 주었을 때마다. 아래의 과정까지만 처리되고 그 아래 여러과정(그림2)은 나오질 않았다. GPT의 답:npx webpack serve 명령어를 실행할 때 컴파일 시간이 오래 걸리는 이유는 여러 가지가 있을 수 있습니다. 의존성을 많이 추가한 경우, 웹팩 설정 파일인 webpack.config... 바벨, 웹팩의 역할에 대해(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 .. Fast API에 대하여 단기 현장 실습으로 회사에 다니고 있다. 현재 진행하는 프로젝트의 서버가 Fast API로 진행이 되어 이에 대해 살펴 보고자 한다. 참고: https://www.youtube.com/watch?v=5A67mQ2Pt9s실상 FastAPI는 웹개발 프래임웍이라기 보다는 광범위한 API를 만드는 툴같은 느낌을 같는다. 이로인해 아직 장고를 쓰는 사람이 많다고 한다.아래 그림과 같이 서버를 작은 기능단위로 분할하여 만든것이 Fast API의 특징이다. FastAPI사용법은 정말 간단하다. 아래와 같은 형식을 그냥 템플릿 기억하듯 기억하고 1~4만 변경해 주면 끝이다.get요청으로 어떠한 페이지를 받고 싶을 때는 FileResponse를 import 해준다. (또한 파이썬은 이와 같이 import를 먼저 적는.. 리액트에서 자주쓰는 if문 작성패턴 5개 선임연구원님이 나에게 리엑트에서는 태그를 대상으로 어떻게 조건문을 구성하는지 물어보셨다. 당시에는 알고있었지만 막상 그렇게 질문을 받으니 알고있는 것도 제대로 답하지 못하였다. 아래는 어떻게 리엑트에서 if문이 구현되는지를 보여주는 5가지 예이다. 실제로 나는 그렇게 React를 깊게 공부해 보지는 않아 앞에 3개 방법이 익숙하다. 리액트에서 자주쓰는 if문 작성패턴 5개 1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; }} 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다.우리가 자주 쓰던 자바스크립트 if문은return () 안의 .. @NoArgsConstructor에 대하여 NoArgsConstructor를 설명하는 매우 좋은글. 매우 쉽게 씌어짐: https://velog.io/@kevin_/%EB%82%B4%EA%B0%80-NoargsConstructor-access-AccessLevel.PROTECTED%EB%A5%BC-%EC%99%9C-%EC%9E%91%EC%84%B1%ED%96%88%EC%9D%84%EA%B9%8C알아두기: 객체는 참조를 통해서 연관된 객체들을 마음껏 탐색한다. 그런데 객체가 데이터베이스에 저장되어 있으므로 연관된 객체를 마음껏 탐색하기는 어렵다. Hibernate와 같은 JPA 구현체들은 이 문제를 해결 하기 위해서, 프록시라는 기술을 사용한다. 프록시를 사용하면, 연관된 객체를 처음부터 데이터베이스에서 조회하는 것이 아니라, 실제 사용하는 시점.. API설계 오류관련 Validation Failed 오류 보통 백단에서 내가 직접 정해주지 않은 오류중에 Spring어노테이션이 생성해 주는 Validation Failed라는 오류가 있다. 이 에러가 정확하게 어떠 어떠한 경우에 발생하는지는 몰라도 한가지 확실한 것은 백단과 프론트간의 DTO객체 안의 변수이름이 맞지 않으면 이러한 VF(Validation Failed)오류가 발생한다는 것이다!!! 프론트측의 상태 변수 이름은 content였다. 그리고 DTO객체에서 사용되는 변수의 이름은 comment였다. 그래서 아래 코드의 의미는 프론트 측에 상태로 있는 content상태를 comment라는 자료형으로 사용하겠다는 의미이다. 이전 1 2 3 4 ··· 45 다음
