전체 글 201

[SLACK] 슬랙 윈도우 팝업 알람이 안 뜨는 경우 알람 받기

슬랙은 현재 가장 인기있는 협업 소프트웨어 중에 하나이다. 회사의 업무 메신저가 2년만에 슬랙으로 변경되었다. 설치를 하고나니, 슬랙 팝업 창이 안뜨는 문제가 있었다. 🔔 환경설정 → 알림 → 소리 및 모양 슬랙에서 알람이 안뜨는 경우, 환경설정 알림을 확인해주자 나의 경우 Windows의 포커스 지원 때문에 알림이 이 안뜨고 있었다. 😎집중 지원 > 해제 윈도우 설정에에 들어가면 시스템 메뉴에 들어간다. 집중지원을 클릭하면, 3가지 선택지가 있다. 그 중 해제를 클릭해줘야 슬랙에서 알람을 받을 수 있다. 집중지원 해제 후, 환경설정 > 알람> 예시보기를 클릭하니 윈도우 팝업으로 알람이 잘 뜨는걸 확인할 수 있다.

etc. 2024.01.31

[대학생,직장인 추천 사이트] PDF AI 요약 프로그램 서비스 - Chat PDF 사용하는 방법

PDF에서 정보가 너무 많은 경우 요약해서 보여주면 좋겠다는 생각이 들 때가 있는데 오늘 소개하는 사이트는 AI를 통해서 PDF를 요약해서 보여준다고 한다 대학생, 직장인들 중 긴 PDF한번에 읽을 시간이 없는 분들이 계실 텐데 오늘은 쉽고 빠르게 PDF를 요약하는 방법이니!! 꼭 알아보고 가길 추천드린다. 👀ChatPDF 이용해 보기 1️⃣ChatPDF 사이트 접속하기 https://www.chatpdf.com/ ChatPDF - Chat with any PDF! ChatPDF is the fast and easy way to chat with any PDF, free and without sign-in. Talk to books, research papers, manuals, essays, legal..

etc. 2023.08.23

[ubuntu] pm2 save 목록 다시 되살리기 / ngnix 상태 확인하기

아침에 출근 후 이슈 때문에 이용한 명령어 정리하기! 출근 후 우분투 서버가 제대로 동작을 안 해서 점검을 하게 되었다. 🙄 일단 서버는 재시작해서 접속이되기 시작했는데, 서버에 돌려놓은 pm2가 모두 죽어 있는 상태 다행히 pm2 save로 목록을 진행해 놔서 ngnix를 재시작했는데, pm2 list들이 ngnix 재시작 후에도 리스트가 안 올라온다.😨 부랴부랴 확인해보니 아래 명령어를 이용하면 pm2 save로 저장해 놓은 list가 재실행된다고 한다. 🙋‍♀️pm2 save 리스트 재실행하기 pm2 resurrect 해당 명령어를 통해서, pm2 save로 저장해놓은 프로세스는 다시 살아났는데, 여전히 서버접속이 안된다.😓 👩‍💻 ngnix 상태 확인하기 그렇다면 pm2 문제가 아니라 ngnix가..

FrontEnd 2023.07.26

[WebStorm] 특정 파일 텍스트 파일로 인식할 때 - 파일 형식 바꾸는 방법

최근 webstorm에서. vue 파일을 생성했는데, Vue파일 확장자는 잘 지정이 되어있는데 웹 에디터에서 그냥 텍스트 형식으로 보이기 시작했다. 모든 Vue 파일이 아니라, 특정파일만 문제가 나서 어떻게 해결해야 되는지 찾아봤고, 오늘은 해결방법 공유를 위한 포스팅 Webstorm > Setting >Editor > File Types 메뉴로 들어간다. 파일타입을 확인해보면 Text 파일에 Registered Patterns를 확인해 보니, 내 프로젝트에서 문제 되던. vue 파일이 여기에 등록이 되어있었다. 어쩐지 새로 파일을 만들어도 계속 Text로 인식했는데 여기에 이미 Text파일이다라고 정의를 하면,. vue 파일로 에디터 자체에서 인식이 안되었던 듯😥 저와 같이 고생하실 분들 위해서 공유하..

FrontEnd 2023.07.11

[Vue] vue VCalendar에서 v-model 변경 시 특정 날짜로 datepicker 이동 시키기

datepick에서 이번에 신규로 개발한 기능은 기존 날짜를 선택하면 이전기간과 비교해서 보여주는 datepicker를 개발 중이었다. 이전기간이 변경이 되면, 비교 기간이 자동으로 v-model에 연동되어서 변경이 되는데 아쉬운 점이 연결된 데이터는 변경이 되었는데 datepicker에서는 표시가 안 되는 문제가 발생했다.🤷‍♀️ 오늘은 v-model로 연결된 데이터가 변경되면, 해당 날짜로 datepicker를 focus 시키는 기능을 찾아보기로 했다! VCalendar VCalendar는 vue에서 range를 선택하기에 최적화되어있는 datepicker로, 현재 range를 선택할 때 내가 사용하고 있는 datepicker라이브러리이다. https://vcalendar.io/ Welcome | V..

FrontEnd/Vue.js 2023.06.29

[webstorm] 에디터 폰트 크기 변경하는 방법(단축키, 마우스 휠 적용)

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

FrontEnd 2023.04.18

vue.js 에서 resize 감지 하는 방법 && carousel 스크린 사이즈 별 데이터 표시하기

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..

FrontEnd/Vue.js 2023.04.04

[react] 함수형 컴포넌트와 클래스형 컴포넌트의 차이

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

FrontEnd/React 2023.04.03

webstrom github 연결 끊겼을 때 로그인 하는 방법

갑자기 잘되던 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..

FrontEnd 2023.04.02

[Next.js] pages 폴더 라우팅 구조 및 Link 이동 하기

📑Next.js pages 폴더구조 이해하기 Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다. Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다. 기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다. next.js에서는 별다른 작업이 없어도 자동적으로 해당 페이지에 접근이 가능하다. export default function about() { return ( About ) } export default function users() { return ( users ) } '/about' → /pages/about.jsx 파일 화면 접근 '/users' → /pages/users.jsx..

FrontEnd/React 2023.03.29