분류 전체보기

[자바스크립트] Math 함수 이용하여 로또 번호 생성하기

랜덤 숫자를 이용하여, 가볍게 로또 번호를 만드려고 한다. 조건은 1. Math.random() 이용하기 2. 반올림, 올림, 내림을 최소 1번 이상 사용하기 3. switch 문 1번 이상 사용하기 4. 최대, 최소값을 입력값으로 받는 함수 사용하기 5. 함수값은 객체 타입으로 반환하기 6. 결과값은 배열로 보이기 7. 자바스크립트 console 로 보이고, html 에서 h1 태그로 해당 값들을 보이기 등이다. 알아야할 개념으로는 1. 자바스크립트 객체를 배열로 전환하는 방법 2. html 에 js 데이터 값 보이는 방법 로또 번호의 경우 1부터 45까지 있으며, 중복을 허락하지 않는 조건이 있다는 전제하에 코드를 작성하도록 한다. 코드가 긴데, 생각나는데로 하다보니, 리팩토링이 필요한 부분이 보이긴..

[에러 코드] Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

에러 상황 자바스크립트 콘솔창에서 다음과 같은 에러가 뜨는 것을 한번쯤 경험해봤을 것이다. switch.js:54 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at parcelRequire.switch.js (switch.js:54:20) at newRequire (switch.b5392d87.js:47:24) at switch.b5392d87.js:81:7 at switch.b5392d87.js:120:3 이라는 내용으로 에러에 대해서 뜬다. 처음에 당황할 수도 있는데, 이것은 DOM 요소를 로딩하는 부분에서 생긴 오류이다. 예를들어, 아래 처럼 switch.js 파일을 head 태그 앞단에 넣어서, js를 호출하고 있..

발전소 지식 탐구 ep1.폐파프리카 배지

발전소에 관한 지식에 대해서 연재하려고 한다. 생각보다 발전소는 대중들에게 잘 알려진 정보들이 많이 없다. 삼성전자, LG전자와 같은 이름은 낯설지 않을 것이다. 그만큼 이 회사들은 자주 보이고, 언급되기에 쉽게 인식할 수 있다. 하지만, 전력 송배전 사업을 하거나, 전력을 생산하는 업체의 경우 소매 단계에서 최종적으로 한국전력(한전)이 있기에 중간에 있는 회사로서, 이러한 시장을 기존에 알고 있지 않는 이상 알기 쉽지 않다. 오늘 다뤄보려고 하는 주제는 바이오매스 발전에서의 새롭게 주목받고 있는 폐파프리카 배지이다. 신재생에너지로 주목 받고 있는 바이오매스를 알아야, 바이오매스의 종류 중 하나인 폐파르리카 배지에 대해서 쉽게 이해할 수 있을 것이다. 바이오매스란? 1. Biomass, Biology의 ..

[10/29] 어느 프론트엔지니어의 일주일

이제부터는 할 일을 선정하고, 해당 내용을 얼마나 잘 완수하는지 하루하루 점검하자. 이번주 완수해야 할 공부 목록들이다. 공부한 내용들에 대해서 ✅ 표시할 것~^^ 공부해야할 것들 높은 우선순위 인프런 - 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 패스트캠퍼스 - Vue.js 강의(110여개) ~ 전체 110여개 패스트캠퍼스 - CSS framework Bootstrap(10여개) 중간 우선순위 유튜브 - 도커 따라하기 강의 듣고 정리하기 netlify 이용해서 스타벅스 홈페이지 꾸미기 크롤러 스케쥴러 완성하기(크롤러 제작 ✅, 파일 수집 ✅, 엑셀 변환 함수 ✅, 스케쥴러 미완성) 목표 학습 시간 : 12시간 [인프런] 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 오리엔테이션 웹..

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

에러 원인 hmtl 로드 되기 전에 자바스크립트 영역에서 html 을 참조하기 떄문 addEventLister 에서 html 태그를 참조할 수 없기 떄문에 null 값이 반환되었고, 해당 부분을 고쳐줘야 하는 것 해결 방법 - script defer 이용 브라우저의 경우, defer 스크립트를 만나게 되면, 스크립트를 다운로드 하긴 하지만, 문서 파싱을 멈추지 않고 아래로 끝까지 읽어들이는데, 스크립트 태그의 경우 html 태그의 끝 태그에서 실행하게 된다 보통, DOM 을 조직하여 HTML 의존성이 있는 경우에 먼저 HTML 을 파싱하고서, 실행되어야 할 자바스크립트가 있는 경우에 사용하도록 한다. 이전 코드 이후 코드

