FoO의 개발 블로그

JavaScript의 scope(스코프)는 변수와 함수의 접근성과 생존 기간을 결정하는 규칙이다. 스코프의 종류전역 스코프(Global Scope)함수 스코프(Function Scope)블록 스코프(Block Scope)렉시컬 스코프(Lexical Scope)스코프와 관련된 개념들스코프 체인(Scope Chain)호이스팅(Hoisting)클로저(Closure) 전역 스코프(Global Scope)코드의 가장 바깥쪽에 선언된 변수나 함수어디서든 접근 가능과도한 사용은 네임스페이스 오염을 일으킬 수 있음 함수 스코프(Function Scope)함수 내부에 선언된 변수var 키워드로 선언된 변수에 적용해당 함수 내에서만 접근 가능function exampleFunction() { var functionS..

call, apply, bind 메서드는 JavaScript에서 함수의 this 값을 명시적으로 지정하고 함수를 호출하는 방법을 제공한다. Function.prototype의 메서드이므로 모든 (화살표함수를 제외한)함수에서 사용할 수 있다.  call 메서드syntax: func.call(thisArg, arg1, arg2, ...)주어진 this 값과 개별적으로 제공되는 인수들로 함수를 호출function greet(greeting) { console.log(`${greeting}, ${this.name}`);}const person = { name: "Alice" };greet.call(person, "Hello"); // 출력: Hello, Alice apply 메서드syntax: func.a..

항상 Next.js에서 자동으로 설정해주는 환경을 쓰다보니 기초적인 개념이 확고하지 않아 정리하고 간다. Script 태그의 속성들1. 기본(속성 없음)HTML 파싱을 중단하고 스크립트를 즉시 다운로드 및 실행스크립트 실행이 완료될 때까지 HTML 파싱이 재개되지 않음2. async 속성스크립트를 비동기적으로 다운로드HTML 파싱과 병렬로 다운로드 진행다운로드가 완료되면 HTML 파싱을 중단하고 즉시 스크립트를 실행여러 스크립트가 있을 경우 다운로드 완료 순서대로 실행3. defer 속성스크립트를 비동기적으로 다운로드HTML 파싱과 병렬로 다운로드 진행HTML 파싱이 완료된 후에 스크립트 실행여러 스크립트가 있을 경우 HTML에 작성된 순서대로 실행4. type="module" 속성스크립트를 ES6 모듈..

극초기 스타텁 초기 멤버로 일하면서 벌써 4번째 랜딩 리뉴얼을 하고 있다. 첫 랜딩은 되는대로, 두번째도 되는대로, 세번째는 부스 직전에 3일만에 만들고 이번에는 개발하는데 일주일 정도 걸린 것 같다. 기존 랜딩페이지는 홈, 회사 소개, 제품 소개로 구성되어 있었고 이번에는 간결하게 원페이지에 제품 소개만 담는 방향으로 가기로 했다. 랜딩은 규모가 작아서 매번 다양한 UI 라이브러리를 써보고 있다. tailwindcss, chakra-ui를 거쳐 이번엔 panda css와 framer-motion의 조합으로 진행했다. 보통 Next.js를 기본으로 사용했는데 한번은 Svelt를 썼다가 팀원들의 항의에 다시 Next.js로 돌아왔다. 소기업에서 괜히 기술 스택 늘리지 맙시다.   개발이 끝났다면 이제 KP..

최근 개발 중이던 Next.js 프로젝트에서 핵심 로직을 떼서 패키지화 하기로 했다. 아직 패키지 제작 경험이 없기도 해서 Next.js보다 그냥 React.js를 사용해 클라이언트 컴포넌트, 훅 정도로 제공할 생각이다. 그 중에서도 핵심 로직은 서버에서 돌리고 싶긴 하지만 d3와 함께 사용하면서 클라이언트에서만 돌릴 수 있는 로직과 서버로 숨기고 싶은 로직이 끈적끈적하게 섞여 있는 상태라 차차 고민할 문제로 미뤄 놓았다. 나중엔 만들어둔 패키지를 또 서버 패키지와 클라이언트 패키지로 분리할 같기도.. 몇 개월 동안 몇 개 프로젝트를 하면서 새로운 프론트 프레임워크나 라이브러리 도입이 없었기 때문에 이번엔 좀 핫하다는 vite와 yarn berry(pnp), chakra.ui를 사용하기로 했다. 기존에는..