본문 바로가기

developer22

Typescript 시작하자! 1. javascript의 약점 동적 타입 언어는 예기치 않은 버그가 나올 확률이 높다. javascript는 웹 페이지에 동적인 효과를 주기위해 만들어진 스크립트 언어이다. 웹페이지의 부드러운 상호 작용을 위해 html, css와 함께 사용. 시간이 지나면서 웹 브라우저 내에서 실행되는 javascript의 성능을 높이고자 하는 니즈가 늘어나며, 구글에서 감사하게도 v8엔진이라는 것을 만들어 세상에 공개. 바로 구글 크롬 브라우저에 내장되어 있다. 또한 8v 엔진의 우수한 성능을 기반으로 Node.js라는 플랫폼이 나옴. 이제 javascript로도 백엔드를 작성할 수 있게 되었다. 하지만 javascirpt는 동적 타입의 언어이다. 동적언어 타입 동적 결정: 변수의 종류를 코드 실행 중에 정함. 런타.. 2024. 3. 5.
Font Awesome 아이콘 사용하기: 아이콘으로 좋아요 사용해보기 Font Awesome는 다양한 벡터 기반 아이콘을 제공하는 무료 아이콘 폰트 및 CSS 프레임워크입니다. 웹 개발자들은 이를 통해 간편하게 다양한 아이콘을 웹 페이지에 추가할 수 있습니다. Font Awesome를 사용하는 목적 아이콘은 웹 페이지에 시각적 요소를 추가하고 사용자 경험을 향상시키는 데 사용됩니다. Font Awesome는 벡터 기반으로 제공되어 해상도에 상관없이 선명하게 표시됩니다. Font Awesome의 장점 다양한 아이콘: Font Awesome는 7,000개 이상의 아이콘을 제공하며, 여러 카테고리와 스타일을 지원합니다. 벡터 기반: 확대 또는 축소 시에도 깨지지 않고 선명하게 표시됩니다. 쉬운 사용: 간단한 HTML 및 CSS 코드로 손쉽게 적용할 수 있습니다. Font Awe.. 2024. 2. 18.
React 초보자를 위한 기본 용어 정리 React는 현대적인 웹 애플리케이션을 개발하기 위한 강력하고 유연한 라이브러리입니다. 그러나 React를 처음 다루는 경우, 몇 가지 핵심적인 개념과 용어를 이해하는 것이 중요합니다. React의 핵심 개념들을 간단하게 살펴보고, 컴포넌트, Props, State, 이벤트 처리, 그리고 다른 주요 용어들에 대해 알아봅시다! 1. 컴포넌트 (Components): 컴포넌트는 = 레고 조립 블록 각각의 레고 블록은 독립적이지만 필요에 따라 조합하여 더 큰 구조물을 만들 수 있습니다. React 앱에서도 각각의 컴포넌트는 독립적이며 재사용 가능한 부품으로 생각할수 있습니다. 2. Props와 State: Props는 부모에서 자식으로 전달되는 유산 또는 선물과 같습니다. 예를 들어, 부모가 자식에게 선물 상.. 2024. 2. 8.
시맨틱 웹과 HTML5: 의미론적 태그로 더 나은 웹 구축하기 웹 개발의 핵심 중 하나인 시맨틱 웹은 HTML5에서 도입된 의미론적 태그를 통해 웹 문서의 의미와 구조를 더 명확하게 표현하는 개념입니다. 시맨틱 웹의 개념 시맨틱 웹은 정보를 의미론적으로 표현하여 컴퓨터가 이해하고 처리할 수 있도록 하는 웹의 확장된 버전입니다. 이는 웹 문서에 명확한 의미를 부여하여 사용자 뿐만 아니라 기계도 이해할 수 있는 구조를 만드는 것을 의미합니다. 시맨틱 웹의 이점 검색 엔진 최적화 (SEO): 시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 의미를 더 잘 이해하고 색인화할 수 있습니다. 웹 접근성 향상: 시맨틱 마크업은 스크린 리더 및 다양한 디바이스에서 더 나은 접근성을 제공합니다. 코드의 가독성 및 유지보수성 향상: 명확한 의미를 가진 태그를 사용하면 코드의 가독성이 .. 2024. 2. 5.
JavaScript에서의 변수와 상수: 이해 변수와 상수의 개념 javascript에서 변수와 상수는 프로그램에서 데이터를 저장하고 관리하는 데 사용되는 중요한 요소이다. 변수(Variables): 변할 수 있는 값을 저장하는데 사용됩니다. 변수는 var, let, 또는 const 키워드로 선언될 수 있습니다. var는 더 이상 권장되지 않으며, 대부분의 경우 let이나 const를 사용합니다. let age = 25; // 변수 선언과 초기화 age = 26; // 변수 값 변경 가능 상수(Constants): 한 번 값을 할당하면 변경할 수 없는 고정된 값을 나타냅니다. const 키워드를 사용하여 선언하며, 선언과 동시에 값을 할당해야 합니다. const pi = 3.14; // 상수 선언과 초기화 // pi = 3.14159; // 오류: .. 2024. 2. 2.
CSS Reset에 대한 이해: reset.css의 필요성과 사용법 CSS Reset하기! reset.css는 웹 개발에서 사용되는 스타일 시트 중 하나로, 브라우저의 기본 스타일을 초기화하여 각 브라우저 간의 일관성을 유지하고 일부 요소의 스타일을 표준화하는데 도움을 줍니다. 일반적으로 웹 페이지가 동일한 모양을 가지도록 만드는 데 사용됩니다. 주로 CSS의 브라우저 간 호환성 문제를 해결하기 위해 만들어졌습니다. 다른 브라우저는 기본적으로 각각 다른 스타일을 가지고 있기 때문에, 이를 통일시키기 위해 리셋 스타일을 사용합니다. /* reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, bi.. 2024. 2. 1.
HTML '<a>'태그 : 하이퍼링크 생성과 활용 html의 (anchor)태그는 하이퍼링크를 생성하는 데 사용되며, 사용자를 다른 웹페이지로 이동하거나 동일한 페이지 내에서 특정 위치로 스크롤할 수 있도록 합니다. 특히 웹의 네비게이션을 구축하는데 핵심적인 역할을하는 태그입니다. 사용법 링크 텍스트 href : 링크가 이동할 URL 또는 경로를 지정합니다. 링크 텍스트 : 사용자에게 보여질 클릭 가능한 텍스트를 지정합니다. (이미지도 가능 ) 새 창에서 열기 또한 target속성을 활용해서 링크를 열 위치를 나타내는 속성으로 사용합니다. _blank : 새창 또는 새탭에서 열립니다. _self : 현재창 또는 현재탭에서 열립니다. _parent : 부모프레임에서 열립니다. _top : 전체 브라우저 창에서 열립니다. 만약 속성을 명시하지 않았을때에는 .. 2024. 1. 31.
Props와 Children: 리액트 컴포넌트에서 중요한 두 가지 개념 React에서 중요한 2가지 개념! Props는 뭐죠? 컴퓨터는 다양한 작업을 할떄 여러정보가 필요하다. 이때 컴포넌트에게 필요한 정보를 전달할 수 있는데, 이를 Props(속성)이라고 한다. 예를들면 우리가 로봇 컴포넌트를 만든다면, 로봇의 색이나 이름같은 정보들을 Props로 전달할 수 있다. Props는 어떻게 사용되나? 컴포넌트를 만들 때, Props를 사용하여 다른 컴포넌트로부터 정보를 받아올 수 있다. // 부모 컴포넌트에서 자식 컴포넌트로 Props 전달 자식 컴포넌트에서 Props를 받아와서 사용할 수 있다. // 자식 컴포넌트에서 Props 사용 const Robot = (props) => { return ( {props.name} is a {props.color} robot! ); };.. 2024. 1. 30.

티스토리툴바