10/22 어느 프론트엔지니어의 하루

이제부터는 할 일을 선정하고, 해당 내용을 얼마나 잘 완수하는지 하루하루 점검하자. 공부해야할 것들 높은 우선순위 스파르타 코딩 클럽 - 이모티콘 프로필 만들기 패스트캠퍼스 - Vue.js 강의 Slot 부터 시작 ~ 전체 110여개.. 중간 우선순위 패스트캠퍼스 - 자바스크립트 Essential 강의 28개 듣고 정리하기 유튜브 - 도커 따라하기 강의 듣고 정리하기 목표 학습 시간 : 12시간 + 크롤링 + RPA Part 3. JavaScript Essentials Ch 2. JS 시작하기 01. 개요(ECMAScript) 및 프로젝트 초기화10:30✅ 02. 데이터 타입 확인15:17✅ 03. 산술, 할당 연산자7:27✅ 04. 비교, 논리 연산자14:07✅ 05. 삼항 연산자3:30✅ 06. 조건..

[Vue] 리스트 렌더링, Map, shortid

참고로 shortid 의 경우 dependency 에러 발생하였음 에러 코드 ERROR Failed to compile with 1 errors 오전 11:26:44 오전 11:26:44 This dependency was not found: /node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/compone * shortid in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue shortid rce busy or locked, lstat 'C:\DumpStack...

[AWS] EC2 ( 인스턴스/ 요금 )

컴퓨팅 서비스 종류 Amazon EC2 가상 서버 인스턴스 Amazon ECS, EKS, and FARGATE 관리형 EC2 클러스터 위에서 실행 되는 컨테이너 AWS LAMBDA 이벤트 트리거로 stateless 코드를 실행하는 서버리스 컴퓨팅 EC2 AMI - 인스턴스를 Launch 할 때 필요한 정보를 제공 - 하나의 AMI로 여러 개의 인스턴스를 시작(Launch) 가능 - AMI에는 다음과 같은 정보가 있습니다. 루트 볼륨을 구성하는 템플릿 (OS, 어플리케이션 등) 인스턴스에 연결되는 볼륨의 블록 디바이스 매핑 EC2 인스턴스 스토어 - 인스턴스의 로컬 저장소 - 임시 데이터 저장소 - 데이터 복제 미지원(디폴트) - 스냅샵 미 지원 - SSD or HDD Amazon EBS (Elastic ..

[gitbub] SSL certificate problem: unable to get local issuer certificate 에러 해결 방법

[2022-10-05T01:41:30.322Z] > git for-each-ref --sort -committerdate --format %(refname) %(objectname) %(*objectname) [110ms] [2022-10-05T01:41:30.337Z] > git remote --verbose [109ms] [2022-10-05T01:41:30.466Z] > git config --get commit.template [108ms] [2022-10-05T01:41:30.791Z] > git push origin main:main [304ms] [2022-10-05T01:41:30.791Z] fatal: unable to access 'https://github.com/bbeee21/sta..

[Vuetify] 동기,비동기,

동기 방식과 비동기 방식 동기 방식 순차적으로 진행이 되어야 하는 것으로 서버에 요청을 보낼시 응답이 돌아와야 다음 작업이 수행 가능함 비동기 방식 요청을 보낼때 응답 상태와 무관하게 다음 동작을 수행할 수 있으며 결과값이 나오는 것과 별개로 아래의 코드들이 실행된다 예를들어, setTimeout() 메소드를 생각해보면, 비동기 APi 이며, 첫번째 인자는 콜백 함수를 사용하며, 두번째 인자는 지연시간이다 두번째 인자가 0 이기에 1 -> 2 -> 3 으로 출력될거라 생각할 수도 있다 console.log("1"); setTimeout( () => { console.log("2"); }, 0); console.log("3"); 하지만, 비동기 메소드는 이를 처리하는 다른 프로그램이 담당하기에, 1 -> ..