본문 바로가기

1.웹개발

(27)
[JS]Bom Bom Bom Bom이 왔네요 아이가 처음 배우고 하는 말 "엄마", "아빠" 개발자들의 엄마, 아빠 "Hello Wolrd!" JS로 Hello Wolrd를 출력하는 코드는 다음과 같습니다. html에 추가 개발자 또는 지망생들은 코드를 보고 console.log라는 것으로 출력을 한다고 추측할 수 있을 텐데요 여기 console은 어디서 나왔을까요? Browser(브라우저)에는 전역 객체(window)라는 것이 있습니다. 전역 객체는(this나 var키워드와 연관이 있습니다) this란? https://hbsowo58.tistory.com/150 [JS]this,바인딩,this결정조건 this란, 자바스크립트에서 자기 참조 변수입니다. 객체에서 '자신의' 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수입니다. (저라는 사람은 1..
[JS]비동기 프로그래밍 결론 : 동기 프로그래밍은 동시에 발생하는 것이 아니다. 목표 : JS에서 비동기 프로그래밍의 이해 비동기 프로그래밍에 대해서 학습해보도록 하겠습니다. 목차 비+동기란? 1-1 동기 1-2 비동기 1-3 동기, 비동기 예시 1-4 비동기의 방법과 단점(1) callback 1-5 비동기의 방법 (2) promise 1-6 비동기의 방법 (3) async / await 비동기 방식을 이용한 통신방법 2-1 Ajax 2-2 XMLHttpRquest 2-3 fetch 2-4 axios 비동기란? 비동기란, 非(아닐 비) 자를 사용하여, "동기가 아니다"라는 뜻입니다. 비동기를 알기위해선, 동기가 무엇인지 알아야 합니다. 동기가 아닌 것이 비동기 이니까요. 동기 그렇다면 동기(Synchronous)란? 同氣(같..
CSS BASIC SELECTOR(선택자) https://hbsowo58.tistory.com/470?category=894677 HTML Basic Analysis HTML은 문서이며, 기본 양식이 존재합니다. Hello Wolrd 메모장에 최소한의 코딩만으로도 브라우저에 원하는 내용을 출력 가능합니다. 최소한의 문서 구조를 위해 IDE에 EMMET 명령어를 사용하겠습니 hbsowo58.tistory.com 상단의 글에서 이어서 작성합니다. CSS는 HTML에 디자인을 추가하는 목적입니다. 어떤 "HTML" element(요소)에 디자인을 입힐지 선택해야 하기 때문에 먼저 학습해야 될 내용은 selector "선택자"입니다. 특정 elements를 선택하지 않은 경우에도 "전체 선택자" 를사용해야 합니다. 위와 같은 코드가 작성되어 있을 것이며..
netlify deploy 간단 배포하기 - Vue 프로젝트 작업환경 운영체제 : window 필요 준비물 1. vue 프로젝트 2. github 계정 3. netlify 계정 vue 프로젝트 만드는 법 -> https://hbsowo58.tistory.com/479?category=938110 Vue 프로젝트 만들기 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz 1.80 GHz 설치 npm i -g @vue/cli vue --version boilerplate 설치 vue create 프로젝트명 Linter는 제거 (경고.. hbsowo58.tistory.com github 회원가입 https://github.com/ GitHub: Where the world b..
[JS] 배열 for ... of 문 변수하나에, 다양한 값을 저장하기 위한 방법중 1가지는 배열이 있습니다. 자바스크립트에서 배열은 사실은 obejct입니다. 여기서는 이내용을 다룰 것은 아니며 순회 방법중 1가지를 알아보겠습니다. 자바스크립트 배열의 순회방법에는 for ... of 문법이 있습니다. 아래와 같은 배열이 존재할때, const numbers = [1,2,3,4,5] 조건에 따라 순회시켜, 필요한 데이터만 출력해보도록 하겠습니다. 1. 기본적으로 배열 전체 조회 //기존 for문 const numbers = [1,2,3,4,5] for (let i = 0; i < numbers.length; i++){ console.log(i) } //for ... of 문 for (const number of numbers) { consol..
장고 게시판 작성하기(Model) CRUD - C https://hbsowo58.tistory.com/514 장고 게시판 작성하기(Model) CRUD - R https://hbsowo58.tistory.com/512 장고 시작하기 필요한 프로그램 python git bash vscode 작업 환경(폴더) 설정 git bash 또는 vscode의 터미널 기능을 활용하여, 작업할 환경으로 이동한다 가상환경 생성 & 활.. hbsowo58.tistory.com 위 글에 이어서 작성합니다. CURD의 READ 부분을 작성하였으나, 현재 데이터가 없어 조회가 어렵습니다. CREATE 기능을 구현하여 데이터를 조회해보겠습니다. 데이터의 흐름에따라, url -> views -> templates순으로 작성하겠습니다 현재 articles 애플리케이션의 urls.py..
장고 게시판 작성하기(Model) CRUD - R https://hbsowo58.tistory.com/512 장고 시작하기 필요한 프로그램 python git bash vscode 작업 환경(폴더) 설정 git bash 또는 vscode의 터미널 기능을 활용하여, 작업할 환경으로 이동한다 가상환경 생성 & 활성화 $ python -m venv [가상환경이름] 가상환경.. hbsowo58.tistory.com 기존글에서 이어서 진행합니다. 현재 프로젝트 구성은 다음과 같습니다. 현재는 1개의 "프로젝트"만 존재합니다. 애플리케이션을 생성합니다 django는 애플리케이션의 모음과 같습니다. 명령어를 입력하면, 다음과 같이 articles 애플리케이션이 생성됩니다. 프로젝트에서, 애플리케이션을 사용하기 위해서는 "프로젝트"의 settings.py 파일안에, ..
장고 시작하기 필요한 프로그램 python git bash vscode 작업 환경(폴더) 설정 git bash 또는 vscode의 터미널 기능을 활용하여, 작업할 환경으로 이동한다 가상환경 생성 & 활성화 $ python -m venv [가상환경이름] 가상환경 생성 $ source [가상환경이름]/Scripts/activate 가상환경 활성화 폴더를 확인해보면 다음과 같이 출력됩니다. source 명령어로 가상환경을 실행시키면, 상단처럼 (가상환경이름)이 계속 출력됩니다. 터미널 별 활성화 방법 Git Bash $ source [가상환경이름]\Scripts\activate CMD $ [가상환경이름]\Scripts\activate.bat PowerShell $ [가상환경이름]\Scripts\Activate.ps1 mac..