DevYoon

왜 타입스크립트인가? 1️⃣ Javascript Superset 2️⃣ Javascript + Type 문법 3️⃣ 동적 언어로서 Javascript의 단점 보완 기본 문법 1️⃣ 변수 타입 지정 let name :string = 'kim'; name = 3; //error 2️⃣ Array 타입 지정 let name :string[] = ['kim', 'park']; 3️⃣ Object 타입 지정 let name :{ name : string } = { name : 'kim' } // ? => 옵션 속성 표시 let name :{ name? : string } = { name : 'kim' } 4️⃣ Union 타입 지정 // string or number let name :string | number..

데이터 타입 1️⃣ 데이터 타입의 종류는 어떤 것들이 있나요? ✏️ 데이터 타입이란… 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등) 의 종류를 일컫는 말 JS의 데이터 타입 종류는? 원시 타입 1️⃣ Number 가능한 연산자 : + - / & % 같은 수 판별 : === (일치 연산자) NaN : Not a Number, 유효하지 않은 숫자 let a = 0; let b = 0; let c = a / b; /* NaN */ 값이 NaN인지 궁금하다면 ➡️ isNaN(숫자) : true/false 무한대 : Infinity(양의 무한대) / -Infinity(음의 무한대) 2️⃣ String 문자열 붙이기 : 문자+문자 문자열 비교 : ===(일치 연산자) 길이 구하기 : 문자..

네비게이션 바에서 요소 클릭 시 해당 요소의 색상이 바뀌는 걸 구현해보고자 했다. 바란 것 : 메인 / 마이페이지 등 요소에서 메인 클릭 시 -> 페이지 이동 & 메인 글자 색상 바뀌기 클릭 시 클릭한 요소의 class에 active를 추가해주고, 그 전에 클릭한 요소의 class에서 active를 제거해주었다. 참고 글 : https://www.w3schools.com/howto/howto_js_active_element.asp How To Add Active Class To Current Element W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering..

배열 Contents 1️⃣ 자바스크립트의 배열은 자료구조의 배열과 같나요? 2️⃣ 배열의 메서드는 어떤 종류가 있나요? 3️⃣ 고차함수에 대해서 아나요? 4️⃣ forEach 메서드와 map 메서드의 차이점에 대해 알고 있나요? 1️⃣ 자바스크립트의 배열 == 자료구조의 배열? 자료구조의 배열 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 ​ ➡️ 밀집 배열(Dense Array) 장점 단 한 번의 연산으로 임의의 요소에 접근 가능 ➡️ 임의 접근(random access) 시간복잡도 : O(1) ex) 메모리 주소가 1000에서 시작하고 각 요소의 크기가 8byte인 배열이라면 ​ 인덱스가 0인 요소의 메모리 주소는 ➡️ 1000 + 0*8 = 1000 ​ 인덱스가 1인 요소의 메모..

⚙️ 브라우저 렌더링 과정 Contents 1️⃣ 브라우저의 렌더링 과정 2️⃣ 브라우저 렌더링 과정에서 자바스크립트의 동작 3️⃣ 태그는 왜 태그 밑에 둬야 할까? 1️⃣ 브라우저의 렌더링 과정 렌더링이란? HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정 렌더링 과정 1️⃣ 주소창에 URL 입력 2️⃣ DNS 서버에서 주소에 해당하는 IP를 반환 ➡️ 접속 3️⃣ 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청➡️ 서버로부터 응답 받음 4️⃣ 브라우저의 렌더링 엔진이 서버로부터 응답받은 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성 ➡️ 이들을 결합하여 렌더 트리 생성 5️⃣ 자바스크립트 엔진이 서버로부터 ..

