정도영 Tech-Blog 정도영 Tech-Blog

CSR이란 말 그대로 서버가 아닌 클라이언트의 브라우저 프로세스가 동적으로 자바스크립트를 사용하여 html 구조를 렌더링 하는 방식을 뜻합니다. 클라이언트에서 어플리케이션 사이트의 html을 요청 시, 클라이언트는 body 태그에 아무 내용이 없는 html 파일을 응답으로 받게되고 이 html 파일로 dom 트리를 만들다가 src 태그에서 요청하는 자바스크립트 파일을 추가로 요청합니다. 이 자바스크립트 파일에는 어플리케이션을 구동하기 위한 모든 자바스크립트 로직이 번들링되어 담겨져있습니다. 이제 브라우저 프로세스는 이 자바스크립트 파일을 평가하고 메모리에 적재해 브라우저 종료 전까지 필요한 부분을 호출하여 어플리케이션 동작이 이루어질 수 있도록 합니다. 이 CSR 방식으로 만든 개발 프레이뭐크인 Reac..

웹팩을 사용하려면 webpack과 webpack-cli 라이브러리를 다운받습니다. 물론 어플리케이션의 직접적인 실행 파일이 아니므로 -D 옵션을 붙여 devDependencies로 다운받습니다. 다운받은 후 프로젝트 내 webpack.config.js 파일의 내용입니다. module.exports = { mode: 'none', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'scss-loader'] }, { test: /\.js$/, use: ['ba..

1. 지역 설치 프로젝트 폴더의 node_modules에 라이브러리 파일이 직접 저장됩니다. 아래의 두 명령어는 동일한 역할을 합니다. 즉, 라이브러리 지역으로 설치할 때, --save-prod는 생략이 가능합니다. npm install {package name} npm install {package name} --save-prod 2. 전역 설치 npm install {package name} --global # window %USERPROFILE%\AppData\Roaming\npm\node_modules # mac /usr/local/lib/node_modules 지역 설치가 특정 프로젝트 내부의 범위에 한정해 설치하는 것이라면, 전역 설치는 사용자의 컴퓨터 내부에 라이브러리 패키지를 설치합니다. ..

const doPromiseTest = async () => { try { const test1 = await new Promise((resolve, reject) => { resolve(1); }); const test2 = await new Promise((resolve, reject) => { if (1 === 1) reject('failed.'); else resolve(2); }); const test3 = await new Promise((resolve, reject) => { resolve(3); }); } catch (e) { console.log(e); } } doPromiseTest(); catch 문의 e에는 failed가 출력됩니다. 즉, promise 객체 콜백함수의 reject ..

cdn은 프론트개발할 때 참 많이 쓰이는 기술인데, 잘 이해하지못하고 무작정 써왔던 터라 면접 때 관련 질문이 나와도 제대로 대답하지 못해 스스로 너무 안타까웠습니다. 😥😥😥 해당 기술에 대해 깊게까진 아니더라도 짧게 핵심만 정리해보겠습니다. 기본적으로 CDN의 개념은 Contents Delivery Network의 약자로서 데이터의 용량이 큰 웹어플리케이션에서 데이터의 로드 속도를 줄일 수 있는 전송 방법입니다. 로드 속도를 줄이는데는 cache 서버, 즉 PoP(Points of presence)를 활용한 물리적 거리 줄이기 방법이 사용됩니다. 보통 cache는 컴퓨터의 기억장치의 부분 중 하나로 데이터나 값을 복사해놓는 임시 장소를 뜻합니다. 이와 비슷하게 이 cache 서버는 origin 서버가 ..

면접 질문에서 제대로 대답을 못해 많이 아쉬웠던 질문이었습니다. 해당 답변을 짧게 정리해보겠습니다. 1) 전반적으로 css, javascript, html 요소를 mozilla 등의 web docs 사이트에 검색하여 호환성을 알아내는 방법입니다. 예를 들어 flex를 mozilla에 검색해본다면, 요렇게 브라우저별 호환 유무와 버전별 어디까지 기능을 제공하는지 알려줍니다. 2) polyfill, underscore.js 등의 라이브러리를 사용합니다. 먼저 underscore.js의 예시입니다. docs를 보니 jquery와 유사하게 이 라이브러리만의 문법을 제공하네요. 물론 기존 vanillascript 문법보다 더 편리하게 사용가능하고 브라우저별 호환성도 잡아 유용할 수도 있겠습니다만,, 저같은 주니어..

프로젝트를 수행하면서 겪었던 문제입니다. import { useState, useCallback } from "react"; import Child from "./Child"; function App() { const [count, setCount] = useState(0); const callSetCount = useCallback(() => { setCount(count + 1); console.log('callSetCount has just been called.'); }, []); return ( Parent {count} callSetCount in Parent ); } export default App; 일단 현재 컴포넌트에서는 자식 컴포넌트인 Child에 callSetCount 함수를 pro..

이 글에는 제가 프로젝트를 수행하면서 StompJs를 통한 이진 데이터 전송 방법 및 겪은 어려움을 제 방식대로 해결한 내용을 담았습니다. 제 방법보다 더 나은 방법을 알고계시면 댓글 등으로 공유해주시면 감사하겠습니다. StompJs의 공식 문서를 참고하면 StompJs는 5버전 이상부터 이진 데이터 전송을 지원한다고 합니다. Starting version 5, sending binary messages is supported. To send a binary message body, use the binaryBody parameter. It should be a Uint8Array. const binaryData = generateBinaryData(); // This need to be of type ..