프론트 개발 블로그

Task Runner인 Gulp 설치 시, npx의 버전을 확인하라는 글을 보고 알아보게 되었습니다. 기존 React(create-react-app) 사용 시에도 npx로 설치하라는 예시를 종종 본 적도 있기에 정리해봅니다. npx란? npx는 npm과 다른 것입니다! npx는 npm5.2버전부터 추가된 도구로 npm 레지스트리의 패키지 사용 경험을 파악하기 위해 생겨났습니다. npx는 1회성으로 최신 버전의 노드 패키지를 설치시켜주는 노드 패키지입니다. 글로벌에서 설치된 패키지의 경우 1) 자주 사용되지 않을 경우에 무거운 패키지로 로컬 스토리지에 남음. 2) 새로운 버전이 나왔을 때마다 기존 패키지를 삭제 후 재 설치 해줘야 하는 번거로움 의 단점이 있습니다. 이를 보완하여 최근 npm으로 설치되는 ..

기본 Gulp 셋팅 #1. Check For Node, npm, and npx node, npm, npx 버전을 확인합니다. 설치가 되어 있지 않다면, 위의 해당 플랫폼과 패키지 관리자를 설치해줍니다. $ node --version $ npm --version $ npx --version #2. gulp-cli 유틸리티 설치 gulp-cli은 Gulp를 콘솔에서 편리하게 실행할 수 있게 해주는 유틸리티 도구입니다. $ npm install --global gulp-cli #3. 프로젝트 디렉토리 생성 후 해당 디렉토리로 이동 $ npx mkdirp my-project $ cd my-project #4. 프로젝트 디렉토리에 package.json 생성 $ npm init #5. gulp package 설치..

IE10+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Style Code */ } Edge @supports (-ms-ime-align:auto) { /* CSS code */ } IE10 이하는 버린다. 참고 https://unto.kr/blog/coding-info/only-ie-css/

This automated pull request fixes a security vulnerability (moderate severity). Github에서 보안취약점 알림 메일이 왔습니다. 메일 하단에 어떤 dependency가 문제인지 적혀있어 package.json 파일과 버전을 대조 후에 해당 dependency를 update 해주었습니다. npm install acorn 해당 메일에는 acorn의 버전이 문제 였음으로 acorn 을 업데이트 해주었습니다. 업데이트가 끝나면 dependabot[bot] 에서 아래와 같은 확인 메일이 옵니다. Looks like acorn is up-to-date now, so this is no longer needed. 위와 비슷한 보안취약점 메일로 또 아래와..

Props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props 라고 한다. props 란? attribute 와 properties 차이 props로 name, color 값 가져오기 props 값을 구조분해할당으로 가져오기 defaultProps children 조건부렌더링 props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props(property)라고 한다. * props는 객체의 형태로 parameter 를 가져온다. attribute 와 propertices 의 차이 Attribute는 HTML문서에서 elements에 추가적인 정보를 넣을 때는 요소이고, Prope..

JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의합니다. JSX란? JSX 기본규칙 1. JSX에 표현식 포함하기 2. 두 개 이상 태그는 하나의 태그로 감싸기 self closing tag Fragment 사용방법 3. Style 설정 방법 4. Class 설정 방법 5. JSX 주석처리 6. return();은 가독성을 위해서 사용한다. 7. 컴포넌트는 네이밍은 항상 대문자로 JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의한다. Bebel은 JSX문법을 React.createElement()로 호출한다. JSX문법이 자바스크립트로 변환되는 것을 확인할 수 있다. JSX 기본규칙 1. JSX에 표현식 포함하기 JSX를 if, for loop 안에 사용하고..

Facebook 이 만든 자바스크립트 라이브러리로, 사용자 인터페이스를 만들 때 사용한다. 왜? React인가? React 작업환경 구성 React 테스트 환경 구성 중 [Yarn start not found] 에러 발생 VSCode 터미널 권한 정책 문제 왜? React인가? 기존에는 Javascript를 사용하여 DOM을 변형하는 방식으로 사용자 인터페이스를 구현했다. 허나 이렇게 DOM을 직접적으로 건드리면 코드가 복잡해진다. 그래서 Ember, Backbone, AngularJS의 경우엔 자바스크립트의 특정 값이 바뀌면 특정 DOM의 값이 변경되어 업데이트하는 방법으로 간소화시켰다. React의 경우에는 상태가 바뀌었을 때 모든 것을 새로 만들어서 보여준다. 가상의 DOM(Virtual DOM)을..

동기적처리(Synchronous) 비동기처리의 이해 callback 함수 Promise Promise (resolve, reject, then, catch) Promise 단점 async / await 동기적 처리 (Synchronous) 동기적처리는 작업이 끝날때까지 실행되지 않고 기다리다가 끝나면 순차적으로 실행된다. (1코드가 끝나면, 2코드가 실행되고, 2코드가 끝나면 3코드가 실행되는...) 비동기적처리 (Asynchronous) 동시에 여러가지 코드가 실행될 수 있고, 기다리는 과정에서 다른 함수를 호출 할 수도 있다. (1코드, 2코드, 3코드가 동시에 실행되는...) 비동기처리가 필요할 때 - Ajax 요청을 해야 할 때 - 서버쪽에 파일을 읽을 떄 - 암호화/복호화 작업을 할 때 - 작업..

scope hoisting scope scope 는 변수 혹은 함수를 선언할 때 어디서부터 어디까지 유효한지 보는 범위이다. scope 는 global scope(전역 스코프), function scope(함수 스코프), block scope(블록 스코프) 범위로 나뉠 수 있다. global scope : 전역, 코드의 모든 범위에서 사용 가능 function scope : 특정 함수 코드 내에서 사용 가능 block scope : if, for, switch문 등에서 { } 중괄호로 감싸진 내부 안에서만 사용 가능하다. * const, let 선언에서만 가능 * const, let 선언을 사용했을 때와 var 선언 했을 때의 유효범위가 다르다! const, let 선언은 block scope 내에서, ..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식입니다. 구조 분해 할당 표현식 spread 연산자 rest 파라미터 비구조할당(구조분해 할당) 표현식 배열에서의 구조분해할당 표현식 1 2 3 4 5 6 // 기본 변수 할당 var foo = ['one', 'two', 'three']; var [one, two, three] = foo; console.log(one); // 'one' console.log(two); // 'two' console.log(three); // 'three' 선언에서 분리한 할당 1 2 3 4 5 var c, d; [c, d] = [1, 2]; console.log(c); // 1 console.log(d); // 2 기본..