Web22

• 첫 클릭만 실패하는 공유 버그: WebKit User Activation과 CORS Preflight의 함정 “웹에서는 잘 되는데 앱 웹뷰에서만 안 돼요.Staging에서는 잘 되고, Production에서는 두 번째 클릭부터는 됩니다.”프론트엔드 개발자라면 등골이 서늘해지는 전형적인 환경 의존 버그입니다.로컬에서도 잘 되고 Staging에서도 잘 되는데 Production에서만 실패합니다.게다가 더 이상한 점이 있습니다.첫 번째 클릭 → 실패 두 번째 클릭 → 성공처음에는 WebView 문제라고 생각했습니다. 하지만 테스트를 진행하면서 예상과 다른 사실을 발견했습니다.iOS Safari → 실패 iOS WebView → 실패 Android Chrome → 간헐적 실패즉 이 문제는 단순한 WebView 버그가 아니었습니다.문제의 핵심은 WebKit의 User Activation 정책과 초기 네트워크 지연이.. Web 2026. 3. 15.

• 

  [Web] SpringBoot 환경에서의 세션 인증 방식과 토큰 인증 방식 서론 오늘은 인증과 인가 기능을 구현할 때, 꼭 짚고 넘어가야 하는 세션 인증 방식과 토큰 인증 방식의 장/단점을 비교해보겠습니다. 그리고 스프링에선 어떻게 구현할 수 있는지 간략하게 소개드리겠습니다. 대상 독자 인증/인가 기능을 처음 구현해보시는 분들, 이전에 인증/인가 기능을 구현해봤지만 잘 기억이 나질 않는 분들, 이와 관련된 이론적 지식들을 알고 싶은 분들에게 이 글을 추천합니다. 본론 인증과 인가 인증이란 유저를 식별할 수 있는 정보(ex - ID/PW, 소셜로그인 정보)를 통해, 유저가 적합한 유저인지 판단하는 방법을 말합니다. 인가란 인증된 유저에게 권한을 부여하여, 해당 프로그램 기능에 접근할 수 있도록 허용하는 것을 말합니다. 반대로 권한이 없는 유저는 접근하지 못하도록 막는 것을 말합니.. Web 2023. 12. 13.

