웹표준(Web Standards) #웹표준 이란? 최근 국내 웹 관련 업계에서는 웹 접근성 수준 향상에 대한 요구로 인해 웹 표준에 대한 관심이 고조되고 있습니다. 이처럼 웹 접근성 이슈를 통해 웹 표준이 주목을 받고 있는 이유는 웹 접근성 수준을 향상시킬 수 있는 다양한 방법론의 중심에 웹표준이 있기 때문입니다. 웹접근성 수준 향상의 최적의 방법론으로 관심을 모으고 있는 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. 웹..

React Hooks 중에서 useState()나 useEffect() 처럼 많이 쓰이지는 않지만 가끔 나와서 햇갈리게 하는 녀석이 있습니다. 바로 useRef() 훅(hook) 함수인데요. 이번 포스팅에서는 useRef() 함수가 왜 필요하고, 언제 사용하는지에 대해서 알아보겠습니다. 상태 변경 -> 컴포넌트 재 랜더링 React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 됩니다. 예를 들어, 아래 컴포넌트의 버튼을 5번 클릭하면 count 상태값은 5번 바뀌게 됩니다. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); c..

각 CSS 방법론의 특징과 장, 단점 애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔습니다. 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 한 번도 없었습니다. 결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결합니다. CSS-in-JS에는 대표적으로 Styled-Component가 있습니다. 대표적인 CSS 방법론으로는 BEM이 있습니다. BEM이란 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며, Block, Element, Modifier 각각은 —와 __로 구분합니다. 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며 HTML/CSS/..

1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요하겠죠. 여기에 꼭 목적에 맞지 않더라도, 비실용적이라도 추가적인 기능을 제공하는지도 관련이 있습니다. 계산기의 디자인은 계산기의 기능 자체에는 영향을 주지 않지만, 심미적 기능을 제공한다고 판단합니다. 2. 사용성(Usable) : 사용하기 쉬운가? 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다. 기능이 아무리 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX를 제공하기 어렵습니다. 가능한 단순하면서 직관적이고 사용하기..

추천하는 GitHub Repository 목록 Interview_Question_for_Beginner GitHub - JaeYeopHan/Interview_Question_for_Beginner: Technical-Interview guidelines written for those who started studying progr :boy: :girl: Technical-Interview guidelines written for those who started studying programming. I wish you all the best. :space_invader: - GitHub - JaeYeopHan/Interview_Question_for_Beginner: Techn... github.com..

Hooks는 리액트 16.8 버전에 새롭게 추가되었고 클래스를 사용하지 않고도 state나 다른 리액트 기능들을 사용할 수 있게 되었다. Effect Hook은 함수 컴포넌트에서 side effect를 수행하도록 한다. import React, {useState,useEffect} from 'react'; function Example(){ const [count,setCount]=useState(0); //componentDidMount와 componentDidUpdate와 유사함 useEffect(()=>{ //브라우저 API를 사용하여 문서의 제목을 업데이트함 document.title=`You clicked ${count} times`; }); return( You clicked {count} t..

URL 과 URI의 차이 URI(Uniform resource Identifier) 네트워크 상에서 자원 위치를 알려주기 위한 규약. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닙니다. URL(Uniform Resource Locator) 통합 자원 식별자로 인터넷에 있는 자원을 나타내는 유일한 주소. URI가 URL의 상위 개념. (URL이 URI안에 포함 되어있다고 생각하면 될것 같습니다. URI 의 하위 개념으로는 URL 말고 URN도 있음.) URI는 Uniform Resource Identifier URL은 Uniform Resource Locator URN은 Uniform Resource Name URI는 Uniform Resource Identifier ..

REST란?👍 `REST란 (Representational State Transfer) 의 약자` 자원(resourece)의 표현(representation)으로 구분하여 해당장원의 상태를 주고받는 모든것을 의미한다✍️ 즉 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. CRUD Operation이란 CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 RES..