🗝️소프트웨어

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

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

[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 을 파싱하고서, 실행되어야 할 자바스크립트가 있는 경우에 사용하도록 한다. 이전 코드 이후 코드

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

[css] 인라인, 블록 요소

인라인 요소의 경우, 블록 요소의 속성 값을 적용할 수 없기 때문에, 인라인 요소를 블록 요소처럼 사용하고 싶은 경우가 존재할 수 있다 참고로 css 선택자에서 .box::before { content : ""; display : block; width : 30px; background-color: royalblue; } 같은 경우에는 ::after, ::before 는 인라인 요소이기에 display 속성 값을 block 으로 준다면 블록 요소처럼 사용할 수 있다 결론, css 에서는 inline 요소와 block 구조에 대한 특징을 잘 알고 있어야 한다 대표적인 inline 요소는 span , a 태그이며 block 의 대표적인 요소는 div 태그를 잊지말자

자식, 하위, 인접 형제, 일반 형제 선택자

크롬브라우저에서 제공하는 기본 여백 제거하기

웹사이트마다 크로스 브라우징으로 인해서, 각기 다른 값들을 ㄱ질 수 있는데, 애플, 구글에서 서로 다른 브라우저 결과 값이 나올 수 있기에, css 에서 브라우저 기본 세팅을 초기화해야함 reset css cdn 을 가져와서 사용하려는 html에 link로 붙여넣어야(절대링크로 하는 방법을 권장) https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 bil..

node 이용한 json 콜백 함수

node.js 는 자바스크립트 자바스크립트코드를 읽어서 처리해 주는 런타임 런타임을 쉽게 말하면 실행기이며 기존 HTML에 종속되어 HTML 없이는 읽을 수 없었던 javascript가 강해질 수 있던 계기도 javascript를 실행해주는 Node가 생긴 이후로 생각할 수 있음(중요) express 설치는 npm install express json 형태의 api를 만들어주는 코드 node b.js 로 서버 실행시켜주기 /aaaa 로 api를 만들어준 것 위와 같은 내용으로, callback 함수를 정의해줄 수 있다 127.0.0.1은 루프백 ip 이다 ㅇ

온도 예측 페이지 만들기(공공 API 활용,json)

open api 활용해서 json 형식의 데이터 받아와서 차트 만들기 json데이터 예시 - hourly 요소의 time 요소 값이 필요함 필요한 open_api 정보를 정의하고 필요한 데이터는 hourly.time임 datasets은 차트 부분을 가리키는 것들로 사용 pointHoverRadius 을 통해 마우스 호버링되면 원이 커지게 됨 chart 를 쓰게 되면, 데이터 포맷팅에 맞춰서 값들을 설정하면 됨 myChart 라는 dom 에 차트를 그림(캔버스에) new Chart로 fetch 요청한 데이터를 가져와서, draw를 통해 차트를 그림 window.onload dom이 로그가 안될때를 대비하여, 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작되게 ..