Develop_NOTE

순수 자바스크립트로 체크박스 전체선택 기능을 구현하는 방법을 기재하고자 한다. 추가로, 하위체크박스를 하나씩 전부 체크했을때 자동으로 전체선택 체크박스가 활성화되고 하위체크박스 중 하나라도 체크가 풀렸을 시 자동으로 전체선택 체크박스 활성화가 되도록 하는 기능도 추가하고자 한다. const ALL_CHKBOX_EL = document.getElementById("allChkBox"); const CHKBOX_EL = document.querySelectorAll("input[name='lowerChkBox']"); //전체선택 체크박스 ALL_CHKBOX_EL.onclick = (e) => { const THIS_TARGET = e.currentTarget; CHKBOX_EL.forEach( (chkBo..

JQuery의 'index()' 메서드와 특정(active클래스) NodeList가 몇번째 index인지 조회 할 수 있는 방법이다. item1 item2 item3 item4 위의 item 이라는 li 요소들 중 active 클래스를 가진 요소의 index를 찾고자 한다. 제이쿼리 방식으로 했을때는 아래와 같이 찾았었다. $(".item.active").index() // 값은 1이 출력된다. 바닐라 JS로도 간단하게 찾을 수 있다.이땐 Array.from()과 indexOf() 메서드를 사용한다. Array.from(document.querySelectorAll(".item")).indexOf(document.querySelector(".item.active")) //출력되는 값은 1로 제이쿼리와 동..

위 이미지와 같은 텍스트를 외곽선을 css만으로도 표현이 가능하다. 방법1: -webkit-text-stroke 속성 사용.12/* 외곽선을 표현하고 싶을 때 */.text-stroke { -webkit-text-stroke: 1px #fff;}/* 내부 텍스트컬러가 비어있고 외곽선만있는 텍스트를 표현하고 싶을때 */.text-stroke { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff;}다만 위의 방법은 웹킷 및 모질라 계열의 브라우저에서 사용이 가능하다.그래도 ie가 사라진 현시점에 유용하게 사용 할 수 있을 것으로 보인다. 방법2: text-shadow 속성 사용12.text-stroke { color..

Vue Cli? Vue 프로젝트의 개발 환경을 기본적인 세팅을 모두 설정해주는 도구이다. 기본적인 프로젝트 세팅을 모두 해주기 때문에 기본 골격의 구조에 대한 걱정과 시간을 덜 수 있다. Vue Cli 설치 순서. [사용에디터 - visual studio code] Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vs코드 터미널에 'npm install -g @vue/cli'를 기입하여 vue/cli 설치 npm install -g @vue/cli 3. vs코드 터미널에 'vue create 프로젝트명' 을 기입하여 프로젝트 생성 vue create 프로젝트명 4...

'Attribute' 와 'property' 차이점 신입 프론트엔드 개발자 면접을 볼때 가장 많이 받는 질문으로 보인다. Attribute ? attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. 예를 들어, 라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my-class’ 는 class attribute의 value(값)가 됩니다. Property ? property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다. 위 내용은 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 되는 것이죠..

CDN? 'Content Delivery Network'의 약어로 CDN이라고 불리우며 지리적 제약없이 전세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미 CDN은 서버와 사용자간의 물리적인 거리를 줄여 로딩에 소요되는 시간을 최소화 함 CDN은 각 지역에 캐시서버를 분산배치해 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전송 CDN의 장점 병목현상 해결 데이터를 항상 빠르고 안정적으로 전송 할 수 있다. SP에 장애가 발생해도 다른 ISP에 있는 캐시 서버에서 데이터를 전송하므로 전송 중단이 발생하지 않는다. 트래픽 절약 CDN을 쓰면 트래픽이 줄어들기 때문에 서버 유지 비용도 저절로 감소한다. 원리는 caching과 비슷 CDN의 단점 특정국가나 지역..

프레임워크와 라이브러리의 차이점 둘의 가장 큰 차이점은 '제어 흐름의 권한'이 어디에 있냐 라는 것. 라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 한다. 개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야한다. 반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다. 애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다. 프레임워크와 라이브러리 정의 프레임워크(Framework) - 원하는 기능 구현에 집중하여 개발 할 수 있도록 이정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미...

Bitnami가 깔려있는 폴더로 접속 후 'php' 폴더에 접속 → php 파일을 메모장으로 열어준다. 메모장으로 열었다면 'ctrl + f' 를 눌러 '찾기'창을 띄운 다음 'opcache.enable' 를 검색 찾다보면 opcache.enable=1 로 설정되어있는 구간이 있는데 opcache.enable=0 으로 바꿔준다. 이후 로컬환경에서 새로고침 해보면 실시간으로 빠르게 반영되는 것을 확인 할 수 있다.

remote 저장소? 인터넷,네트워크에 위치한 저장소 git remote? git 원격 저장소를 관리하는 명령어 새로운 저장소를 추가하거나 수정 및 변경이 가능 git remote 사용법 github에서 원격 저장소 생성 후 연동 시킬때. 아래처럼 깃허브에서 원격 저장소 생성. 소스코드가 있는 폴더 안에 git bash를 실행 소스코드를 git으로 관리 해주기 위해 초기화 명령어 'git init' 명령어를 기입 'git remote add origin [원격저장소 만들때 생성된 HTTPS url]' 를 사용하여 github 원격 저장소와 연동 'git remote --v' 를 입력하여 원격저장소 url과 동일하게 연동이 정상적으로 되어있는지 확인 여기까지 되었다면 github에서 생성한 원격저장소에 소..

1.선언 SCSS는 JS와 마찬가지로 반복적으로 사용되는 값을 변수로 지정하여 사용 할 수 있다. 예를 들면 자주 사용되는 컬러,폰트 굵기를 변수로 선언해 놓으면 추후 유지보수 및 수정시 하나하나 찾을 필요 없이 일괄적으로 수정이 가능하다. JS에선 변수를 선언할때 var, let, const 키워드를 사용하는데 SCSS에서는 변수로 사용할 이름 앞에 '$' 를 붙인다. SCSS 변수 선언 방식 /* color */ $black: #000; $white: #fff; $grey_ea: #eaeaea; $grey_99: #999; $red: #ff0000; 2. 유효범위 2-1. 지역변수 SCSS변수의 기본적으로 유효범위는 변수가 선언된 블록'{}'내에서만 사용이 가능하다. 그렇기 때문에 작업시 변수를 선언..