티스토리

ImFe's study
검색하기

블로그 홈

ImFe's study

ye0ye0.tistory.com/m

ImFe 님의 블로그입니다.

구독자
10
방명록 방문하기

주요 글 목록

  • [WEB] pnpm 오류 - pnpm ERR_PNPM_NO_GLOBAL_BIN_DIR, Unable to find the global bin directory node 라이브러리를 pnpm으로 글로벌 설치할 경우 발생하는 오류global bin directory가 없다고 한다. 만들어 주면 된다. 환경은 M1 Pro, Sonoma OS이며 source 이후 명령줄은 사용하는 환경에 따라 차이가 있다mkdir -p ~/.pnpm/storeexport PNPM_HOME=~/.pnpm/storesource /Users/[사용자명]/.zshrcpnpm setup  잘 된다. 공감수 1 댓글수 1 2024. 4. 12.
  • [WEB] Sequelize Error: Dialect needs to be explicitly supplied as of v4.0.0 문제 상황 sequelize@6.32.1에서 /models/index.js에 config/config.js과 cross-env를 연동하던 중 발생 dot-env와 연동 편의를 위해 cross-var 이용, 기존 config.json을 config.js로 변경 환경변수 값을 분기하는 코드는 config/config.js로 분리 Error: Dialect needs to be explicitly supplied as of v4.0.0 오류 발생 시도한 방법들 버젼 호환성 확인 현재 버젼이 더 높음 값이 정확한지 new Sequelize 생성자 인자 변경 상관 없음 // 기존 if (config.use_env_variable) { sequelize = new Sequelize(process.env[config.. 공감수 0 댓글수 0 2023. 8. 9.
  • [WEB] Netlify에 React 프론트엔드 배포 및 Error:error:0308010C:digital envelope routines::unsupported 오류 해결 교내 웹 프로젝트를 Netlify에 배포 후 deploy failed가 떴다.  Base directory레포지터리는 모노레포 형태이다. 프론트랑 백엔드 레포를 분리했어야했는데..백엔드 서버는 Heroku에 따로 배포 할 예정이여서 Netlify엔 프론트엔드만 배포한다. Base directory에 프론트 폴더를 입력해준다  Build command말 그대로 빌드 명령어이다. package.json에 명시된 빌드 명령어를 적어주자  publish directory빌드 결과물이 배포되는 위치를 적어준다  설정 후 다시 배포해주면 된다   3:54:01 AM: Error: error:0308010C:digital envelope routines::unsupportednode버젼이 맞지 않을 경우 발생하는 문.. 공감수 0 댓글수 2 2023. 6. 19.
  • [NVM] macOS에서 nvm을 이용하여 node버젼 설치 시 너무 오래걸리는 문제 macOS에서 nvm을 이용하여 낮춰놨던 node버젼(10.15.0)을 16.15.0으로 업그레이드 하려 했는데한참을 기다려도 설치가 완료되지 않고, 터미널에 설치 내용만 쭉쭉 올라갔다 예전에 verbose옵션을 명시한 상태로 압축풀기를 할 때 굉장히 오래걸려서 verbose옵션을 제외하고 압축풀기를 했었는데,작업 내용을 출력 할 필요가 없어서 그런가 굉장히 빨리 작업이 마무리 된 경험이 있었다. 비슷한 경우일까 싶어서 해보니까 이 문제가 맞았다. nvm의 경우 아래 옵션을 추가하면 작업 과정을 터미널에 출력하지 않는다nvm install --no-progress 공감수 0 댓글수 0 2023. 6. 13.
  • [Vue] 변수의 3depth 이상 변수 <template>에서 사용시 오류 해결? 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 2. 7.
  • [WEB] rwdImageMaps를 이용한 이미지맵 좌표 반응형 변환 rwdImageMaps? rwdImageMaps는 이미지 맵을 사용할 시 반응형 웹을 위해 좌표를 다시 계산해주는 제이쿼리 플러그인이다. 깃허브 링크 https://github.com/stowball/jQuery-rwdImageMaps 이미지 맵 https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#attr-usemap https://developer.mozilla.org/ko/docs/Web/HTML/Element/map https://developer.mozilla.org/ko/docs/Web/HTML/Element/area 제이쿼리를 굳이 지양할 필요가 없는 프로젝트에서 빠르게 랜딩 페이지 제작할 때 도움이 된다 ex) .. .. .. .. 좌표를.. 공감수 0 댓글수 0 2023. 2. 3.
  • [WEB] html input type=number 사용 시 카운터 없애기 html input태그의 type이 number일 경우 생기는 카운터 버튼을 없애는 css input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 공감수 0 댓글수 0 2023. 1. 12.
  • [Vue] VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior 오류 변경할 노출 날짜를 선택하세요 ~ 날짜 수정 기능이 작동은 하는데 자꾸 서버에서 받아온 원래 값으로 수정됐다. value로 줬던게 문제여서 v-mode로 바꿔줬는데 두 속성은 충돌한다고 한다. 이유는 v-model이 :value(html value 속성)과 똑같이 기본값을 바인딩해주는 동작을 하기 때문. 위와 같은 목적이라면 v-model만을 사용하는것이 맞다. 변경할 노출 날짜를 선택하세요 ~ +) 체크박스와 라디오 버튼에 대해서는 두 속성을 사용할 수 있다고 한다. (다른 값 사용) 또한 이러한 상황에서는 v-model의 경우 selected 속성과 같이 동작된다고 한다. 공감수 1 댓글수 2 2022. 12. 16.
  • [WEB] 배포시 CSS opacity가 1%로 고정되는 버그 해결 발생 버전) node: 14.19.0 php: 7.2.34 laravel: 6.18.37 webpack: 4.36 배포시 nn%로 적용하였던 opacity가 정상적으로 적용되지 않고 1%로 고정된다. nn% !important로 변경해도 다시 1% !important로 변해서 배포된다. 해결) opacity: nn%를 0.nn으로 변경해서 배포 ex) opacity: 70% => opacity: 0.7 참고) https://stackoverflow.com/questions/58853844/the-opacity-value-was-changed-to-1-after-building-the-reacjs-project/61124900#61124900 공감수 0 댓글수 0 2022. 12. 14.
  • [REACT] React에서 type="range"인 input의 요소가 드래그되지 않음 리액트에서 위 JSX가 동작하지 않는다. (움직여야 할 불릿이 드래그되지 않음) value값이 맞게 인식되어도 드래그는 되지 않는다. 해결) JSX와 html의 어트리뷰트가 달라서 작동하지 않던 것. +) 무슨 차이일까 싶어서 찾아봤더니 영문은 Controlled Component와 Uncontrolled Component이다. 제어 컴포넌트의 경우(value attribute를 사용한 input) 컴포넌트가 마운트 된 후에도 value값을 변경할 수 있고(DOM의 값이 업데이트 가능함.) 비제어 컴포넌트의 경우(defaultValue attribute를 사용한 input) 컴포트가 마운트 된 후라면 value값을 변경할 수 없다.(DOM의 값이 업데이트 되지 않음.) 공감수 1 댓글수 0 2022. 10. 20.
  • [React] Warning: Each child in a list should have a unique "key" prop. 해결 리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다. 리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다. 배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문. 키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다. 글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다 { // map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함 title.map(function(title, i) { ret.. 공감수 0 댓글수 0 2022. 6. 8.
  • [WEB] Browser sync 사용법 https://browsersync.io/ (공식 문서) browser sync는 여러 브라우저에서 테스트하는것을 도와주는 동기화 프로그램이다. 노드 모듈이므로 node.js설치가 선행되어야 한다. node.js가 설치되어있다면 https://www.npmjs.com/package/browser-sync browser-sync Live CSS Reload & Browser Syncing. Latest version: 2.27.7, last published: 4 months ago. Start using browser-sync in your project by running `npm i browser-sync`. There are 2300 other projects in the npm registry u.. 공감수 0 댓글수 0 2022. 3. 2.
  • [WEB] <iframe> 태그를 화면에 보이지 않게 하는법 보통은 1. width, height값을 0으로 준다 2. display:none; 의 방법을 사용한다. 1번의 경우 지난번 프로젝트에서 사용한 방법인데(서버에 유저가 입력한 값 저장하기 위해 통신), 통신이 정상적으로 이루어져 값이 저장됐다면 특정 이미지를 화면에 꽉 채우려 했다. 그런데 top:0; left:0값을 줘도 꽉 차지 않고, 공백이 발생했었는데.. 우악스럽게 CSS를 짜서 어찌저찌 넘겼다. 2번의 경우는(크롬 브라우저 기준) iframe에 속성이 적용되지 않는다. 엄밀히 말하면 적용이 안되는 것이 아니라, iframe 표시를 위해 html코드가 생성되는데, 여기에 display:none;을 추가하는것 보단 가리고 싶은 태그에 visibility:hidden 속성을 추가하는것이 훨씬 간단하다. 공감수 0 댓글수 2 2022. 2. 22.
  • PC, 모바일 Modal창 화면 스크롤 방지 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 1. 19.
  • [webpack] Plugin, Wrap up, Code Splitting 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 12. 13.
  • [webpack] 웹팩 개념, Entry, Output, Loader, 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 12. 10.
  • [npm] npm 정리 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 12. 10.
  • [CSS] minify 정리 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 11. 25.
  • Client-side 공격 기초 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 10. 26.
  • 웹 기초지식, 웹해킹 기초 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 10. 21.
  • [HTML] inline-block 요소들 사이에 공백이 포함되는 버그 해결 같은 div내에 inline-block요소들을 스타일링 하던 도중 margin값이 없음애도 불구하고 공백이 생겼습니다. 찾아보니 이는 크롬 브라우저(webkit엔진)에서 일어나는 버그라고 하네요. TEST TEST TEST 해당 부분의 HTML입니다. 사실 글을 HTML로 분류하기도 애매한게, HTML을 퍼블리싱할때는 해당 문제가 잘 발생하지 않습니다. 지금은 EJS템플릿에서 작업하던 도중 발생한 문제인데, EJS에서는 거의 매번 발생하는것같네요. 해결 방법으로는 1.부모 요소의 폰트크기를 0으로 조정 후 자식요소들의 폰트크기를 다시 원래대로 조정 2.문제가 생긴 태그의 줄바꿈을 변경하거나 닫는 태그 삭제 3.음수 margin 적용 4.태그들 사이에 주석( )적용 5. 부모 요소에 font-size: 0.. 공감수 0 댓글수 0 2021. 9. 1.
  • [EJS] Refused to apply style from '*.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type.. EJS템플릿 위에서 CSS파일을 불러오자 발생한 에러 CSS가 적용되지 않습니다. MIME type이 뭘까.. 싶었는데 MIME은 Multipurpose Internet Mail Extensions의 약자로 이전의 방식보다 개선된 인코딩 방식이라고 합니다. 그런데 지난번의 프로젝트에서도 EJS를 사용했고, 같은 방식으로 CSS를 불러왔지만 해당 오류는 없었던점을 통해 이는 큰 상관이 없다고 생각했습니다. 찾아보니 express에서 static설정이 저번 프로젝트와는 달라 발생한 오류였습니다. app.use(express.static('public')); 경로를 변경해주면 잘 작동합니다. 공감수 0 댓글수 2 2021. 8. 4.
  • [CSS] margin-top 요소(태그) 밖으로 넘칠 때 / margin-top 버그 웹 앱을 위한 스켈을 만들던 중 뭔가 이상한 점을 발견했는데 최 상단바(뒤로가기, 네비게이션)컴포넌트와 캐러셀 슬라이드 컴포넌트를 불러온 후 Wrapper의 제일 상위 자식에게 margin-top을 주면 그 마진이 Wrapper를 넘어갔다. 왜 마진이 부모 요소를 넘어가지..? .. 코드는 대강 이런식이였고 원래 두 컴포넌트가 딱 붙어있어야 하지만 최상위 자식요소의 margin-top이 부모 요소를 밀어내면서 기본 배경색인 회색이 드러났다. 검색을 해 보니 자식요소에게 부여한 margin-top 속성이 부모 박스를 밑으로 떨어지게하는 버그라고 한다. 해결 방법은 부모 요소에 overflow:auto 속성을 주거나 자식 요소에 position:relative 속성을 주면 해결된다고 하는데 직접 해본 결과 .. 공감수 0 댓글수 0 2021. 7. 14.
  • [Zeplin] Zeplin CLI / 제플린 CLI 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 7. 6.
  • [React] react-redux가 필요한 이유, connect&provider, mapStateToProps, mapDispatchToProps 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 6. 30.
  • [React] Redux 도입 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 6. 29.
  • [Sass] Sass를 이용한 버튼 컴포넌트 스타일링 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 6. 29.
  • [Sass] Node Sass version 6.0.1 is incompatible with ^4.0.0|| ^5.0.0. 해결 Styled Component말고도 Sass도 한번 써봐야겠다 싶어서 npm으로 설치하였더니(로컬) 해당 오류가 발생했습니다. node-modules를 삭제하고 npm install을 해봐도 해결이 안돼서 검색을 해보니 버젼을 낮춰서 깔아야 하는 듯 합니다. 현재 node-sass의 버전은 6.0.1입니다. node의 버전은 14.16.0입니다. www.npmjs.com npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, pr.. 공감수 0 댓글수 0 2021. 6. 28.
  • [React] React Redux의 개념 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 6. 25.
  • [React] 클래스에서 라이프사이클 구현 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 6. 24.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.