🗝️소프트웨어

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이 로그가 안될때를 대비하여, 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작되게 ..

json 데이터 vscode로 깔끔하게 보는 방법(feat.정렬)

확장자 : beautify 설치 후 json 파일을 생성해서, f1 키 + beautify file 클릭하면 정렬되지 않았던 텍스트가 다음과 같이 깔끔하게 정렬되는 것을 확인할 수 있음 before after

[AWS + Filezila] 웹서비스 배포 시현 영상

다른 것보다 시현 영상(사진)과 코드이다 코드 1. app.py 2. index.html app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) # DB from pymongo import MongoClient client = MongoClient('mongodb+srv://test:test@cluster0.wpvuwzi.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta @app.route('/') def home(): return render_template('index.html') @app.route("/homework",..