pocojang

시작하며

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

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

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

pocojang

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.

pocojang

REQUIREMENTS

Feature

• 태그 불러오기
• 사용자
  • 로그인
  • 회원가입
  • 정보 가져오기 (인증)
• 정보 수정 (인증)

pocojang

.next
__generated__

pocojang

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

pocojang

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

pocojang

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(

pocojang

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

pocojang

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;

pocojang

{
  "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,