관심있는것들

webpack devhttps://webpack.js.org/configuration/dev-server/ DevServer | webpackwebpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.webpack.js.org devServer: { setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Err..

크로스 브라우징브라우져 마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다.바벨은 ECMAScript2015+ 로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 바벨은 3단계로 빌드를 진행한다. 파싱 -> 변환 -> 출력module.exports = function myBabelPlugin() { return { visitor: { Identifier(path) { const name = path.node.name; // 바벨이 만든 AST 노드를 출력한다 console.log("Identifier() name:", name) // 변환작업: 코드 문자열을 역순으로 변환한다. path.no..

NPM install을 통해서 CDN, 직접 source download대신에 외부 패키지 의존성을 관리할 수 있다. Webpack function mySum(a,b) { return a + b;}이 상태에서 index.html이 브라우저에 렌더리되면 전역 scope가 오염이된다. 어디에서든 mySum을 접근을 할 수 있게된다.var math = math || {};(function() { function mySum(a,b) { return a + b } math.sum = mySum})()math를 전역scope로 두고 다른 곳에서는 math.sum으로 접근하도록 변경한다. AMD(Asynchronous Module Definition) 브라우저 같이 javascript 를 로딩해서 ..

useMemo는 일종의 캐시역할을 하는 훅이다. function useMemo(nextCreate, deps) { console.log("deps = ", deps); if (!memorizedStates[cursor]) { const nextValue = nextCreate(); memorizedStates[cursor] = [nextValue, deps]; cursor = cursor + 1; return nextValue; } const nextDeps = deps; const [prevValue, prevDeps] = memorizedStates[cursor]; if (prevDeps.every((prev, index) => prev === nextDeps[index])) { cursor = cu..

관리해야할 state가 많아질 수록 리듀서 훅을 사용할 때가 온다. function useRegisterForm() { const [state, setState] = useState({ value: { nickname: "", password: "" }, error: { nickname: "", password: "" }, }); const handleChange = (e) => { setState({ ...state, value: { ...state.value, [e.target.name]: e.target.value, }, }); }; const handleReset = (e) => { setState({ value: { nickname: "", password: "" }, error: { nickn..

function useRef(initialValue) { if (!isInitialized[cursor]) { memorizedStates[cursor] = { current: initialValue }; isInitialized[cursor] = true; } const memorizedState = memorizedStates[cursor]; cursor = cursor + 1; return memorizedState; } closure를 사용해서 useRef를 사용하는 function componenet가 re render되더라도 주어진 값을 보존할 수 있도록 하였다. https://www.inflearn.com/questions/1211434/4-1%EC%9E%A5-%EB%A0%88%ED%94%8..

function createContext(initialValue) { const emitter = createEventEmitter(initialValue); function Provider({ value, children }) { React.useEffect(() => { emitter.set(value); }, [value]); return {children}; } return { Provider, emitter, }; } function useContext(context) { const [value, setValue] = React.useState(context.emitter.get()); React.useEffect(() => { context.emitter.on(setValue); return ..

순수함수는 2가지 특징을 가진다. 입력이 같으면 결과도 같다. 부작용이 없다. 몇번을 실행하더라도 자신의 일만 할 뿐, 함수 바깥 공간을 건드려서는 안된다. 컴포넌트의 render 함수는 순수해야한다. 즉 , 컴포넌트의 state를 변경하지 않고 호출될 때마다 동일한 결과를 반환해야하고 브라우저와 직접적으로 상호작용하지 않는다. const Counter = () => { const [count, setCount] = React.useState(0) document.title = `count: ${count}` const handleClick = () => setCount(count + 1) return plus } export default Counter 1) document api를 직접 함수 컴포넌트..

class Contract { constructor(name) { this.name = name; } sign() { const capturedName = this.name; setTimeout(() => console.log("서명인: ", capturedName), 3000); } } // const contract = new Contract("user"); contract.sign(); contract.name = "user2"; function createContract(name) { const sign = () => { setTimeout(() => console.log("서명인: ", name), 3000); }; return { sign, }; } const contract = createC..

Dialog export const layoutContext = React.createContext({}); layoutContext.displayName = "LayoutContext"; export class Layout extends React.Component { constructor(props) { super(props); this.state = { dialog: , }; } render() { const value = { dialog: this.state.dialog, }; return ( {this.props.children} ); } } export const DialogContainer = () => ( {({ dialog }) => dialog && {dialog}} ); DialogC..