frontman-dev 님의 블로그

오늘은 새삼 느낀 시맨틱 태그의 중요성을 리서치한 TIL을 정리해보았다. 웹 개발을 처음 시작하던 당시에는 오히려 잘 준수했지만, 현업에서 비즈니스 로직 구현에만 집중하다 보니 알게 모르게 간과하게 된 부분들이다.u 태그는 underline 스타일을 주기 위한 태그로, 어떤 이유로 인해 눈에 띄어야 함을 나타냄em 태그는 italic 스타일을 주기 위한 태그로, 텍스트가 문맥상 강조되어야 함을 나타냄strong 태그는 bold 스타일을 주기 위한 태그로, em보다 강조되어야 함을 의미함각 태그들은 HTML 시맨틱 태그를 위해 사용되며, 이는 CSS로는 대체가 불가능함검색 엔진이나 데이터 처리 시스템은 이 태그를 기준으로 문장의 중요도를 측정하기 때문임또한, 스크린 리더는 이 태그들을 만나면 해당 텍스트를..

문제 상황 1.A 개발자와 B 개발자가 참여하고 있는 팀 프로젝트에서 A 개발자가 `feature/login` 이라는 브랜치에서 로그인 기능을 개발하고 있다가. 실수로 기능 개발이 완료되지 않은 상태에서 `main` 브랜치에 `merge`를 하고 말았다. `main` 브랜치를 `merge`되기 이전으로 돌리고 싶다면, A는 어떻게 해야할까?스포 방지용..........답변 1.정답은 `main` 브랜치에서 `git reset --hard `를 입력하는 것이다. `main` 브랜치의 소스 코드가 아직 원격 저장소 (`github` 혹은 `gitlab`)에 올라가지 않은 상황이라면, 로컬에서만 `reset` 을 진행하면 된다! `main` 브랜치에서 `git log` 명령어를 입력한 후, `merge` 되기..

JSX의 등장알다시피, JS (Javascript)와 JSX (Javascript XML)은 엄연히 다른 문법이다. JSX는 JS 코드 안에서 html 문법을 쓸 수 있게 만든 확장 문법이다. JS는 별다른 처리없이 그대로 실행이 가능하지만, JSX는 Babel과 같은 트랜스파일러를 거쳐 JS 언어로 변환되어야 브라우저에서 실행이 가능하다는 차이점도 존재한다. JSX는 2013년, 컴포넌트 기반의 프레임워크인 React가 등장하면서, 아래와 같이 UI 구조를 직관적으로 표현할 수 있도록 함께 등장한 문법이다. 보이는 바와 같이 사용되는 문법이 다르고, JSX의 경우에는 트랜스파일 과정이 필요하므로, “이 파일 안에서는 JSX 문법이 사용되고 있어”라는 표현 방식이 있어야 하는데, 이를 위해 React 팀..

React 개발자라면, 효율적인 개발 작업을 위해 React Developer Tools라는 확장 프로그램을 사용해 본 적이 있을 것이다. React로 만들어진 웹 애플리케이션을 로컬에서 실행한 상태에서, Component 탭을 연 다음, 컴포넌트 선택 모드로 들어가면, 선택된 컴포넌트의 현재 상태 값과, 부모 컴포넌트, 그리고 소스 코드 위치를 볼 수 있는 유용한 확장 프로그램이다. React Developer Tools는 React 앱의 디버깅 속도를 대폭 향상시켜준다는 장점이 있지만, 소스 코드의 위치를 단순히 텍스트로만 알려주는 형태이기 때문에, 사용성이 매우 좋다고 표현하기에는 조금 부족한 점이 있다. 클릭만으로도 원하는 컴포넌트의 소스 코드가 활짝 열리는, 그런 확장 프로그램은 없는 것일까? ..

웹 브라우저는 1990년에 처음 등장하였고, 쿠키는 4년 뒤인 1994년에 등장했다. 알다시피 쿠키는 클라이언트 사이드에서 데이터를 저장할 수 있는 최초의 기술이다. 이는 다시 말해, 4년이라는 꽤 긴 시간 동안 클라이언트 사이드에 데이터를 저장할 방법이 없었다는 것이다. 인증 구현에 대한 이해도가 어느 정도 있는 사람이라면, 다음과 같은 의문이 들 수 있을 것이다. 그럼 대체 어떻게 세션을 유지했던걸까?   HTTP는 기본적으로 하나의 요청에 대한 응답을 완료하면, 연결 상태를 끊어 버린다. 또한, 기본적으로 이전에 받았던 요청 정보를 굳이 기억하고 있지 않는다. 이 말은 곧, 클라이언트 측에서 인증이 필요한 요청을 할 때마다 인증 정보를 함께 전달해야 한다는 것이다. 그렇지 않으면 지금 요청하고 있는..