[WebStorm] React 컴포넌트 생성 단축 키워드

이전에 VScode에서도 간단한 단축키들을 설정해서 React 컴포넌트 템플릿을 사용했었는데,이번에 webstorm을 셋팅하면서 플러그인들과 기본 셋팅을 했었다. 그 중 React Snippets 에 대해서 기록해본다. 1. Settings > Plugins > 'React snippets' 를 검색 후 Install 2. Settings > Editor > Live Templates > React에서 다음과 같이 React 에 관한 snippets을 확인할 수 있다. 이전에 나는 rfc라는 키워드로 사용해와서 rfc로 React Function Components를 추가하였다. import React from 'react';function $TM_FILENAME_BASE$(props) { return ..

• format_list_bulleted ___/webstorm
• · 2024. 6. 30.
• textsms

[WebStorm] 커멘드 라인으로 WebStorm 실행하기

웹스톰 커멘드라인 실행환경 만들기1. 우선 웹스톰을 실행한다. 2. Tools > Create Command-line Launcher3. 환경변수에 웹스톰 경로를 설정하라는 팝업을 확인할 수 있다. 4. 설정 파일에 들어가서 다음과 같이 PATH 환경 변수에 Webstorm 실행 파일의 경로를 추가해준다.# zsh을 사용한다면vim ~/.zshrc# bash를 사용한다면vim ~/.bash_profileexport PATH="/Applications/WebStorm.app/Contents/MacOS:$PATH"5. 저장하고, 변경사항을 터미널에 적용한다. source ~/.zshrc6. 설정 끝! 이제 원하는 디렉토리로 이동한 뒤 다음 명령어로 웹스톰을 실행할 수 있다. webstorm .  커멘드 라인..

• format_list_bulleted ___/webstorm
• · 2024. 6. 30.
• textsms

[Nextjs] _app.tsx 와 _document.tsx

_app.tsx, _document.tsx: 두 파일은 server only file 입니다. Next.js server logic에 사용되는 파일이기 때문에 client에서 사용하는 로직 사용 불가 ex) EventListener / Window / DOM 1. _app.tsx 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트를 의미합니다. pages/_app.tsx 경로에 생성 모든 페이지는 이곳을 통하게 되고 공통 레이아웃을 만들때 사용 글로벌 CSS 적용 레이아웃 설정을 통해 페이지 전환시 특정 레이아웃을 유지할 수 있습니다. 페이지 전환시 특정 레이아웃의 상태값도 유지 실습해보기 root 경로에 styles/globals.css 를 생성합니다. _app.tsx에 적용 pages/_app.t..

• format_list_bulleted Frontend/Nextjs
• · 2023. 11. 11.
• textsms

[Figma] Figma(피그마) Chrome WebGL오류 해결법

1. Figma 오류 발생 Uh oh... we can't open that file We can't open the editor because WebGL isn't supported, or is disabled, in your browser. If you browser supports WebGL, check out this help article to find out how to enalbe it. Could not initialize WebGL Make sure WebGL is enabled, or you might be using an unsupported configuration. 1. Check "Use Hardware Acceleration when available." under Chrome..

• format_list_bulleted UI UX/Figma
• · 2023. 10. 1.
• textsms

[NodeJS] nodejs 최신 버전으로 업데이트 하기

현재 사용하는 nodejs 버전이 구버전이라면 모듈을 사용하다 버전이 안맞는 경우가 생길 수 있습니다. 이럴경우에 nodejs을 최신 버전으로 업데이트 해야할 경우가 생기는데 하는 방법은 다음과 같습니다. node -v //node 버전 확인 npm cache clean -f //캐시 삭제 npm install -g n //nodejs 버전관리 플러그인 ※ 간혹 버전관리 플러그인을 설치하는 중 버전이 너무 낮아 설치가 안되는 경우가 있는데 이 때에는 홈페이지에서 직접 재설치 해야합니다. n latest //최신버전 n lts //lts 버전 n stable //안정버전 nodejs를 업데이트 한 후 npm도 업데이트 합니다. npm -v //npm 버전 확인 npm i -g npm //npm 업데이트(g..

• format_list_bulleted 카테고리 없음
• · 2023. 8. 29.
• textsms

console.log찍었는데 [object Object]라고 출력될때

가끔 로그찍을때 요로코롬 나올때 있음. 객체형태라서 그런데 방법은 2가지 1. JSON.stringify console.log(JSON.stringify(data)) 2. console.dir console.dir(data) Ref ) console.log찍었는데 [object Object]라고 출력될때

• format_list_bulleted 카테고리 없음
• · 2023. 8. 7.
• textsms