[JavaScript] JavaScript의 비동기 처리: Promise와 async/await 그리고 Java와의 차이점
·
Front end/JavaScript
JavaScript와 Java는 동작 방식에서 근본적인 차이를 가지고 있습니다.특히, 비동기 처리 방식에서 중요한 차이가 발생하는데요.이번 글에서는 JavaScript의 싱글 스레드 모델과 비동기 처리 방법을 설명하고,Java와 비교하며 Promise와 async/await을 활용한 비동기 코드 처리 방식까지 자세히 알아보겠습니다.1️⃣ JavaScript vs Java: 스레드 모델의 차이✅ JavaScript는 단일 스레드(Single Thread)JavaScript는 싱글 스레드(Single Thread) 기반의 언어입니다.-> 즉, 한 번에 하나의 작업만 처리할 수 있습니다.하지만 setTimeout, fetch API 같은 비동기 함수가 존재하는데,이 함수들은 이벤트 루프(Event Loop)와..
[JavaScript] Call by Value 와 Call by Reference
·
Front end/JavaScript
1. Call by Value (값에 의한 호출)Call by Value는 기본 자료형(Primitive Type)을 함수의 매개변수로 전달할 때 발생합니다.자바스크립트에서 기본 자료형은 다음과 같습니다.NumberStringBooleanNullUndefinedSymbolBigInt이 경우, 함수 내부에서 변수의 값을 변경하더라도 원본 변수에는 영향을 주지 않습니다.예제function modifyValue(x) { x = 10; console.log("함수 내부의 x:", x);}let a = 5;console.log("함수 호출 전 a:", a);modifyValue(a);console.log("함수 호출 후 a:", a);실행 결과함수 내부에서 x의 값을 변경했지만, a는 영향을 받지 않았..
[JavaScript] location.replace와 location.href의 차이점
·
Front end/JavaScript
JavaScript를 사용하여 웹 페이지를 다른 URL로 이동시키는 방법에는 여러 가지가 있습니다. 그중에서 location.replace와 location.href는 가장 자주 사용되는 두 가지 방법입니다. 이 글에서는 location.replace와 location.href의 정의와 차이점을 살펴보고, 각각의 활용 예시에 대해 설명하겠습니다.1. location.href란?location.href는 JavaScript에서 현재 페이지의 URL을 변경하여 사용자를 다른 페이지로 이동시키는 속성입니다. 이는 브라우저의 주소창에 새로운 URL을 설정하는 것과 동일합니다.특징:브라우저 기록에 저장됨: 사용자가 뒤로 가기 버튼을 클릭하면 이전 페이지로 돌아갈 수 있습니다.페이지 리디렉션: 페이지가 새로운 UR..
[JavaScript] var / let / const (중복선언, 재할당, 스코프)
·
Front end/JavaScript
자바스크립트에서 변수를 선언할때 사용하는 var, let, const는 어떤 차이점이 있을까요? [1. 변수의 선언방식] 1.1. var var은 중복 선언과 변수의 재할당이 가능합니다. 변수를 유연하게 사용할 수 있다는 장점이 있지만 복잡한 코드에서 같은 이름의 변수가 여러번 사용되면 문제를 파악하기에 어려움이 있습니다. var name = "메롱" console.log(name) //메롱 var name = "안녕" console.log(name) //안녕 name = "하이" console.log(name) //하이 이러한 문제점을 보완하기 위해 ES6에서 등장한 변수의 선언방식이 let과 const 입니다. 1.2. let let은 중복 선언은 불가하고 변수의 재할당은 가능합니다. let name..
[크롬 개발자도구] 개발자도구 붙여넣기 오류 (Don’t paste code...)
·
Front end
크롬 개발자도구에서 복사 붙여넣기 사용 시, 아래와 같은 오류가 발생하며 붙여넣기가 되지 않았습니다. Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting. 이러한 경우 아래 명령어를 입력하여 아주 간단하게 해결할 수 있습니다. allow pasting 이제 붙여넣기가 잘되는것을 확인할수있습니다. 감사합니다😊
[HTML / CSS] Chrome 개발자 도구 Sources 탭에 Console창 표시하기
·
Front end/HTML, CSS
[문제발생] 기존에 크롬(Chrome)에서 Script를 디버깅할 때, F12를 눌러서 개발자도구를 많이 활용했었는데 노트북에서 pc로 세팅하면서 Sources 탭 하단에 Console창이 보이지 않아서 당황했습니다 ㅜㅜ Console 탭도 존재하긴 하지만, 저는 동시에 보면서 활용했기때문에,, 왔다갔다 하면서 보기에는 불편하더라구요..😥 [해결방법] 해결방법은 허무할 정도로 간단했습니다. ㅎㅎ Sources탭에서 ESC만 누르면 아래 이미지와 같이 짜잔..! 등장! 해결완료~!!😆
[HTML / CSS] 스파르타 코딩클럽 - 신년운세 코딩 패키지 2주차
·
Front end/HTML, CSS
01. 2주차 완성물: 신년특집 운세 패키지 띠별 운세페이지를 만들고 반응형 웹으로 변경한다. 02. index.html 과 result.html 을 연결하기 a 태그의 href 속성에 이동할 페이지를 넣어준다. 쥐 03. 버튼 만들기 버튼 2개를 div 태그로 묶어준다. 뒤로가기 공유하기 04. 버튼 가운데 정렬하기 display:flex 를 통해 정렬한다. .btns { display: flex; flex-direction: row; justify-content: center; } 05. 모바일 버전 확인 크롬 개발자 도구 → 모바일 버튼을 클릭 06. 모바일 버전 처리하기 스크린 사이즈가 780px 이하일 때 → body의 백그라운드 색을 초록색으로 바꿔라! @media screen and (max..
[HTML / CSS] 스파르타 코딩클럽 - 신년운세 코딩 패키지 1주차
·
Front end/HTML, CSS
01. 1주차 완성물: 신년특집 운세 패키지 index 페이지의 기본 뼈대를 구성하고, 캐릭터인 르탄이들을 12개의 원 모양에 배치하였다. 02. HTML 기초 아래 소스를 통해 HTML에서 자주 사용하는 태그들을 배웠다. 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 03. clas..