본문 바로가기

분류 전체보기

 (86)
2020년도 프론트엔드 로드맵 https://github.com/devJang/developer-roadmap/blob/master/pdf/frontend.pdf
정규표현식 RegExp 정규표현식Regular Expression은 문자열에서 사용되는 특정 문자들의 조합을 불러오기 위한 도구다. 자바스크립트에서 정규표현식은 객체다.(휴..) 정규표현식을 만드는 방법에는 두 가지가 있는데, 하나는 var reg = /ab/; 정규식 리터럴 (슬래쉬로 감싸는 패턴)과 var reg = new RegExp("ab"); RegExp 객체의 생성자 함수를 호출하는 방법이다. 정규식 리터럴 방식을 만들기 위해서는 여러가지 옵션을 숙지해야 한다.. (이거 다 외움..?) i : 대소문자 구분없이 불러온다. g : 모든 결과를 불러온다. ^ : 문자의 시작을 알린다. (단, 문자셋 [^abc] 첫글자로 쓰이면 '반대'의 의미를 가진다) 문자$ : 문자의 종료를 알린다. 문자* : 0회 이상 연속 반복되..
프론트엔드 로드맵 28 - CSS 전처리기 SASS CSS 전처리기 (CSS Preprocessor)에는 Sass, Less 등이 있다. 전처리기는 말그대로 CSS가 실행되기 이전에 사용하는 기능을 말한다. 전처리기는 CSS 작성의 단점을 보완한 것이기 때문에 가독성이 높고 코드 재사용에 유리하다. 우선 전처리기로 작성한 뒤 CSS로 컴파일한다. 전처리기에서 작성한 것은 웹에서 작동하지 않기 때문에 css파일로의 컴파일이 필요하다. SASS는 {} braces와 ; 세미콜론을 사용하지 않는다. 네스팅이라고 하는데 .contents 자식 요소들은 그 아래로 붙여서 나열한다. .contents width: 100px height: 200px ul color: red li padding: 10px &:last-child padding-left: 20px 변수를..
자바스크립트 뒤로가기 감지 이벤트 실행 로그인 코드를 짜다가 비밀번호가 맞지 않을 경우 뒤로가기가 실행되게 함 (다른 페이지에서 유효성 검사후 실패시 뒤로가게 설정) 기존에 짠 자바스크립트 이벤트 함수들은 평소에 실행이 되다가 뒤로가기 실행으로 다시 돌아왔을 때는 window.onload로는 먹히지 않음. 뒤로가기를 어떻게 감지하나 찾아봤다. pageshow/pagehide 이벤트로 실행시키면 된다. window.pageshow
익스에서 :before, :after 영역 밖으로 이동 시 hidden 처리되는 경우 크롬에서 실컷 테스트하다가 익스에서 크로스 브라우징을 하다보면 봉변을 당하기 십상이다. button에 캐럿 기호를 만들어 말주머니처럼 꾸몄는데, 이 캐럿을 :before 가상 선택자로 생성하면서 새로운 봉변을 당했다. 인사말 역대 회장 /* CSS */ .tab_btn {position: relative; display: inline-block; height: 40px; line-height: 40px; padding: 0px 20px; background: #272343; margin: 0 5px; color: #fff;} .tab_now:before {content: ""; position: absolute; bottom: -10px; right: 35%; display: inline-block; b..
두 줄 이상 텍스트 세로 중앙 정렬하는 방법 한 줄 짜리 간단한 텍스트는 line-height이나 padding 값 등등으로 중앙 정렬을 얼추 맞출 수 있다. 안녕하세요 텍스트가 2줄 이상이 되면 어떨까. line-height 를 적용하면 참변을 당한다. padding이나 margin으로 얼추 맞추는 것도 가능하겠지만, 길이가 서로 다른 여러개의 텍스트 박스를 정렬해야할 경우엔 맞추기가 어렵다. 일일이 하나하나 패딩값을 주기도 어려움. 이럴때 사용하는 세로 중앙 정렬 방법들을 소개한다. 1. position으로 50%, 50% 정렬 후 transform 하기 position으로 top과 left를 각각 50%로 적용하면 텍스트의 시작점이 중간으로 온다. 텍스트 길이에서 반 만큼 땡겨와야 정확히 중간 지점을 찾을 수 있다. HTML 삽입 미리보기할 ..
프론트엔드 로드맵 27 - CSS 구조 방법론 BEM(Block Element Modifier) BEM(Block Element Modifier)은 CSS구조를 개선시키기 위한 방법론(convention)을 말한다. 클래스 이름을 짓는 것에 대한 방법을 제시하며 ID에는 사용이 불가하다(오로지 클래스명에만). BEM 방법론의 이점으로는 보다 쉽게 네이밍을 할 수 있다. 클래스명을 여러번 반복해 재사용하고 HTML과 CSS의 코딩 구조가 일관되도록 한다. 유지/보수가 쉽고 보다 유연한 코드를 만든다. BLOCK 블록 한 페이지 안에 구현되는 요소들을 영역으로 구분짓고 이에 따른 이름을 붙인다. 각 페이지마다 재사용할 수 있으면서 자체적으로 의미가 부여되어 있다. 블럭은 클래스명의 가장 처음 자리에 온다. ex) header, container, menu, input, button 등 ELEMENT 요..
프론트엔드 로드맵 26 - 패키지 매니저 yarn yarn은 npm과 동일한 자바스크립트의 패키지 매니저다. 기존에 사용하던 npm의 단점을 보안하기 위해 페이스북, 구글 등의 엔지니어들이 협력해 만든 것이다. 보다 빠르고 안정적이며 보안성이 뛰어나다고 주장하고 있다. yarn 설치하기. npm이 깔려있다면 npm을 통해 설치할 수 있다. npm install --global yarn 의존성 모듈 yarn add [package-name]@[version-or-tag] [option] 패키지 업그레이드 $ yarn upgrade [package]@[version] 패키지 제거 $ yarn remove [package] 이외에는 공식 사이트를 참조하면 되겠다. 참고 사이트 : https://www.vobour.com/yarn-%EC%B2%98%EC%9D%..
프론트엔드 로드맵 25 - 패키지 매니저 npm이란? 소프트웨어를 만들 때 다른 사람이 만든 모듈을 이용하는데, 이 때 사용하는 모듈이 많아지면 복잡한 문제가 발생한다. 패키지 매니저는 이러한 모듈들을 관리하는 도구다. 자바스크립트에서 필요한 패키지 관리자 툴에는 npm, yarn, brew가 대표적인 세 가지다. 이들 중 npm 개념을 이해하고 넘어가보자. npm (Node Packaged Manager)은 Node.js에서 주로 사용하는 패키지 관리자 툴이다. node.js를 설치하면서 npm을 같이 설치하면 된다. $ npm -v node.js 애플리케이션이 예상치 못한 오류로 종료되는 경우를 고려해 무중단 상태로 운영을 돕는 프로세스 매니저 PM2라는 것이 있다. PM2는 npm으로 설치가 가능하다. pm2를 설치한다. $ npm install pm..
프론트엔드 로드맵 24 - 웹보안지식 : HTTPS/CORS/컨텐츠 보안 정책/OWASP 보안 취약점 HTTP(HyperText Transfer Protocol, 웹 서버와 클라이언트 컴퓨터 사이에 웹 브라우저에 문서를 불러오기 위한 통신 규약)는 정보를 텍스트로 주고 받는다. 단순 텍스트이기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. 이 취약점을 보안하기 위해 나온 프로토콜이 HTTPS다. HTTP에 S(Secure Socket)가 추가된 것이다. 기본 틀은 HTTP와 거의 동일하나 데이터 주고 받는 과정에서 '보안'요소가 추가됐다. HTTPS는 웹 서버에 접속하는 클라이언트에게 모두 다른 암호를 제공한다. 또 서버와 클라이언트가 2개의 키를 서로 암호화한다. 한 키는 공개키 저장소에 등록해 사용하고, 나머지는 개인키로 이용해 통신한다. 클라이언트는 ..

티스토리툴바