Dev 썸네일형 리스트형 Data Fetching 코드를 공통 모듈로 추상화 해보기 with React INTRO 현재의 Javascript 진영의 Data Fetching 방법은 AJAX 베이스로 정말 다양하게 Wrapping되어있는 듯.AJAX이전과 AJAX에 대한 간략한 내용은 아래 포스팅에서 다룬 적이 있다.2023.03.08 - [Dev/[Javascript]] - [Javascript] XMLHttpRequest와 Ajax에 대한 이야기 [Javascript] XMLHttpRequest와 Ajax에 대한 이야기0. 의문의 시작 최근 같은 전공의 대학 동기들을 만나 술자리를 가지던 중 Ajax와 XMLHttpRequest에 대한 대화를 나누게 되었고, 아래 내용에 대해선 모두 의견의 차이가 없었다. Ajax 는 비동기 통신을rangsub.tistory.com 이 글에서는 이런 다양한 방법으로 사용.. 더보기 [회고] 2023년을 돌아보기 INTRO 2023년도는 전반적으로는 무난하게 흘러갔다. 한 해를 돌아보며 칭찬하고 반성하는 시간을 가져보자 1. 이직과 진급 - 2016년도에 첫 취업을 했다. - 진지하게 고민을 하고 결정 취업이 아니다보니, 이곳 저곳에서 내 진로를 찾기 위해 무던히도 해멨다. - 이 과정에서 1~2년씩 경력이 잘려나갔고.... 그리고 이제서야 사원 직급을 벗어났다. - 이직과 함께 직급을 올린 케이스 - 사실 개발자가 직급이 뭐가 중요하겠냐만은, 그래도 직급이 존재하는 회사를 다니면서 한 단계 올라가는것은 기분이 좋았다. - 올라간 직급만큼 더 많은 책임을 지고 더 많은 일들을 해나가야겠지만 이 부분은 자신이 있다. - 새로운 회사에서도 기존 회사의 업무와 대부분 비슷한 일을 하게 되었다. 물리적/정신적 자유도가 .. 더보기 [Javascript] 자바스크립트의 컴파일에 대하여 INTRO 자바스크립트 언어는 순차적으로 런타임에 실행되는 인터프리터 언어이다. 그러나 C언어 처럼 컴파일되기도 한다. 이 포스팅에서는 이 내용에 대해 포스팅한다. 1. 인터프리터? - 자바스크립트는 인터프리터 언어로 분류된다. - 런타임에 한 줄씩 순차적으로 수행된다. - 물론 무작정 순차적으로 실행되는 것은 아니다. - 특정 단계가 있고 이 단계로 인해 호이스팅이라는 개념도 생겨난다. - 전처리가 없다. - 전처리가 없기 때문에 개발 단계에서 버그를 먼저 잡기가 힘들다. - 그래서 나온 것이 타입스크립트와 각종 Linter, Formatter들이다. - 초창기 자바스크립트는 HTML을 동적으로 만들고자 고안된 언어이다. - 이 시기엔 Server Side Rendering 방법이 지배적이었다. 브라우.. 더보기 [React] CRA의 숨겨진 설정들 INTRO 일반적으로 리액트 기반 프로젝트를 세팅할 때 CRA(Create React App)를 자주 사용할 것이다. CRA에는 개발에 조금 더 빠르게 집중할 수 있도록 Webpack이나 Babel과 같은 설정들이 포함되어있는데, 이 설정들이 어떻게 숨겨져있는지에 대해 포스팅해본다. 1. CRA의 숨겨진 설정들 - React v18 기준, CRA로 프로젝트를 생성했으면, package.json -> scripts 에 다음과 같이 eject라는 스크립트가 있는 것을 볼 수 있는데, 이 스크립트는 CRA 의 숨겨진 설정들을 본인의 프로젝트로 꺼내오는 동작을 수행한다. - 우선 어떻게 숨겨놓았는지부터 알아보자. - 아래는 eject 를 수행한 뒤 새로 추가되거나 변경 된 파일들이다. - CRA와 함께 설치되는.. 더보기 [Next.js] husky와 lint-staged를 사용하여 버그를 줄여보자. INTRO 여러 사람들이 하나의 프로젝트에서 작업하다보면, coding convention이 지켜지지 않은 코드가 push 된다거나, 테스트에 실패했음에도 push를 한다던가.. ... 생각보다 많은 문제들이 발생한다. 이러한 문제들을 git 명령어를 작성할 때 미리 검토할 수 있게 도와주는 도구를 소개해보고자 한다. 1. Husky란? - git hook을 관리해주는 라이브러리이다. - git add, git commit, git push 와 같은 flow에 중간중간 등장하여 특정 동작을 수행하게 도와준다. - 이 과정을 통해 commit 할 때 코드 스타일을 자동으로 검사하거나 테스트를 실행하는 훅을 추가할 수 있어 일관된 코드 품질을 유지하고 버그를 사전에 탐지할 수 있다. 2. lint-stage.. 더보기 [Javascript] Module과 Module 시스템에 대해서(feat. CommonJS, ES6) INTRO 개발 도중 다른 모듈을 사용하기 위해 아래와 같은 키워드들을 보거나 사용해 본 적이 있을것이다. // ES6에서 모듈을 사용하는 방법 import { Express } from 'express'; // CommonJS에서 모듈을 사용하는 방법 const express = require('express'); 이번 포스팅에서는 Javascript의 module에 대해 알아본다. 1. Module? - 모듈(Module)은 다양한 곳에서 다양한 의미로 사용되며, 개발 분야로 범위를 제한해보자면 '프로그램의 다른 부분에서 재사용하고 가져올 수 있는 독립적인 단위로 구성된 코드' 라고 볼 수 있다. - 그리고 이를 활용하여 아래와 같은 구조로 코드를 작성하는것을 '모듈 패턴을 사용한다' 라고 표현하며,.. 더보기 [React] JSX(TSX) 를 사용하는 방법 INTRO React로 화면을 개발할 때 사용되는 JSX 에 대해 정리한다. 1. JSX(TSX) 란? - JSX는 Facebook에서 React 프레임워크를 개발하면서, React를 더 쉽게 사용할 수 있게 하기 위해 2013년에 개발되었다. - React의 컨셉은 UI를 Javascript코드로 개발하는것. - 기존 Javascript로 우리는 코드를 작성하는 방법을 알고있다.(DOM API를 사용) // body 요소 가져오기 const body = document.querySelector('body'); // 새로운 div 요소 생성 const newDiv = document.createElement('div'); // div에 새로운 텍스트 노드 추가 const newContent = docum.. 더보기 [Javascript] XMLHttpRequest와 Ajax에 대한 이야기 0. 의문의 시작 최근 같은 전공의 대학 동기들을 만나 술자리를 가지던 중 Ajax와 XMLHttpRequest에 대한 대화를 나누게 되었고, 아래 내용에 대해선 모두 의견의 차이가 없었다. Ajax 는 비동기 통신을 위한 하나의 '프로그래밍 기법'이며, javascript 진영에서는 이 기법을 구현하기 위해 XMLHttpRequest를 사용한다. 이 기법과 DOM API를 사용하여 화면 전체를 다시 그리지 않아도 된다. XMLHttpRequest는 HTTP 프로토콜을 사용하여 서버와 통신한다. 그러나 아래 대화까지 도달했을 때, 모두 제대로 설명할 수 있는 사람이 없었다. XMLHttpRequest의 원리? 언어 레벨과 프로토콜 레벨 사이에, 이것을 실행시켜주는 것은 무엇? 결국 다음과 같은 결론을 내.. 더보기 이전 1 2 3 4 ··· 13 다음
