본문 바로가기

프로그래밍 언어 & 데이터베이스/JavaScript25

코드잇 학습일기 day3. JSON 데이터 자바스크립트 객체 변환, Request와 메소드 종류 한 주의 시작은 코드잇으로~ 원래 하루에 강의 한개씩은 꼬박꼬박 듣고 있었기 때문에, 습관적인 면에서는 어렵지 않지만... 하루에 다섯개 강의를 들어야 하는 것은 조금 부담이다. 그래도 일주일에 두 번 정도라면, 업무가 바쁘지 않은 날이나 점심시간을 이용해서 들을 만 하다. JSON 데이터 자바스크립트 객체로 변환하기 어떤 변수의 데이터 타입을 확인할 때에는 typeof 연산자를 사용하면 된다. 위와 같이 typeof 연산자를 사용하면 JSON 데이터가 string 타입이라는 것을 알 수 있다. 그런데 데이터가 string 타입이라면 작업하는 것이 쉽지 않다. 다행히도 string 타입의 JSON 데이터는 그대로 자바스크립트 객체로 변환할 수 있다. 위와 같은 JSON 데이터에 parse 라는 메소드를 .. 2023. 2. 6.
코드잇 학습일기 day2. 웹환경 이해하기 - web, URL, https 오늘 학습일기는 자바 스크립트와 관련된 내용은 아니긴 하지만... 그래도 자바스크립트 웹기초 커리큘럼에 있는 내용이기도 하고, 학습일기가 자연스럽게 이어지는 것이 좋을 듯 하여, JavaScript 카테고리에 포스팅을 하도록 하겠다. 오늘도 어김없이 코드잇 공부~ 출근길을 이용해서 빠르게 강의 5개를 들었다. 코드잇 강의는 길지 않아서 출퇴근길, 점심시간 등 여유시간이 생겼을 때에 부담없이 들을 수 있다. 웹(WEB)은 무엇인가? 웹은 World Wide Web의 약자로, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말한다. 하이퍼 텍스트 형식으로 표현된 인터넷의 다양한 정보를 효과적으로 검색할 수 있는 시스템이며, 전 세계적으로 가장 널리 보급되어 있다. URL은 무엇인가? U.. 2023. 2. 2.
코드잇 학습일기 Day1. 개발자 도구, 자바스크립트 fetch 함수 코딩 강의 사이트인 코드잇에서 "오늘도 코드잇 학습일기 챌린지" 이벤트를 진행하고 있다. 평소에 코드잇을 애용하며 1일 1강의를 듣는 나에게는 넘나 참여하기 쉬운 이벤트~ https://blog.codeit.kr/post/63d1de818120e3265cbbfb52 코드잇 :: 오늘도 코드잇 학습일기 챌린지 2023년도 어느덧 1달이 벌써 다 지나갔네요. 새해 목표였던 코딩 공부는 모두 잘하고 계신가요? 여러분이 코드잇과 함께 꾸준히 공부하며 코딩 습관 만들고 원하는 목표 모두 이루기를 응원하는 blog.codeit.kr 그래서 2월부터 공부하려고 계획하고 있던 '자바스크립트 웹 개발 기본기' 강의로 학습일기를 써보려고 한다. 브라우저 개발자 도구에서 자바스크립트 코드 실행하기 크롬 브라우저에서 개발자 .. 2023. 1. 31.
자바스크립트 숫자형 사칙연산 자바스크립트 숫자형 사칙연산을 해 보았다. 얼마 전 파이썬 사칙연산 강의를 들었는데 명령어를 제외하고는 거의 다 겹치는 부분이라서 부담 없이 진행할 수 있었다. 우리가 아는 덧셈, 뺄셈, 나눗셈 등 연산기호가 동일해서 거창하게 설명할 것도 없다. 굳이 덧붙여 보자면 퍼센트 기호(%)를 사용해서 a % b라고 쓰면 a에서 b를 나눈 나머지값, 별표(*) 기호를 두번 쓰면 거듭제곱의 의미라는 것 정도일 듯 하다. 여러가지 연산 기호가 동시에 사용되었다면 곱셈과 나눗셈 먼저, 괄호가 있다면 괄호 먼저 계산하는 사칙연산의 기본 규칙도 그대로 따른다. 더 쉽고 빠른 이해를 위해 아래에 예제를 첨부한다. console.log(1 + 8); // 덧셈, 결과값 9 console.log(5 / 2); // 나눗셈, 결.. 2021. 8. 13.
자바스크립트 함수 선언과 호출 변수가 값을 저장하는 기능을 한다면, 함수는 명령을 저장하는 기능을 한다고 생각하면 된다. 파이썬에서 함수를 선언할 때는 def를 사용했는데 자바스크립트에서는 function을 사용한다. (앍 헷갈려...) 자바스크립트 함수를 선언하고 호출하는 방법에 대해서 정리하도록 하겠다. 함수 선언 함수 선언의 구조는 아래와 같다. function 함수명() { 명령; 명령; }; function 뒤에 원하는 함수명을 입력한 뒤에 소괄호, 중괄호를 순서대로 써주면 된다. 중괄호 안에는 명령어들을 입력하는데 보통 한 줄에 명령 한 개를 입력한다. // 함수 선언 function hello() { console.log('Hello, world!'); console.log('Nice to meet you.'); }; 함.. 2021. 7. 16.
자바스크립트 좋은 변수명 짓기 & 스타일 가이드 자바스크립트 코드를 쓰고 변수명을 지을 때에 도움이 될 만한 몇가지 팁을 공유하려고 한다. - 자바스크립트 식별자는 알파벳 대소문자, 밑줄(_), 달러기호($), 숫자를 사용한다. - 식별자는 알파벳 대소문자를 구별하며, 첫글자로 숫자는 사용할 수 없다. - 예약어(let, if, for 등)는 변수명으로 사용할 수 없다. - 의미없는 변수명(a, b, c 등)은 되도록 사용하지 않도록 한다. - 변수 이름은 첫번째 글자는 소문자, 띄어쓰기가 있는 각 단어의 첫 문자는 대문자로 표기(camelCase)한다. - 코드 들여쓰기는 2칸 공백을 사용한다. 다른 건 다 그렇다치고 파이썬 기초 강의를 듣고 나니 변수 표기법과 들여쓰기가 파이썬과 달라서 혼란스러워 하는 중이다. 코드 들여쓰기의 경우 파이썬은 4칸 .. 2021. 7. 14.
자바스크립트 변수 var, let, const 차이 자바스크립트 강의를 들으면서 궁금했던 점이 한가지 있었다. 나는 분명히 예전에 변수 선언을 var로 배웠는데 강의에서는 let을 사용한다는 거였다. 그래서 검색해보니 변수 선언에는 var, let, const 세가지를 사용할 수 있으며, 각각 차이점이 있었다. 이 포스팅에서는 그 차이점에 대해서 정리해두려고 한다. var 예전에는 자바스크립트의 변수 선언이 var로만 가능했었다. var로 변수 선언을 했을 때의 가장 큰 특징은 중복 선언이 가능하다는 점인 것 같다. var a = 100; console.log(a) // 결과값 100 var a = 200; console.log(a) // 결과값 200 var a = 300; console.log(a) // 결과값 300 var를 사용하면 위와 같이 중복.. 2021. 7. 14.
자바스크립트 변수 선언하기 자바스크립트에서도 반복되는 데이터들을 변수 선언해서 좀 더 편리하게 관리할 수 있다. 변수 선언하는 방법에 대해서 소개하려고 한다. 과일가게에서 사과는 1,000원 / 망고는 1,500원 / 멜론은 2,500원에 판매하고 있다. 사과 2개, 망고 1개, 멜론 1개를 구입했을 때 아래와 같이 총 금액을 구할 수 있다. console.log(1000 * 2 + 1500 + 2500) 이러한 경우 총 금액을 구할 수는 있지만, 나중에 과일 종류가 많아지게 되면 금액을 일일이 찾아서 입력해야하는 번거로움이 있고, 또 오탈자가 발생하거나 금액을 착각했을 때 전부 찾아서 수정해주는 것이 어렵다. 이럴 때에 변수를 선언하여 과일 금액과 총 금액을 조금 더 편리하게 관리할 수 있다. // 변수 선언 let appleP.. 2021. 7. 13.
자바스크립트 자료형 타입(Java Script - Data type) 파이썬 기초 강의를 다 듣고 나서 중급 강의를 듣기 전, 자바 스크립트 기초 강의를 먼저 듣기로 했다. 아직 5~6강 밖에 듣지 않았지만 목차를 보니 데이터 타입, 조건문 등 파이썬 강의에서 다루었던 내용과 유사한 것이 많을 것 같다는 느낌적 느낌(!)이 들었다. 겹치는 부분이 있더라도 복습을 한다는 마음으로 열심히 듣고, 정리가 필요하다고 생각되는 부분들은 블로그에 기록해 두려고 한다. 자바스크립트 자료형 타입(Data type) 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에 공통적으로 적용되는 개념이니 꼭 이해하고 넘어가는 것이 좋을 것 같다. 숫자(Number) 정수(Interger) 타입과 소수(Floating point) 타입으로 다시 나눌 수 있다. 정수 타입은 음의 정수, 0, 양의 정수를.. 2021. 7. 12.
마우스 우클릭 & 드래그 방지 외주로 웹사이트 작업을 하게 되었는데 클라이언트 측에서 마우스 우클릭 & 드래그 방지 기능을 요청했다. 그래서 홈페이지 내에 마우스 우클릭과 드래그를 막는 코드를 적용했는데, 왠지 나중에 또 필요한 곳이 있을 듯 하여 블로그에 기록해두려고 한다. 웹사이트 마우스 우클릭 방지 / 드래그 방지를 하려면 2단계의 과정을 거쳐야 한다. 순서대로 따라하면 어렵지 않을 것이다. 첫번째로 사이에 script 코드를 넣는다. 두번째로 아래에 html 코드를 넣는다. 위의 두가지 코드를 삽입한 후 저장을 하면, 웹사이트 내에서 마우스 우클릭이나 드래그를 시도해도 아무런 반응이 없는 것을 확인할 수 있을 것이다. 각 코드의 의미도 함께 알아두도록 하자. oncontextmenu = "return false" : 우클릭 방.. 2021. 5. 29.