시맨틱 태그 같은 태그들을 꽤 본 적이 있을 것이다. 이런 태그들을 시맨틱 태그라고 하는데, 여기서의 시맨틱(semantic)은 '의미론적인', '의미 있는' 같은 뜻들을 가지고 있다. 즉 시맨틱 태그 자체는 의미있는 태그라고 할 수 있다. 물론 id나 class같은 태그로도 표현할 수 있겠지만 의미 없는 div 태그를 많이 사용하게 된다. 왜 시맨틱 태그가 필요하게 되었느냐를 살펴보자. 🤔 가독성이 좋음 위와 같은 레이아웃을 모두 div 태그로만 짤수도 있다. (끝없는 div의 향연..) 다만 이렇게 짰을 때 HTML 파일 안에서 어떤 영역인지 바로바로 파악이 가능할까? 🤔 내가 짠 코드를 파악하기도 힘든데 유지보수에 좋을리가 없다. 웹 접근성에 좋음 시맨틱 태그로 마크업을 하면 브라우저가 HTML만 ..

순수함수 순수함수는 외부 상태에 의존하거나 변경하지도 않는, 온전히 독립적인 함수를 말한다. 여기서 외부상태는 전역 변수나 서버 데이터, DOM 등등.. 아래와 같은 경우에 모두 해당할 때 순수함수라고 할 수 있다. 동일한 입력에 대해 동일한 출력을 반환하는 함수. 사이드 이펙트가 없는 함수 같은 입력에 대해 같은 출력을 반환하는 함수 순수함수는 늘 같은 입력에 대해 같은 출력을 반환하기 때문에, 인자를 전달받지 않는 함수는 거의 상수 같은 느낌. 외부 상태에 의존하지 않기 때문에 늘 같은 출력을 한다. 아래와 같이 increase() 라는 함수를 만들었을 때, 이 함수는 순수함수라고 할 수 있다. function increase(n){ return ++n; } console.log(increase(1)..

웹 브라우저에서 로컬에 작은 텍스트 데이터를 저장하는 영역인 쿠키!.. 쿠키는 클라이언트와 서버 간의 상태를 유지하고 추적하기 위해 사용을 하는데, 여러 가지 옵션이 있다. 그중 유효기간에 대한 옵션을 살펴보려고 한다. 보통 쿠키가 언제까지 유효한지 설정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 사라진다. 이런 쿠키를 세션 쿠키라고 한다. 그럼 쿠키의 유효기간을 어떻게 설정할까? 🤔 MaxAge MaxAge 옵션은 쿠키의 만료기간을 설정할 때 사용한다. 현재부터 만료기간까지의 브라우저에서 유지되는 시간을 초 단위로 설정한다. 예를 들어 아래와 같이 Max-Age=3600 이라고 한다면, 브라우저에 저장 후 1시간 동안 유지된다. Set-Cookie: id=a3fWa; Max-Age=3600; P..

리액트 훅 중의 useRef 훅은 DOM에 접근할 수 있도록 해주거나, 값을 저장해서 사용할 수 있는 훅이다. (이때 저장한 값은 컴포넌트의 렌더링과 무관하게 유지된다!) 아직까지 useRef를 input 태그를 포커싱할 때 사용했던 경우가 대부분이었는데, 다른 예시가 더 있는지 추가적으로 정리해보려고 한다. 포커싱 하기 버튼을 클릭하거나, 이벤트 핸들러의 input 요소 등에 포커싱을 할 수 있다. {isLoggedIn && ( {showSearchInput && ( )} setShowSearchInput(true)} /> ... )} 프로젝트에서는 외부영역을 클릭했을 때를 판단에서 검색창이 닫히도록 사용한 적도 있다. // 검색창 외부 클릭 여부 판단 const clickOutside = (e: an..

브라우저 저장소는 크게 쿠키와 웹 스토리지가 있다. 로컬스토리지와 세션스토리지는 웹스토리지에 속하는데.. 이들에 대해서 한번 정리해 보자. 쿠키 웹 사이트에 접속할 때 생성되는 정보를 담은 작은 텍스트 파일이다. 별도로 삭제처리하거나 유효기간이 만료되지 않는 이상 삭제되지 않고 서버와 통신할 때 자동으로 주고받는다. 쿠키는 주로 이런 목적을 위해 사용된다. 세션 관리 서버에 저장되는 로그인이나 장바구니 같은 기능에 사용 개인화 테마나 사용자가 선호하는 값을 세팅 트래킹 사용자의 행동을 기록하고 분석 쿠키는 웹스토리지처럼 클라이언트에서 직접 추가/수정/삭제를 할 수 있고, 클라이언트에 저장되기 때문에 보안에 취약하다. 쿠키를 추가해보기 🤔 서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안..

