본문 바로가기

웹 프론트엔드17

SSR과 SEO가 웹 서비스에서 왜 중요할까? 0. SSR이 필요한 이유? SSR(Server Side Rendering)은 왜 해야하는 것일까? 에 대한 답을 우선 해야 현재 프로젝트에 알맞는 기술스택을 선정하고 도입을 고려해볼 수 있다. 그 대답은 SEO로 요약할 수 있다. 1. SEO에 관하여 SEO 란 무엇일까? (Search Engine Optimization) 위키백과 정의는 다음과 같다. 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다 - Wiki - 그럼 검색 엔진이 왜 중요할까? 1-1. 국내 인터넷 이용률 → 93% 1-2. 국내 인터넷 이용자 중에서 검색엔진을 통해 웹사이트에 방문하게 되는 비율 1) 차트를 보면 (구글 + 네이버)를 통해 웹사이트로 유입되는 비율이 전체의 약 90% 정.. 2022. 12. 18.
생산성 향상을 위한 Hygen 도입 컴포넌트 제작 생산성을 높이고 싶을 때는 컴포넌트 제너레이터 Hygen을 도입해보자 1. Hygen 이란? 1-1. 특징 1) 디자인 시스템과 코딩 컨벤션이 그라운드룰로 정해져있는 경우 유용함 2) 자바스크립트 기반의 코드 제너레이팅 툴 3) 특정 프레임워크나 라이브러리에 의존적이지 않음 1-2. 장점 1) 같이 개발하는 사람들과 컴포넌트 구성요소 및 디렉터리 구조를 통일 시킬 수 있다. 2) 반복적으로 작성해야 하는 코드를 쉽게 만들어 개발 생산성을 향상 시킬 수 있다. 3) 약간의 node.js 지식을 가지고 있으면 쉽게 템플릿 생성자를 만들 수 있다. 1-3. 단점 1) react snippet extension 을 추가하는 것 처럼 명령어를 추가로 기억해야한다. 2) 코딩 컨벤션이 바뀌게 되면 지.. 2022. 12. 14.
패키지 전략 모노레포(Monorepo) 알아보기 모노레포가 등장하게 된 배경에 대해서 정리해볼 필요가 생겨서 글을 작성하게 되었습니다. 모노레포의 등장 배경, 모노레포 도구, 참고 블로그, 시작하기 위한 지식을 습득할 수 있습니다. 1. Repository Strategy Git을 통한 레포지터리 구성 전략은 크게 3가지로 나누어 볼 수 있습니다. http://dsparch.sciomagelab.com/2022/03/12/monorepo-vs-multirepo/ dsparch.sciomagelab.com 1-1. Monolith 1) 한 레포지터리 내에 모듈화 없이 모든 서비스(프론트, 백엔드 등)가 들어가 있는 것 2) 관심사의 분리(separation of concerns)가 되어있지 않음 => 모듈화를 통해 한계 해결 => 멀티레포 등장 1-2... 2022. 11. 25.
깃 커밋 컨벤션 VSCode에 적용하기 깃 커밋 컨벤션 (Git Commit Convention) ? 개인 프로젝트를 하거나 여러 사람들과 협업할 때 무조건 커밋로그를 남기게 되어있습니다. 사람마다 커밋을 작성하는 방식이 모두 다릅니다. 서로 의미를 정하지 않은 의미의 이모지를 넣거나, 무조건 소문자로 쓰거나, fix code 와 같이 매우 추상적으로 작성하는 경우도 있습니다. 그렇게 작성하다 나중에 특정 커밋을 취소하거나 누가 어떤 파일 수정하였는지 추적하고 싶을때가 종종 생깁니다. 하지만 작성되어 있는 커밋로그가 fix code, refactor code 의 연속이라면..? (절망에 빠지게 됩니다.) 그런 상황을 방지하고 원활한 협업을 위해서는 커밋 컨벤션이 필요합니다! 그럼 어떤 컨벤션을 선택해야할까? 제가 위와 같은 질문을 받았다면 .. 2022. 7. 9.
React JSX 개념부터 적용까지 React 를 사용해 웹 프로그래밍 개발을 시작하게 된다면 만나게 될 JSX 가 무엇인지에 대해서 알아보겠습니다. 1. JSX 란? 1) JSX 의 Full name 은 Javascript XML 입니다. 2) JSX 는 React 코드에서 HTML 을 쉽게 사용할 수 있도록 만들어 줍니다. 2. JSX 를 쓰면 좋은점? ex) 3 가지 방법으로 'lets use the JSX' 라는 글자를 가진 p 태그를 만들어 보겠습니다. 1) Vanilla Javascript const target = document.querySelector('.target'); const p = document.createElement('p'); p.innerText = 'lets use the JSX'; target.appen.. 2020. 12. 10.
React 라이프 사이클 React 컴포넌트를 생성하거나 변경할 때 호출되는 여러 이벤트인 라이프 사이클에 대해서 설명하겠습니다. 1. 라이프 사이클 이란? 라이프 사이클이란 컴포넌트의 생성, 사용, 소멸될 때 까지의 일련의 과정을 뜻하며, 실행되거나 업데이트 될 때 특정 메소드가 호출됩니다. 크게 3가지의 종류의 라이프 사이클이 존재합니다. 1) Mount 시 2) Props 변경 시 3) State 변경 시 2. Mount 시 - 해당 컴포넌트가 최초로 실행될 때 발생하는 라이프사이클 입니다. - 순서 : Initialization -> componentWillMount -> render -> componentDidMount 1) Initialization (constructor) : props, state 의 defalut.. 2020. 12. 9.
Javascript 메모리 관리 (가비지 컬렉션) 알고리즘 알아보기 자바스크립트의 메모리 관리 및 가비지 컬렉션과 관련해 공부한 내용에 대해서 포스팅을 작성해 보았습니다. 1. 가비지 컬렉션이란? (GC) 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다. 그렇다면 메모리는 언제 생겨나고 없어질까? 메모리의 생존주기는 아래와 같다. 1-1. 메모리 생존주기 1) 필요할때 할당한다. 2) 사용한다. (읽기, 쓰기) 3) 필요없을 때 해제한다. 1)과 3)은 가비지 컬렉션을 사용하는 Javascript 에서는 암묵적으로 작동하며, C 언어와 같은 저수준 언어에서는 아래와 같이 명시를 해주어야 한다. #include int main() { int pNum = malloc(sizeof(int)); // 4 byte, int 형 데.. 2020. 10. 19.
AbortController를 사용해 API 비동기요청 취소하기 최근 Javascript 웹 페이지 제작을 하면서 fetch를 통한 비동기요청이 진행되는 동안에 요청을 취소해야하는 기능구현이 필요하게 되었다. 페이지 이동, 취소 요청과 같은 이벤트가 발생하게 되면 이전 비동기요청을 취소하는 방법에 대해서 알아보다 이를 더 잘 이해하기 위해 포스팅을 작성하게 되었습니다. 1. AbortController 개요 Fetch 객체는 promise 객체를 리턴하는 비동기함수입니다. 원래 promise 객체는 자체 abort 기능이 없기 때문에 abortcontroller 를 통해서 비동기 동작 중단 기능을 구현 할 수 있습니다. - 사용해야 하는 이유 1) 필요하지 않은 API 호출을 취소하여 웹페이지 성능개선 2) API 호출로 인해 발생하는 비용 절감 2. 기본적인 사용방.. 2020. 10. 3.
React 는 왜 프레임워크가 아니라 라이브러리일까? React에 관한 글을 작성하다가 React는 왜 라이브러리일까? 그리고 프레임워크와 라이브러리의 차이점은 무엇일까? 에 대한 해답을 얻기위해 포스팅을 작성하게 되었습니다. 1. React 는 프레임워크일까? 라이브러리일까? 그 답은 React 공식 홈페이지에서 얻을 수 있었습니다. - React 홈페이지 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 2. 그렇다면 왜 React는 라이브리리일까? React가 라이브러리인 이유를 생각해 보기 전에 프레임워크와 라이브러리의 간단한 정의를 찾아보았습니다. 1) 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 .. 2020. 9. 16.

티스토리툴바