분류 전체보기 (10) 썸네일형 리스트형 React 프로젝트에서 font 적용하는 방법! 글을 시작하며..오늘은 제가 프로젝트를 진행하면서 알게된 프로젝트 전체에 font를 적용하는 방법을 공유하도록 하겠습니다.사용자가 더 보기 좋은 UI를 만들기 위해서는 font를 잘 선정하고 사용하는 것도 중요하기 때문에 글을 읽고 더 많은 도움이 되기를 바랍니다. 1. font 다운로드하기 눈누라는 상업적으로 이용할 수 있는 무료 한글 폰트를 모아둔 웹 사이트에서 font를 찾습니다.( 저는 조선굴림체라는 폰트를 골랐습니다. ) 위에 노랗게 있는 다운로드 버튼을 눌러 font를 다운로드 받고 압축을 풀어줍니다. [ 파일 형식 정리 ]파일 이름특징TTF (True Type Font)가장 오래 널리 사용해 호환성이 좋음OTF (Open Type Font)고해상도 출력이 필요할 때 사용함WOFF(Web O.. React에서 Virtual DOM이 어떻게 동작하는지 알아보자 글을 시작하며..최근에 React 프로젝트 세팅하기라는 주제로 블로그를 적었는데요.그 블로그 글 중 React의 장점으로 가상 DOM을 사용해 최적화가 잘 되어있다고 작성하였습니다. 이 글을 프론트엔드 전공인 선배님께서 읽어보시고더 자세하게 알고 있으면 좋은 개념이니 공부해보면 좋을 것 같다고 하셔서오늘은 React DOM이 어떻게 동작되는지에 대해 글을 작성해보겠습니다. 1. React의 동작 원리React는 컴포넌트 단위로 나누어 구성된 UI의 상태가 변화에 따라필요한 컴포넌트만 업데이트하는 방식의 렌더링을 처리합니다. 렌더링을 할 때 성능의 최적화를 위해 Virtual DOM을 사용하여실제 DOM 조작 수를 줄이고 상태 변화에 빠르게 반응할 수 있도록 합니다.2. DOM이란?계속해서 DOM이라는 말.. React 프로젝트 세팅하기 0. React란?React란, 사용자 인터페이스(UI)를 만들기 위해 페이스북에서 개발한 JavaScript 라이브러리입니다.라이브러리 : 사람들이 미리 만들어 놓은 코드를 가져와 사용할 수 있는 코드의 집합 왜 사용할까? 갑자기 너무 궁금해서 제가 프론트 친구들에게 물어봤습니다. "너는 왜 리액트로 개발해?" 친구1은 "솔직히 React를 왜 사용 하는지를 블로그로도 정리했는데 아직도 근본적으로 왜 사용하는지 모르겠어. 분명 장점은 명확히 있는데 내가 이 장점들을 완벽하게 잘 사용하고 있는 것 인지도 모르겠어"라고 대답했고, 친구 2는 "HTML 파일을 몇 십개씩 만들고 싶지 않아;; 페이지 전환할 때 깜빡이는게 싫어"라고 대답했습니다. 이렇게 잘 사용하는 친구도 있지만 아직 왜 사용하는지 모르겠다.. Hook에 훅 빠져볼래? 1. Hook이란? : 함수형 컴포넌트에서 React의 상태 관리 및 생명주기 기능을 사용하도록 도와주는 특별한 함수함수형 컴포넌트란?: 함수 문법을 이용하여 작성한 컴포넌트 - return을 이용해 UI를 나타냄 - props를 이용해 상태 관리함 대표적인 React Hook에는 'useState'와 'useEffect' 가 있는데요. 차근차근 알아보겠습니다.2. useState 함수useState 함수는 컴포넌트의 상태(state)를 관리하는 Hook 입니다. useState를 사용하려면 우선 리액트 패키지에서 useState 함수를 불러와야합니다.import React, { useState } from 'react'; 불러온 후에는 const [ 현재 상태를 담은 변수, Setter 함수 ] =.. JSX란? 1. JSX란?React에서는 JSX로 UI의 생김새를 나타내는데요.JavaScript XML의 줄임말로 JavaScrip에 XML을 추가한 확장된 문법입니다. UX/UI란?- UX ( User Experience ): 사용자가 서비스를 사용 하면서 느끼는 전체적인 경험: 사용자가 서비스를 이용하면서 어떤 문제와 불편을 겪는지 파악하여 해결책을 제시하는 것 - UI ( User Interface ): 사용자가 해당 서비스에서 볼 수 있는 모든 디자인 요소들: 제품의 시각적 요소를 디자인하여 사용자가 서비스를 이용할 때 필요한 기능들을 적절하고 효율적이게 배치하여 UX를 향상시킴 XML이란?: 미리 정의된 태그 없는 마크업 언어: 데이터를 설하기 위한 구조화된 텍스트 형식의 언어- 데이터의 구조를 표현- .. 이벤트란? 1. 이벤트란이벤트란 어떤 동작이나 상태 등의 사건이 발생하는 것 이라고 할 수 있습니다. HTML DOM 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있게끔 어떤 이벤트 신호를 발생 시키고, Jave Script는 여기에서 발생한 이벤트 신호에 반응하여 어떤 처리나 동작을 수행할 수 있습니다. 2. 이벤트의 종류1. 마우스 이벤트클릭(click) : 요소를 눌렀다가 땠을 때 발생더블 클릭(dblclick) : 요소를 연속적으로 두번 눌렀다가 땠을 때 발생마우스 오버(mouseover) : 요소로 마우스 커서를 옮겼을 때 발생마우스 아웃(mouseout) : 요소로부터 마우스 커서를 옮겼을 때 발생마우스 다운(mousedown) : 요소를 눌렀을 때 발생마우스 업(mous.. GIT 명령어 배우러 레츠git릿! 글을 시작하며..먼저 Git이란 무엇일까요?? 구글 번역기에 Git을 검색하면 '힘내'라고 나오는 이 Git은 버전 관리 시스템입니다.프로그램을 만들 때 파일이 어떻게 변했는지를 기억해주는 도구로,실수로 파일을 잘못 고치거나 지워도 쉽게 원래대로 돌릴 수 있습니다. 저도 학교에서 과제를 하면서 Git의 존재에 대해 알게 되었는데요.처음에는 과제를 하기 위해 필요할 때만 찾아보았지만 프로젝트를 진행하면서팀원들과 협업을 해야하는 상황이 오게 되었습니다. 이때 필요한 것은 바로 이 Git!!!그래서 오늘은 제가 공부한 Git 명령어를 여러분들께 공유하는 글을 남기겠습니다.(맨 마지막에 요약 있습니다.)1. 새로운 저장소 만들기git init : 폴더 생성 후 이 명령어 실행 시, 새로운 git 저장소 생성 우.. DOM은 어떻게 사용하둄? 글을 시작하며.. DOM이란, html이나 xml 같은 문서에 요소들을 트리구조의 형태로 표현하여 조작이 가능하게끔 해주는 인터페이스입니다. DOM에 대해 자세하게 알기 전 우선 가족 족보에 대해 생각해봅시다.왼쪽의 사진을 예시로 들어 설명하도록 하겠습니다.부모님으로부터 아들과 딸이 있고 이들은 부모 자식의 관계입니다.또 아들과 딸은 서로 형제 관계이며, 손자와 손녀와는 부모 자식 관계라고도 할 수 있습니다. HTML 문서와 족보를 연관지어서 생각해본다면부모님은 , 아들과 딸을 각각 와 라고 할 수 있고, 그 아래에 손자와 손녀들은 와 안에 있는다양한 요소들이라고 할 수 있습니다. 이러한 트리 구조를 통해 HTML 문서의 각 요소를 접근, 수정, 생성 등을 하는 방법에 대해 글을 작성하도록 하겠습니.. 이전 1 2 다음
