분류 전체보기
프레임워크와 라이브러리의 차이점
프레임워크와 라이브러리의 차이점
2023.12.07들어가며 프레임워크와 라이브러리는 소프트웨어 개발에서 재사용 가능한 코드의 모음을 의미하지만 구조와 사용 방식에 있어서 차이점이 있다. 프레임워크(Framework) ✅ 무언가를 만드는데 필요한 모든 것이 갖춰져서 제공되는 것 UI, Routing, HTTP Clients, State Management 등이 제공되어 프로젝트를 구현하는데 필요한 모든 것들이 제공된다. 애플리케이션 흐름을 프레임워크가 관리하고, 개발자는 프레임워크 내에서 정해진 방식에 따라 코드를 작성하게 된다. 정해진 방식에 따라서 개발하는 환경이기에 어떤 라이브러리를 사용할지와 같은 고민을 하지 않을 수 있지만, 프레임워크에서 제공하는 내용들을 익혀야 하므로 진입장벽이 상대적으로 높고 자율성이 떨어진다는 단점이 있다. 라이브러리(Li..
[CSS] CSS 선택자
[CSS] CSS 선택자
2023.10.11CSS 선택자 CSS 선택자는 스타일을 적용할 HTML 요소를 지정하거나 선택하기 위한 규칙이다. 선택자를 사용하여 원하는 요소를 대상으로 하여 특정 스타일을 적용할 수 있다. CSS에는 다양한 유형의 선택자가 있으며 크게 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자로 나뉜다. 각각 특정 목적에 따라 요소를 선택하는 데 사용되며, 자주 사용하는 선택자를 정리해보고자 한다. 기본 선택자 전체 선택자 태그 선택자 클래스 선택자 ID 선택자 전체 선택자(Universal Selector) '*'(Asterisk)은 모든 요소를 선택하는 전체 선택자이다. 복합 선택자와 함께 사용하여 범위 내 모든 요소를 선택하는 개념으로 사용하곤 한다. * { color: red; } 전체..
[CSS] CSS 선언 방식
[CSS] CSS 선언 방식
2023.09.21CSS 선언 방식 CSS 선언방식은 크게 4가지 방식으로 이루어져 있다. 인라인 방식 내장 방식 링크 방식 @import 방식 인라인 방식(Inline Style) HTML 요소의 style 속성에 직접 스타일을 작성하는 방식이다. 인라인 스타일은 해당 HTML 요소에만 적용되고, 각 요소마다 별도로 스타일을 지정할 수 있다. 여러 스타일을 선언할 때는 세미콜론(;)으로 구분한다. Hello, World! 인라인 스타일은 다른 선언방식에 비해 우선순위가 높아서, 같은 선택자 스타일을 오버라이드한다. 각 HTML 요소에 대해 스타일을 개별적으로 선언해야 하므로 유지보수가 어렵다. 재사용이 불가능하므로, 동일 스타일을 여러 요서에 적용하려면 각 요소마다 스타일을 선언해야 한다. 인라인 방식은 특정 요소에 빠..
[CSS] 구조 및 특징 이해
[CSS] 구조 및 특징 이해
2023.09.21CSS란? Cascading Style Sheets의 약자로, 웹 페이지의 레이아웃이나 스타일을 정의하는 언어이다. HTML로 작성된 웹 페이지의 내용과 구조를 꾸며주는 역할을 하며 텍스트 색상, 크기, 폰트, 여백, 패딩, 테두리 등을 지정할 수 있다. 구조 선택자 { 속성: 값; 속성: 값; ...; } CSS 규칙은 선택자와 중괄호 {} 사이 속성 집합으로 구성된다. 1. 선택자(Selector) 스타일(CSS)을 적용할 대상으로 특정 요소나 요소 그룹을 선택하는 데 사용한다. 타입 선택자(Type Selectors) : 요소 이름 기반으로 선택한다(h1, p, div). 클래스 선택자(Class selectors) : 요소 class 속성 기반으로 선택한다(.클래스값). ID 선택자(ID sele..
[HTML] HTML 메타데이터 이해하기
[HTML] HTML 메타데이터 이해하기
2023.09.18HTML 메타데이터 HTML 메타데이터는 웹 페이지에 관한 정보를 제공하는 데이터로서, 웹 페이지의 콘텐츠 자체와는 다르게 주로 브라우저나 검색 엔진에게 페이지에 대한 추가적인 정보를 제공하기 위한 것이다. HTML 문서에서 메타데이터는 주로 ... attributes charset Character set의 약어로 문서의 문자 인코딩을 정의하는 속성이며, 우선 인코딩 개념을 이해할 필요가 있다. 인코딩(encoding)은 정보의 형태나 형식을 변환하는 과정이다. 컴퓨터는 데이터를 바이트와 비트로 처리하기 때문에, 사람이 이해하는 형태의 데이터(텍스트, 이미지, 사운드)를 바이트와 비트로 변환하는 과정이 필요하다. 이러한 변환 과정을 인코딩이라고 한다. `charset="UTF-8"`로 문서 문자 인코딩..
[HTML] HTML 기본구조 및 DOCTYPE 이해하기
[HTML] HTML 기본구조 및 DOCTYPE 이해하기
2023.09.15HTML 기본구조 HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어이다. 웹 페이지의 구조와 내용을 정의하는 데 사용되며, 웹 페이지의 제목, 텍스트, 이미지, 링크, 리스트, 테이블 등 여러 요소를 표현할 수 있다. DOCTYPE(DTD, Document Type Definition)은 문서의 맨 처음에 위치하여 해당 문서의 버전과 유형을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 또는 렌더링해야 하는지를 알려주는 용도이다. 은 HTML5를 나타내는 선언으로 간소화되어 단순한 형태로 표현되고 있지만, HTML5 이전에는 다양한 DOCTYPE 선언이 있었다. - HTML 4.01 Strict: - HTML 4...
맥 생산성을 높여주는 Raycast 사용 방법
맥 생산성을 높여주는 Raycast 사용 방법
2023.09.04Raycast는 무엇일까? 'Spotlight', 'Alfred'와 유사한 기능을 제공하는 Raycast는 macOS용 애플리케이션으로 생산성을 향상하기 위해서 설계되었다. Raycast를 사용하여 단축키를 통해 다양한 작업을 빠르게 실행할 수 있다. Raycast 설치 및 기본설정 Raycast는 아래 링크에서 설치가 가능하다. https://www.raycast.com/ Raycast - Supercharged productivity Raycast lets you control your tools with a few keystrokes. It's designed to keep you focused. www.raycast.com Raycast를 편리하게 사용하기 위해서 기존 Spotlight 단축키인 ..
form 태그에서 preventDefault() 사용하는 이유
form 태그에서 preventDefault() 사용하는 이유
2023.05.01form 태그 간단하게 살펴보기 은 사용자로부터 값을 입력받는 양식을 만들기 위해 사용한다. 아래 태그 중 필요한 것들을 선택하여 조합이 가능하다. submit 이벤트 기초동작 제거 사용자의 입력을 가져오기 위해서 간단하게 로그인, 회원가입에 사용될 수 있는 컴포넌트를 만들었다. const signForm = () => { const [userInfo, setUserInfo] = useState({ email: '', password: '', }); const handleChange = ({ target }) => { setUserInfo((prev) => ({ ...prev, [target.name]: target.value })); }; const handleSubmit = async (event) ..
React input 태그에 글자가 입력되지 않는 현상
React input 태그에 글자가 입력되지 않는 현상
2023.04.29value 속성만 지정하지는 않았는가? input의 상태를 관리할 때에는 input 태그의 value 값을 설정해주는 것이 중요하다. 그러면 상태가 바뀌었을 때 input의 내용도 업데이트된다. 하지만 React에서는 value 속성만 지정하면 값이 입력되지 않는 현상이 있다. value 값에 의해서만 값이 변경되며, 사용자가 입력해도 input 값은 변경되지 않는다. 해당 문제는 onChange 이벤트를 등록하여 input을 수정할 수 있는 상태를 만들어서 해결이 가능하다. const [email, setEmail] = useState(''); const onChangeEmail = useCallback((e) => { setEmail(e.target.value); }, []); return ( )..