김평범's OrdinaryCode

인텔리제이(intelliJ)에서 나온 웹스톰(WebStorm)을 기본 에디터로 이용 중인데, 최근 재택근무를 이용하면서 방송화면으로 내 코드를 보여줘야 되는 일이 발생했다🤣 보통 폰트를 고정해 놓고 사용하는데, 상황마다 키우고 줄이 고를 반복해야 하다 보니 단축키를 찾게 되었다. 웹스톰(WebStrom) 폰트크기 변경하는 방법 1️⃣File → Setting을 들어던 지 Ctrl + Alt +S를 눌러서 Setting 창을 열어준다. 2️⃣Change font size(Zoom) with Ctrl+ Mouse Wheel 체크하기 위 기능을 체크해서 켜주면, 앞으로 컨트롤을 누르고 마우스 휠을 조절해 주면 에디터 폰트 사이즈가 바로 변경이 된다.👍

UI상 한 화면에 많은 데이터를 이용할 때 carousel을 이용해 준다. vue carousel 라이브러리를 확인해 보면 가로, 세로 몇 개씩 콘텐츠를 보여줄지 변수로 지정을 하는데 이때 화면 크기에 따라서 자동으로 수정되는 UI를 만들어보도록 하겠다. 💛Vue Carousel 라이브러리 추천 https://www.npmjs.com/package/vue-slick-carousel vue-slick-carousel Vue Slick Carousel with True SSR Written for Faster Luxstay. Latest version: 1.0.6, last published: 3 years ago. Start using vue-slick-carousel in your project by r..

📌React 컴포넌트(Component)의 역할 리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다. 컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서 화면에 필요한 UI형태로 띄워주는 역할을 한다. 리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다. 리액트에서는 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 1️⃣함수형(Function) 컴포넌트 자바스크립트의 함수형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 ..

갑자기 잘되던 git push가 안돼서 보니 로그인이 끊긴 상태 webstorm에서 Setting > version Control > GitHub를 확인해 보면 계정 연결상태를 확인할 수 있다. 연결이 끊긴 상태가 되면 webstrom 자체에서 로그인을 하라는 창이 생성되는데, 왜 그런지 모르겠는데 이메일 패스워드를 입력을 해도 로그인이 안된다🥲 이럴 경우 github의 Use Token 기능을 이용해서 로그인이 가능하다. 일단 GitHub사이트에서 토큰을 먼저 발행해오자. 😉Github Token 발행하기 Github의 setting메뉴를 접속해서 Personal access tokens > token Classic 메뉴에 접속해 준다. 우측 상단의 Generate new Token을 눌러서 New P..