2021년 stackoverflow survey에서 드디어 React.js가 웹 프레임워크 1위를 차지 했다. 그동안 왕좌의 자리를 굳게 지켜온 jquery가 밀려난 첫 해이다. Vue와 Angular 역시 여전히 jquery의 자리를 위협하고 있고 Svelte의 성장도 눈여겨 볼만 하다. 이 외 jquery에 대한 상황은 그닥 좋지 않다. 많은 부분을 jquery에 의존하던 bootstrap도 2019년 jquery를 완전히 걷어 내겠다고 선언했다. 개발자들의 인식 또한 점점 jquery는 구시대의 유물처럼 취급되고 있다. 그럼 이제 jquery는 쓸모없어지는 것인가 🤔 과거의 영광이 재현될 일은 없어 보인다. 🥺 엔터프라이즈 환경에서 웹기술을 활용한 화면을 만들때 React는 매우 효율적이고 유지보수..

지난 포스팅을 통해 Typescript를 활용하여 NodeJS와 Express 백엔드 서버 개발환경을 세팅하는 방법을 알아봤다. Typescript로 Node+Express API 서버 개발환경 세팅 🙌🏾 Node JS와 Typescript의 등장이 가지는 의미 자바스크립트는 웹브라우저에서 HTML문서를 동적으로 컨트롤 하기 위해 만들어졌다. 근본부터가 프론트엔드인 이 언어는 브라우저들의 춘추전국 bgradecoding.tistory.com 이것을 베이스로 웹 프레임워크에서 많이 사용하는 MVC 패턴을 만드는 방법에 대해 알아보자. MVC 패턴은 디자인 패턴 중 하나이다. 사실 주니어 시절에는 이걸 왜 쓰는지 잘 알지 못했다. 주니어 시절은 자신이 맡은 기능만을 구현하면 되기 때문에 서비스 전체 코드에 ..

🙌🏾 Node JS와 Typescript의 등장이 가지는 의미 자바스크립트는 웹브라우저에서 HTML문서를 동적으로 컨트롤 하기 위해 만들어졌다. 근본부터가 프론트엔드인 이 언어는 브라우저들의 춘추전국시대를 거쳐면서 🤱 👩‍🍼 🧑‍🍼 👨‍🍼 -> 🤴 (IE.... MS.... ㅂㄷㅂㄷ) 여러 개성이 강한 자식들로 분화되었다가 자바스크립트족 대통합 운동으로 표준화되어 지금에 이르렀다. Node JS가 나오면서는 자신의 근본인 브라우저 태생 족보📗를 찢어버리고 백엔드의 영역까지 침범하기 이르렀다. 심지어 보통의 웹사이트에 필요한 데이터 CRUD 기능을 만들때는 다른 백엔드 태생 언어들의 장점을 뛰어넘기도 하는 청출어람을 보여준다. 물론 요즘 핫한 머신러닝광의 연계나 그래픽 요소가 많은 작업, 실시간성 대규모 ..

IT 산업에서 일을 하다보면 반드시 DB라는 존재와 엮이게 된다. Front-End 개발자라면 보통 DB를 직접 마주하기 보다는 API를 통해 마주한다. Rest API나 Graphql로 DB에 저장되어 있는 데이터를 Back-end에서 주는대로 받아 가공하여 화면에 보여주기 때문이다. 하지만 Back-end 개발자는 DB에 직접 붙어야 할 일이 대다수이다. 데이터를 저장하고 삭제하고 수정하는 일을 대부분 하기 때문이다. 1. ERD란? ERD의 필요성 이렇게 알아야하거나 관리해야할 DB의 테이블이 한두개라면 문제가 없다. 테이블이 50개, 100개 더 많다면 어떨까? 데이터가 어떤 식으로 저장되어 연결되어 있는지, DB구조가 변경되었다면 어떻게 이력관리가 되는지 문서 없이는 관리하기 힘들 것이다. 그래..

Google analytics(이하 GA)를 활용할 때 개발을 최소화 하기 위해 Google Tag Manager(이하 GTM)를 활용한다. GTM은 DataLayer 라는 객체에 데이터가 Push되면서 GA로 이벤트는 보내는 방식을 사용한다. 이때문에 사이트가 복잡한 구조로 되어 있거나 랜더링 속도가 느린 환경 등에서 데이터 수집이 잘 일어나지 않는 경우가 있다. 이런 경우에는 결국 GTM을 거치지 않고 바로 GA로 데이터를 전송하는 코드로 해결할 수 있다. 바로 gtag.js의 함수를 활용하는 것이다. 물론 MP(Measurement Protocol)이 속도적 측면에서는 가장 빠르긴 하다. GA 스크립트나 GTM 스니펫 없이 데이터를 전송할 수 있다?Measurement Protocol 보통 Goog..

웹사이트를 제작하다보면 필수적으로 이미지 파일을 사용해 화면을 구성해야 하는 일이 생긴다. (안 생긴다면 그 사이트 제작은 지금 끝내라) Front-End 라이브러리로 React를 사용한다면 이미지를 사용하는 방식이 여러가지일 것이다. 어떤 상황에서 어떤 방식이 맞는지, 혹은 사용법이 정확한지 알기 힘들다. 그래서 이번 포스팅에서는 리엑트에서 이미지를 활용하는 법에 대해 정리하고자 한다. 1. Pubilc 폴더에 이미지 파일 위치시키고 활용 ❗️제일 간편하고 직관적인 방법이다. Create React App으로 프로젝트를 생성하면 Public 폴더에 index.html을 비롯한 정적 파일이 있다. 여기에 images 폴더를 만들고 이미지 파일을 넣어둔다. 그리고 실제 이미지를 활용할 소스 코드에서는 아래..