전체 글

import와 require의 차이

⚽️ import (정적 로딩) import 구문은 ES6(ECMAScript 2015)부터 도입된 정적인 모듈 로딩 구문이다. import 구문은 모듈을 정적으로 로딩하며, 코드가 실행되기 전에 모듈 로딩이 이루어진다. 따라서 import 구문은 항상 모듈 로딩을 가장 위로 올려서 먼저 실행되고, 모듈 로딩은 브라우저 환경에서는 비동기적으로 이루어진다. import는 필요한 부분만 가져올 수 있기 때문에 성능 최적화에 있어서 require보다 뛰어나다. (트리 쉐이킹) // 정적 로딩 (ES6) import { add } from './math'; 🏐 require (동적 로딩) require 구문은 Node.js에서 사용되는 CommonJS 모듈 시스템의 모듈 로딩 구문이다. require 구문은 동..

HTTPS, SSL, TLS 정리하기

💣 http는 보안상의 문제가 있다. 만약 get 요청을 보낸다면, query params에 데이터가 노출이 된다. 그렇다면 post 요청으로 body에 데이터를 담아 보내면 되지 않나? 이 경우에도 중간에 요청이 탈취되었을 때, body의 데이터가 유출될 수 있는 가능성이 있다. ⭐️ 때문에, 이 데이터를 암호화하는 것이 중요하게 된다. 그리고 http에 secure를 더한 것이 바로 https로 https는 데이터의 암호화와 인증을 통해 정보의 기밀성과 무결성을 보호한다. 구글이 https 웹사이트에 SEO 이점을 제공하기에, 서비스되는 웹 사이트들은 SEO를 위해서라도 https로 배포되어야 한다. HTTPS가 적용된 웹 페이지는 신뢰할 수 있는 공인된 기관인 CA(Certificate Author..

Kotlin의 기초 문법 알아보기

Kotlin은 Java를 대체하기 위한 언어로 등장하여 점점 저변을 확대해나가고 있다. Android에서는 Jetpack Compose가 코틀린으로 작성되고, 스프링도 요즘엔 코틀린으로 작성되는 경우가 점점 늘어나고 있다고 한다. 코틀린을 배우면서 생소했던 기초 문법들에 대해서 정리하고자 이번 글을 작성하게 되었다. 예제 코드들은 코틀린 플레이그라운드에서 확인할 수 있다. https://play.kotlinlang.org/ Kotlin Playground: Edit, Run, Share Kotlin Code Online play.kotlinlang.org 코틀린의 실행 진입점은 main function이다. print와 println으로 콘솔을 출력할 수 있는데, 차이점은 ln이 붙은쪽이 엔터가 끝에 들..

React 개발자가 공부해본 SwiftUI

이 글은 React에 익숙한 제가 SwiftUI를 보고 React와 유사한점, 다른점에 대해서 기록하고자 시작하였습니다. 🍊 apple developer 공식문서와 SwiftUI 튜토리얼을 참고했습니다. SwiftUI는 2019년 WWDC19에서 공개되었으니, 벌써 등장한지 몇년이나 지난 UI 프레임워크이다. UIKit으로 개발하는 법은 잘 모르지만, 기존보다 DX가 향상된 개발 방법인 것 같다. SwiftUI를 React와 비교하면서 생각하게 된 이유는 아무래도 일단 둘 모두 선언형으로 작성할 수 있고, 화면에서 변수를 처리하기 위해서 State를 사용한다는 점이다. import {useState} from "react"; function App() { const [etcState, setEtcStat..

animation 성능 향상 (requestAnimationFrame)

reflow, repaint로 인한 성능저하를 막기 위해서 GPU를 사용하여 애니메이션을 작업하는 것이 좋다. GPU를 사용하는 편이 더 부드러운 애니메이션을 보여줄 수 있기 때문이다. (CPU보다 더 많은 core를 가지기에 단순 작업에 적합하다 / GPU의 하드웨어 가속 기능) 그 방법중 하나인 requestAnimationFrame 메서드에 대해서 알아보았다. 원이 좌우로 이동하는 requestAnimationFrame 예제이다. https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame Window: requestAnimationFrame() method - Web API | MDN 화면에 애니메이션을 업데이트할 준비가 될..

Headless UI란?

Headless UI는 UI 구성 요소들을 시각적인 디자인 없이 제공하는 방식을 말한다. 즉, 구성 요소가 제공되지만 UI 디자인이 제공되지는 않기에 직접 스타일을 작성해야 한다. ☁️ 이는 기존의 Material-UI나 Chakra UI같은 UI 컴포넌트 라이브러리와의 차이점으로 UI 컴포넌트 라이브러리는 완전한 스타일과 디자인이 구축된 UI가 제공된다. 일반적인 UI 라이브러리나 프레임워크는 시각적인 스타일과 디자인이 내장되어 있으며, 이를 커스터마이징하거나 디자인을 변경하는 데에는 일부 제한이 있을 수 있지만, Headless UI는 이러한 디자인적인 제약을 없애고, 개발자가 커스텀 디자인을 자유롭게 적용할 수 있다. 이러한 디자인 없는 구성 요소들은 개발자가 UI의 동작을 정의하고 접근성과 상호작..

소수 구하기 (에라토스테네스의 체)

소수를 구하기 위한 알고리즘으로 에라토스테네스의 체가 있다. 2부터 시작하여 2의 배수들을 지워나가고, 그 다음엔 3의 배수, 그 다음엔 5의 배수 (4는 2의 배수로 이미 소수 후보에서 제외되었다)를 지워가며 소수를 추려내는 방법이다. const eratos = (n) => { const arr = new Array(n + 1).fill(true); arr[0] = false; arr[1] = false; for(let i = 2; i

선언적 프로그래밍이란?

선언적 프로그래밍은 코드를 작성할 때 "무엇(What)"을 달성하고자 하는지에 초점을 둔다. 어떻게(How) 달성할지에 대한 구체적인 단계를 명시하지 않고, 원하는 결과를 명확하게 묘사하는 방식으로 코드를 작성한다. 선언형으로 작성된 코드는 추상화로 문제를 해결하기에, 재사용성이 높고 사용할때 간결하여 가독성이 높다. 각각의 기능을 따로 구현하게 되기 때문에 각 기능의 모듈간 종속성이 낮아져 독립적으로 관리 및 사용이 가능하다. 위와 같은 이유들로, 선언적 프로그래밍은 유지보수가 적합한 코드들을 작성할 수 있게 해준다. React는 선언형 UI 라이브러리로, 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다고 한다. 자바스크립트를 이용해 선언적으로 작성한 배열의 모든 값 더하는 코드 cons..