본문 바로가기

분류 전체보기

 (108)
[ERROR] tiptap error in ./node_modules/tiptap/dist/tiptap.esm.js Module parse failed: Unexpected token (126:23) You may need an appropriate loader to handle this file type. | } = this.node; | const pos = this.getPos(); | const newAttrs = { ...this.node.attrs, | ...attrs | }; ....블라블라ㅏㅏ... webpack.base.conf.js 파일의 아래 사진과 같은 부분에 resolve('node_modules/tiptap') 을 추가해주면 된다
[vuex] 상위의 모듈에 있는 commit 실행시키는 방법 update.js에서 user에 있는 mutations인 FETCH_USER_NICKNAME을 실행시켜주기 위해 commit 실행시켰다. 그런데 제대로 작동하지 않았다. 원인을 찾아보니 내가 제대로 문법을 알지 못한채 사용했던것ㅎㅎㅎ 모듈로 구성된 경우 하위 모듈에서 형제 또는 상위모듈의 state에 접근하기 위해서는 rootState를 사용하면 된다고 한다!!!! mutation이나 action을 실행시켜주기 위해 commit 또는 dispatch를 실행시킬 경우 세번째 인자에 { root : true }를 넣어주면 된다. 추가해주니까 nickname이 바로 바뀐다,,,,,, 공부는 꼼꼼히 해야겠다 뼈저리게 느낌........ 출처: https://uxgjs.tistory.com/149 개발하면서 경험..
[css] 프로필 사진 / object-fit 이미지 비율 프로필 사진을 만들기 위해 img태그를 이용해 사진을 업로드했다. 그런데 사진의 원본 비율이 무시되었다.... object-fit 속성은 img나 video요소와 같은 컨텐츠의 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정해주는 속성이다. object-fit : fill 기본값 컨텐츠 박스의 크기에 맞춰 요소의 크기를 조절한다. ( 비율 유지X ) 요소가 컨텐츠 박스를 가득 채우고 가로 세로 비율이 일치하지 않으면 박스를 가득 채우도록 요소가 확대된다. object-fit : contain 요소의 가로 세로 비율을 유지하면서 요소가 컨텐츠 박스를 최대한 채우도록 크기를 확대한다. object-fit : cover 요소의 가로 세로 비율을 유지하면서 요소의 컨텐츠 박스를 가득 채운다. 요소의 일부가..
[vue] img태그 바인딩하기 - require 사용 img태그의 src 속성에 이미지의 상대 경로를 넣어주면 사진이 잘 나온다. 그러나 이미지 경로를 인스턴스의 데이터로 바인딩해주려고 하면 사진이 안뜬다. 이때 바인딩은 v-bind:src 또는 축약형인 :src 라고 써주어 바인딩한다. 해결법은 이미지 경로를 require해주면 된다! 이렇게 사용해도 된다.
[ERROR] node.js와 mysql 연동 실패 505 에러가 떠서 한참을 찾아봤는데 데이터베이스를 찾지못했던것이다. return하기전에 어떤오류가 뜨는지 로그를 다시 찍어봤다. (return은 실행조차 안되더라ㅎㅎ) Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client 해결책을 찾아보니 mysql에 ALTER USER '[MYSQL 아이디]'@'[MYSQL 주소]' IDENTIFIED WITH mysql_native_password BY '[MYSQL 비밀번호]'; 를 입력해주면 해결할 수 있다고 하더라. 쉽게 성공했다....^^ 어디가 문제인지를 몰라서 한참 찾..
[CSS] display 속성 - Flex : flex-item flex에는 두가지 요소가 있다. flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 ) flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 ) flex-item flex-basis : auto, center , .... flex-grow flex-shrink flex align-self : auto , stretch , flex-start , flex-end, center, baseline order z-index Flex Item에 적용하는 속성 1. flex-basis : 유연한 박스의 기본 영역 설정 flex 아이템의 기본 크기를 설정한다. flex-direction : row -> 너비 설정 flex-direction : column -> 높이..
[CSS] display 속성 - Flex : flex-container flex에는 두가지 요소가 있다. flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 ) flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 ) flex-container display : flex flex-direction : row , column , row-reverse , column-reverse flex-wrap : wrap , wrap-reverse flex-flow : row wrap , row , wrap justify-content : flex-start , flex-end , center , space-between , space-around , space-evenly align-items : stretch, flex-start , ..
[node.js] express&vue 로그인 기능 구현하기 (수정중) mrw0119.tistory.com/138?category=938676 [Node.js] Passport 로그인 구현 (express & vue)개발환경: Windows10, VS Code 지난 포스팅에 이어서 진행한다. ( express & vue 연동 1 ) ( express & vue 연동 2 ) Backend 작업 1. backend 프로젝트를 열고, 터미널에서 express-session과 passport, passpor..mrw0119.tistory.com사용법을 좀 더 익히고 싶어서 로그인 구현부분도 이 블로그를 보면서 공부했다Server1. npm i express-session passport passport-local먼저 express-session , passport , passpor..

티스토리툴바