Duknock의 개발새발

자바스크립트에서 동적으로 html 요소를 생성하는 방법으로 document.createElement() 메서드가 있다. let newDiv = document.createElement('div'); console.log(newDiv); // 근데 여기에 클래스도 추가하고 id도 추가하고 input을 생성했으면 value도 추가하고 여러 옵션들을 달아줘야 하는데 이걸 다 수작업으로 추가해주면 코드가 아주 더러워진다. name 과 id가 myInput이고 class가 myClass, value가 '더러워' 인 input 요소를 만들어서 div 안에 집어넣는 코드를 예시로 한번 짜보자. let newInput = document.createElement('input'); newInput.setAttribute..

정규식 혹은 정규 표현식 (Regular Expression) 은 특정한 규칙을 가진 문자열을 표현하는 데 사용하는 형식 언어이다. 자바스크립트에서만 사용하는 것은 아니고 수많은 프로그래밍 언어, 심지어 텍스트 편집기 등에서도 널리 사용하는 기능이다. 참고로 자바스크립트에서 정규식은 문자열이 아니라 객체다. 문자열을 따옴표(")로 감싸는것 처럼, 정규식은 슬래시(/)로 표현한다. 어떻게 생겨먹은건지 대충 보여주자면 /[a-z]/g 뭔가 엑셀 함수식 처럼 생겼다 이렇게 쓰면 123abc가나다ABC@#$ 이렇게 a 부터 z 까지의 문자에 속하는 놈들이 선택된다. (대문자는 선택이 안됨. 따로 조건 하나 더 설정해줘야됨.) 정규식을 사용하면 문자열에서 원하는 글자를 추출할때나 유효성 검사등을 할때 아주아주 유..

라이브러리와 프레임워크의 차이를 지금 구글링 하지말고 설명해보라고 하면 자세히 설명할 수 있는가? 꽤나 기초적인 질문이지만, 막상 설명하려고 하면 어렵다. 본인 또한 라이브러리와 프레임워크의 차이를 지금 당장 얘기하라고 하면 아래와 같이 얘기할 것 같다. 프레임워크는 뭔가 환경 같은거고....라이브러리는 원하는 기능 갖다쓸수있는 그런거....아닌가? 어정쩡하게 말하니까 개바보가 된 기분 나중에 만약 면접 볼때 해당 질문이 나왔는데 이딴식으로 대답한다면, 그대로 뒤돌아서 면접장 문 열고 나가면 된다. 맨날 개발할 때 라이브러리와 프레임워크를 사용하면서 이 두가지의 차이를 잘 설명할 수 없다고 생각이 드니, 안 찾아볼 수 가 없었다. A : 대표적인 자바스크립트 프레임워크로는 React, Vue, Angul..

1편을 안보신 분은 이거부터... SCSS(Sass 상위 호환) 사용하기 Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다. SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언. duknock.tistory.com 1편에 이어서 2편에서는 SCSS의 다양한 기능을 알아보려고 한다. mixin, extend 등 편한(?) 기능들이 있으니 한번 보자. 믹스인(mixin)과 include @mixin은 함수 비스무리한거다. 반복적으로 사용할 CSS 문을 그룹으로 묶어서 하나로 정의해놓은거 라고 보면된다. (함수 선언식이랑 비슷함) @include 는 @mixin과 함께..

Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다. SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언어이다. (Sassy CSS : 개쩌는 CSS) 그래서 얘네가 하는 역할이 뭐냐 얘네는 CSS Preprocessor, 즉, CSS 전처리기이다. CSS를 더 편하게 만들 수 있도록 도와주는 컴파일 언어인것이다. Sass(SCSS) 언어로 스타일시트를 작성하여 컴파일하면 CSS 파일이 생성된다. /*SCSS*/ div{ width : 100%; height : 500px; ul{ padding : 10px; li{ width : 100px; height : 100..

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부이다. HTTP(HyperText Transfer Protocol) 란, HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다 프로토콜이란, 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다. -MDN Web Docs 그냥 설명하려다 보니 개발에 ..

querySelector() 는 자바스크립트에서 DOM 요소를 선택할 때 수도 없이 사용하는 선택자이다. 지금 당장 자신이 짠 js파일에 ctrl+f를 누르고 querySelector() 를 검색해보면 일치하는 결과가 수십개씩 나올것이다. 이번 포스팅에서는 이 querySelector() 에 대해서 간단히 알아보겠다. querySelector() 는 괄호안에 인자로 넣은 값과 일치하는 요소를 찾아서 반환한다. 일치하는 요소가 없으면 null을 반환한다. 괄호안에는 String(문자열) 형만 넣을 수 있고, 유효한 CSS 선택자를 넣어야한다. document.querySelector({name: "duknock"}) // 이딴식으로 이상한거 넣으면 당연히 안된다. 또한 인자로 넣은값과 일치하는 요소가 여러..

전에 포스팅했던 Promise 를 더 쉽게 사용할 수 있게 해주는 문법인 async와 await에 대해서 알아보자. async와 await은 처음엔 낯설지만 익숙해지면 굉장히 쉬운 문법이다. async async는 function 앞에 붙여서 사용한다. async function hello(){ return "Hello World!"; } hello(); //Promise {: 'Hello World!'} function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다. 명시적으로 Promise를 return값으로 주지 않아도, return 값을 Promise(이행된 프로미스)로 감싸서 반환한다. 그리고 async가 붙은 function은 내부에 await 문법을 사용할 수 있다. a..

자바스크립트의 비동기요청을 처리하는 방법에 Promise 라는것이 있다. Promise는 단어 뜻 그대로, "비동기 요청이 완료될 경우 어떠한 일을 이행하겠다." 를 약속한다. 한번 아래 코드를 보자. let promise = new Promise(function(resolve, reject) { //비동기 요청 처리하는 곳 }); Promise는 new 메서드로 생성하는 객체다. 위 코드의 new Promise 에게 함수가 전달되는것을 볼 수 있는데, 이 함수를 executor(실행 함수)라고 한다. 단어가 어려워 보이지만 그냥 Promise 객체가 만들어질때 자동으로 실행되는 함수이다. 이 executor 안에 처리할 로직(보통 비동기 요청 넣겠지?)이 들어가면 된다. 그리고 executor에게 주어..

Visual Studio Code에는 수많은 플러그인을 추가할 수 있는데 프론트엔드 개발(주로 자바스크립트)할때 도움이 될 만한 플러그인들을 추천해보고자 한다. 내가 쓰는것들 위주로 작성하였고 나는 개발언어로 자바스크립트를 사용하기 때문에 다른언어 쓰시는 분들은 다른글을 참고하시길... 1. Prettier (보기 좋은 코드가 유지보수하기도 쉽다!) 이름부터 알 수 있듯이, 코드를 예쁘게 정렬해주는 플러그인이다. 원래는 beautify를 썼는데 deprecate 되어서... 설치하면 기본적으로 여러언어들을 자동으로 인식해서 저장할때 예쁘게 정렬해준다. 수동으로 정렬하려면 ctrl + a 로 전체 선택을 한 후, ctrl + k + f 를 누르면 정렬된다. 만약 단축키가 안먹는다면 설정에서 확인! 2. L..