3장. Node.js[Node.js란?] Node.js는 웹 브라우저 이후 등장한 자바스크립트 런타임 이다.  자바스크립트 런타임이란 자바스크립트의 구동 환경이라는 뜻으로, 지금까지는 웹 브라우저가 유일한 자바스크립트 런타임이었으며, 그러므로 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었다.그런데 Node.js라는 독립적인 자바스크립트 런타임이 등장하면서 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었고, 활용 범위가 넓어짐과 함께 자바스크립트를 사용하는 개발자도 늘어나 2022년 기준으로 자바스크립트는 개발자가 가장 많이 사용하는 프로그래밍 언어가 되었다.  Node.js는 단순히 자바스크립트 런타임이며, 서버 개발 기술은 아니다.  리액트 활용을 위해 Node.js의 학습이 선행되어야 하는 ..

24-25/React.js 2 2024. 10. 11. 12:34

1. 자바스크립트 시작console.log()확인하고 싶은 메세지나 데이터를 콘솔에 기록하기 위해 사용한다.주석// 를 사용하거나 /* */ 사이에 적는다.2. 변수 선언var중복 할당과 재할당이 가능하다.let중복 선언이 불가하고 재할당이 가능하다.const상수 선언 시 사용하고 재할당은 불가하다. typeof값의 데이터 유형(문자열)을 반환한다.` ${} `템플릿 리터럴은 백틱 안에서 사용 가능하다. 3. 조건문if주어진 조건이 true라고 평가되면 작업을 실행한다.else ifif가 아닌 다른 조건이 true라고 평가되면 작업을 실행한다.else주어진 조건이 false일 경우 작업을 실행한다.let hungerLevel = 7;if(hungerLevel>7){ console.log('Time to..

24-25/Node.js 1 2024. 10. 4. 10:00

리액트 기술 블로그에 오신 여러분, 환영합니다! 저희 블로그에서는 리액트(React)에 대한 다양한 기술적인 내용을 다룰 예정입니다. 리액트는 현대적인 웹 개발에서 매우 중요한 역할을 하는 라이브러리로, 빠르고 효율적인 웹 애플리케이션을 구축하기 위한 필수 도구 중 하나입니다. 리액트는 자바스크립트 라이브러리이기 때문에 자바스크립트에 익숙하지 않다면 학습하기 어렵습니다. 기초적인 자바스크립트를 공부했다는 전제 하에 기본적인 자바스크립트 문법을 다시 한번 살펴보고, 이어서 객체의 특징이나 단락평가 같은 실전에 적용할 수 있는 문법을 다루겠습니다. 1. 함수 함수의 사용법을 본격적으로 알아보기 전에, 우리가 함수를 사용하는 이유가 무엇일까요? 자바스크립트 코드를 작성하다 보면 유사하게 동작하는 코드를 작성할..

23-24/React.js 1 2023. 9. 29. 10:00