• 

  [CSS] Pseudo-Element 중 ::before와 ::after에 관해 알아보자 서론 CSS를 사용하다보면, 다양한 Pseudo-Element를 사용하여 스타일링 해야 할 때가 있습니다. 오늘은 CSS Pseudo-Element(수도) 중 ::before와 ::after 관해 알아보는 시간을 갖도록 하겠습니다. Pseudo-Element란 Pseudo-element란 HTML element의 특정 부분에 스타일을 지정할 수 있도록 selector에 추가되는 키워드입니다. selector 만으로 원하는 element를 지정할 수 없을 때 사용합니다. 잠깐, selector에 대해서 모르신다구요? 대표적인 selector가 class selector죠. 아래 예시의 .box와 같이요. selector에 대해서 더 알고 싶으신 분들은 아래 링크를 참고 부탁드립니다. box .box { w.. Web/CSS 2023. 6. 4.

• 

  [CSS] 마우스 오버(hover) 이벤트로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :hover 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 label 태그로 마우스 오버 대상 태그를 생성하고 보여줄 목록을 ul 태그로 설정합니다. 메뉴에 대한 기본 속성을 display : none으로, :hover 상태를 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 만약 리액트와 같은 UI 라이브러리를 사용한다면, 컴포넌트 onMouseEnter와 onMouseLeave 속성을 사용하면 됩니다. 리액트에서의 방법은 추후 다뤄보도록 하겠습니다. 실제 코드 See the Pen Untitled by .. Web/CSS 2023. 4. 19.

• 

  [CSS] 마진 상쇄(marign Collapsing)와 해결방법 서론 형제 태그 간 marign 간격이 중복되어, 의도치 않은 방식으로 간격 조정이 될 때가 있습니다. 그럴 때 의심해볼만한 것은 마진병합. 오늘은 이에 대해서 알아보도록 하겠습니다. 본론 마진 상쇄란? In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. (W3C) 일반적으로 마진 병합(마진 병합 현상), 마진 겹침 등으로 더 .. Web/CSS 2022. 4. 20.

• 

  HTML5의 콘텐츠 분류 체계에 대해서 알아보자 서론 기존 HTML은 인라인과 블록요소, 이렇게 크게 두 가지로 구분되었는데요. 2014년에 HTML5가 새롭게 개편됨에 따라서, 태그에 대한 분류 또한 더욱 다양해졌습니다. 그래서 오늘은 총 10가지의 태그 분류 체계에 대해서 알아보며, 기존 태그 분류와의 차이점은 무엇인지 함께 알아가봅시다. 본론 컨텐츠 분류 카테고리는 다음과 같습니다. 물론 웹 개발을 할 때, 이 모든 분류를 다 암기하고 있어야 하는 것은 아닙다만, 무의식적으로 분류하던 태그들을 의식적으로 분류하고자 노력하는 것이 전에 비해 더 나은 개발을 위해 도움이 되리라 생각합니다. Flow Content Phrasing content Metadata Content Sectioning Content Heading Content Interact.. Web/HTML 2022. 4. 20.

• 

  [HTML] Input readonly와 disabled의 차이점은 무엇인가? 서론 정말 오랜만에 HTML 포스팅을 올리는데요, 오늘은 기본 html Input의 속성 중 비슷한듯(?), 다른 두 속성에 관해 비교해보겠습니다. 본론 아마 많은 분들이 disabled와 readOnly를 사용자가 Input에 값을 입력하지 못하도록 처리하기 위해 사용하실 것입니다. 두 요소 모두, 해당 역할을 수행할 수 있습니다. 그러나 차이점은 폼에 해당 Input value 값이 포함되느냐 마느냐의 여부입니다. 아래 예제를 살펴봅시다. See the Pen form readonly vs disabled by joonfluence (@joonfluence) on CodePen. 차이점이 보이시나요? disabled된 Input의 value는 폼 값에 포함되지 않습니다. 따라서 사용자의 입력은 막고 .. Web/HTML 2022. 4. 13.

• 

  프론트엔드 면접 질문 정리 ③ CSS 질문 박스 모델에 대하여 설명해보세요 CSS에 포함되는 모든 요소의 외장은 박스이며 주어진 태그의 특성에 따라, 블록 박스와 인라인 박스로 나뉜다. 블록 박스의 대표적인 태그는 div이며, 인라인 박스의 대표적인 태그는 span이다. CSS box는 콘텐츠/패딩/테두리/여백 총 4가지 영역으로 구성되는데, 블록 박스는 해당 영역이 모두 적용되어 구성되며, 인라인 박스는 컨텐츠 영역만으로 구성된다. 또한 블록 박스는 줄바꿈이 일어나며, width와 height을 지정해줄 수 있고 padding/margin/border 영역이 적용된다. 인라인 박스는 세 특징들 모두 해당되지 않는다. padding은 border와 콘텐츠 영역 사이에 위치하며, margin은 박스 주변의 여백을 지정하며 border는 박스 여백과.. Web/CSS 2021. 5. 17.

• 

  프론트엔드 면접 질문 정리 ① HTML 질문 doctype은 무엇을 하나요? doctype은 docuemnt type의 약자이다. 이는 웹 브라우저에게 해당 문서의 HTML 버젼을 알려주는 역할을 한다. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요? 여러 언어로 제공되는 페이지를 제공하기 위해선 페이지 내의 내용이 하나의 일관된 언어로 표시되어야 한다. 브라우저가 HTTP 요청을 서버에 보내면, 대게 Accept-Language와 같은 기본 언어에 대한 설정 정보를 보낸다. 서버는 이 정보를 확인하고 해당 언어에 맞는 문서를 반환한다. 이 때 태그의 lang 속성을 선언해줘야 한다. 서버는 일반적으로 백엔드 프레임워크의 도움을 받아, 특정 언어로 HTML 마크업에서 YML 또는 JSON 형식의 특정 언어에 대한 placeholder와.. Web/HTML 2021. 5. 10.

• 

  [기타] script, script async, script defer의 차이점 우리는 HTML과 Javascript를 활용하여, 웹 프로그래밍을 할 때 아래와 같이 body 태그가 끝나는 지점 바로 위에 script 태그를 지정해준다(외부 파일에서 가져올 떈 그런데 이 방법은 완벽한 해결책이 아니라고 한다. HTML 문서 자체가 아주 큰 경우를 가정해보면, 브라우저가 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이기 때문이다. 이에 대한 대안은 script 태그에 defer 속성을 추가하는 것이다. defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드한다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다. 그리고 defer 스크립트 실행은 HTML 파싱이 .. Web/HTML 2020. 11. 20.

• 

  [CSS3] Animated Sidebar 만들기 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 기본정보 1. Animation과 연관된 속성으로 transition과 tranform이 있다. 2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다. 3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 1) :checked 이전 사이드바로 활용할 요소를 .. Web/CSS 2020. 11. 12.

• 

  [CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 .. Web/CSS 2020. 11. 11.