본문 바로가기

분류 전체보기76

[CSS] 미디어쿼리 범위 지정해서 사용하기 media Query Range Syntax 미디어쿼리 범위 지정해서 사용하기 참고 사이트 https://css-tricks.com/the-new-css-media-query-range-syntax/ 1. media Query Range 최근에 단톡방에서 범위지정 css가 존재한다는 소식을 듣고 알아보았다. 기존에는 css 를 선택할때 불편하게 코드를 작성하곤 해서 범위지정이 되는게 있으면 좋겠다는 생각을 했었는데, 이렇게 나와있었다니 전혀 몰랐다. 아직 적용해보진 못했지만 퍼블할 일이 많으니 작업하면서 꾸준히 써보려고 한다. @media (min-width: 400px) and (max-width: 1000px) { /* code */ } 이렇게 적용했던 불편했던 코드들이 @media (400px 2023. 6. 28.
눈이 즐거운 UI Design 오픈소스 라이브러리 추천 1. Ant Design 깔끔하고 단정한 느낌의 UI Design 프레임워크 워낙 유명해서 대부분의 개발자분들은 알 거라 생각합니다. 최근 1년동안 굉장이 애정했던 디자인 오픈소스로 업데이트도 빠르고, 호환성에서도 우수해서 사용하기 좋습니다. 다만 빌드 시, 너무 무거운게 단점(대부분의 프레임워크가 그렇듯..) vue2는 버전2를 끝으로 지원이 끝났다는것이 단점...(혹시 되나요?) Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best R.. 2023. 6. 24.
Uncaught SyntaxError: Unexpected token '<' 해결하기 Uncaught SyntaxError: Unexpected token ' 2023. 6. 24.
요즘 인기있는 npm 패키지/라이브러리를 비교할 수 있는 사이트, npm trends npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 개발자의 길로 접어들면서 사수에게 가장 많이 들었던 말이, 트렌드를 알아야된다는 말이였다. 개발의 세계는 무궁무진하고 업데이트속도가 빨라서 고작 1년만 지났음에도 불구하고 신기한 라이브러리,,AI 등등 신기술들이 등장하게 된다. 그 몇년의 세월을 견디고도 살아남은 라이브러리나 프레임워크도 많지만, 결국 JQuery 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들.. 2023. 6. 24.
[Vue Error] npm run serve 오류 vue-cli-service: command not found git clone 을 실행하고 npm run serve 를 실행했는데 해당 오류가 발생했다. sh: vue-cli-service: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! chart@0.1.0 serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the chart@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging out.. 2023. 6. 24.
[Git] gitignore 활용하여 추적되지 않는 파일들 관리하기 보통 build를 하게되면 버전관리를 하지 않아도 되는 파일들이 생성된다. 예를들어 env 파일이나 cache, node_modules 등의 폴더들은 git에 올리지 않고 로컬에서 관리해주는 경우가 대부분이다. 이런 경우 git push 하기 전에 일일히 파일을 골라내서 push하기 번거롭기 때문에 추적 자체를 제외시킬 수 있도록 git ignore 를 활용할 수 있다. vscode 에서 자체적으로 ignore 파일에 들어있는 폴더들은 추적을 하지 않으니 꽤 유용하게 쓰는 기능 중 하나이다 :-) 1. 파일 만들기 😈 파일 내용 (추적을 원하지 않는 파일들을 선택해서 골라줄 수 있다.) 예를 들어 .cache/ dist/ node_modules/ 이렇게 적으면 위에 파일들은 추적되지 않는다 .DS_Sto.. 2023. 6. 24.
[Git] git user name / email / password 기본정보 세팅하기 git 을 사용하다보면 password 가 만료되거나, github gitlab 의 정책이 바뀌면서 token을 기간제로 다시 입력해줘야하는 경우가 종종 일어난다. 그런경우 password 대신 token을 입력하고 세팅하면 되는데, 이런 경우와 컴퓨터를 초기화 시킨 경우 등등 git 세팅을 바꿔줘야하는 경우가 아주 많다. 이럴 때, 터미널을 키고 `git config --list` 를 치면 입력된 사용자 정보를 확인할 수 있다. joeun@joeuns-MacBook-Air ~ % git config --list credential.helper=osxkeychain init.defaultbranch=main user.name=[아이디/이름] user.email=[이메일] 이렇게 쳤는데, user.name.. 2023. 6. 24.
[확장프로그램] 웹 사이트 컬러를 추출하고싶을때, Color Picker 추천 확장프로그램중에 퍼블리싱 및 프론트개발을 하면서 매우매우 잘 활용하고있는 도구를 추천해볼까 한다! 개발 과정에서 가끔 원하는 색상을 웹페이지에서 뽑아보고싶은경우가 많은데 그때 유용하다! 사실 다른 기능보다 그냥 컬러만 뽑아내는게 중요하기 때문에 그 기능에 특화된 웹스토어 앱을 찾았다. Native Eyedropper 이란 앱인데 정말 컬러 뽑아내는것에만 특화되어있고, 직관적이라 사용하기 매우 편리하다 해당 컬러피커를 추가해 준 후, 툴바에서 선택해서 피커로 해당 컬러를 바로 추출할 수 있다! > color picker 사이트 Color Picker - Native Eyedropper is used as a native eyedropper tool to detect the color of any pixel.. 2023. 4. 19.
[React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시 useEffect 를 먼저 살펴보자면 리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다. 실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다. > useEffect 사용예시 useEffect(()=>{ // 실행 함수 넣어주는 곳 }, [ // 의존변수 넣어주는 곳 ]) useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를.. 2023. 4. 9.
[React] 렌더링 상태 체크하기 (크롬 익스텐션 활용) 사실 이전에 리액트로 작업할 땐 렌더링상태를 체크할 수 있다는 사실을 몰랐기 때문에 어느 부분에서 렌더링이 되는지 몰랐었다. 하지만 막상 렌더링감지되는 기능을 깔아놓고 나니 나도 모르게 렌더링에 대해 신경을 많이 쓰게 되더라 이왕 하는거 최적화된 환경을 위해 설치 하는게 좋을 것 같았다. 크롬 웹스토어 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023... 2023. 4. 9.
반응형

티스토리툴바