오늘의 개발

[JavaScript] 자바스크립트의 데이터 타입(Data type)

데이터 타입이란? 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 변수에 대해 연산을 수행하려면 타입에 대해 아는 것이 중요하다. 데이터 타입 숫자(number) 정수(-1, 0, 1), 실수(소수점이 있는 숫자), NaN(Not a Number, 숫자가 아님이라는 값) 자바스크립트는 다른 언어와 다르게 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다. let num1 = 100; // 소수점을 사용하지 않은 표현 let num2 = 100.00 // 소수점을 사용한 표현 // 둘 다 값은 100 이다 문자열(string) 문자열은 작은따옴표(''), 큰따옴표(""), 백 틱(``)으로 둘러싸인 문자의 집합을 의미한다. let str1 = '작은따옴포'..

[JavaScript] 자바스크립트의 변수(Variable)

변수란? 변수(Variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있다. 변수의 선언과 초기화 변수를 선언(배정, 할당, 정의)할 때 var, let 키워드 사용 ES6(2015)부터는 let 사용 권장 CamelCase - 자바, C, C++, C#에서 주로 사용 snake_case - 자바스크립트, 파이썬에서 주로 사용(권장 방식) // 변수의 선언 let myFirstVariable; let my_first_variable; // 변수명만 선언, 값 X -> 변수를 메모리에 할당 // 변수의 초기화 myFirstVariable = 100; my_first_variable = "thousand"; // 변수의 선언 및 초기화 let mySecondVar..

[JavaScript] JavaScript란?

JavaScript란? JavaScript (객체 기반의 스크립트 언어) HTML로 뼈대를 만들고 CSS로 디자인을 했다면, 자바스크립트로 웹의 동작을 구현한다. JavaScript의 특징 서버가 아닌 브라우저가 해석한다. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. JavaScript 문법 var x = 10; var result = x + 3; 실행문(statement)은 세미콜론(;)으로 구분된다. 대소문자를 구분하기 때문에 변수나 함수의 이름, 예약어 등을 작성할 때 정확히 구분해서 사용해야 한다. 식별자(identifier) 식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다. 영문자(대소문자), 숫..

[TIL] JS 자바스크립트 시작

✍ Today I Learned 자바와 자바스크립트는 전혀 다른 언어이다. 자바스크립트는 프론트 영역의 프로그래밍 언어이다. 서버가 아닌 브라우저가 해석 html과 css의 아키텍쳐를 다 품고 있음 프로그래밍을 왜 하는 걸까? 선택을 효율적으로 하기 위해서 컴퓨터의 주요 5대 장치는? 입력, 출력, 연산, 제어, 기억 백 틱(`)을 사용하면 ${}을 이용하여 내부에 코드를 삽입할 수 있다. 변수를 선언할 때 ES6(2015)부터는 let 사용을 권장한다. CamelCase → 자바, C, C++, C#에서 주로 사용 snake_case → 자바스크립트, 파이썬에서 주로 사용(권장 방식) 자바스크립트에서 선언 없이 변수를 할당하면 그 변수는 전역에 영향을 미치므로 가급적 사용 X (권장 방식은 아님) 변수..

[TIL] 포트폴리오 페이지 제작, 깃헙, 부트스트랩

✍ Today I Learned 오늘은 포트폴리오 웹 페이지 사이트를 제작했다 작성하다 보니 어떻게 만드는가 보다 내가 얼마나 열심히 해야 하는가를 깨닫는 중 처음부터 완벽하려는 욕심에 시간이 많이 걸렸다.. 일단 완성하는 게 목표! Git 이란? 소스코드 버전 관리 시스템 버전 관리란? 수정한 각 파일이 충돌하지 않도록 수정된 사항이 있을 때마다 사진 찍듯이 저장해주는 것 원격 repo와 로컬 repo를 연결하려면? 로컬 repo에서 원격 repo로 tracking 하고, 원격 repo commit 내역을 pull 해온다 또는 원격 repo를 clone해온다 (주로 원격 repo에 어떤 내용이 있을 때 사용) 내 파일을 원격 repo, 그러니까 Github에 만들어 놓은 repo에 올리려면? 파일 생성..

[TIL] CSS flex, table, 부트스트랩

✍ Today I Learned display: flex; display: table; 을 이용하면 중앙 정렬을 간단하게 할 수 있다. .flex-container { display: flex; justify-content: center; align-items: center; } .boxwrap { display: table; } .boxwrap .box { display: table-cell; table-layout: fixed; vertical-align: middle; text-align: center; } 쇼핑몰 페이지가 PC와 모바일 서버를 따로 두는 이유 트래픽 분산을 위해 기획적인 부분(노출되는 품목이 다름) 부트스트랩을 사용하는 2가지 방법 다운 받아서 사용 장점 - 내가 사용하는 버전으로..

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자! 수직정렬에는 3가지 방법이 있다. padding 속성 사용 line-height 속성 사용 position 속성과 transform 속성 사용 전체적으로 사용할 예제 제목 내용 부모 를 간단하게 컨테이너라고 지칭하겠다. 1. padding 속성 사용 .padding { width: 400px; background-color: orange; padding: 100px 0; } padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정) 장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다. 단점 - 내가 설정한 ..

[CSS] background-size, origin, clip

background의 다양한 속성 중 다음 3가지에 대해 알아보자! background-size background-origin background-size background-size 배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다. 속성값 설명 contain 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. cover 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. (↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓) 2022.03.25 - ..