FrontEnd9 GraphQL이란? 최근 취업 준비를 하며 여러 기업의 채용공고를 보았다. 그중 내눈에 가장 생소하지만 많이 보이는 기술스택이 GraphQL이라는 기술이였다. 처음 GraphQL이라는 이름을 보았을 때 웹 어플리케이션에서 그래프를 생성해주는 라이브러리인가? 하며 따로 공부해볼 생각은 하지 않았었다. 하지만 너무 많은 회사에서 원하고 있는 기술스택이였기에 어떤 기술인지 알아만보자! 라는 생각으로 GraphQL에 대해 학습하였고 그래프를 생성해주는 그런 라이브러리가 아니라는 것을 알게되었다.이번 포스팅에서는 GraphQL을 공부하면서 알게된 주요 개념, 장단점, REST API와의 비교등을 하며 진행해볼 예정이다.1. 개요GraphQL은 페이스북에서 2012년에 개발된 API를 위한 쿼리언어이자 서버측 런타임이다. GraphQ.. 2025. 3. 14. HTML의 역사 HTML이란?웹사이트의 모습을 기술하기 위한 마크업 언어Hyper Text Markup Language 의 약어로 웹 페이지에서 다른 페이지로 이동이 가능한 HyperText기능을 가진 문서를 만드는 언어이다.HTML이 생기게 된 배경1980년 후반, CERN에서 근무하던 팀 버너스 리는 연구자들 간 문서를 공유하기 위한 체계를 만들기 위해 방법을 찾고 있었다. 그는 인터넷을 기반으로 문서를 연결하고 쉽게 접근할 수 있는 시스템을 구상하게 되었고 HTML이라는 언어를 개발하게 되었다.1991년 HTML의 초기 버전이 발표되면서 월드 와일드 웹(www)가 탄생하게 되었다.HTML의 역사HTML 1.01993년 발표된 HTML 1.0은 웹 페이지의 기본 구조를 정의할 수 있는 가장 초기 버전이다. .. 2025. 1. 4. 바닐라 JS로 리액트 만들기 - 4 이전에 react의 상태관리와 해당 기능을 구현하는것 까지 진행을 했었다.이번에는 리엑트의 가상돔에 대해 알아보고 최대한 비슷하게 구현해볼것이다.React의 가상DOM리엑트에서 가상돔이란 실제돔 요소를 변경하기 전 가상돔에 미리 돔 작업을 실시하고 실제돔에 적용하므로써 돔 조작에 대한 비용을 줄이는 최적화 기술이다.가상돔 실행 순서초기 렌더링컴포넌트가 처음 렌더링 될 때 가상돔을 생성한다.이때 생성되는 돔은 실제돔과 유사한 형태로 자바스크립트 객체로 표현된다{ type:"div", props:{}, children:[]}상태변화컴포넌트의 상태나 속성이 변경되면 변경된 컴포넌트를 가상돔에 리렌더링한다.이 과정에서 새로 랜더링된 가상돔과 이전의 가상돔을 비교한다.diff알고리즘두개의 가상돔을 비교하는 .. 2024. 9. 30. 바닐라 JS로 리액트 만들기 - 3 이전에 컴포넌트 생성까지 구현을 했다.이번에는 상태관리에 대해 알아보고 구현해볼 예정이다.React에서의 상태관리React useState문서리액트에서는 컴포넌트 최상위 레벨에서 useState를 호출하여 state변수를 선언한다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(25); const [name, setName] = useState('정명기'); ... }이때 [변수, set변수] 를 이용하여 이름을 지정하는것이 규칙이므로 주의해야한다.useState함수에 인자로 넘기는 initialState는 상태의 초기 설정값으로 초기 랜더링시에 사용되고 이후에는 무시된다.initialSta.. 2024. 9. 24. 바닐라 JS로 리액트 만들기 - 2 이전의 웹팩과 바벨 설정이 끝났다면 createElement함수부터 구현을 해야한다.리액트의 경우 React.creatElement 메서드를 사용하여 프레임워크에서 자동으로 jsx를 변환해주지만 이번 프로젝트에서는 직접 프레임워크를 만들어볼 예정이므로 createElement부터 구현하기로 했다.React에서 createElementReact 공식문서위 공식문서를 보면 createElement는 3가지의 인자를 받는다.const element = createElement(type, props, ...children)type : 어떤 종류의 태그를 사용하는지porps: 해당 요소의 속성은 무엇이 들어가는지children: 해당 태그의 자식요소는 어떤것이 있는지를 입력받고 이를 이용하여 리액트 엘리먼트를 반.. 2024. 9. 24. 바닐라 JS로 리액트 만들기 - 1 Babel자바스크립트 컴파일러중 하나로 JSX문법을 JS로 변환하기 위해 사용한다.React에서는 React.createElement를 호출하여 리액트 Element를 반환한다. 이를 위해 상단에 import React from 'react';를 사용한다.babel 설정프로젝트의 루트에 .babelrc파일을 생성한 후 아래 예시코드를 작성한다.{ "presets": ["@babel/preset-env"], "plugins": [ [ "@babel/plugin-transform-react-jsx", { "pragma": "createElement" } ] ]}위의 설정이 끝나게 되.. 2024. 9. 24. 이전 1 2 다음
