본문 바로가기
[VSCode] vscode format prettier 적용 안될 때 다른 프로젝트에도 프리티어 규칙이 필요하여 하단처럼 설정에 Default Formatter를 Prettier로 설정을 하였다.하지만 동작하지 않았고, 서칭 후에 하나더 설정을 확인해보기로 했다. Editor : Format On Save가 체크되어있는지 확인해보았는데 정상적으로 체크가 되어있었다. 그래도 새로운 프로젝트에는 프리티어가 적용되지 않았다! 에디터 하단에 Prettier가 잘 동작하는지 클릭해보면 로그가 하단창에 나타나는데 메세지는 다음과 같았다.vscode Require config set to true and no config present. Skipping file. 계속해서 파일을 스킵하고 있었다. 이메세지 그대로 서칭해본결과 설정에서 Require Config를 검색한 후 이 설정이 ..
[CSS] grid로 마크업 순서 변경하기 마크업 순서를 변경해야할 일이 생겼다.PC에서보이는 순서와 Tablet과 Mobile에서 보이는 블록 순서가 달라야했다. display: flex; 로 해결하려했으나 마크업 논리 흐름상 불가했다.그래서 복잡하여 잘 쓰지 않는 display: grid;를 사용할 수 밖에 없었다. display: grid;에는 order라는 스타일로 제어가 가능하므로. background-color가 skyblue인 블록이 PC에서는 세번째에 있다가 Tablet과 Mobile에서는 첫번째 순서로 와야한다. (반응형 작업시 PC를 기준으로 하고 있다.) 위의 4가지 요소를 감싸고 있는 부모를 -grid라 하면, 다음과 같이 먼저 부모에 스타일을 설정한다. 요소 사이 간격 또한 설정한다.display: grid;gap: 8..
[Bitbucket] Private Repository local에 추가시 core error Private Repository를 내 local에 추가후 install 할경우 아래와 같은 에러가 나오면서 install이 안되는 경우가 있다.ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@project/core/-/core-0.1.0.tgz: Not Found - 404 이런 경우는 해당 레파지토리에 .npmrc 파일이 존재하지 않아서 경로를 못찾고 있기 때문이다.만약 해당 파일이 없다면 root경로에 파일생성후 아래의 경로를 정의해준다.@project:registry=https://library.domain.com/repository/npm-project/ 만약 기존 프로젝트에 해당 레파지토리를 안에 심는 것이라면 기존 프로젝트에 있는 .npmrc 파일..
[VSCode] Github Copilot 확장 이용하기 Github의 코드 AI인 Copilot은 코드를 작성하는 도중에 내가 해당 workspace에서 사용한 코드를 분석하여 제일 근접한 스타일을 추천해주는 유용한 도구이다.tab키를 누르면 추천해준 코드가 모두 반영된다. 만약에 여러줄 코드중에 적용하고자 하는 코드가 한줄이라면?VSCode의 Keyboard Shortcuts (json)에 추가하면된다. ctrl + shift + p 로 검색창을 활성화후에> Preferences: Open Keyboard Shortcuts(json) 파일을 열어 아래와 같이 단축키를 추가한다.{ "key": "shift+alt+right", "command": "editor.action.inlineSuggest.acceptNextLine", "when": ..
[CSS] textarea resizer style custom textarea태그는 resize 기능을 가지고 있다. 이 기능 단추를 커스텀해야하는 상황이 생겨서 열심히 서치하고 시도해 본결과 성공했다. 기본 단추에 제공되는 아이콘 말고 디자인된 아이콘을 넣는게 필요해서 ::-webkit-resizer 를 사용하여 background-image에 해당 원하는이미지를 넣어 완성하였다. 이미지까지는 원활하게 넣었지만 특정 사이즈일때 아래와 같이 라운드한 오른쪽 하단이 비어보이는 현상이 생겼다. 한참을 해매면서 resizer 오른쪽 하단의 비는 현상을 없애기위해 border-radius를 ::-webkit-resizer에 열심히 줘도 삐져나와서 시도해 본 끝에 ::-webkit-scrollbar-corner에 줘야한다는걸 알았다! &::-webkit-scrollbar-c..
[React.js] 2개 이상의 모듈 클래스명 부르는 방법 컴포넌트 별 각 모듈 SCSS가 있는데, 그 두개이상의 SCSS를 className으로 부를때는 다음과 같이 부른다. 참고) 바인드 방법으로 클래스를 부르고 있다. import styles from '../../../../src/components/textarea/Textarea.module.scss';import stylesLabel from '../../../../src/components/label/Label.module.scss';import classBind from 'classnames/bind';const bindStyle = classBind.bind(styles);const bindStyleLabel = classBind.bind(stylesLabel);``` 만약 모듈 클래스로 연결하지..
[실무 경험] Vite + React 환경에 SCSS 전역 설정하기 (with Dart SASS 3.0) React 환경에서 실무 퍼블리싱을 하는걸 원했었는데 운이 좋게 현재 React환경에서 플젝을 진행중이다.Vue와 함께 개발된 툴인 Vite인데 React도 지원하는 빌드 도구를 사용하게 되어서 Vite + React 환경을 경험하게 되었다.이전에 디자인 시스템 가이드를 간단하게 소규모로 퍼블쪽은 혼자서 구축한 경험이 있으나, 대규모의 내부 디자인 시스템 컴포넌트는 이번이 처음이여서 잘하고 싶은 마음이 크다. 기존에는 html에 구조를 잡고 SCSS로 스타일을 잡았었는데, 현재 플젝에는 tsx에서 작업을 한다. React에서 Typescript를 사용한 확장자 tsx로 포폴을 만들어보아서 그런지 반갑기도 하다. 문제는 html이 아닌 tsx에 직접 퍼블을 하고 프론트앤드 개발자와 협업을 해야하는데, 함께..
[VSCode] Extension convertToAsciiArt 주석 꾸미기 convertToAsciiArt에 대해 더 자세히 알고 싶으면 다음 링크를 참고해주세요.https://jintrue.tistory.com/entry/VSCode-minimap%EC%97%90%EC%84%9C-%ED%98%84%EC%9E%AC-%EC%9C%84%EC%B9%98-%EC%95%8C%EB%A6%AC%EB%8A%94-%EC%A3%BC%EC%84%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0 [VSCode] minimap에서 현재 위치 알리는 주석 만들기VSCode 플러그인 중 주석을 기깔나게 만들어주는 Convert To ASCII Art 를 소개한다. 예시로는 그럼 미니 맵에서 이렇게 보인다. https://marketplace.visualstudio.com/items?itemName=..

티스토리툴바