코딩항해기

트랜스파일러 Transpiler트랜스파일러는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성한다. 최신 버전의 자바스크립트(ES6/ES2015)를 구형 버전인 ES5로 변환해주는 Babel이 대표적인 예이다. 변환을 통해 구형 브라우저에서도 동작할 수 있도록 지원하고, 변환된 코드는 호환성을 확보하면서 최신 기능을 사용할 수 있는 이점을 제공한다. 트랜스파일러는 언어 간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 호환성을 향상시키는데 사용된다. TypeScript의 컴파일러나 CoffeeScript의 컴파일러 등이 트랜스파일러 예시이..

ECMAScript5 주요특징엄격 모드 Strict ModeES5에서 추가된 기능 중 엄격모드가 있으며, 지시어로 활성화 할 수 있는 이 모드는 JavaScript 문법의 제약을 강화하고 불완전한 작업을 방지한다."use strict";// 코드는 이제 엄격 모드로 실행됩니다 선언되지 않은 변수를 사용하거나, 읽기 전용 속성에 할당하거나, 매개변수 이름이 중복될 경우, 삭제할 수 없는 속성을 삭제할 경우 오류가 발생하며, with문 사용과 eval, argument를 함수명으로 사용하는 것이 금지된다. this의 기본값이 전역 객체 대신 undefined로 설정된다. 최신의 자바스크립트에서는 이 Strict 모드가 기본처럼 사용되고 있다. 특히 이후 버전인 ES6부터 도입된 클래스와 모듈은 기본이 Str..

ECMAScript자바스크립트는 1995년 Brendan Eich라는 사람이 발명했다. 그리고 1997년에 ECMA 표준이 되었다. ECMA Script는 Ecma 인터내셔널 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌으며, 액션스크립트, J스크립트 등 다른 스크립트 언어도 포함한다. ES5ECMAScript5를 줄여서 ES5라고 하며 새로운 표준이 발표될 때마다 숫자가 늘어난다. ES5는 2009년에 발표된 버전이며 대부분의 브라우저에서 지원한다. 아직 var를 사용하는 버전이다. ES6부터는 let, const를 지원하며 그 외에도 다른 기능들이 많이 추가되었다. 유독 ES5와 ES6를 구분짓는데, 그 이유는 var let cons..

넥사크로 N v24넥사크로 N의 24버전은 2023년 11월 투비소프트에서 출시된 UIUX 통합개발 플랫폼이다.로우코드를 지원하고 있으며 기업용 솔루션을 제공하는데 초점이 맞춰져 있다. 고성능의 UI 및 애플리케이션 개발을 지원하는 다양한 기능을 제공하고 있다. 기능 크로스 플랫폼 지원:넥사크로 N v24는 웹, 모바일(Android, iOS), 데스크탑(Windows, macOS)을 아우르는 다양한 플랫폼을 지원하며, 한번의 개발로 여러 플랫폼에서 실행 가능한 애플리케이션을 만들 수 있다. 강력한 UI 컴포넌트:다양한 UI 컴포넌트와 스타일을 제공하여, 고급 UI/UX를 개발할 수 있게 한다. 그리드, 차트, 리스트, 다이얼로그 등 기업용 애플리케이션에서 자주 사용하는 UI 요소들을 쉽게 구현할 수 있..

HTML 규약 및 관례HTML에는 다양한 규약과 최선의 관례가 존재한다. 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있는 장점이 있다. 문서 형식 선언HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 한다. (HTML5 기준) 문서 구조  유효한 마크업문서는 유효한 마크업을 가져야 하며 W3C Markup Validation Service와 같은 도구를 사용하여 문서를 유효성 검사한다. 의미 있는 태그 사용 / 시맨틱 마크업 HTML5에서는 의미 있는 태그를 사용하여 문서를 정의한다. header, nav, section, article, footer 등의 태그를 활용하여 문서를 의미 있게 구조화한다..

form validation폼에 작성된 데이터가 서버로 전송되기 전 전송할 데이터들이 올바른 포맷으로 잘 입력되었는지 확인하는 과정이다. (=유효성 검증) validation 위치클라이언트 사이드가 좋을까 서버 사이드가 좋을까, 둘 다 장단점이 있으며 속도처리 면에서는 클라이언트가 빠르다. 태그 자체에 검사가 내장되어있어 submit 버튼을 누르기도 전에 에러 메세지로 알릴 수 있기 때문이다.하지만 서버만 가능한 검사 (데이터 비교 등등)도 있으므로 우위를 구분할 수 없다. 보안 측면에서는 둘 다 해야한다는 의견도 있다. (자바스크립트를 알면 쉽게 우회가 가능) 태그에 붙일 수 있는 validation 속성required필수 입력 필드 지정모든 input 타입minlength/maxlength최소/최대 ..

TypeScriptTypeScript는 Microsoft에서 개발한 JavaScript의 슈퍼셋 프로그래밍 언어다. JavaScript에 정적 타입을 추가하여 코드의 안정성과 가독성을 높여주며, 대규모 애플리케이션 개발에 특히 유용하다. 기본 타입 시스템TypeScript의 가장 큰 특징은 정적 타입 시스템이다. JavaScript의 동적 타입과는 달리, 변수와 함수의 타입을 명시적으로 선언할 수 있다. // 기본 타입 선언let name: string = "홍길동";let age: number = 25;let isStudent: boolean = true;let numbers: number[] = [1, 2, 3, 4, 5];let tuple: [string, number] = ["홍길동", 25];/..

CSS 방법론CSS 방법론은 CSS를 효율적이고 유지보수하기 쉽게 작성하기 위한 일련의 규칙과 가이드라인이다. 대규모 프로젝트에서 CSS를 체계적으로 관리하기 위해 필수적이다. 필요에 따라 여러 방법론을 혼합해 사용한다. CSS 방법론 종류BEM (Block Element Modifier)가장 널리 사용되는 CSS 방법론으로, 클래스 이름을 통해 요소의 구조를 명확히 표현한다./* Block */.card { }/* Element */.card__title { }.card__image { }/* Modifier */.card--featured { }.card__title--large { }/* 실제 사용 예시 */.header { }.header__navigation { }.header__logo { }..

CSS-in-JSCSS-in-JS는 JavaScript를 사용하여 스타일을 컴포넌트에 직접 작성하는 기술이다. 이는 CSS의 전역 네임스페이스 문제를 해결하고, 컴포넌트 기반 개발에 더 적합한 스타일링 방법을 제공한다. Styled-components가장 널리 사용되는 CSS-in-JS 라이브러리다.import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; padding: 0.25em 1em; border:..

Tailwind CSSTailwind CSS는 유틸리티 우선(utility-first) 접근 방식의 CSS 프레임워크다. 미리 정의된 클래스들을 조합하여 스타일을 구성하는 방식으로, 보다 빠르고 유연한 웹 개발을 가능하게 한다. 환경 세팅# npm으로 설치npm install -D tailwindcssnpx tailwindcss init# PostCSS 설정module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}  핵심개념유틸리티 클래스 제목 제목반응형 디자인 반응형 텍스트 항목 1 항목 2 항목 3상태 변형 버튼 다크 모드 지원 콘텐츠커스텀 설정// tailwind.co..