본문 바로가기
728x90

Studying Web Development21

GraphQL이란? 쓰는 이유 요약정리 📌 GraphQL이란? facebook에서 만든 새로운 API 표준언어 필요한 데이터 구조조정, 데이터 주고 받기 가능 Graph + Query Language GraphQL은 애플리케이션 프로그래밍 인터페이스(API)를 위한 쿼리 언어이자 서버측 런타임으로 클라이언트에게 요청한 만큼의 데이터를 제공하는 데 우선 순위를 둡니다. GraphQL(이하 GQL)은 Structed Query Language(이하 SQL)와 마찬가지로 쿼리 언어입니다. 하지만 GQL과 SQL의 언어적 구조 차이는 매우 큽니다. 또한 GQL과 SQL이 실전에서 쓰이는 방식의 차이도 매우 큽니다. GQL과 SQL의 언어적 구조 차이가 활용 측면에서의 차이를 가져왔습니다. 이 둘은 애초에 탄생 시기도 다르고 배경도 다릅니다. SQL.. 2022. 8. 10.
CI/CD란? 요약 정리 📌 CI/CD? CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법입니다. CI/CD의 기본 개념은 지속적인 통합,지속적인 서비스 제공, 지속적인 배포입니다. CI/CD는 새로운 코드 통합으로 인해 개발 및 운영팀에 발생하는 문제를 해결하기 위한 솔루션입니다. 📌 CI란? CI는 빌드/테스트 자동화 과정입니다. CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로, 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 작업을 할 경우 서로 충돌할 수 있는 문제를 해.. 2022. 8. 10.
Babel, Webpack이란? 쓰는 이유 요약 정리 📌 Babel이란? 바벨(Babel)이란, 입력과 출력이 모두 자바스크립트 코드인 컴파일러입니다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서도 정상적으로 실행되도록 변환해줍니다. (최신 버전의 JavaScript 코드를 ES5버전의 코드로 바꿔주는 Node.js패키지) 현재는 바벨을 이용하여 JSX 문법, 타입스크립트(TypeScript)와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있습니다. babel을 쓰는 이유 크로스 브라우징 JavaScript (ES6) -> JavaScript(ES5)로 변환해줍니다. (브라우저 하위 호환성을 생각) 각 브라우저마다 JavaScript 엔진이 다르지만, 모든 브라우저에서 동작하도록 호환성을 지켜줍니다. 폴리필(poly.. 2022. 8. 10.
Reflow와 Repaint가 실행되는 시점 Reflow와 Repaint가 실행되는 시점 Reflow DOM 엘리먼트 추가, 제거 또는 변경 CSS 스타일 추가, 제거 또는 변경 CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다. CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다. offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다. 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하.. 2022. 7. 30.