프론트엔드 복습노트 프론트엔드 복습노트

JavaScript

• [프로그래머스] 징검다리 (JS/javascript) - 매우쉬운풀이

  쉽게풀어쓰는알고리즘 2025. 2. 24. 13:19

  알고리즘 문제를 풀다 보면 "이건 무슨 소리야?" 싶은 설명을 자주 만나게 됩니다. 문제 자체보다 문제를 읽는 거 자체가 일인 경우가 종종 있습니다. 오늘은 "[징검다리]" 문제를 동네 옆집 아저씨도 이해할 수 있을 정도로 쉽게 풀어보겠습니다. 복잡한 용어는 빼고, 직관적인 예제로 천천히 설명해볼 테니 부담 없이 따라와 주세요! 🚀 어쩌면 세상에서 가장 쉬운 알고리즘 풀이 입니다. https://school.programmers.co.kr/learn/courses/30/lessons/43236 문제는 위와 같습니다. 그럼 이 문제에 대해서 아주 쉽게 설명해보겠습니다. 문제 파악 1. 강 건너기 게임 상상해보세요 강 건너편에 도착하려면 0 에서 시작해서 도착지(예를들어 25)까지 가야됩니다. 강 중간 중..

  Read More
• [자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)

  frontend/꿀팁 2022. 10. 7. 10:24

  오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 theme를 적용하려고 분기처리할 때 많이 사용하게 됩니다. JavaScript const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 이렇게 간단한 방법으로 우리는 다크모드에 대해서 감지해볼 수 있습니다. 물론 CSS의 media query를 통한 분기 처리도 가능합니다. CSS @media (prefers-color-scheme: dark) { .scheme { background: #000; color: #fff; } } @media ..

  Read More
• [자바스크립트 꿀팁] 진수 변환 (N 진수 > N진수)

  frontend/꿀팁 2022. 3. 23. 17:33

  오늘은 진수변환에 대해서 알아 보도록 하겠습니다. 진수변환 다들 하실 줄 아시겠지만 자바스크립트에서는 toString() 메소드와 parseInt()메소드를 통해 아주 손쉽게 할 수 있습니다. 10진수 -> 2진수( 3, 4, 5...N 진수) let decimal = 2022; //10진수 -> 2진수 console.log(decimal.toString(2)); //10진수 -> 3진수 console.log(decimal.toString(3)); //10진수 -> N진수 console.log(decimal.toString(N)); 간단합니다. 위와 같이 Number 프로토타입 안에 있는 toString메소드의 파라미터로 원하는 진수값을 넘겨주면 손쉽게 변경됩니다. 2진수 ( 3, 4, 5...N 진수 ..

  Read More
• 이벤트 위임 - 캡처링/버블링 (Event Delegation - Captruring / Bubbling)

  frontend/javascript&web 2022. 2. 21. 19:45

  쉽게 이해하는 이벤트 위임(Event Delegation) 이벤트 특정 행위시 발생하는 사건 브라우저는 이벤트를 감지할 수 있고 이벤트 발생 시 알려줄수 있으며 이를 통해 웹 페이지와 상호작용가능하며 핸들러를 통해 원하는 함수와 연결해 사용할 수 있습니다. 이벤트 타입 마우스 click(클릭), dbclick(더블 클릭), mouserover(마우스 오버), mouseout(마우스 아웃), mousedown(마우스 눌림), mouseup(마우스 뗌), mousemove(마우스 움직임), contextmenu(오른쪽 마우스) 키보드 keydown(키 눌림), keyup(키 뗌), keypress(키 눌린상태) 폼 focus(포커스 인), blur(포커스 아웃), change(값 변경), submit(제출)..

  Read More
• 자바스크립트 this

  frontend/javascript&web 2022. 2. 18. 10:16

  쉽게 이해하는 자바스크립트 this this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기참조변수 자바스크립트의 this는 자바를 비롯한 여타 언어들과는 상이하게 동작합니다. 이 개념을 잘 이해하신다면 우리가 특정 변수나 객체에 접근할 때 발생할 수 있는 문제에 대하여 사전에 방지할 수 있는 효과를 가지게 될 것입니다. this의 동작방식 this 값은 호출방법에 의해 결정됩니다. 실행중에 할당으로 설정할 수 없고 호출할 때마다 다르게 동작합니다. 우리는 이러한 this의 값 결정 방식을 5가지로 분류 해볼 수 있습니다. 전역공간 함수 호출 메소드 호출 생성자 함수 호출 apply / call / bind 호출 함수와 메소드를 혼동하지 맙시다. 함수는 객체로 부터 독립적이지만, 메소드는 ..

  Read More
• 브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )

  frontend/javascript&web 2022. 2. 17. 16:45

  이론편 : 브라우저 저장소 ( Theory of Browser Storage ) 브라우저 저장소 분류 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 웹 스토리지 ( Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage ) ..

  Read More
• 프로토타입(Prototype)

  frontend/javascript&web 2022. 2. 16. 08:49

  Concept By 프로토타입 (Concept By Prototype) 프로토타입 자바스크립트는 프로토타입 기반의 언어, 객체 원형인 프로토타입을 이용하여 새로운 객체를 생성 자바스크립트는 프로토타입이라는 특수한 객체를 가지고 있으며, 이는 말그대로 다른 객체의 원형이 되는 객체 입니다. 새로운 객체를 만들어 낼 때 객체의 원형인 프로토 타입을 이용하며, 이를 통해 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있도록 도와줍니다. 예시 let fn = { // (1) getName() { return this.name }, getAge() { return this.age } }; function Person(name){ // (2) let newPerson = {}; Object.setPrototyp..

  Read More
• 스코프(Scope)

  frontend/javascript&web 2022. 2. 9. 19:47

  Concept By 스코프(Concept By Scope) 스코프(Scope) 현재 접근할 수 있는 변수들의 범위 쉽게 말해 실행 컨텍스트에서 접근 가능한 변수라고 생각하면 됩니다. 스코프에는 총 3가지 개념이 있습니다. 함수 스코프 렉시컬 스코프 블록 스코프 우리는 이미 렉시컬 스코프를 클로저에서 만나보았습니다. 사실 함수와 블록 스코프도 이미 호이스팅에서 맛은 보았다고 볼 수 있습니다. 먼저, 함수 스코프를 기반으로 설명해드리겠습니다. 예시 var ratio = 1.6; // (1) function getIncreaseSalary(salary){ // (2) var total = salary * ratio; return total; } var nextYearMySalary = getIncreaseSa..

  Read More