본문 바로가기

"공부" 𝑟𝑒𝑐𝑜𝑟𝑑/𝐹𝑟𝑜𝑛𝑡𝑒𝑛𝑑14

[TIL] Babel이란 무엇인가? 바벨(Babel)이란? 프론트엔드 개발을 하는 사람이라면 한 번쯤 바벨에 대해서 들어본 적은 있을 것이다. 바벨(Babel)은 자바스크립트 코드를 변환해 주는 컴파일러이다. 자바스크립트 코드를 변환? 왜 해야하는데? 바벨은 JavaScript ES6 문법이 등장하면서 나오게 되었다. ES6 문법이 막 등장했을 때는 대부분의 브라우저가 ES5 문법만 지원하고 있었다. 때문에 개발자들이 ES6 문법을 사용하더라도 최신 문법을 사용하지 않는 브라우저라면 동작이 불가능했다. 그래서 ES6 문법을 ES5 문법으로 변환해줄 트랜스파일러가 필요했는데, 이 것이 바로 바벨(Babel)이다. 그 때문에 바벨이 처음 등장했을 때 당시 이름은 Babel이 아니라 6to5였다고 한다. 하지만, 이제는 ES6를 포함하여 ES7.. 2023. 6. 15.

[TIL] React-Hooks 알아보기 클래스형 vs 함수형 React는 처음에 클래스형 컴포넌트의 방법만 존재했다. 하지만, 클래스형은 어렵고 복잡하여 함수형 컴포넌트 방법이 생겨나게 되었다. 함수형 컴포넌트는 클래스형 컴포넌트보다 훨씬 간단하기에 점점 함수형 컴포넌트의 사용 비율이 높아지게 되었고, 요즘 현업에서는 클래스형보다는 함수형 컴포넌트를 많이 사용하는 추세라고 한다. 클래스형 컴포넌트 import { Component } from 'react'; class Hello extends Component { render() { return 클래스형 컴포넌트 } } export default Hello 함수형 컴포넌트 const Hello = () => 함수형 컴포넌트 export default Hello 이 함수형 컴포넌트는 화살표 함.. 2023. 6. 9.

[TIL] CSS / Sass / SCSS 차이점 알아보기 What is CSS ? CSS는 Cascading Style Sheets의 약어이고, 이는 웹페이지를 꾸미려고 작성하는 코드이다. 어느 정도 웹 개발을 공부한 사람이라면 프론트엔드, 백엔드 개발자를 막론하고 CSS라는 것은 흔히들 들어봤을 것이다. 공식문서에 의하면 CSS는 프로그래밍 언어가 아니고, Stylesheet 언어라고 한다. CSS를 통해 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용시킬 수 있다. .list { width: 100px; float: left; } li { color: red; background: url("./image.jpg"); } li:last-child { margin-right: -10px; } CSS는 너무 익숙해 Sass 와 SCSS는 무엇일까 ?? S.. 2023. 6. 3.

[TIL] REST-API와 GraphQL-API의 차이점 GraphQL이란? GraphQL은 최근 개발자들 사이에서 빠른 속도로 인기가 상승 중이다. 이 GraphQL은 2012년에 페이스북에서 만든 쿼리 언어이다. SQL의 QL이 Query Language을 의미하는데 SQL은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이라면, 이 GraphQL은 웹 클라이언트가 서버로부터 데이터를 효율적으로 가져오는 것을 목적으로 만든 쿼리 언어인 것이다. 이 GraphQL은 현재 Facebook, Airbnb, Github 등의 유명한 사이트에서 사용 중인 통신 방법이라고 한다. REST-API를 두고 왜?? 그렇다면 사람들이 통상적으로 많이들 사용하고 있는 REST-API를 두고 왜 GraphQL을 사용하는 것인지 궁금했다. REST-API와 G.. 2023. 2. 28.

UI와 UX란? 그리고 UI와 UX의 관계 UI (User Interface) 사전적 의미로 직역해보면 User: 사용자 Interface: 인터페이스 (상호작용) 을 의미한다. 이는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 사용자가 제품 / 서비스를 사용할 때 가장 먼저 접하게 되는 부분이다. 화면 상의 그래픽 요소 외에도, 반응형 등의 기술적인 요소도 모두 UI에 포함된다. 키보드, 마우스 등의 물리적 요소 또한 컴퓨터와 상호 작용하기 위한 시스템으로 UI라고 볼 수 있다. 현대사회에 들어서는 모바일 디바이스에서 그래픽 UI인 GUI가 중요해지게 되었다. 그렇다면 UX란 무엇일까? UX (User eXperience) 사전적 의미로 직역해보면 User: 사용자 eXperience: 경험 을 의미한다. 이는 사용자가 어떤 시스템.. 2022. 6. 27.

Github Pages 배포 시 favicon 적용 안되는 이슈 최근 React로 간단하게 유튜브 클론 프로젝트를 해보았다. Github Pages를 통해 프로젝트 배포를 했는데 favicon이 적용되지 않는 이슈를 겪었다. 이 글을 통해 해당 이슈를 해결한 방법을 적어보려 한다. 일단 처음에 나는 public 디렉토리 속에 favicon.ico를 넣어두었다. index.html 파일의 link 태그도 고쳐보고, 가끔 favicon 적용에 문제가 있으면 쿠키 문제일 때가 있어서 쿠키를 삭제하고 다시 해봤지만 여전히 고쳐지지 않았다... 그러다가 stackoverflow를 통해 해결방법을 찾게 되었다. Favicon with GitHub Pages I'm hosting a few sites with GitHub Pages (User and Project Pages), .. 2022. 4. 12.

이전 1 2 3 다음

티스토리툴바