web development8 JSX? 그게 뭔데? 1. JSX의 정의JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다. JSX의 기본 문법:const element = Hello, world!;위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같.. 2024. 9. 10. [REGEX] 저장했던거 설명해드릴게요 자바스크립트 정규식 직전에 쓴 글을 확장해보겠습니다.2024.09.06 - [FrontEnd/Java Script] - [REGEX] 저장해두고 사용하세요 자바스크립트 정규식 [REGEX] 저장해두고 사용하세요 자바스크립트 정규식실속있게 내용만 접수 1. 생년월일/^[0-9]{2}\.(0[1-9]|1[0-2])\.(0[1-9]|[12][0-9]|3[01])$/2. 이메일/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/3. 전화번호/^01([016789])-?([0-9]{3,4})-?([0-9]{4})$/4. 아이디/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/5fathory.tistory.com이전 글에서 소개했던 자주 쓰는 정규식을 자세하게 뜯어보겠습니다.1. YY.MM.DD 형식의 생.. 2024. 9. 6. [REGEX] 저장해두고 사용하세요 자바스크립트 정규식 실속있게 내용만 접수 1. 생년월일/^[0-9]{2}\.(0[1-9]|1[0-2])\.(0[1-9]|[12][0-9]|3[01])$/2. 이메일/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/3. 전화번호/^01([016789])-?([0-9]{3,4})-?([0-9]{4})$/4. 아이디/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/5. 카드번호/^(?:4\d{3}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|5[1-5]\d{2}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|2(?:2[2-9]\d|[3-6]\d{2}|7(?:[01]\d|20))[- ]?\d{3}[- ]?\d{3}[- ]?\d{4}|3[47]\d{2}[- ]?\d{6}[- ]?\d{5.. 2024. 9. 6. flexbox vs inline block Flexbox를 사용하여 inline 요소를 표현하는 것과 display: inline-block을 사용하여 inline 요소를 표현하는 것의 성능 차이점을 알아보자특성Flexbox (display: inline-flex)Inline-Block (display: inline-block)목적컨테이너 내의 항목 배치 및 정렬자체 크기 조정 및 다른 요소와 나란히 배치레이아웃 가능 범위강력한 정렬, 정당화, 순서 변경 등제한적 (기본적인 정렬 및 마진만 가능)부모 요소의 속성 상속부모 요소의 속성을 상속받으며, 개별 설정이 가능함각 요소는 독립적으로 설정됨정렬 기능 지원수평 및 수직 정렬 지원수평 정렬만 가능속성 설정 유연성flex-grow, flex-shrink, flex-basis등 각 요소별 속성을 지.. 2024. 7. 18. 자바 BackEnd framework 종류와 특징 Introduction Java는 웹 애플리케이션을 포함한 다양한 애플리케이션을 개발하는 데 사용되는 인기있는 프로그래밍 언어입니다. 웹 애플리케이션의 BackEnd을 구축할 때 개발자들은 개발 프로세스를 단순화하고 생산성을 향상시키기 위해 프레임워크를 사용하는 경우가 많습니다. 이 블로그 포스트에서는 다양한 유형의 자바 BackEnd 프레임워크를 탐색하고 그 특징에 대해 논의해보겠습니다. 1. Spring Framework Spring Framework는 가장 널리 사용되는 자바 BackEnd 프레임워크 중 하나입니다. 현대적인 자바 기반 엔터프라이즈 애플리케이션을 위한 포괄적인 프로그래밍 및 구성 모델을 제공합니다. Spring Framework의 주요 기능 중 일부는 다음과 같습니다: public .. 2023. 7. 1. PHP BackEnd framework 종류와 특징 소개 PHP는 웹 개발을 위한 가장 인기 있는 프로그래밍 언어 중 하나이며, 애플리케이션의 백엔드를 구축하기 위한 다양한 프레임워크를 제공합니다. 이 블로그 포스트에서는 PHP 백엔드 프레임워크의 종류와 특징을 알아보겠습니다. 초보자든 경험 많은 개발자든, 이러한 프레임워크를 이해하는 것은 프로젝트에 적합한 도구를 선택할 때 도움이 될 수 있습니다. 1. Laravel Laravel은 MVC (Model-View-Controller) 아키텍처 패턴을 따르는 강력하고 우아한 PHP 프레임워크입니다. 라우팅, 캐싱, 인증 및 데이터베이스 관리와 같은 웹 애플리케이션을 구축하기 위한 강력한 도구와 기능을 제공합니다. Laravel은 표현적인 구문, 개발자 친화적인 문서 및 크고 활발한 커뮤니티로 유명합니다. .. 2023. 7. 1. 파이썬 BackEnd framework 종류와 특징 소개 파이썬은 다양한 응용 프로그램을 개발할 수 있는 다재다능한 프로그래밍 언어로, 웹 개발을 포함한 여러 분야에서 사용됩니다. 웹 애플리케이션의 BackEnd를 구축할 때 파이썬에서는 개발 과정을 간소화하고 다양한 기능과 기능을 제공하는 여러 프레임워크가 있습니다. 1. Django Django는 모델-뷰-컨트롤러 (MVC) 아키텍처 패턴을 따르는 고수준의 파이썬 웹 프레임워크입니다. 복잡한 웹 애플리케이션을 빠르고 효율적으로 구축하기 위한 강력한 도구와 기능을 제공합니다. 주요 기능으로는 데이터베이스 관리를 위한 ORM (객체-관계 매핑), 내장 인증 및 권한 부여, 동적 웹 페이지 생성을 위한 템플릿 엔진 등이 있습니다. 2. Flask Flask는 가벼우면서도 유연한 파이썬 웹 프레임워크로, 모델.. 2023. 7. 1. Front end 면접에서 자주 묻는 질문들 소개 프론트 엔드 개발은 웹 개발의 중요한 부분이며, 따라서 프론트 엔드 면접에서는 자주 묻는 질문들이 포함됩니다. 이러한 질문들은 면접관이 HTML, CSS, JavaScript와 같은 프론트 엔드 기술에 대한 지식과 이해력을 평가하는 데 도움이 됩니다. 이 블로그 포스트에서는 프론트 엔드 면접에서 자주 묻는 일부 일반적인 질문들을 살펴보겠습니다. 1. CSS에서 박스 모델이란 무엇인가요? 박스 모델은 웹 페이지에서 요소가 렌더링되는 방식을 설명하는 CSS의 기본 개념입니다. 이는 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다. 콘텐츠 영역은 요소의 실제 콘텐츠가 표시되는 곳입니다. 패딩은 콘텐츠와 테두리 사이의 공간을 제공합니다. 테두리는 패딩과 콘텐츠를 둘러싸며, 마진은 요소와 페이지의 다른 요소 사.. 2023. 6. 27. 이전 1 다음 반응형
