동기, 비동기, 동기, 비동기, 동기,,,

SKALA 과정에서 수업을 듣던 중, 오랜만에 JS 기본 개념에 대해 공부하며 흐릿해진 개념에 대해 다시 정리해보려한다. 각각 파트에 대해서 배경, 문제점, 해결방법 그리고 예시 코드를 곁들인,, 느낌으로 정리해보려한다.  동기 (Synchronous) vs 비동기 (Asynchronous) 자바스크립트는 기본적으로 싱글 스레드 기반의 언어로, 코드가 한 줄씩 순차적으로 실행된다. 하지만, 네트워크 요청, 파일 입출력, 타이머 등의 작업은 시간이 걸리므로, 이러한 작업이 실행되는 동안 프로그램이 멈추지 않도록 비동기 처리 방식이 필요하다. 동기 방식에는 실행 시간이 긴 작업 (서버 요청, 파일 읽기 등)이 있으면 전체 코드 실행이 멈춰버리는 문제가 발생한다.console.log("시작");// 동기 코드..

• format_list_bulleted Javascript
• · 2025. 3. 14.
• textsms

this 키워드

자바스크립트 자주 볼 수 있는 this 키워드에 대해서 알아보자 에서 this 키워드를 출력해보면 window{...} 라는 것이 출력된다. 또한 일반 함수 내에서 this 키워드를 출력해보면 function f(){ console.log(this); } f(); 여기서 Window 란 무엇일까? Window 란? Window 는 모든 전역변수, 함수, DOM 을 보관하고 관리하는 전역 객체이다. 우리가 흔히 사용하는 document.getElementById(), alert(), console.log() 이러한 함수들을 보관하는 보관소이다. 이 보관소는 하나의 큰 {오브젝트} 라고 생각하면 된다. 또한 코드를 짜며 전역변수들을 만들었을 때도 이 변수들을 window에 보관해준다. strict mode ..

• format_list_bulleted Javascript
• · 2023. 7. 6.
• textsms

Javascript 공부 #6

브라우저 안의 여러 저장공간 크롬 개발자도구의 Application 탭에 보면 여러가지 저장공간이 존재한다 Local Storage / Session Storage ( key : value 형태로 문자 숫자 데이터 저장 가능 ) indexed DB ( 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움 ) Cookies ( 유저 로그인 정보 저장 공간 ) Cache Storage ( html css js img 파일 저장해두는 공간 ) 개발자가 선택해서 사용하면 되는데 범용적으로 사용 가능한 Local Storage 사용해보자 Local Storage 는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB 까지만 저장 가능하다. Local Storage는 브라우저 재접속 해도 영..

• format_list_bulleted Javascript
• · 2023. 1. 20.
• textsms

Javascript 공부 #5

서버란? 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램일 뿐이다. 네이버 웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램 서버에 데이터를 요청할 때 어떤 데이터인지 url 로 잘 기재해야하고 어떤 방법으로 요청할 것인지 결정해야함 (GET / POST 등..) GET / POST 요청하는 법 GET 요청은 서버에 있던 데이터를 가져오고 싶을 때 주로 사용하고, POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. ( PUT, DELETE 요청도 있음 ) GET 요청 보낼 때 가장 쉬운 방법은 브라우저 주소창이다. 브라우저 주소창에 url 적으면 그 주소로 GET 요청을 보내준다. POST 요청 하고싶으면 태그 ..

• format_list_bulleted Javascript
• · 2023. 1. 16.
• textsms

Javascript 공부 #4

Array / Object 자료형 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형들 배열 Array var car = ['소나타', 50000, 'white']; 다음과 같이 배열에 저장 가능 Object var car2 = { name : '소나타', price : 50000 }; 딕셔너리 처럼 사용 자료를 꺼내쓸 때는 car2[’name’] 또는 car2.name와 같이 사용할 수 있다. 실제 웹서비스 개발 2가지 방식 사용자가 사이트로 접속하면 HTML 을 잘 만들어서 보내주는 것을 웹서비스 라고 한다. HTML을 누가 완성하는지에 따라 개방방식의 차이가 존재 1. 서버에서 HTML을 미리 완성해서 고객에게 보내줌 이러한 방식을 server-side rendering 이라고 한다. 2. ..

• format_list_bulleted Javascript
• · 2023. 1. 15.
• textsms

Javascript 공부 #2

UI 애니메이션 추가할 때 가능한 CSS 만으로 처리하는게 좋음 자바스크립트에게 너무 많은 일을 시키면 성능이 저하되기 때문 one-way UI 애니메이션 만드는 법 A 상태 → B 상태로 바뀌는 일방향 애니메이션 시작스타일 최종스타일 원할 때 최종스타일로 변하라고 코드 짜줌 transition 추가 각각 클래스로 만들어놈 fadeIn, fadeOut 애니메이션 만들기 .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; visibility: hidden; opacity: 0; transition: all 1s; } 위와 같이 visibility 속성 h..

• format_list_bulleted Javascript
• · 2023. 1. 12.
• textsms