이론/Frontend74 호이스팅 (Hoisting) 알아보기 얼마 전 프론트엔드 개발자분들이 모여 계신 커뮤니티에 호이스팅(Hoisting)에 관한 이야기가 나온 적이 있었습니다. 선언과 할당에 관련된 용어인것은 알았지만, 정확한 의미에 대해서는 몰랐기 때문에 이번 기회에 찾아보게 되었습니다. 이번 포스팅에서는 검색을 통해 알게 된 내용을 정리하고, 간단하게나마 확인해보겠습니다. 호이스팅이란? 호이스팅의 정의는 자바스크립트에서 함수나 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 다만 실제로 끌어 올려지는 것은 아니고, 마치 그런 것처럼 보이는 현상인데요. 이게 어떤 의미인지 코드를 통해서 확인해보겠습니다. var fruit = "apple"; function change() { console.log("fruit is : " + fruit);.. 2020. 9. 9. CSS 적용 우선순위 몇 달 전부터 그날그날 공부하거나 코딩했던 내용들을 짧게 정리하고 있습니다. 학교 선배님들과 공유하며 하루를 돌아보는 시간을 가질 수 있어 참 좋다고 생각했었는데, 그러던 차에 선배님의 권유로 CSS에 대해 자세히 알아보는 시간을 가져보면 좋을 것 같다고 하던 차에 여유가 생겨 이번 기회에 정리해보려고 합니다. !important 가장 먼저 적용되는 속성은 !important 가 붙어있는 속성입니다. !important 가 붙게되면 다른 우선순위를 무시하고, 이 속성이 적용되게 됩니다. .context--name { color: #32ff33 !important; } 겹치는 두 가지 스타일을 동시에 적용하고, 한쪽에만 !important 를 적용시켜주겠습니다. title 클래스의 검은색은 취소선과 함께 .. 2020. 9. 8. 싱글 쓰레드 Javascript의 비동기적 동작 이 글은 JSConf EU 2014에서 발표 된 Philip Roberts의 What the heck is the event loop anyway? 의 내용을 듣고 정리한 글입니다. 동기와 비동기는 프로그래밍을 하는 사람이라면 한 번쯤은 들어봤을법한 단어들입니다. 간단히 말하면 동기는 태스크(task)를 순차적으로 실행하는 것 이고, 비동기는 병렬적으로 처리하는 것 입니다. 이러한 동기의 가장 큰 문제점이 바로 하나의 태스크가 완료되기 전까진 다른 일을 수행할 수 없고, 끝날때까지 기다려야 한다는 점입니다. 우리가 사용하는 모든 프로그램이 동기적인 동작밖에 취할 수 없다면 큰 문제가 발생하겠죠. 이는 웹에서도 마찬가지입니다. 우리는 웹에서 수 많은 동작들을 실행합니다. 이곳저곳에서 데이터들을 받아오고, .. 2020. 9. 7. React에서 PC/모바일 각각 라우팅하기 반응형 웹 디자인을 사용하면 접속하는 기기의 사이즈에 따라 페이지의 크기를 유동적으로 구성할 수 있다. 하지만 필요에 따라 모바일과 PC에서 아예 다른 화면을 보여줘야할 때가 있는데, 이럴 때 사용할 수 있는 방법이다. npm을 이용해 react-device-detect 패키지를 설치하고, npm install react-device-detect --save App.js에 공식 페이지에서 안내하는 용법에 따라 코드를 입력해준다. import { BrowserView, MobileView, isBrowser, isMobile } from "react-device-detect"; function App() { return ( This is rendered only in browser This is rende.. 2020. 7. 16. React에서의 proptypes validation React의 React.PropTypes가 15.5 버젼 이후로 deprecate 되면서, proptypes validation을 위해서는 라이브러리를 따로 불러와야 할 필요가 생겼다. 기존의 React.PropTypes의 경우 다음과 같이 사용했다. static propTypes = { value: React.PropTypes.string } 그러나 지금 버젼의 리액트에서 이렇게 사용하면, 콘솔창에 아래와 같은 오류메시지가 뜨며 prop-types 라는 npm 모듈을 사용할 것을 권장한다. React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated 따로 분리된 propt.. 2020. 7. 2. React 프로젝트 gh-pages 배포시 git-upload-pack: command not found 오류 지난번에 올렸던 포트폴리오 사이트를 만들며에서 제작했던 포트폴리오 페이지를 그동안 Github에 소스코드로만 업로드했었는데, 이참에 바로 확인해 볼 수 있도록 깃 페이지에 올리기로 했다. 구글링하며 찾은 방법대로 gh-pages 를 npm 명령어로 설치하고, npm install gh-pages --save-dev package.json에 필요한 정보들을 추가해주고, // ... "homepage": "https://kyr9389.github.io/portfolio", // ... "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" // ... } 아래 명령으로 배포를 시작했다. npm run deploy esli.. 2020. 6. 26. 이전 1 ··· 9 10 11 12 13 다음
