목록JavaScript (21)
NOW OR NEVER
Javascript 역사를 통한 개념 정리 역사 1993년 : 컴퓨터가 집집마다 없었던 시절에 생긴 컴퓨터를 모르는 사람도 쓸 수 있는 UI요소가 더해진 Mosaic Web Browser가 시장에 나옴 1994년 Mosaic Web Browser를 만든 개발자 Mac Andreessen이 Netscape을 창립하면서 조금 더 UI요소가 더해진 Netscape Navigator을 시장에 내놓음, 시장에서 80%의 점유율을 자랑하면서 급격히 성장한다, Mac Andreessen은 좀 더 다이나믹한 사이트를 만들기 위한 scripting언어를 추가하고 싶어 했다. scheme을 만든 개발자 Brendan Eich를 데려와 자바의 요소와 scheme을 융합한 언어를 10일만에 새로 만들고자 했다. 프로토타입을 ..
JS 프로처럼 쓰는 팁 tenary-operator 삼항 연산자 조건 ? true일시 return 값 : false일시 return값; 사용하는 경우 조건이 두가지인 경우 불필요한 else if 문 사용 자제 바로 리턴하는 경우 nullish coalescing operator 함수안에서 변수 선언 = 함수 선언시 설정한 인자 값이 호출할 때 있는 경우 return 값 ?? 함수 선언시 설정한 인자 값이 호출할 때 없는 경우 return 값; left Expression ?? right Expression value만 넣을 수 있는 것이 아닌 코드를 넣어 실행한 값을 할당하게 할 수도 있다. ?? 기준으로 왼쪽코드가 null이거나 undefined인 경우에만 ?? 오른쪽에 이어지는 문장이 실행됨(defa..
자바를 배워야 하는지 프론트엔드 업무만 할거면 필요가 없다. 전혀 몰라도 문제될 것은 없다. stackoverflow 등을 이용해서 필요한 언어가 무엇인지 찾아보는 것이 좋음 백엔드에서 많이 사용하는 언어 jquery 잘 사용하진 않지만, 만약 배우고 싶으면 css와 javascript 기본만 알면 한두시간 안에 배울 수 있다. 2. 현업에서 자바를 쓸 일이 있는지 kotlin이 나온지 얼마 안되서 안드로이드 프로젝트들은 자바로 쓰여진 경우가 많다. node.js로 구현한 경우도 있다 하지만 프론트엔드 개발자의 경우 필요없다. 3. 자바와 자바스크립트 차이점 Java 자바 다용도의 목적을 가진 언어 객체 지향 class-based 언어 C언어와 같은 함수를 여러개 호출해서 차례대로 실행하는 함수 지향적 ..
Javascript 유용한 문법 단축 평가 논리 계산법(Short-circuit evaluation) 논리 연산자를 사용해서 코드를 더 짧게 쓰는 것을 의미 논리 연산자 사용 시 무조건 true 혹은 false 값을 사용하지 않아도 됨 리액트 사용하는 경우 이 문법을 사용해서 조건부 랜더링을 할 수 있다. falsy한 값들 : null, undefined, ‘ ‘, 0, NaN &&(AND 연산자) 주로 특정 값이 유효할 때만 어떤 값을 조회해야 되는 상황에 사용(ex)값이 객체일 수도 있지만 객체가 아닐 수도 있는 상황) &&의 왼쪽에 위치한 값이 true나 truthy한 값이면 오른 쪽에 위치하는 값이 연산 결과가 된다. && 왼쪽에 위치한 값이 false혹은 falsy한 값일시 연산 결과 값은 &&..
Javascript 입문 배열 한 변수 혹은 한 상수 안에 여러가지 정보를 담기 위함이었다면 배열은 여러 개의 항목들이 들어있는 리스트와 같다. 배열 생성 방법 배열을 만들 땐 [ ] 대괄호 사용하고 넣고 싶은 원소(아무거나 가능를 넣어준다. 배열 안 원소들은 ,로 구분 여러가지 종류를 나열해서 넣을 수 있는 것 자바스크립트의 배열은 배열 안에 있는 모든 원소들이 똑 같은 형태(숫자, 문자열, 객체, key: value 형태, 또다른 배열 등)일 필요 없다. 객체이름[n]: n번째 항목 조회 가능(0부터 시작, 즉 배열에서 첫번째 항목은 0번째) 객체의 정보 받아오기 key 값들을 배열 형태로 받아올 때 : Object.keys(객체이름) value 값들을 배열 형태로 받아올 때 : Object.valu..
Javascript 입문 자바스크립트는 무엇인가 브라우저에서 사용하려고 만든 언어 웹 브라우저 상에서 유저 인터페이스를 동적으로 표현하기 위해 사용 브라우저에서 사용하려고 만든 언어이지만 최근에는 다양한 영역(런타임(api 개발 ex. node), 데스크탑 애플리케이션, 모바일 애플리케이션(react, native 등))에서 사용되고 있다. react와 native 두 프레임워크의 특징은 단순히 웹 뷰를 모바일 앱에 띄워서 웹을 앱처럼 하는 것이 아닌 진짜 native ui를 자바스크립트로 할 수 있게 해줌 node.js를 통해서 자바스크립트를 사용할 수 있기 때문에 iot도 가능 개발자 도구에서 console에서 자바스크립트를 써볼 수 있다. 가장 기본적인 문법은 consol.log이다. 이것은 특정 ..
Javascript 나의 책 관리하기 프로젝트 만들기 구성 로그인 페이지 2. 리스트 페이지 3. add 화면 3. detail 화면 4. edit 화면 API 사용방법 axios 라이브러리 사용 http 프로토콜을 사용해서 데이터를 요청하고 가져올 수 있는 라이브러리 res 데이터를 활용해서 우리의 view에 표현하게 됨 Promise 활용 axios.post(‘주소’ , { body, }).then(res => { } ); 프로미스 상태로 지원됨(axios.post도 프로미스여서 then을 통해서 서버로부터 데이터를 정상적으로 가져오게 되면 resolve 돼서 res라고 하는 데이터가 우리에게 넘어오게 됨) async-await 활용 const res = await axios.post(‘주소’, { ..
Javascript Promise 프로미스 자바스크립트에서 비동기를 처리하기 위해서 가장 기본이 되는 개념 async와 await를 배우기 위해 알아야하는 개념 프로그램에서 간단한 코드가 순차적으로 한 줄 한 줄 실행된다면 어렵지 않다. 하지만 자바스크립트에서 함수를 호출했는데 그함수가 시작되고 끝나는 동안에도 프로그램은 계속 진행되어야 할 때가 많다. 이럴 때 Promise를 사용하면 비동기적 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. Promise 개체 혹은 Promise 객체로 불림 ES6부터 자바스크립트의 표준 내장 객체로 추가됨 ES6를 지원하는 브라우저나 Node.js에서 전역에 있는 Promise 확인 가능 프로미스 객체 생성 방법 - 1. 생성자(new Promis..
JavaScript 자료형(Data type) 동적 타이핑 Dynamic typing 변수에 어떠한 데이터를 할당하느냐에 따라 그 변수의 type이 결정된다. 값에 따라서 변수의 type이 달라지는 것이 동적 타이핑이라고 한다. 자바스크립트는 변수가 가지는 고정 타입이 없다. 하지만 타입 자체가 없는 것은 아니다 console.log(변수, typeof 변수) : 변수에 할당된 값과 변수의 데이터 타입 확인 ES6 기준 제공하는 데이터 타입 기본 타입(Primitive values) 기본 자료형을 가지고 객체를 만들어 내는 것이 중요하다. Boolean - 표준 내장 객체로도 사용 가능 new Boolean(true 혹은 false); 생성자 함수를 통해 초기값으로 true 혹은 false를 지정한 객체..
JavaScript 자바스크립트는 무엇인가 자바스크립트는 프로그래밍 언어 스크립트 언어(어떤 어플리케이션에서 그 코드를 해석하고 실행할 수 있는 엔진이 존재해서 그 애플리케이션을 제어하는 용도로 사용되는 언어) 자바와는 관련이 없다 인터프리터 언어(엔진이 소스코드를 한 줄씩 읽으면서 바로 바로 해석하고 실행) 자바스크립트를 해석하고 실행하는 스크립트 엔진을 가지고 있는 대표적인 애플리케이션은 웹브라우저이다. 자바스크립트가 널리 사용되는 이유도 웹브라우저에서 사용되기 때문이다. 웹브라우저가 웹페이지를 html, css, js를 통해 실행하는데 html은 웹페이지의 구조와 컨텐츠를 표현하고 css는 그모습을 예쁘게 만들어준다. js는 동적으로 콘텐츠를 바꾸고 ui를 이동시키는 여러가지 일을 해낼 수 있다. ..