728x90 반응형 개발노트/JavaScript13 [JavaScript] 생년월일 데이터 포맷 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : javaScript 개발 프레임워크 : nuxt 빌드 도구 : Gradle --------------------------------- 회원가입 등 생일 데이터를 받아야할 때 사용자가 주는 데이터를 포맷하서 넣어주면 깔끔하다. 잘못된 데이터가 들어가는 일도 없을 것이다. 아래 코드는 생일 데이터를 입력받을 때 내가 받고싶은 데이터 형식에 맞게 포맷해주는 코드이다. 1. 숫자 외의 문자는 받지 않는다. 2. 8자 이상 넘어가지 않도록한다. 3. 현재 년도를 넘어가지 않게하며 1~12월, 1~31일 안에서 입력될 수 있도록 한다. 내가 설정한 조건은 위 세가지이다. const i.. 2024. 4. 4. [Intellij] Deprecated Gradle features were used in this build 오류 해결 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : java 개발 프레임워크 : nuxt 빌드 도구 : Gradle --------------------------------- Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. 이번에 만난 오류는 넘 오래된 Gradle 버전으로 Gradle 9.0과 호환되지 않는다 블라블라 하는겁니다. 1. Gradle의 버전을 업데이트 하는 방법도 있고 2. Setting 에 들어가서 아래 부분은 IntelliJ로 수정한 후 다시 빌드해도 돌아갑니다. 2024. 4. 2. [VSCode] 한글 깨짐 해결 개발 환경 --------------------------------- OS : Mac 개발 툴 : VsCode 개발 언어 : java --------------------------------- 공유받은 소스파일을 열었더니 깨집니다ㅡㅡ@ 처음 열었을 때 깨지는 이유는 모르겠어요 한글 깨지는 현상 해결하기 오른쪽 하단에 "UTF-8"을 클릭하면 "Reopen with Encoding" 인코딩해서 다시 열 수 있다. 내리다보면 중간에 있는 "Korean (EUC-KR)" 을 선택해주어 인코딩해주자 2024. 3. 29. [JavaScript] 천 단위 콤마 찍기 (DB에서 / JS에서) 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : javascript 프레임워크 : nuxt.js --------------------------------- 화면에 금액과 같이 구분점이 필요한 숫자 데이터를 표시할 때는 적절한 위치에 콤마를 찍어줘야한다. 두가지 방법이 있다. 1. DB에서 데이터를 조회해올 때 콤마 찍기 (mySql) 아래와 같이 FORMAT 함수를 사용해서 컬럼명을 넣고 0을 넣어주면 천 단위로 콤마를 찍어준다. select FORMAT(COST, 0) from TEST_TABLE 1. JavaScript에서 콤마 찍기 가져온 숫자 데이터를 화면에 뿌릴때 숫자 세자리 단위로 콤마를 찍어 표시하고 싶다면 .. 2024. 3. 28. [Vue.js] NextTick 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : java 프레임워크 : nuxt.js --------------------------------- DOM(웹 페이지)에서 데이터가 업데이트 되어 페이지가 렌더링되거나 UI가 변경될 때 즉, DOM에 접근하는 작업을 하는 경우 Vue가 다시 DOM을 바로 인식하지 못하는 경우가 있습니다. 이런 경우 자바스크립트의 비동기 특성으로 오류가 발생합니다. nextTick 메서드는 DOM을 다시 인식하기까지 기다려줍니다. 모든 데이터의 업데이트 및 화면 렌더링을 마친 후 DOM에 다시 접근합니다. 아래는 nextTick 사용 예시입니다. const nextTickTest = async .. 2024. 2. 2. [Nuxt.js] 프로젝트 생성하기 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : java 개발 프레임워크 : nuxt 빌드 도구 : Gradle --------------------------------- Nuxtjs = Vue + SSR 라고 간단하게 이해한 후 시작해보자 SSR은 server side rendering의 약자로 클라이언트가 서버에 매번 데이터를 요청하고 서버에서 처리하는 방식이다. 예를들어 원래는 특정 url을 호출하면 클라이언트단(브라우저)에서 화면을 그린다. 2023. 10. 30. [vue3] DatePicker 사용하기 개발 환경 --------------------------------- OS : Mac 개발 툴 : intelliJ 개발 언어 : java 프레임워크 : vue.js --------------------------------- templete 단에서 VueDatePicker를 사용하는 방법 속성에 range를 추가하면 날짜 범위를 선택할 수 있다. 아래 코드는 선택된 날짜를 받아와서 원하는 방식으로 포맷해준다. const formatDate = (date) => { const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); // 날짜 앞에 0을 붙여야 하는 경우 if (month || day .. 2023. 8. 30. [Node.js] Node.js & nvm & npm 그리고 MAC에 Node.js 설치하기 Node.js 란? Node.js의 정의 및 특징 windows, macOS, Linux, Unix 등에서 실행할 수 있는 크로스 플랫폼 오픈 소스 서버 환경 백엔드 JavaScript 런타임 환경 V8 JavaScript 엔진에서 실행 웹 브라우저 외부에서 JavaScript 코드를 실행 위키백과에서는 이렇게 알려주는데 V8 JavaScript 엔진에서 실행?! 다른 특징은 무슨 말인지 알겠는데 V8 JavaScript가 무엇인지 보자 V8 JavaScript 엔진은 C++ 로 작성된 Googledml 오픈 소스 JavaScript 엔진 nvm 란? (Node Version Manager) nvm의 정의 및 특징 Node.js를 설치하는 툴 컴퓨터에 다양한 버전의 Node.js 를 설치할 수 있게 해준.. 2023. 2. 18. [mac] homebrew 설치 및 제거 전진시입니다 지금 react-native 환경을 셋팅하면서 난항을 겪고 있어요 ruby 2.7.5 를 설치해야하는데 설치를 못하고 있습니다 ! 으악 homebrew 설치 방법은 간단해요 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 위 사이트에 스크립트를 복사하여 터미널에 입력합시다 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 설치 완료 그렇다면 제거는 ?? /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebr.. 2022. 12. 14. vue-cli-service: command not found Error 잡기 안녕하세요 전진시입니다 이번 포스팅은 제가 뷰 실습하면서 하루에 한번은 만나는것 같은 sh: vue-cli-service: command not found 이자식 rm -rf node_modules npm install npm을 다시 설치해줍시다 ! 2022. 5. 17. Vue.js v-for를 이용한 리스트 렌더링 안녕하세요 전진시입니다 지난 포스팅 vue 셋팅에 이어 가보겠습니다 vue는 생각보다 문법이 직관적이고 쉽다고 느껴지네요 v-for 구문은 v-for = "item in array" 이렇게 생겼습니다 item은 array가 반복되면서 불러올 요소 하나하나를 가리킵니다. item은 아무 이름이나 넣어줘도 됩니다. 테스트 데이터를 만들어보자 data 속성에 titleArray를 정의해줍시다 titleArray는 4개의 요소로 이루어진 배열임! data() { return { titleArray : ['음식','일상','여행','가족'], } }, 테스트 데이터를 만들었으니 바로 v-for 구문을 완성해보겠습니다 엇 위에서 제가 말한 구문과 다릅니다! !!중요중요 (슬기와 배배!!!!!!!!!!!!!!!!!!.. 2022. 5. 8. Vue.js mac에서 개발환경 셋팅하기 [2] 안녕하세요 전진시입니다 바로 시작하겠슴다 글이 너무 길어져서 ! 네번째. 왼쪽 메뉴 리스트에서 블럭같이 생긴 다섯번째 버튼을 클릭해주세여 아래 이미지와 같이 Veture Vue 3 Snippets HTML CSS Support 를 설치해줍니다 설치가 끝났다면 다섯번째. 이전 포스팅에서 저희 vuetesta라는 프로젝트 하나 만들었죠 OpenFolder로 들어갑니다 여섯번째. App.vue가 잘 열리는지 확인! 마지막으로 한번 실행을 해보겠습니다 일곱번째. 터미널을 켜서 npm run serve 입력! 아래와 같이 Local 주소가 뜨면 command 키를 누르고 클릭합니다 쟌~~~완료!!!!!!!!!!!! 2022. 5. 2. 이전 1 2 다음 728x90 반응형
