Emotion이란? Emotion은 JS로 css 스타일을 작성하도록 설계된 라이브러리다. Emotion은 프레임워크에 구애 받지 않고 사용이 가능하며, React에서도 사용 가능하다. @emotion/styled 패키지 https://www.npmjs.com/package/@emotion/styled `@emotion/styled` 패키지는 style을 가진 Component를 만들고 싶을 때 사용한다.
JavaScript
'Spread', 'Optional Chaining', 그리고 'Destructuring'은 모두 자바스크립트(JavaScript)에서 사용되는 연산자 및 표현식입니다. 자바스크립트는 다양한 연산자와 구문을 제공하여 개발자가 보다 쉽고 간결하게 코드를 작성할 수 있도록 도와줍니다. 삼항 연산자(Ternary Operator): 삼항 연산자는 조건에 따라 두 개의 값을 반환할 때 사용하는 연산자입니다. 문법은 조건 ? 값1 : 값2 형태로, 조건이 참(True)이면 값1을, 그렇지 않으면 값2를 반환합니다. spread 연산자: ES6에 도입된 spread 연산자(...)는 배열이나 객체의 요소를 개별 요소로 확장할 때 사용합니다. 이를 통해 배열을 인자 목록으로 쉽게 전달하거나, 객체 리터럴을 조합할 수..
그동안 프레임 워크를 쓰지않고 자바스크립트를 사용해봤기에 리액트나 뷰가 어렵게 느껴졌다. 이러한 빌드과정이 필요없었기 때문이다. 기존에는 전통적인 웹 개발 방식을 유지했었기 때문에 복잡한 빌드 과정이 필요하지 않았다. 이러한 경우, 자바스크립트 코드는 HTML 문서에 직접 포함되거나, 태그를 통해 외부 파일로 참조되어, 브라우저가 이를 해석하여 실행하기 때문에 코드를 서버에 저장하면 바로 적용되었었다. 이전에 PHP, JavaScript, jQuery를 사용하여 개발할 때는, 서버 사이드 렌더링(Server-Side Rendering, SSR) 방식을 주로 사용했다. 이 방식에서는 서버에서 페이지의 전체 HTML을 생성하고, 그 결과를 클라이언트(브라우저)에 전송한다. JavaScript와 jQuery는..
JavaScript에서 replace() 메소드는 문자열 내의 모든 패턴에 대해 대체 작업을 수행하지 않는다. 기본적으로 첫 번째 패턴만 대체하고 종료되기때문에 ,와 , 사이에 공백이 있으면 ,가 중복될 수 있다. 그래서 replace() 메소드를 반복해서 사용하거나 정규식을 사용하여 다음과 같이 대체할 수 있다. javascriptCopy code list_item = list_item.replace(/,,+/g, ',');
CSS https://coding.tools/kr/css-minifier CSS 압축 온라인 도구 - Coding.Tools 이 CSS 압축 온라인 도구는 원본 CSS 파일을 압축하여 네트워크를 통해보다 빠르게 전송할 수있는 공간을 절약합니다. coding.tools JavaScript(JS) https://www.toptal.com/developers/javascript-minifier JavaScript Minifier & Compressor | Toptal® Use our JavaScript Minifier & Compressor tool to reduce JavaScript code size and make your website load faster. Get started for free now..
