본문 바로가기
728x90
반응형

자바스크립트13

자바스크립트: 비동기 프로그래밍 안녕하세요 오늘은 자바스크립트의 비동기 프로그래밍에 대해서 알아보겠습니다. 자바스크립트는 싱글 스레드 언어이기 때문에, 비동기 프로그래밍을 통해 긴 작업을 백그라운드에서 처리하고, 그 완료 시점에 대한 알림을 받아 다음 작업을 진행 할 수 있습니다. 1. 콜백함수: 콜백함수는 다른 코드에 인수로 전달되는 함수입니다. 이를 통해 해당 코드 내부에서 콜백함수를 필요한 시점에 호출 할 수 있습니다. 비동기 작업에서 콜백은 일반적으로 작업 완료 후 실행 되도록 예약됩니다. function doSomethingAsync(callback) { setTimeout(function() { // 비동기 작업 const result = 'Hello, world!'; callback(result); }, 1000); } d.. 2023. 9. 15.
자바스크립트: 다양한 이벤트 처리 안녕하세요 오늘은 자바스크립트에서 다양한 이벤트 처리에 대해서 알아보겠습니다. 1. 클릭 이벤트 처리: 버튼을 클릭하면 버튼이 클릭된것을 콘솔창에서 보여줍니다. const button = document.querySelector('#my-button'); button.addEventListener('click', function() { console.log('Button clicked!'); }); 2. 마우스 오버 및 아웃 이벤트 처리: 해당 요소에 마우스커서를 올려다 땔때 콘솔을 출력합니다. const element = document.querySelector('.my-element'); element.addEventListener('mouseover', function() { console.log(.. 2023. 9. 13.
자바스크립트: 웹 페이지 개발을 위한 DOM 조작 안녕하세요 오늘은 자바스크립트에서 DOM (document object model)을 조작하여 웹페이지를 동적으로 움직여 보겠습니다. 1. 요소 선택: DOM을 통해 웹 페이지의 요소를 선택하기 위해 document.querySelector() 또는 document.querySelectorAll() 메서드를 사용할 수 있습니다. // 단일 요소 선택 const element = document.querySelector('.my-element'); // 여러 요소 선택 const elements = document.querySelectorAll('p'); document.querySelector(): CSS 선택자를 사용하여 클래스 이름이 'my-element'인 문서 내 첫 번째 일치하는 요소를 반환합니.. 2023. 9. 13.
자바스크립트 함수와 객체: 개발 언어의 강력한 도구 안녕하세요 오늘은 자바스크립트에서 함수와 객체를 사용하는 법을 알아보겠습니다. 1. 함수의 정의와 호출 방법: 함수는 재사용 가능한 코드 블록입니다. 함수를 정의할 때는 function 키워드를 사용합니다. 함수 정의는 다음과 같은 구조를 가집니다: function functionName(parameter1, parameter2) { // 함수 내부에서 수행될 코드 } functionName은 함수의 이름이며, 필요에 따라 생략할 수도 있습니다. parameter1, parameter2 등은 함수에 전달되는 매개변수(Parameter)입니다. 매개변수는 선택적으로 지정할 수 있습니다. 2. 함수 호출: 함수를 호출하기 위해서는 함수 이름을 사용하고 괄호 안에 필요한 인자(Argument)를 전달합니다. .. 2023. 9. 13.
자바스크립트 기초 문법: 변수, 데이터 타입, 연산자, 조건문 안녕하세요 오늘은 자바스크립트 기본 문법에 대해 알아보겠습니다. 1. 변수: 변수는 값을 저장하는 데 사용되는 식별자입니다. 자바스크립트에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다. 예를 들어, var x = 5; 와 같이 변수 x에 값 5를 할당할 수 있습니다. function example() { var x = 1; let y = 2; const z = 3; if (true) { var x = 10; // 함수 스코프 내에서 중복 선언 let y = 20; // 블록 스코프 내에서 새로운 변수 선언 const z = 30; // 블록 스코프 내에서 새로운 상수 선언 console.log(x, y, z); // 출력: 10, 20, 30 } console.log(x, y, .. 2023. 9. 13.
자바스크립트: 웹 개발의 핵심 언어 안녕하세요 오늘은 웹개발의 핵심 언어인 자바스크립트에 대해서 배워보는 첫번째 시간입니다. 자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 초기에는 웹 페이지의 동적인 기능을 구현하기 위해 사용되었지만, 현재는 웹 애플리케이션 개발뿐만 아니라 서버 사이드 개발, 모바일 앱 개발, 게임 개발 등 다양한 분야에서 활용됩니다. 자바스크립트는 애매한 문법이 존재하여 놀림받는 일이 많지만 여전히 다음과 같은 분야에서 힘쓰고 있습니다. 웹 개발: 자바스크립트는 HTML과 함께 사용되어 웹 페이지의 동적인 기능을 구현합니다. DOM 조작, 이벤트 처리, AJAX를 통한 비동기 통신 등을 가능하게 합니다. 서버 사이드 개발: Node.js라는 서버 사이드 플랫폼을 사용하여 자바스크립트로 서.. 2023. 9. 13.
[validation]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (4) 안녕하세요 바로 이어서 4번째 기능 validation 입니다. 프론트단에서 form data를 입력할때 정규 표현식을 이용하여 validation을 진행하는데요 이부분을 리액트로 마이그레이션 해보겠습니다. 먼저 첫번째 글 링크입니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useState } from "react"; import "../assets/css/l.. 2023. 8. 26.
[count]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (3) 안녕하세요. 바로 이어서 세번째 기능인 count를 마이그레이션 해보도록 하겠습니다. 1편 링크 첨부합니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; import { counterValueState.. 2023. 8. 26.
[swiper, aos]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (2) 안녕하세요. 바로 이어서 자바스크립트코드를 리액트로 마이그레이션 하는 작업 두번째 시작하겠습니다. 전에 첫번째를 못보신 분들은 이작업을 진행하는 이유와 헤더에 대한 부분이 있으니 링크 추가하겠습니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useEffect, useState } from "react"; import AOS from "aos"; import { .. 2023. 8. 26.
[dropdown]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발을 시작하면서 처음 6개월은 학원에서 퍼블리셔 과정을 학습하였습니다. 해당 과정 중 배운것은 html,css,js,node.js,mongodb 등으로 학습한 내용을 바탕으로 mpa (multi page application) 를 만들어 포토폴리오로 사용하였습니다. 해당 과정 후 프론트엔드 개발자로 취업하였고 회사가 백엔드 기반인지라 1개월 후 백엔드 개발자로 전향하였는데요 8개월차가 된 지금 포토폴리오 구조를 바꾸려는 이유는 다음과 같습니다. 1. 대한민국 == 자바 표준 전자 정부 프레임워크는 자바입니다. 앞으로도 백엔드단.. 2023. 8. 26.
728x90
반응형