Poco pocojang

시작하며

요즘 따라 과거 유행했던 2016년에 자바스크립트를 배우는 기분이라는 글이 떠오른다.
그때는 꼬꼬마 신입 개발자였고 어차피 글을 봐도 아무런 내용도 이해할 수 없었고 오히여 외계어에 가깝게 보였었는데 요즘은 얼추 아.. 이런 시절이 있었구나 새삼 많은 생각이 든다.

현재 2023년이 된 지금 프론트엔드 개발자를 꿈꾸는 어린 학생들도 신입 개발자들도 정말 많아졌다.
그들과 비교하면 난 먼저 시작한게 전부인데 조금은 더 쉽게 시작한게 아닐까 항상 반성하게 된다. 이 글로 그간 느꼈던 시대의 변화를 작성하고 한번 정리해보고자 한다.

>연대 별 타임라인을 목차로 이 글을 작성했으며 기술 수준이나 시기의 어긋남이 있을 수는 있습니다.

DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
Builds CSSOM tree from the css rules.

REQUIREMENTS

Feature

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Commit Message Conventions

These rules are adopted from the AngularJS commit conventions.

Goals
Generating CHANGELOG.md
- Recognizing unimportant commits
- Provide more information when browsing the history
Format of the commit message
Subject line


	// Engine
	const React = {
	index: 0,
	state: [],
	useEffect: (callback, dependencies) => {
	const cachedIndex = React.index;
	const hasChanged = dependencies !== React.state[cachedIndex];
	if (dependencies === undefined \|\| hasChanged) {
	callback();

	const Foo = ({ result }) => <ResultComponent result={result} />;
	const withRequest = BaseComponent => ({ bar, ...props }) => {
	const { result, loading, error } = useRequest(bar);
	return (
	<BaseComponent {...props} result={result} loading={loading} error={error} />
	);
	};
	const withError = branch(({ error }) => error, ErrorComponent);
	const withLoading = branch(({ loading }) => loading, LoadingComponent);
	export default compose(

	import { useState, useRef, useEffect, useCallback } from 'react';
	import throttle from 'lodash/throttle';

	const useDetectScrollEnd = (endPercent = 0.9) => {
	const scrollEnded = useRef(false);
	const [isScrollEnd, setIsScrollEnd] = useState(false);
	const handleScroll = useCallback(throttle(() => {
	const { scrollY, innerHeight } = window;
	const scrollPercent = (scrollY + innerHeight) / document.body.scrollHeight;

	{
	"editor.detectIndentation": false,
	"editor.tabSize": 2,
	"editor.fontFamily": "d2coding ligature",
	"editor.fontLigatures": true,
	"editor.fontSize": 16,
	"editor.formatOnSave": true,
	"editor.formatOnPaste": true,
	"editor.formatOnType": false,
	"editor.insertSpaces": true,

	.next
	__generated__