Front End (28) 썸네일형 리스트형 [JavaScript] ECMAScript 6부터 추가된 데이터 타입 - 심벌(Symbol)과 템플릿 리터럴(Template Literal) 이번 편에서는 ECMAScript 6부터 추가된 데이터 타입인 심벌(Symbol)과 템플릿 리터럴(Template Literals)을 소개합니다. 심벌은 ECMAScript 6부터 추가된 몇 가지 새로운 기능(이터레이터, Instanceof 재정의, 메서드의 다양한 확장 방법 등)을 이해하기 위해 필요한 기초 지식입니다. 템플릿 리터럴을 사용하면 복잡한 문자열 처리를 간결하게 표현할 수 있습니다. 심벌 심벌은 ECMAScript 6부터 새롭게 추가된 원시 값입니다. 심벌은 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값입니다. 심벌의 생성 심벌은 Symbol()을 사용해서 생성합니다. var sym1 = Symbol(); Symbol()은 호출할 때마다 새로운 값을 만듭니다. 이를 확인하기 위해 .. 자주 나오는 프론트엔드 개발자 취업 면접 질문 및 답변 정리-2 개발의 길은 멀고도 험하다는 걸 깨닫고 있는 요즘입니다. 백엔드로 개발 공부를 시작해 프론트엔드 개발자로 전향해 열심히 공부하고 있는데, 네트워크부터 컴퓨터 보안까지 공부할 내용은 끝도 없고 그렇기 때문에 더더욱 체계적인 정리가 필요해보입니다. 기본적으로 면접 질문들을 정리해가면서 기본 개념을 확실히 잡아보는 게 좋을꺼같아 두번째 프론트엔드 개발자를 위한 인터뷰 질문 블로그 글을 연재합니다. 1. 제너릭 프로그래밍이란 무엇인가요? 데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입들을 가질 수 있는 기술에 중점을 두어 재사용성을 높일 수 있는 프로그래밍 방식입니다. 2. 익명 함수란 무엇인가요? 익명 함수는 실행 시간 중에 동적으로 선언되는 함수입니다. 이런 함수를 익명함수라고 하는데 다른.. 자주 나오는 프론트엔드 개발자 취업 면접 질문 및 답변 정리-1 What I Learned 프론트엔드 개발자로서 이직을 하기위해 공부한 기본 상식들과 용어, 인터뷰 질문들을 몇가지 모아서 정리해보았습니다. 1. 브라우저 렌더링 과정에 대해서 상세하게 설명해주세요. 1️⃣ 브라우저 주소창에 www.google.com 을 입력합니다. 2️⃣ 해당하는 구글 서버를 찾아갑니다. 3️⃣ DNS 서버에서 도메인 네임과 매칭될 실서버(IP주소)를 찾게됩니다. (이때, https 방식을 체크합니다.) 4️⃣ 서버의 기본설정이 대부분 index.html이기 때문에 서버에 해당 파일을 클라이언트로 보냅니다. 5️⃣ 브라우저는 텍스트로 이루어진 index.html 파일을 파싱합니다. 6️⃣ 한줄씩 읽으며 DOM, CSSOM 트리를 만들어나갑니다. (Obejct Model 만들기) 7️⃣.. [JavaScript] 자바스크립트의 Promise 이해하기 들어가기전에 자바스크립트는 동기적(Synchrous)으로 코드를 실행한다. 동기적으로 처리가 된다는 것은 우리가 작성한 순서대로 처리가 되는 것이기 때문에 어떠한 작업이 끝나야 다음 작업을 진행할 수 있으므로 어떤 작업에 대해 특정 시간을 정해놓은 후 실행을 시키고 싶다면 비동기적으로 처리를 해야한다. 비동기(Asynchronous)처리를 할 때 대표적인 함수는 setTimeout()인데, 두 개의 인자를 받고 있다. 하나는 TimeHandler라는 콜백 함수와 시간을 지정해주는 timeout을 받는다. 그래서 setTimeout()은 지정한 시간이 지난 후 콜백함수를 실행시킨다. 콜백함수는 'Call Back' 준비되면 '나중에 불러줘'와 같은 의미다. 하지만 콜백함수는 비동기 처리할 때만 사용하는 것.. [JavaScript] ES6(ECMA Script 6) - 기본 매개변수(Default parameter) ECMA Script란 무엇일까 (European Computer Manufacturers Association ECMA Script는 ECMA 인터내셔널의 SCMA-262 기술 규격에 의해 정의된 그리고 표준화 된 스크립트 프로그래밍 언어이다. 넷스케이프와 MS의 협업을 통해 개발된 표준 스크립트 언어로 자바스크립트를 구성하는 요소 중 하나이다. JavaScript는 ECMAScript와 DOM(Document Obejct Model) 그리고 BOM(Browser Object Model)가 합쳐져 만들어져 있기 때문이다. 기본값 매개변수 기본값 함수 매개변수(default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름이 붙은 매개변수를 기본값으로 초기화.. [HTML] <br> 태그의 줄바꿈 JavaScript에서 다수개의 태그의 줄바꿈을 실행하고 싶다면, 다음과 같이 할 수 있다. 태그는 break의 약자이며 줄 바꿈을 하는 명령입니다. 기존 코드 기존 코드와 같이 단순히 title안의 을 ''로 replace 해버린다면, 첫번째 태그는 정상적으로 작동하지만 두번째 태그는 그대로 노출되는 것을 확인할 수 있다. 교체된 코드 스택오버플로우에서 찾은 해결책은 아래와 같은데, 따라서 다음과 같이 적용시켜주면 정상적으로 다수의 태그가 동작되는 걸 확인할 수 있다. replace multiple in javascript replace with single ? I want to replace the multiple tags with single in a text. my text like, fhgfhg.. 인터랙티브 웹 개발 제대로 시작하기-타이밍 제어하기 setTimeout, setInterval은 자바스크립트 명세서에서는 명시되어있지 않지만, 대부분의 브라우저와 Node.js를 포함한 자바스크립트 호스트 환경 대부분이 유사한 메소드와 내부 스케줄러를 제공하고 있습니다. 자바스크립트에서 일정 시간이 지난 후에 원하는 함수를 실행할 수 있도록 하는 것을 '호출 스케줄링'이라고 합니다. 이 호출 스케줄링은 setTimeout과 setInterval의 두 가지 방법으로 구현이 가능하고, 단위는 밀리초(millisecond, 1000밀리초 = 1초)입니다. 이 중 setTimeout()은 자바스크립트 함수 중에서도 자주 사용되는 타이머 함수입니다. setTimeout setTimeout((function(){ // Code here }, delay); setTi.. 사파리os 에서 window.open(url, '_blank')시 페이지 중복 오픈현상 버그수정 bug report 메인 화면에 마커 클릭시 새로운 창에서 해당 url이 나와야한다. 각 웹 브라우저(Chrome, Safari)와 모바일, 웹에서 확인결과, 사파리os 환경에서 새 창이 중복으로 '두 번' 뜨는 경우를 확인하게 되었다. 문제가 되는 코드 여기서 url은 해당되는 페이지의 주소이다. let url = 'https://sohyunsaurus.tistory.com/' if (url){ window.open(url, '_blank'); } 원하는 동작 window 인터페이스인 open() 메소드는 명시된 리소스를 열리게 한다. 위의 코드 경우라면, if문절이 true라면 새로운 창에서 'https://sohyunsaurus.tistory.com/' 을 열리게 해주는 역할을 한다. 왜 이런 문제.. 이전 1 2 3 4 다음
