Youbiiin's Blog

Study/JavaScript

동적 타입 언어 자바스크립트는 같은 변수에 숫자나 문자열과 같은 다양한 타입 데이터를 대입할 수 있다. 데이터 타입을 명시적으로 지정하지 않고 실행 시킬 때마다(런타임) 변수에 저장 된 데이터 타입을 동적으로 바꿀 수 있는 언어를 동적 타입 언어라고 한다. 테이터 타입의 분류 기본 타입(원시타입) 숫자(number) 문자열(string) 불리언(boolean) undefined null 심볼(symbol) 참조 타입(객체 타입) 객체 배열 함수 정규 표현식 *배열, 함수, 정규표현식도 모두 객체이다. 기본 타입(원시타입)의 데이터 숫자(number) 64비트 부동소수점 형식으로, 모든 숫자를 실수로 처리한다. const num1 = 10; // 정수 const num2 = 3.14; // 실수 const..

2022. 1. 12.

Study/JavaScript

변수 var a = 1; 위와같이 변수는 저장된 값을 식별할 수 있는 이름이다. 위의 코드에서 a는 ‘변수 이름’이다. 변수 이름을 ‘식별자(identifier)’라고도 한다. 변수의 값을 저장하는 행위를 ‘할당(assignment)’이라고 하고, 그 값을 읽어오는 것을 ‘참조(reference)’라고 한다. 단, 주의 할 점은 식별자는 값이 아닌 메모리의 주소를 기억하고 있다. 변수 선언 변수를 사용하기 위해서는 반드시 선언이 필요하다. 변수는 var, let, const로 선언할 수 있다. 어떤 것으로 선언하느냐에 따라 변수의 유효범위가 달라진다. var는 전역범위, 함수범위이며, let과 const는 블록범위이다. var (재선언o, 재할당o) 업데이트하고 다시 선언 할 수 있다. let (재선언x..

2022. 1. 12.

Study/JavaScript

Prototype 자바스크립트에는 클래스라는 개념이 없다. 대신 프로토타입 이라는 것이 존재하는데, 이것이 자바스크립트가 프로토타입 기반 언어라고 불리는 이유다. 클래스가 없으니 상속기능도 없다. 그래서 프로토타입을 기반으로 상속을 구현해서 사용하기도 한다. 최근 ECMA6에서 Class 문법이 추가되긴 했지만, 이것이 자바스크립트가 클래스 기반으로 바뀐것은 아니다. function Person() {} Person.prototype.eyes = 2; Persion.prototype.nose = 1; var kim = new Person(); var park = new Person(); console.log(kim.eyes); // 2 Persion.prototype이라는 빈 Object가 어딘가에 존재..

2022. 1. 12.

Study/JavaScript

자바스크립트는 웹 브라우저에서 동작하는 프로그래밍 언어다. 프로그래밍 언어의 정의 프로그래밍 언어란 컴퓨터 프로그램을 작성하기 위한 언어이다. 프로그래밍 : 프로그래밍 언어로 프로그램을 개발하는 행위 소스 코드 : 프로그래밍 언어로 작성한 프로그램 컴파일 언어 컴파일 : 소스코드를 실행하기 전 기계어로 번역하는 행위 컴파일러 : 컴파일을 수행하는 소프트웨어 대표적으로 C, C++ Java,,,등등 장점 : 속도가 빠르다. 단점 : 컴파일 하는데 시간이 오래 걸린다. 인터프리터 언어 프로그램을 한 줄마다 기계어로 번역해서 실행하는 프로그래밍 언어. 인터프리터 : 프로그램을 번역해서 실행시키는 소프트웨어 Javascript가 인터프리터 언어에 해당한다. 장점 : 프로그램 동작을 확인해가면서 프로그램을 개발할..

2022. 1. 12.

카테고리 없음

위와 같이 마크업에 넣는 @input이벤트는 자바스크립트 태그 안에 들어간 아래 함수와 같은 방식이다. 위와 같이 사용하면 아래 자바스크립트에 반복해서 쓰지 않고, 충돌도 생기지 않고 사용이 편하다.

2021. 11. 10.

카테고리 없음

Vuex란? Vue.js프레임 워크에 사용할 수 있는 상태관리 패턴이다. Vuex를 사용했을 때 장점은 첫번째, 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 한다. 두번째, 어플리케이션의 상태에 대해 예측이 가능해진다. Vuex의 데이터 흐름은 아래와 같다. Vuex에서 상태관리를 위한 요소는 4가지가 있다. 상태(State) - 공통으로 사용할 변수를 정의한다. - 컴포넌트 간 동일한 Data를 사용할 수 있다. 변이(Mutations) - State의 동기적 변이를 담당, Vuex저장소에서 State를 변경할수 있는 유일한 방법이다. - 일반적으로 직접호출할 수 없으며, Action에서 commit('함수명', '전달인자')으로 통해서만 실행할 수 있다. 액션(Actions) ..

2021. 7. 1.

카테고리 없음

로컬에서작업시 header나 meta태그 같은 공통적인 부분은 include하여 사용하였다. 근데 include를 php로 작업할 시 로컬에서는 확인하기가 힘들었다. 그래서 직접 웹서버 IIS를 셋팅해보기로 하였다! 1. 제어판 > 프로그램제거 > windows 기능 켜기/끄기 2. windows 기능에서 인터넷 정보 서비스 항목을 활성화 시킨 뒤 > 확인 3. 컴퓨터 관리 > 서비스 및 응용 프로그램 > IIS(인터넷 정보 서비스) > Default web site > 디렉터리 검색 > 고급설정 4. 실제 경로 수정 (프로젝트 폴더가 있는 경로로 수정) > 확인 5. *.80(http) 찾아보기 클릭 6. 클릭 후 나오는 화면에서 원하는 페이지로 이동하면 된다. PHP 설치 및 사용 1. 제어판 > 프..

2021. 6. 15.

Study/Vue

회사 프로젝트를 CDN 방식으로 하여 Vue를 사용하였는데, CDN으로 사용 시 v-if에 대한 이슈가 있었다. 페이지 처음 접속시 로딩?때문에 v-if가 제대로 동작하지 않아서 팝업이 잠깐 노출됐다가 사라지는 것이다. 해결방법 css로 modal에 display: none 상태를 default로 만들어 준 뒤 madal에 class를 bind해주었다. 근데 이렇게 했더니 transition이 안먹어서 v-bind와 v-if를 함께 사용하여서 해결해주었다! css .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; justify-content: center; align-items: center; background:..

2021. 5. 31.