비동기 프로그래밍 💻 & Ajax Contents 1️⃣ 비동기 프로그래밍 ​ 🔥 동기와 비동기의 차이점 ​ 🔥 이벤트 루프 & 태스크 큐 ​ 🔥 마이크로태스크 큐 2️⃣ Ajax ​ 🔥 Ajax란? ​ 🔥 Ajax 사용 시 기존 방식과의 차이 ​ 🔥 JSON이란? ​ 🔥 JSON이 제공하는 정적 프로토타입 메서드 ​ 🔥 Ajax로 HTTP 요청을 보내기 위해 사용할 수 있는 방법 1️⃣ 비동기 프로그래밍 🔥 동기와 비동기의 차이점 ✏️ 자바스크립트는 기본적으로 싱글 스레드 엔진 기반 ➡️ 동기 처리되어 작성한 순서대로 수행 *️⃣ 프로세스 : 실행되고 있는 컴퓨터 프로그램 *️⃣ 스레드 : 프로세스 내에서 실행되는 흐름의 단위, 스레드를 여러 개 생성 ➡️ 여러 작업 동시 처리 가능 *️⃣ 싱글 스레드..

함수와 일급 객체 ⭐ CONTENTS ✏️ 일급 객체란? 일급 객체로 무엇을 할 수 있을까? 함수형 프로그래밍이란? 순수함수란? 1️⃣ 일급 객체란? 아래의 조건을 만족하는 객체를 일급 객체라고 함 무명의 리터럴로 생성 가능 무명의 리터럴? ➡️ 함수 표현식을 뜻함 즉, 런타임에 생성 가능 const name = function(){} ➡️ 함수 표현식 & 변수에 할당될 때 생성됨 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 ⭐ 함수의 매개변수에 전달 가능 && 함수의 반환값으로 사용 가능 ​ ➡️ 함수형 프로그래밍을 가능하게 하는 자바스크립트의 장점 중 하나 ⭐ 자바스크립트의 함수는 일급객체❕ 2️⃣ 일급 객체로 무얼 할 수 있을까? 1️⃣ 고..

[JS] 원시 값과 객체 비교 ✏️ 1️⃣ 동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유는? 1️⃣ 동적 타이핑이란? 변수의 타입 지정 없이 값을 할당하면 값의 타입에 따라 자동으로 타입이 결정되는 것 int num = 3; JavaScript const num = 3; ex) Java 2️⃣ 원시타입 VS 객체타입 변경 가능 여부 원시타입 : 변경 불가능 const greeting = 'hi' ➡️ greeting[0] = 'j'; (❌) 객체타입 : 변경 가능 const dogs = { first = 'cream'; second = 'cookie'; } dogs.first = '크림'; (⭕) 변수에 할당 원시 타입 : 변수 할당 시 실제 값이 저장 const num..

[JS] 객체와 리터럴 ✏️ 1️⃣ 자바스크립트에서 객체란? 자바스크립트는 객체 기반 프로그래밍 언어 ➡️ 자바스크립트를 구성하는 거의 모든 것이 객체 ⭐ 원시 값을 제외한 나머지 값이 모두 객체 원시 값 더 이상 단순화할 수 없는 값 단 하나의 값을 나타냄 숫자, 문자, Boolean, null, undefined 객체 다양한 값을 하나의 단위로 구성한 복합적 자료구조 함수, 배열, 정규표현식 등 2️⃣ 함수와 메서드의 차이점 객체로부터 독립적 ➡️ 함수 종속적 ➡️ 메서드 함수는 그 자체로 기능을 하고, 메서드는 객체 내에 존재하는 함수를 의미 함수 ⊇ 메서드 3️⃣ 자바스크립트의 객체 생성 방법 1️⃣ 리터럴 표기 const 객체이름 = { 프로퍼티 명 : 프로퍼티 값 }; 2️⃣ 생성자 new 연..

HTML 수정 {% if user in article.like_users.all %} {% else %} {% endif %} {{ article.like_users.all|length }} 명이 이 글을 좋아합니다. Script form을 통해 넘겨주던 POST 요청을 axios를 이용해 넘겨주었다. addEventListener로 i태그의 하트를 클릭하면 POST 요청이 갈 수 있게 해주었고, 요청이 성공하면 좋아요 수, 하트 색상 등을 조정해주었다. View @require_POST def likes(request, article_pk): # CODE HERE if request.user.is_authenticated: article = get_object_or_404(Article, pk=arti..