프론트엔드
-
[React] create-react-app (CRA) 에러 해결 : no longer support global installation of Create React App.프론트엔드 2021. 12. 27. 02:21
프로젝트 폴더에서 npx create-react-app . 명령을 실행해서 리액트 어플리케이션을 초기화하려고 했는데 다음과 같은 에러가 발생했다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app 1. 일단 에러메세지에 나온 대로 npm u..
-
JavaScript 30 Challenge - 자바스크립트 프로젝트 만들기프론트엔드 2020. 5. 1. 13:24
https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 라이브러리나 프레임워크 사용 없이 모던자바스크립트만으로 하루에 하나씩 30일 동안 30가지 미니 프로젝트를 만들어보는 챌린지입니다 이메일만 등록하면 무료로 참여할 수 있고 동영상 튜토리얼 30개와 스타터파일이 제공돼요 동영상은 영어지만 (영어)자막이 있어서 이해하기가 아주 어렵지는 않아요 개발을 잘하려면 프로젝트를 경험을 많이 쌓는 게 중요하다고 하는데 프로젝트 아이디어를 직접 떠올리고 무에서 유를 창조해내는(?) 게 부담스러운 분들은 이렇게 주제와 디자인이 정해진(+튜토리얼까지 제공되는) 미니 ..
-
자바스크립트 객체 - Do It 자바스크립트 기본편프론트엔드 2020. 1. 4. 22:29
객체(Object) 자바스크립트에서 데이터를 저장하고 처리하는 기본 단위. (자바스크립트는 객체 기반 언어) 하나의 변수에 여러 데이터를 담기 위해 사용하는 데이터타입. 자바스크립트 프로그램에서 인식할 수 있는 모든 대상을 가리킴. (ex- 웹 브라우저나 웹 문서와 관련된 것들) 객체의 종류 in Javascript 내장 객체(Built-in Object) : Number, Boolean, Array, Math, Date객체 등 문서 객체 모델(DOM) : 객체를 사용해 웹 문서를 관리하는 방식. 웹 문서뿐만 아니라 웹 문서에 포함된 모든 요소들(이미지, 링크, 텍스트필드 등)도 각각 별도의 객체로 미리 만들어 놓고 관리. ex) Document객체, Image객체 등 브라우저 객체 모델(BOM) : 웹..
-
자바스크립트 함수, 스코프, 이벤트 - Do It 자바스크립트 기본편프론트엔드 2019. 12. 31. 23:36
함수 : 처리해야할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것(특정 기능을 수행하는 소스 코드를 따로 묶어놓은 덩어리) → 재사용성, 가독성, 선언(정의)과 실행의 분리 ex) 자바스크립트의 내장함수 alert() : 함수 내부와 작동과정을 몰라도 함수의 기능을 사용할 수 있음. 함수의 선언과 실행 순서 웹 브라우저에서 자바스크립트 소스를 해석할 때, 함수가 선언된 부분을 가장 먼저 해석한다. 함수 선언 위치는 프로그램 흐름에 영향을 주지 않기 때문에 원하는 위치에 선언하면 된다. (주로 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 소스를 모아 놓음.) [ES6] 함수의 매개변수 기본 값 지정하기 function multiple(a, b=5, c=10) { return a*b + c; } 자바스크..
-
자바스크립트 제어문 - Do It 자바스크립트 기본편프론트엔드 2019. 12. 26. 07:00
제어문 : 조건에 따라 소스의 실행 순서를 바꾸거나 특정 부분을 반복하는 등 실행 흐름을 조절한다. If문, If…else문 1) if문 if문과 else문의 명령이 1줄인 경우 중괄호를 생략하기도 함. if(age ≥ 18) alert("성인입니다"); else alert("미성년입니다"); 2) 조건 연산자 조건이 하나이고 true/false일 때 실행할 명령도 하나뿐이라면 if…else문 대신 조건 연산자를 사용할 수 있음. (score ≥ 60) ? alert("통과") : alert("실패"); 3) truthy값과 falsy값 (true로 인정할 수 있는 값, false로 인정할 수 있는 값) falsy값 더보기 0 " "(빈 문자열) NaN(Not a Number, 숫자가 아님. 보통 변수를..
-
자바스크립트의 변수, 자료형, 연산자 - Do It 자바스크립트 기본편프론트엔드 2019. 12. 25. 07:00
자바스크립트가 데이터를 어떻게 저장하고 관리하는지, 처리하는지 알아보자. 변수 변수(Variable) : 변하는 값을 저장할 때 사용 상수(Constant) : 변하지 않는 값 변수 선언 규칙 변수의 의미를 잘 나타낼 수 있는 이름으로 짓는다(무의미한 이름x) 낙타 표기법(Cammel Case) 첫 글자는 문자나 밑줄(_), 달러($)로 시작해야 한다. (그 후에는 문자, 밑줄, 달러, 숫자 사용가능) ◆ [ES6] : 변수를 선언할 때 var 예약어 외에 let(블록 안에서만 사용), const(상수) 예약어도 사용 가능. 자료형(데이터 타입) 자바스크립트는 변수를 선언할 때 데이터타입을 지정하지 않고 값을 할당할 때 그 값에 따라 데이터 타입이 결정됨. → 느슨한 자료형 체크(Weak Data Typ..
-
자바스크립트 소스 작성하고 실행하기 - Do it 자바스크립트 기본편프론트엔드 2019. 12. 24. 07:00
HTML 문서 안에 자바스크립트 소스 작성하기 : 자바스크립트 프로그램의 실행 웹 브라우저에는 HTML 분석기(HTML parser), CSS 분석기(CSS parser), 자바스크립트 해석기(Javascript interpreter)가 포함되어 있다. HTML 분석기는 주로 HTML 태그의 순서와 포함 관계를 확인하고 → CSS 분석기는 HTML 분석기가 분석을 끝낸 다음 HTML 문서의 태그 안의 정보를 분석 → 마지막으로 자바스크립트 인터프리터가 태그 안의 자바스크립트 소스를 분석한다. 자바스크립트의 입력과 출력 크롬 브라우저의 콘솔 도구 : 자바스크립트 소스를 간편하게 연습해볼수 있는 도구(열기 : Ctrl + Shift + J) 사용자 입력값 받기 prompt() 등 EX) prompt("이름을..
-
자바스크립트와 웹 프로그래밍 - Do it 자바스크립트 기본편프론트엔드 2019. 12. 19. 19:53
웹 프로그래밍이란? 웹 프로그래밍 : '웹 브라우저'와 관련된 프로그램을 작성하는 것 서버 : 사용자의 요청을 처리하거나 데이터를 관리하는 컴퓨터 → 백엔드 개발 클라이언트 : 웹 브라우저를 통해 서버에 필요한 정보를 요청하고, 서버가 전달한 정보를 보여주는 컴퓨터(PC, 노트북, 모바일 기기 등) → 프런트엔드 개발 자바스크립트로 할 수 있는 일 웹 사이트에 동적인 기능을 추가할 수 있다 웹 브라우저에서 실행되는 프로그램(웹애플리케이션)을 만들 수 있다 자바스크립트 프레임워크 Node.js를 이용해 서버 프로그램을 개발할 수 있다 자바스크립트의 특징 자바스크립트는 웹 브라우저에서 사용하기 위해 만든 언어. 모든 웹 브라우저에서 동작한다 별도의 프로그램 설치 없이, 웹 브라우저만 있으면 실행할 수 있고 ..