FE

[JS] 스크롤 프로그레스 바 만들기

완성본 HTML CSS body { margin: 0; padding: 0; height: 1000px; /* 스크롤을 위해 임시로 추가 */ } .progressWrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } .bar { width: 0%; height: inherit; position: absolute; z-index: 100; background-color: #a9c4ff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: width 300ms; } JS const progressBar = docum..

[JS] 클로저 - 클로저와 렉시컬 환경

클로저에 대해 알아보기 전에! 실행 컨텍스트를 잘 모르신다면 아래의 글들을 먼저 읽어보시는 것을 추천드립니다 :) 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 클로저(Closure) 클로저는 자바스크립트의 고유의 개념이 아닌(ECMAScript 사양에도 등장하지 않는다) 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 '함수와 그 함수가 선언된 렉시컬 환경과의 조합'으로 정의하고 있다. const x = 1 function outerFunc() { const x = 10 function innerFunc() { console.log(x) } innerFun..

[JS] 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 실행 컨텍스트의 생성과 식별자 검색 과정 아래 예시를 통해 실행 컨텍스트의 생성과 식별자 검색 과정에 대해 알아보자. var x = 1 const y = 2 function foo (a) { var x = 3 const y = 4 function bar (b) { const z = 5 console.log(a + b + x + y + z) } bar(10) } foo(20) // 42 1. 전역 객체 생성 전역 객체는 전역 코드가 평가되기 이전에 생성된다. 전역 객체에 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체가 추가되며 동작 환경에 따라 클라이언..

[JS] 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드: 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부 코드는 포함 x) 함수 코드: 함수 내부에 존재하는 소스코드(중첩된 함수, 클래스 등의 내부 코드는 포함 x) eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드: 모듈 내부에 존재하는 소스코드(모듈 내부의 함수, 클래스 등의 내부 코드는 포함 x) 4가지 타입으로 분류하는 이유는 소스코드의 타입에 따라 실행 컨텍스..

[VanillaJS, React] 마우스 따라다니는 원 만들기(feat. requestAnimationFrame)

잘 만들어진 인터랙티브 웹들을 보며 저건 어떻게 만드는걸까 항상 궁금했었다. 인프런을 둘러보다가 몇 줄로 끝내는 인터랙티브 웹 개발 노하우라는 강의를 발견했고, 기초적인 것들을 만들어봐야겠다고 생각했다. 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] - 인프런 | 강의 짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다., - 강의 소개 | 인프런 www.inflearn.com 가장 첫 실습인 마우스를 따라다니는 원 만들기를 해보려고 한다. VanillaJS로 구현해보기 HTML 먼저 box라는 클래스명을 가진 div를 하나 만들어준다. CSS .box { background-color: lightgray; border-radius: 50%; width: 80px; height..

[React, express] 배포/개발 환경 나누기

프로젝트에서 로컬/배포 환경에서 각각 따로 설정해주어야 하는 부분이 있었는데, 매번 배포할 때마다 코드 일부분을 수정했다. 너무 번거롭기도 하고, 맞는 방법이 아닌 것같아서 개발 모드와 배포 모드 각각의 환경에서 다르게 동작할 수 있도록 코드를 수정해주었다. node환경에서 개발 모드를 감지하려면 process.env.NODE_ENV를 확인해주면 된다. 1. React if (process.env.NODE_ENV === 'development') { // development 환경일 때 실행할 코드 } else { // development 환경이 아닐 때 실행할 코드 } 이런 식으로 process.env.NODE_ENV가 'development'인지 또는 'production'인지 확인해주는 if문을 ..

[React] geoLocation API로 현재 위치를 알아보자

현재 위치를 구하려면 날씨 앱 구현을 위해 Web API인 Geolocation API를 사용해 현재 위치를 구할 수 있는 hook을 만들어보았다. Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API이다. Geolocation은 navigator.geolocation을 통해 접근하고, 사용자가 허가할 경우 현재 장치에서 GPS, Wifi 등 사용 가능한 최선의 방법으로 위치를 알아낸다. 위치 정보를 가져오는 방법에는 두 가지가 있다. Geolocation.getCurrentPosition(): 장치의 현재 위치를 가져온다. Geolocation.watchPosition(): 장치의 위치가 바뀔 때마다 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 ..

react-datepicker 적용하기(+ 커스텀)

달력 구현에 어떤 라이브러리를 쓸까 고민하다가 가장 무난하고 많이 쓰이는 react-datepicker를 적용해보았다. React Datepicker 설치, 적용하기 라이브러리 설치 yarn add react-datepicker date-fns yarn add -D @types/react-datepicker // or npm install react-datepicker date-fns npm install --save-dev @types/react-datepicker react-datepicker를 설치해준다. 헤더 부분을 커스텀할 때 date-fns를 사용하기 때문에 같이 설치해주었다. typescript를 사용하는 경우 devDependencies에 @types/react-datepicker를 같이 ..

[JS] 자바스크립트의 This

This 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정된다. 동일한 함수도 다..

[React] 재귀 컴포넌트로 트리 메뉴 만들기(2)

이전 글 [React] 재귀 컴포넌트로 트리 메뉴 만들기(1) 이번에는 접었다 폈다 하는 효과까지해서 트리 메뉴를 완성해보려고 한다. routes/Directory/Child.tsx import { useState } from 'react' import { DownArrow } from 'assets/svgs' import * as Styled from './index.styles' const Child = ({ child }: Props) => { const [isOpened, setIsOpened] = useState(true) const handleClick = () => { setIsOpened((prev) => !prev) } // ... return ( {child.name} {child.ty..