Web (총 32개) 썸네일형 리스트형 Javascript - ES6 (` : 템플릿 리터럴) 문자열에 변수 포함시키기 1. 템플릿 리터럴이란 (`) 이번 포스팅에서는 ES6에서 추가된 템플릿 리터럴에 대해 알아보겠습니다. 1. 템플릿 리터럴이란? (`) 우선 템플릿 리터럴에 이용되는 특수문자는 ` 로써, 키보드 숫자 1 왼쪽에 있는 특수문자(~) 입니다. 주로 백틱(backtick)이라고 불릐웁니다. 이는 문자열에, 변수를 추가해 사용할 때 사용되며, 아주 편리한 기능입니다. 2. 템플릿 리터럴이 없었을 때xxxxxxxxxxlet a = 1;let b = 2;console.log("a + b = " + (a+b));템플릿 리터럴이 없었던 때에, console에 변수를 이용해 무언가를 출력하는 경우, 위와 같이 사용을 했었습니다. 간단히 설명드리면, 문자열의 경우 ''(싱글쿼테이션) 또는 ""(더블쿼테이션)을 이용해 묶.. Web - HTTP 커넥션 관리(성능 향상을 위한) TCP 성능에 대한 고려 HTTP 커넥션 관리 (성능 향상을 위한)TCP 성능에 대한 고려https://galid1.tistory.com/618HTTP 프로토콜의 경우 TCP프로토콜 상위에서 동작하기 때문에, TCP 성능에 영향을 받을 수 밖에 없습니다. 따라서 고성능의 HTTP 어플리케이션을 구축하고자 하는 분은 위의 링크로 이동하여 TCP 성능에 영향을 미치는 요소를 파악하시기 바랍니다. 1. HTTP 성능에 영향을 미치는 요인DNS 이름분석 시간클라이언트는 URI에서 웹서버의 IP 주소와 Port 번호를 알아내야 합니다. 최근에 방문한 적이 있어 DNS 캐시에 남아있지 않는 이상, DNS 서비스를 통해 Domain을 IP주소로 변환해야 합니다. 커넥션 연결 시간클라이언트와 서버간에 HTTP 프로토콜.. javascript - 동기, 비동기 처리과정과 event loop JavaScript 비동기함수의 이해 Philip Roberts의 What the heck is the event loop anyway? 발표 영상을 보고 정리하는 포스팅입니다. 다음의 링크로 이동하시면 보실 수 있습니다. https://www.youtube.com/watch?v=8aGhZQkoFbQ 그림출처 - PhilipRobertsJavaScript의 동작 과정의 최종그림입니다. 천천히 하나하나 알아보도록 하겠습니다. 1. 동기1.1. 싱글스레드?다들 잘 아시다시피, JavaScript는 싱글스레드 프로그래밍언어로 하나의 싱글스레드로 동작을 합니다. 즉, 한순간에 하나의 로직만을 처리해 나아갈 수 있다는 의미 입니다. 1.2. Call Stack이제 맨 처음 본 그림에서 CallStack에 대해 알.. CSS - CSS를 이용한 html 엘리먼트 위치변경(display, position, float,clear) 1. display css를 이용하여 html의 요소들을 배치하는 방법에 대해 알아보도록 하겠습니다. css 속성들중 html의 요소의 배치, 위치에 영향을 주는 속성은 크게 3가지가 존재합니다. display, position, float입니다. 각각에 대해 알아보겠습니다. 1. displaydisplay가 가질 수 있는 값은 다시 크게 세가지로 나뉩니다. block, inline, inline-block이 그것입니다. 사실 display라는 속성은 기본적으로 html 태그들이 가지고 있는 속성입니다. 각각의 태그들에 따라 가지고 있는 값들이 다른데요, 각각의 값들을 설명드리면서 다시 말씀드리겠습니다. 1.1 blockblock값은 마치 block을 쌓듯이 위에서 아래로 쌓인다고 해서 block 입니다.. CSS -CSS의 선택자 CSS 선택자 x my text is upper! my text is dummy export fore fugiat sint fugiat fore quid tamen nulla velit anim elit quid legam quis irure veniam ipsum quae legam sint esse veniam eram quae sunt export noster quem sint esse quis summis anim dolore fugiat quae ipsum aute multos irure export esse velit culpa nulla sint sunt duis nisi quem fugiat veniam tamen magna elit fugiat nulla dolor legam nisi n.. javascript - 정규표현식 이란? 1. 정규 표현식이란 1. 정규 표현식이란?정규표현식이란 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 검색, 치환, 등 의 작업을 간편하게처리 할 수 있도록 도와주는 수단입니다. (정규 표현식은 특정 언어에 종속되는 의미가 아닙니다.) 어디에 쓰일까 고민해보았을때, 많은 부분에서 사용이 가능하겠지만, 회원가입시, 이메일 형식을 파악할때에도 사용이 가능할 것 같습니다. 서버에서도 검증을 통해 처리가 가능하겠지만, 어차피 사용자가 잘못된 이메일을 입력하여 회원가입 불가능 처리를 하도록 할것이라면, 굳이 서버의 자원을 사용하기 보단 javascript에서 정규표현식을 통해 이메일 형식인지를 확인하도록하여 클라이언트의 자원을 이용하도록 할 수 있을것 같습니다. 2. 정규표현식 패턴다음 링크로 이동하.. javascript - 변수 javascript의 변수 javascript의 변수에대해 알아보도록 하겠습니다. 1. 변수선언javascript 에서는 변수선언시 var키워드를 사용합니다. java 와는 다르게 다양한 타입을 var를 이용해 모두 담을 수 있다는 것 입니다. 예시를 보겠습니다. 정수x var a = 1; alert(a);== 결과 == 1위 코드의 실행 결과로는 대화상자에 1이란 값이 담겨 출력됩니다. 실수xxxxxxxxxx var a = 1.0; var b = 1.5; alert(a+b);== 결과 == 2.5 문자열xxxxxxxxxx var a = 'hello '; var b = 'world'; alert(a+b);== 결과 == 'hello world' Booleanxxxxxxxxxx var a = t.. javascript - atom 유용한 package(live server, javascript 자동완성) atom이용시 유용한 플러그인(package) atom이용시 유용한 플러그인(package)을 두가지 소개해드리려 합니다. 바로 atom-live-server, atom ternjs, linter , autoclose html , Highlight selected입니다. 1. atom-live-server이 package를 사용하면, 프론트엔드 작업시 결과물을 보기 위해서, 작성된 결과물인 html파일을 열어보고, 다시 수정한 뒤 열어보고.. 를 반복하며 작업을 할 필요가 없습니다. 계속해서 코드가 수정이 될때마다 페이지가 자동으로 재로딩 됩니다. 1.1 설치설치를 위해 상단의 file/settings 를 클릭합니다. install 탭 클릭 후 검색란에 atom-live-server를 입력합니다. 맨 위.. 이전 1 2 3 4 다음
