Tiny Star

🖥️FrontEnd/🟡JavaScript 9

[JavaScript] ajax 파헤치기

백엔드 개발자를 꿈꾸며 취뽀에 성공했지만 어쩌다보니 풀스택의 길을 걷고 있는 청크씨. 찍먹 js의 지식으로 현업에서 살아남기란 여간 쉬운게 아니다. 그 중 온 몸으로 js의 풍파를 가장 많이 겪은 ajax를 내가 이해하기 쉽게 파헤쳐놓으려고 한다.(왜 다들 어려운 용어로 설명해놓는지 모르겠다. 한글로 써있는데 뭔말인지 몰라서 내가 보려고 만드는 것...) 언젠가 내가 10년차 개발팀장(?)이 되었을 때 나같은 꼬마 개발감자 후임이 온다면 내 블로그를 당당히 던져줄 수 있도록 쉽게쉽게 가보자- 2024년 4월 16일 취뽀 2개월차 개발감자 청크가 10년 뒤 개발팀장 청크에게-AjaxAsynchronous JavaScript and XML의 약자로 자바스크립트와 XML을 이용한 비동기적 통신방법이다.프론트와..

[JavaScript] 함수의 선언 및 호출

프로그래밍에서 함수는 정해진 일을 하는 것으로 이해할 수 있다. 단순히 동작 하나만 실행되는 게 아닌, 여러 동작이 연결되어야 하나의 프로그램이 되는데 이렇게 동작해야 할 목적대로 묶은 명령을 함수(function)이라고 한다. 함수는 자바스크립트에 들어 있는 함수 또는 필요한 명령에 맞춰 직접 만든 함수를 사용할 수 있다. 함수는 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 호출하여 실행할 수 있고, 각 명령의 시작과 끝을 명확하게 구별할 수 있는 장점이 있기 때문에 잘 사용한다면 굉장히 편리한 기능이다. 함수 선언 및 호출 함수 선언이란 함수가 어떤 명령을 처리할지 미리 알려주는 것을 의미한다. //함수 선언 function 함수명() { 명령 } 함수 호출은 함수를 선언한 후 실행 할 ..

[JavaScript] 반복문

반복문은 어떠한 동작을 여러 번 실행해야 할 때 사용한다. 만약 1부터 100까지의 숫자를 더해야 한다면 명령을 100줄 작성해야 하지만, 반복문을 사용하면 간단명료하게 코드를 작성할 수 있다. for문 for문가장 많이 사용되는 반복문으로, 값이 일정하게 커지면서 명령을 반복하여 실행할 때 사용한다. //for문 기본형 for(초깃값; 조건; 증가식) { 실행 할 명령 } for문은 초깃값->조건->명령->증가식의 순서로 실행되고, 초깃값은 카운터 변수를 초기화하는 것으로 0이나 1부터 시작한다. 조건은 명령을 반복하기 위한 조건을 체크하는 것으로, 이 조건을 만족해야만 그다음에 오는 명령을 실행한다. 증가식은 명령을 반복한 후 실행되는데, 보통 카운터 변수를 1 증가시키는 용도로 사용한다. //for..

[JavaScript] 조건문

조건문은 프로그래밍을 할 때 특정 조건과 명령에 따라 실행 순서를 정할 때 사용하며, 가장 많이 사용되는 구문이다. if 문 //if문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } if문은 어떠한 조건을 체크하여 결괏값이 true면 if문 다음에 나오는 조건값을 실행하고, false라면 아무 실행도 하지 않는다. 만약 조건을 만족했을 경우 실행할 명령이 여러 개라면 중괄호({ })로 묶고, 그 안에 명령을 나열하여 순서대로 한꺼번에 처리하라고 표시할 수 있다. 중괄호로 묶은 영역은 코드블록이라고 한다. if-else 문 //if-else문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } else { 조건이 flase일 때 실행 할 명령 } if-else문은 조건의 결괏..

[JavaScript] 연산자

