목록Front-End (18)
hmk run dev
프로젝트에 테이블 컴포넌트를 만들일이 있었다..! 테이블 컴포넌트에 사용자와 인터렉션하는 부분이 많아서 백엔드에서 내려준 데이터 외 에 따로 UI를 위한 상태값이 많아서 따로 view model로 가공해서 사용하기로 결정! 비즈니스로직과 UI로직을 분리 - useVarinatTable 커스텀훅을 생성 - useState를 이용해 tableViewModel 상태값관리 const [tableViewModel, setTableViewModel] = useState() 문제 발생 테이블 데이터는 proccessingProduct라는 데이터의 속성중 하나인 variant를 이용해 tableView모델로 가공된 데이터임 아래 함수(테이블 데이터의 저장 기능을 함)로 테이블에서 사용자가 변경한 값들을 변경하기 위해 ..
내가 타입스크립트 혹은 자바스크립트로 코드를 작성하고 이것이 어떻게 브라우저에서 동작하고 사용자와 상호작용할 수 있는 서비스가 되는 걸까요? 코드 작성 (TypeScript & React): 첫 번째 단계는 코드 작성입니다. 타입스크립트와 리액트를 사용하여 웹 애플리케이션을 개발합니다. 타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입 검사를 제공하며, 리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 타입스크립트로 작성한 코드는 확장자가 .tsx인 파일로 저장됩니다. 컴파일 (TypeScript 컴파일러): 타입스크립트 코드는 브라우저에서 바로 실행될 수 없습니다. 따라서 타입스크립트 코드를 자바스크립트로 변환해야 합니다. 이를 위해 TypeScript 컴파일러를 사용합니다. 컴..
마이그레이션 의사 결정 결과 aws lambda를 이용해 backEnd에서 색상을 추출하는 방식을 FE에서 모두 처리 서버비용 절감 Rust를 사용한 WebAssembly 도입 및 사내 시스템화 기존 방식 filedId & sliceId를 넘겨 backend에서 컬러를 추출해 보여주는 방식(sliceApi) 적용 방식 Rust & wasm-pack을 이용해 wasm 모듈 생성 wasm 모듈이 적용된 webworker를 생성 해당 webworker에 메세지를 주고 받으며 데이터 교환 도입이유 이미지에서 색상 데이터를 추출하여 추천 색상을 찾는 것은 기존에도 가능했지만, 이 과정에서 많은 계산 작업이 필요하고, 이는 웹 페이지의 성능에 영향을 미칠 수 있습니다. WebWorker는 백그라운드 스레드에서 작업..
ESM(ES Modules)가 등장하기 전까진 Javascript 모듈화를 네이티브 레벨에서 진행할 수 가 없었습니다. 따라서 개발자들은 번들링(bundling)이라는 우회적인 방법을 사용할 수 밖에 없었습니다. (번들링: 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업) 이 같은 상황에서 webpack, rollip 같은 도구로 번들링 작업을 하며 프론트엔드 개발자의 생산성을 향상 시켰습니다. 하지만, 1000개가 넘는 JavaScript 모듈이 있는 거대한 프로젝트라면 어떨까요? 실제로 이러한 상황을 어렵지 않게 마주할 수 있으며, 이 경우 Webpack과 같은 JavaScript 기반의 도구는 병목 현상이 발생하곤 합니다. (개발 서버를 실행하는 데 있어 비합리적..
웹팩 이전의 script 태그를 가져오는 방식 아래 방식의 단점 1. 변수 이름 충돌의 가능성 script 태그의 module 타입 사용하기 아래처럼 script 태그의 type의 module을 사용하면 변수 충돌 가능성을 배제시킬 수 있다. 각각의 word 변수는 각각 모듈 안에서만 유용하다 아래 방식의 단점 1. 오래된 웹브라우저에서 호환성이 낮다. 2. 자바스크립트 파일을 모두 다운로드 받아야 하므로 리소스 가 많이 든다. hello.js var word = "Hello"; export default word; world.js var word = "World"; export default word; 웹에서도 모듈의 개념을 사용하고, 여러개의 파일을 하나로 묶어 제공하고 싶다는 생각이 반영된 것이 바..
npm init으로 생성하거나 직접 작성해 생성 가능! { "name" : "test", "description" : "javascript's test programming.", "keywords" : ["util", "f", "server", "client", "browser"], "author" : "Goorm", "contributors" : [], "dependencies" : [], "repository" : {"type": "git", "url" : "git://gitbub.com/documentcloud/test.git" }, "main" : "test.js", "version" : "1.1.6" } name - 프로젝트 이름 중앙 저장소에 배포 시 version과 함께 필수항목 - url,..
1. ClientX, ClientY 클라이언트 영역(현재 보여지는 브라우저 화면 기준)을 기준으로 가로, 세로 좌표를 제공 clientX - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 X위치를 반환 clientY - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 Y위치를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준의 좌표 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표가 0으로 측정됨 offsetX - 이벤트 대상을 기준으로 상대적 마우스 x좌표 반환 offsetY - 이벤트 대상을 기준으로 상대적 마우스 y좌표 반환 3. pageX, pageY 스크롤을 포함한 전체 문서를 기준으로 x,y 좌표를 반환 ..
webpack이란? - 모듈 번들링이라고 한다. - html 파일에 들어가는 JS파일들을 하나의 파일로 만들어주는 방식을 모듈 번들링이라고 한다. > 쉽게말해 다수의 JS파일들을 하나의 JS파일로 만들어주는 것을 webpack이라고 할 수 있다. 사용하는 이유 - SPA가 나오기 이전 html을 요청해 뿌려서 화면을 보여줬는데 SPA가 등장한 이후 하나의 HTML페이지에 여러가지 자바스크립트 파일이 포함된고 연관되어 있는 JS 종속석 있는 파일들을 하나의 파일로 묶어줘 관리하기가 편하다. - 파일을 컴파일 할 때, 여러 모듈을 읽어오는데 시간이 오래거리는 것을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. > 하나의 JS파일로 만들어 웹페이지 성능 최적화 webpack 설치 1. npm ini..