javascript

개발자 커뮤니티 글또의 도움을 받아, 우연한 기회로 유데미 알고리즘 강의를 후원받아 수강하게 되었다.수강하게 된 계기프론트엔드 개발자로서 3년 가량 실무에서만 일을 하다 보니, 자연스레 자료구조나 알고리즘에 대한 감을 완전히(..!) 잃어버리게 되고 말았다. 알고리즘은 비록 실무에서 자주 쓰이는 분야는 아니지만, 개발자로서의 커리어, 특히 취업과 이직을 위해서는 필수적으로 요구되는 지식인 만큼 주기적으로 연습을 해둘 필요가 있다. 당장 취업을 해야 하는 상황이 아닐지라도, 연차가 쌓일수록 동료들의 채용과 면접 과정에 참여하게 되는 경우도 생기기 때문에 코딩테스트 준비는 해놔서 나쁠 게 없다고 판단했다. 약점이기만 했던 알고리즘을 보완하기 위해 좋은 기회로 JavaScript 알고리즘 & 자료구조 마스..

바닐라 자바스크립트로 웹 애플리케이션을 만드는 고된 과정 속에는 DOM 조작이 필수적으로 들어간다. 그런데 이 DOM 조작은 때로는 안티 패턴(Anti-Pattern)으로 인식되기도 한다. 이번에는 DOM을 조작하는 Web API에는 주로 어떤 것들이 있고, 어떻게 하면 DOM을 조작하는 과정을 최적화할 수 있을지에 대해 알아보려고 한다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 HTML로 된 문서에는 웹페이지의 설계도가 그려져 있는데, 이 구체적인 구조를 웹페이지에 접속할 때 HTML이라는 형식을 통해 브라우저에 전달하게 된다. 그러면 브라우저는 이 형식을 보고, 그 안의 HTML..

문제 출처: https://programmers.co.kr/learn/courses/30/lessons/12909 코딩테스트 연습 - 올바른 괄호 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 programmers.co.kr 괄호가 바르게 짝지어져있는지를 반환하는 함수를 만들어보았다. 마치 텍스트 에디터를 만드는 듯한 재미있는 문제였다. ‘(’ 괄호가 나오면 배열에 괄호를 추가하고, ‘)’ 괄호가 나오면 닫아줄 괄호가 있는지 확인한 뒤, 닫아서 없애고자 하였다. 자바스크립트 배열의 push(), pop() 메서드를 통해 스택 ..

현대 브라우저가 웹 사이트 렌더링을 수행하는 방법에는 크게 두 가지가 있다. 바로 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이다. 오늘은 이중 SPA에서 사용되는 클라이언트 사이드 렌더링에 대해 알아보고자 한다. 클라이언트 사이드 렌더링이란? 클라이언트 사이드 랜더링(CSR)은 웹사이트가 클라이언트에서 렌더링되는 것을 말한다. 여기서 말하는 클라이언트는 바로 브라우저다. 즉, 브라우저에서 렌더링을 수행하는 것이다. 이 과정은 다음과 같다. 1. 서버에서 index라는 단순한 구조의 HTML 파일을 클라이언트에 보내준다. 일반적인 구조의 SPA에서는 다음과 같은 HTML을 사용하게 되는데, 태그 안에 자바스크립트 링크가 담긴 2. HTML에 링크된 Javascript 파일(ex. ap..

switch문은 C언어 등에서 사용하는 제어문 중의 하나로, 분기 명령에 속한다. 내가 자주 사용하는 javascript에서도 switch 문법을 지원한다. 같은 변수를 비교하는 경우, if - else if 로 중첩된 조건문보다 switch문을 더 선호하는 편이다. 비교 상황을 직관적으로 잘 설명해주기도 하고, 무엇보다도 indent 구조가 더 깔끔해보이기 때문이다. 그런데 switch문을 쓰면서 항상 궁금했던 것이 있다. 왜 case마다 break를 굳이 사용해서 다른 case로 넘어가는 것을 막아줘야 할까? if문과 어떻게 다르게 동작하길래 break를 해주지 않으면 다음 case로 넘어가서 나머지 코드블럭이 전부 실행되는 것일까? 사실 Javascript 뿐만 아니라 switch 제어 문법을 가지..