본문 바로가기

전체 글159

[SCSS] 주석, 변수, 보간법 국비 교육을 들으며 Saas를 처음 배워보았다. 처음 SCSS를 사용해보고 나서 든 생각은 정말 프로그래밍 언어와 다를게 없다고 생각했다. 파일 관리를 모듈 단위로 한다는 점에서 리액트와 뷰랑 사용법이 유사하다고 생각이 드는데 이렇게 코드를 작성하면 바닐라 JS에서도 라이브러리를 쓰듯 코드를 작성하는게 가능할 것 같다는 생각이 들었다.  다음으로는 코드의 가독성이 너무 좋다. 또 if 의 사용으로 인해 정말 프로그래밍 언어처럼 코드를 작성할 수도 있다. CSS에서 해당 기능을 사용할 수 있다는게 신기했다.  그런데 해외 코드를 읽으며 SCSS는 정말 많이 봤지만 국내에서는 인지도가 조금 떨어지는 것 같기도 하다. 리액트나 뷰는 JS 를 쓰는 거의 모든 기업들이 사용을 하고 있지만, SCSS는 지원 자격에.. 2024. 10. 22.
[PWA] FCM 모바일 알림 구현하기 (Vue.js) 현재 진행중인 프로젝트에서 모바일 알림을 구현해야 했다. 그래서 가장 간편하게 쓸 수 있다는 FCM을 사용해 보았는데 나중에 까먹을 것 같아서 남겨두려고 작성한다. FCM(Firebase Cloud Messaging) 이란?firebase에서 제공하는 서비스 중 하나로 여러 플랫폼에 푸시 메세지를 보낼 수 있다. iOS, 안드로이드, 웹 모두 지원하므로 쉽게 사용 가능하다는 장점이 있다.  공식 문서가 잘 작성되어 있어 처음 사용해보는 사람들도 쉽게 접근할 수 있어서 좋았던 것 같다. 개발 환경 ⚙️나는 Vue를 사용하고 있으므로 vue/cli-plugin-pwa 플러그인을 설치했다. 그런데 파이어베이스에서 서비스 워커를 줘서 제공되는registerServiceWorker.js 에서는 따로 구현하지 않았.. 2024. 9. 18.
npm audit fix --force 후 에러 코드를 리팩토링 하던 중 npm 에서 취약점이 있으니 'npm audit fix --force' 명령어를 입력하라는 경고가 떴다. 처음에는 그냥 넘어갔지만 해당 메세지가 계속해서 뜨다 보니 신경이 쓰여 해당 명령어를 입력하자마자 아래와 같은 에러가 뜨면서 프로젝트가 안열렸다..버전 문제인것 같아 진짜 별 짓 다해봤는데 에러가 계속해서 생겼으나 아래 방법으로 해결했다. git restore package-lock.jsongit restore package.jsonnpm install출처: https://velog.io/@devbin20/React.js-undo-npm-audit-fix-force다음부터는 함부로 버전 관련 명령어를 쓰지 말아야겠다고 다짐했다.... 2024. 9. 14.
사이드 프로젝트 후기 - 룸메이트 구하기 어플리케이션 : 그리핀 학기가 끝나고 자격증 준비에 밀려있던 뷰 공부까지 정신없이 보냈다. 어느정도 이론을 마치고, 현업에서 뷰를 어떻게 사용하는지 느낌을 알기 위해 프로젝트를 진행했다. 프로젝트를 시작하며 정식 어플리케이션을 런칭하기 보다는 어느정도 연습삼아 가벼운 분위기로 진행했다.  이번 사이드 프로젝트는 학교 생활에 필요할 것 같은 범위에서 결정했다. 같이 프로젝트를 진행한 형이 기숙사에서 지내며 불편했던 경험(코골이, 흡연 등)을 바탕으로 랜덤으로 룸메이트를 배치하는 것 보다는, 어플을 통해 룸메이트를 구하고 친목을 다질 수 있다면 좋지 않을까? 하는 생각으로 시작하게 되었다.  앱의 대한 소개는 깃허브 링크에서 볼 수 있다. 프로젝트를 진행하며 뷰에 대해서 정말 많이 배웠다. 이론을 인강으로 공부했는데 생각보다 크게.. 2024. 8. 30.
2024 정보처리기사 실기 (2) 데이터베이스 구축 데이터 언어DDL (데이터 정의어)CREATE: 테이블 생성DROP: 테이블 삭제ALTER: 데이터 변경 DML (데이터 조작어) SELECT: 행 선택UPDATE: 행 수정DELETE: 행 삭제DCL (데이터 제어어)GRANT: 권한 부여 REVOKE: 권한 해제 COMMIT: 작업 저장 ROLLBACK: 원래 상태로 되돌리기스키마외부 스키마: 사용자의 관점에서 DB의 논리적 구조를 담당 ex) 웹툰에서 요일별 웹툰 개념 스키마: DB의 전체적인 구조를 담당, 하나의 DB에는 하나의 개념 스키마가 존재내부 스키마: 물리적인 데이터 구성을 명세하는 스키마 데이터 독립성 논리적 독립성: 외부스키마와 개념 스키마 사이에서의 독립성물리적 독립성: 개념 스키마와 내부 스키마 사이에서의 독립성데이터 모델링개념적 .. 2024. 7. 24.
정보처리기사 실기 (1) 소프트웨어 구조 요약 제가 중요하다고 생각되는 것만 요약한 글이므로 자세한 내용이 없을 수 있습니다. 소프트 웨어 공학의 3R역공학: 이미 개발된 시스템을 분석재공학: 시스템의 기능을 개선하거나 재구성ex) 건물의 문이 고장났을 때 건물 전체를 고치지 않고 문만 고치는 것과 같음재사용: 이미 개발된 소프트웨어의 전체 또는 일부를 다시 사용하는 것소프트웨어 개발 단계 계획요구사항 분석설계구현테스트유지보수개발 방법론구조적 방법론> 절차지향적인 개발 방법론 애자일 방법론> 빠르고 유연하게 대응하는 개발 방식  애자일 방법론 종류> XP: 반복적이고 점진적인 개발>> XP 의 특징: 용기, 존중, 의사소통, 피드백, 단순성 (의사선생님 약은 피 존 용기에 담아주세요)> SCRUM: 유연하고 생산적인 프로젝트 관리방식 소프트웨어 개발.. 2024. 7. 18.
Vue.js를 이용한 '몬스터 슬레이어' 게임 만들기 후기 이번 단원에서는 그동안 배웠던 주요 기능들을 이용해서 프로젝트를 진행했다. 주요 로직이 예전에 인턴생활을 하며 Java로 만들었던 RPG 게임과 유사해서 쉽게 만들 수 있었다. 게임의 내용은 닌텐도 포켓몬스터 게임처럼 턴제 게임이며 공격, 스킬, 힐 등 다양한 기능을 사용할 수 있게 제작되었다.주요 기능은 다음과 같고, 스킬은 3턴에 한 번만 사용 가능하다.  객체의 속성 부분에는 Data 를 이용해 체력, 턴, 우승자 등을 선언했고, computed에서는 스타일이나 html에 들어가 있을법한 연산을 넣었다.  나머지 기능은 메서드에서 구현했으며, watch를 이용해 현재 체력을 감시해 0이 되었을 때 승자를 반환하는 코드도 작성했다.  게임의 전체적인 흐름은 몬스터와 플레이어가 한 턴씩 공격하고, 그로.. 2024. 6. 19.
v-if와 v-for 이번 단원에서는 Vue에서 if와 for를 사용하는 방법에 대해 배웠다. 일단 문법은 다른 언어들과 같아서 익숙했지만, html 코드 내에 작성하는게 뭔가 맘에 안든다. 나는 보통 html에서 태그 속에 뭐 넣는 걸 안좋아하는데 익숙해지면 괜찮아질 것 같기도 하다. 암튼 뭐 되게 간결하고 사용법도 쉽고, Js에서 코드 길게 안짜도 편리하다는 점은 정말 유용하다. v-if뷰에서 사용하는 if 문이다. html 태그 내에서 사용하며, 큰따옴표 안에 Js 코드를 작성한다. 아래는 goals라는 배열이 비어있다면 해당 텍스트를 나타내는 코드이다. 목표가 설정되지 않았습니다. 목표를 설정해주세요. v-else뷰에서 사용하는 else이다. if 바로 아래에서 사용해야 하며, 중간에 다른 태그가 들어가면 실행되지않는.. 2024. 6. 15.
computed와 watch 이전 단원에서는 data와 methods 의 대해 배웠다. 이번 단원에는 Vue의 다른 개념인 computed와 watch에 대해 공부했다. 쉽게 설명하자면 computed는 연산형 데이터? 라고 말 할 수 있을 것 같고 watch는 데이터가 바뀔 때 알 수 있으니 디버깅할 때 좋을 것 같다.  computed는 데이터에 직접 연산을 넣으면 가독성이 떨어지고, 효율이 낮아질 수 있으니 따로 분리하는 것이라고 이해했고, watch는 그냥 디버깅 하위호환이라고 이해했다.  computed (연산 프로퍼티): 연산 작업이 필요한 변수를 데이터처럼 관리하기 위함. ➡️ 즉, 재사용성의 증가, 코드의 가독성 및 유지보수 작업이 향상된다.  메서드와 다른 점: 다른 데이터에 의존하는 데이터에 주로 사용. 해당 속성.. 2024. 6. 15.

티스토리툴바