포지션은 CSS에서 많이 사용하는 배치방법이다! 포지션을 이용하면 원하는 위치에 적절하게 배치를 할 수 있다. 간략하게 정리해보려 한다. static position 속성의 기본값. 요소를 문서 흐름에 따라 배치한다. relative 요소를 원래 위치를 기준으로 상대적으로 배치한다. top, right, bottom, left 속성으로 위치를 조정할 수 있다. absolute 절대 위치 지정 요소. 요소를 가장 가까운 부모 요소를 기준으로 배치한다. 문서의 흐름에 영향을 받지 않는다. 부모 요소 중에 position 속성이 static이 아닌 요소를 찾아 기준으로 삼는데, 만약 부모 요소가 없다면 body 요소를 기준으로 삼는다. top, right, bottom, left 속성으로 위치를 조정할 수 있..

HTTP(HyperText Transfer Protocol) 인터넷에서 데이터를 전송할 때 사용되는 프로토콜이다. HTML, Text 외에도 이미지나 여러 파일, JSON 등 거의 모든 형태의 데이터를 전송할 수 있다. HTTP 특징 HTTP의 특징으로는 크게 몇 가지를 들 수 있다. 클라이언트 - 서버 구조 요청과 응답으로 나뉘어서 클라이언트는 서버로 요청을, 서버는 클라이언트로 요청에 대한 결과로 응답한다. 클라이언트와 서버가 각각 독립되어 있어 독자적으로 빠르게 발전해 왔다. 무상태 프로토콜(Stateless) 서버가 클라이언트의 상태를 보존하지 않기 때문에 서버의 확장성이 높다는 장점이 있다. 하지만 클라이언트가 추가로 데이터를 전송해야 하는 단점이 있다. 🤔 Stateful과 Stateless의..

꽤나 어려운 개념인 캐시.. 캐시에 대해서 간략하게나마 정리해보고자 한다. 좀 더 깊게는 시간 내서 알아보는 것으로.. 🤔 캐시 캐시는 데이터나 값을 저장하는 임시저장소다. 장점 데이터를 접근하는 시간이나 값을 계산하는 시간을 줄일 수 있어 성능을 향상할 수 있다. 반복적인 작업을 수행한다면, 캐싱된 값을 사용하면 되니 작업 시간을 줄일 수 있다! 네트워크 병목을 줄일 수 있다. 네트워크 작업은 메모리 작업보다 시간이 더 오래 걸리기 때문에 이 시간을 줄일 수 있다. 안정성을 높일 수 있다. 캐싱된 값을 이용해서 서버의 부하를 줄일 수 있다. 서버가 다운되거나 장애가 발생되어도 캐싱된 값을 사용하면 되니 안정성이 높아진다. 단점 캐시의 일관성 문제 캐싱된 값이 업데이트가 되지 않은 상태로 오래 남아있다면..

라이브러리와 프레임워크의 차이가 뭔가요?라고 하면 프레임워크는 뼈대, 라이브러리는 기능 수행에 필요한 코드모음.. 정도가 생각이 난다. 리액트는 라이브러리, 뷰나 nextjs는 프레임워크. 정의를 명확하게 알아야 차이에 대해서 설명할 수 있을 것 같아 구체적으로 정리해 본다! 라이브러리 라이브러리는 특정 기능을 위한 코드를 모아둔 것이다. 개발자가 원하는 대로 라이브러리를 사용할 수 있고, 라이브러리를 사용하여 코드의 양을 줄일 수 있다. 제어의 흐름으로 보았을 때, 애플리케이션이 라이브러리를 사용하기 때문에 능동적이다. 프레임워크 프레임워크는 원하는 기능 구현에 집중할 수 있도록, 개발에 필요한 형태와 기능을 갖추고 있는 일종의 뼈대다. 개발자는 프레임워크에 지정된 방식대로 메서드 등의 코드를 구현한다..

함수를 쓰다 보면 parameter와 argument가 종종 헷갈리는 경우가 있다. 이번 기회에 명확하게 정리를 해보자. 🤔 우선 둘 다 함수의 호출과 관련된 키워드들이다. paramter 파라미터는 매개변수다. 좀 더 구체적으로는 함수를 정의할 때, 함수에 전달되는 값을 받는 변수를 말한다. function add(a,b){ return a+b; } add(1,2) 위 코드에서는 a, b가 함수 add의 파라미터다. 함수를 호출할 때 전달되는 값인 1,2를 a와 b라는 이름으로 받는다. 매개변수는 함수 내부에서만 유효하고 외부에서는 참조할 수 없다. argument 아규먼트는 인수 혹은 인자이다. 함수를 호출할 때 전달되는 실제 값이다. add(3,4) 위 코드에서 3,4가 인자에 해당된다. 이 인자들..