연산자(operator)란? 프로그래밍에서 '연산'은 새로운 문자열을 만들거나 값의 크기를 비교하는 등의 여러 가지 동작을 의미한다. 이런 연산의 특정한 동작을 지시하는 기호가 연산자다. 산술 연산자 산술 연산자는 수학 계산을 할 때 사용하는 연산자로 우리에게 익숙하다. 연산자의 왼쪽 또는 오른쪽에 있는 연산 대상을 '피연산자'라고 하며, 피연산자는 숫자 또는 변수를 작성한다. 산술 연산자의 종류 + : 두 피연산자의 값을 더함 (c = a + b) - : 첫 번째 피연산자 값에서 두번째 피연산자의 값을 뺌 (c = a - b) * : 두 피연산자의 값을 곱함 (c = a * b) / : 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔 (c = a / b) % : 첫 번째 피연산자 값을 두 번째 피..

[JavaScript] 자료형 이해하기

자료형이란? 프로그램에서 처리할 데이터의 형태를 말한다. 예를 들어 '10'을 숫자로 처리할지 문자로 처리할지에 따라 프로그램의 결과는 달라진다. 자바스크립트의 자료형 기본유형, 복합유형, 특수유형으로 나누어진다. 기본유형 ① 숫자형(number) : 따옴표 없이 숫자로만 표기 //예시 var age = 20; 숫자형은 정수와 실수로 한번 더 구분이 된다.정수 : 소수점이 없는 숫자실수 : 소수점이 있는 숫자 정수는 표현 방법에 따라 10진수, 8진수, 16진수 세 가지 유형으로 나누기도 한다.8진수와 16진수는 이해가 조금 어렵지만 반드시 알아두어야 하는 개념이다. 10진수 : 0~9로 표현할 수 있는 숫자 예시) 2000, 17 8진수 : 0~7로 표현할 수 있는 숫자 예시) 012, 013, 020..

[JavaScript] 변수

변수란? 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터로 어떠한 상자 안에 값을 담는 개념으로 이해할 수 있다. 변수의 선언 변수의 선언이란 변수를 구별할 수 있도록 각각 이름을 붙여주는데, 이를 '변수 선언'이라고 하며 대입 연산자(=)를 이용해 변수에 초기 값을 대입하는 것을 초기값 할당이라고 한다. Javascript는 다양한 변수 선언 방법이 있다. ① var : ES6 이전 자바스크립트에서 사용되던 변수 선언 예약어로, 재선언과 재할당이 가능하며 변수를 선언 한 후 초기화를 할 수도 있고, 변수 선언과 함께 초기화를 할 수도 있다. (스코프 : 함수영역) //var 변수 선언 후 초기화 var name; name = 'A'; //vat 변수 선언 시 초기화 var name = '..

[JavaScript] 자바스크립트의 기본 언어

Javascript의 기본은 식과 문이다. 식은 표현식, 연산식 또는 실제 값과 함수를 실행하는 모든 것을 포함한다. 즉, 어떤 값을 만들어 낼 수 있다면 모두 식이되고 식은 변수에 저장된다. 문은 명령문을 의미한다. 문의 끝에는 세미콜론(;)을 붙여 구분하며 '조건문'과'제어문' 등이 있다. Javascript 간단한 입출력 명령 ① 알림 창 출력하기 : 단순하게 메시지를 보여주는 간단한 대화상자 => alert("메시지") ② 확인 창 출력하기 : 사용자가 확인 또는 취소 버튼을 클릭 할 수 있음 => confirm("메시지); ③ 프롬프트 창에서 입력받기 : 텍스트 필드가 있는 작은 창 => prompt("메시지") or prompt("메시지",기본값); : 기본값을 입력 할 경우 빈칸에는 기본값이..

[JavaScript] 자바스크립트 시작하기

Javascript는 객체(object) 기반의 스크립트 언어로, HTML/CSS와 함께 사용하여 웹 사이트 UI부분에 활용된다. 쉽게 풀어 이야기 하면 HTML로 웹 페이지의 내용, 즉 뼈대를 세우고 CSS로 웹을 디자인하고, Javascript로는 웹의 동작을 구현한다. Javascript만으로도 웹 애플리케이션을 제작하거나 다양한 라이브러리 사용이 가능하다. -> 웹 애플리케이션 제작 시 사용하는 리액트, 앵귤러, 뷰 같은 프레임워크나 제이쿼리 등 Javascript를 작성하기 전 기본적인 코딩 규칙이 몇 가지 있다. 1. 소스 한 줄에 한 문장만 작성하고 코드를 보기 좋게 들여 쓰고 세미콜론(;)으로 문장을 구분한다. -> 문장을 구분하면 디버깅이 쉬워진다. 2. 공백을 넣어 읽기 쉽게 작성한다...