jsx- JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 작성하는 데 사용됩니다. JSX는 HTML과 비슷한 구문을 사용하여 UI 요소를 작성할 수 있으며, JavaScript 코드와 결합하여 동적인 UI를 생성하는 데에 유용합니다. Counter 폴더를 생성하여 jsx 문법을 활용한 카운터 프로그램을 작성해보겠습니다.  문제. 아래와 같은 카운터 프로그램을 작성해보자. - 두 카운트의 합이 TotalCount에 표기 - 두 카운트의 숫자는 별개로 함 - TotalCount의 값이 10보다 작으면 👎🏽 출력하고, 10보다 크면 👍🏽를 출력 cmder에서 위의 코드를 실행하여 default로 파일을 설정할 수 있습니다.

Web 2024. 5. 16. 16:54

많은 사람들이 사용하고 있는 javascript 라이브러리에 대해서 알아보도록하겠습니다. 1. React(리엑트)- Facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리 - 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공 - Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상 - 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용 - JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴퍼넌트를 정의 1-1. 라이브러리(library) vs 프레임워크(Framework)라이브러리     - 개발자가 필요할..

Web 2024. 5. 16. 15:36

PostmanPostman은 API 개발 및 테스트를 위한 플랫폼으로, API 엔드포인트를 쉽게 테스트하고 디버그할 수 있습니다.\ 다음의 링크를 통해 Postman을 설치합니다.https://www.postman.com/downloads/ Download Postman | Get Started for FreeTry Postman for free! Join 30 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.www.postman.com Postman을 사용하는 주요 이유는 다음과 같습니다. 1. 간편한 API 테스트 Postman은 직관적인 사용자 ..

Web 2024. 5. 9. 17:01

1. 프로미스(Promise)    - 비동기(특정작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있음) 작업을 다루는 객체   1-1. 프로미스의 상태    - 대기: 비동기 작업이 아직 수행되지 않은 상태     - 이행: 비동기 작업이 성공적으로 완료된 상태. resolve() 호출     - 거부: 비동기 작업이 실패한 상태. reject() 호출  const myPromise = new Promise((resolve, reject) => {     // 비동기 작업 수행     // 작업이 성공하면 resolve() 호출     // 작업이 실패하면 reject() 호출 }); myPromise     .then((result) => {         // 성공했을 때의 처리     ..

Web 2024. 5. 8. 16:10

이번시간에는 javascript 런타임 환경으로 서버 애플리케이션을 개발하는데 주로  사용되는 node.js에 대해서 알아보겠습니다. 우선 링크를 통해 설치합니다.https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org nodejs의 경우는 terminal을 통해 콘솔 창을 확인할 수 있습니다. 콘솔값을 터미널을 통해 확인합니다. 1. function(함수)  2. object(객체)  3. class(클래스)   예제를 풀면서 익혀보도록 할게요.예제카운터를 0으로 값을 초기화 한 뒤 하나씩 값이 증가하는 메서드..

Web 2024. 5. 2. 10:05

1. JavaScript - String 객체String 객체 const str1 = 'JavaScript'; const str2 = new String('JavaScript'); str1 == str2; // true str1 === str2; // false   2. JavaScript - Date 객체 Date 객체 날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체     const 변수명 = new Date(); // 현재 날짜 시간     const 변수명 = new Date(년, 월, 일, 시, 분, 초, 밀리초);        // 입력한 날짜 시간에 대한 객체 연도(year) 2자리로 표기     예) 23 -> 1923년 4자리로 표기     예) 2024 -> 2024..

Web 2024. 4. 23. 11:16

1. 자바스크립트의 반복문(while문, for문)파이썬에서의 반복문과 유사합니다. while문 while(조건식) {     조건식의 결과가 true인 동안 반복할 문장;     ... } do {     조건식의 결과가 true인 동안 반복할 문장;     ... }while(조건식); do ~ while문은 조건식의 결과가 처음부터 false인 경우라도 한 번은 {}에 문장을 실행함for문     for(초기값; 조건식; 증감식){         조건식의 결과가 true인 동안 반복할 문장;         ...     }     let sum = 0;     for(let i=1; i        sum += i;     }     while문과의 비교     let i=1;     le..

Web 2024. 4. 22. 17:47

반응형 웹페이지를 만들어보려합니다. 다음과 같이 모바일, pc버전으로 나누어 페이지를 만들어보겠습니다. 위의 사진과 가장 근사하게 만들어보는 것이 이번 과제의 목표입니다! YouTube의 영상을 아이프레임할 때에 오류가 발생하여 닷홈 페이지로 설정하겠습니다. 우선 html코드입니다. 다음은 css 코드입니다. 외부 스타일을 이용한 css코드입니다. 따라서 html, css파일 각각 생성하여 코드를 작성하였습니다. 여기까지가 모바일버전에서의 css코드입니다. 다음은 pc버전에서의 웹사이트에 적용할 css코드입니다. (1024px이상을 pc버전이라고 가정합니다.) 여기까지가 pc버전에서의 css코드입니다. 모바일. pc 순으로 제가 작성한 코드의 결과를 공유하려고 합니다. 이번엔 pc버전입니다. GitHub..

Web 2024. 4. 22. 17:04