Javascript란? 자바스크립트에 대해 자세히 살펴보기 전에 우리가 보는 인터넷 웹 페이지 구성에 대해 먼저 살펴보자. 웹 페이지는 HTML, CSS, Javascript 이 3가지의 언어로 만들어진다. HTML은 웹 페이지 요소의 배치를, CSS는 스타일링을, Javascript는 동작을 담당한다. 웹페이지의 주된 목적은 정보 전달 뿐만이 아닌 사용자와의 상호작용이다. 자바스크립트를 사용하여 동적인 기능을 장착할 수 있게 되고 자바스크립트 엔진은 그것을 가능하게 한다. 이것이 오늘날 자바스크립트의 중요성이 점점 커지고 있는 이유이기도 하다. 이제 자바스크립트 문법을 본격적으로 살펴보도록 하자. 변수와 상수 변수는 값을 가리키는 이름이면서 값의 저장소이다. 값 변경이 가능하고 선언과 동시에 할당(초기..

23-24/React.js 3 2023. 9. 29. 10:00

🌟2장 키워드🌟 ES2015 자바스크립트와 프로토타입 비동기 프로미스, async/await AJAX 2.1. ES2015 ES2015는 ES6라 부르기도 하며, 2015년에 새로운 문법을 도입하여 개선된 자바스크립트 문법을 말합니다. 이번 장에서는 ES2015 이상의 자바스크립트에서 알아두면 좋은 문법 몇 가지를 소개하도록 하겠습니다. 2.1.1. const, let 변수 선언이 var에서 const, let으로 대체되었습니다. if (true) { var x = 3; } console.log(x); // 3 if (true) { const y = 3; } console.log(y); // Uncaught ReferenceError: y is not defined var const let 함수 스코프,..

23-24/Node.js 2 2023. 9. 29. 10:00

I. INTRODUCTION TO JAVASCRIPT 1. What is JavaScript? JavaScript는 웹 개발의 핵심으로 웹 사이트에 움직임을 주는 동적 처리를 가능하게 합니다. JavaScript는 발전을 거듭하며 현대 웹 브라우저의 주 언어로 자리 잡았습니다. JavaScript를 통해 다양한 라이브러리를 사용하고 서버 개발 등 여러 개발에 활용할 수 있습니다. 2. Console / 콘솔 Console(콘솔)은 개발자에게 오류 등의 중요한 메시지를 표시하는 패널입니다. 이 콘솔을 통해 화면에 원하는 항목을 표시할 수 있습니다. console.log( )를 통하여 ( )안의 내용을 출력할 수 있습니다. console.log(5); // Output: 5 일반적으로 JavaScript 코..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:00

🔍 ES2015+ 2015년 일어난 자바스크립트 문법의 대격변, ES2015 (a.k.a ES6)의 등장이 있었다. 📌 왜 ES2015+인가? 노드 6 버전부터 ES2015 문법을 사용할 수 있으며, 현재는 ES2022까지 등장한 상황이므로 ES2015+라 통칭하여 부른다. 🔍 꼭 알아두어야 하는 자바스크립트 문법 모음.zip 📌 const, let var과 유사한 변수 선언 방법이다. 그러나 var은 함수 스코프로 블록의 범위에 상관없이 사용할 수 있으나, const나 let는 블록 스코프로 블록 밖에서는 사용할 수 없다. 📌 템플릿 문자열 기존 문자열과 다르게 키보드 좌측 상단에 있는 백틱 문자로 감싼다. (다만 맥북은 백틱 대신 ₩가 나온다. 속상해라...) 백틱 안에 변수를 넣을 수 있는데, ${..

22-23/22-23 Node.js 2022. 9. 19. 19:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 12번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team de:Burger의 코딩컨벤션에 대한 이야기인데요, 코딩컨벤션의 필요성과 자바스크립트의 코딩컨벤션에 대해 알아봅시다!

Corner 코너 2022. 4. 6. 13:00

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01

8. Objects ● Objects 1. Introduction to Objects 객체를 들어가며 자바에는 7개의 데이터 타입이 있다. - string, number, boolean, null, undefined, symbol, objects -자바스크립트(Javascript)의 기본 타입은 객체(Object) 객체를 사용하면 실제 사물을 모델링하거나 데이터 구조를 구축할 수 있다. 사과(apple), 테이블(table), 아기(baby), 지렁이(worm)을 객체로 만들 수 있다. *객체: 속성값과 행동을 가진 데이터 타입 *객체 모델링: 객체의 속성과 동작을 추려내어 객체로 구현하는 과정 2. Creating Object Literals 객체 리터럴 만들기 객체를 선언할 때 기본구조 - 객체를 변..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:02

7. Iterators ● High-order Functions 1. Introduction 고차 함수는 다른 함수를 인수로 받아들이거나 반환값을 함수로 내보내는 함수이다. 함수에 함수를 포함함으로써 프로그래밍의 추상화 수준을 높여주는 고차 함수에 대해서 알아보자. 2. Function as Data 데이터로서의 함수 자바스크립트의 함수는 다른 여느 자료형과 같은 용례를 갖는다. 함수를 변수에 할당할 수도 있고, 새로운 변수에 재할당할 수도 있다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 가독성을 해칠 정도로 긴 이름을 가진 함수가 있다고 하자. 이 함수의 동작을 반복..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:01

6. Loops ● Loops 1. Loops : 반복문 반복문은 특정 조건에 도달할 때까지 일련의 명령을 반복하는 구문이다. 프로그램이 특정 작업을 반복할 필요가 있을 때 반복문을 사용하면 효율적으로 유지보수하기 쉬운 코드를 작성할 수 있다. 반복문의 동작을 두고 iterate라는 표현을 사용한다. 2. Repeating Tasks Manually : 수동으로 작업 반복하기 반복문을 사용하지 않고 반복 작업을 수행하려는 경우의 번거로움을 살펴보자. Instruction 1. 변수 vacationSpots를 문자열 세 개를 가진 배열로 만든다. let vacationSpots=['A','B','C']; 2. 배열의 각 요소를 console.log()로 출력한다. console.log(vacationSpo..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:00