그 곳에 산이 있으니까

회사 제품 크롬 개발자도구에서 아래와 같은 이슈가 보고됐다. 오류를 보아하니, 태그와 form 요소인 , 태그의 일치 문제인 것 같다. 문제는 갑자기 메세지들이 issues 패널에서 등장했다는 것이다. 내가 코드를 잘못 건드린건가 싶어, 이전 커밋으로 돌아가도 여전히 동일한 이슈가 떴다. 하지만 사파리에서는 또 이슈가 표시되지 않았다. 이 이슈들은 크롬 브라우저와 관련이 있다. 구글링을 해보니 5월 말 부터 해당 이슈로 다량의 글이 올라왔다. 영미권 개발자도, 중국 개발자도, 일본 개발자도 동일한 문제를 겪었는데, 그 글들을 종합한 결론은 크롬 114부터 자동완성 기능의 보안을 위해 Autofill 기능이 도입되었는데, 이 기능을 보완하기 위해 개발자 Issues 패널에 문구를 띄우기 시작한 것이다. 1..

포트폴리오를 위한 Next 프로젝트에 다크모드를 적용해보았다. 그래서 내가 했던 과정을 기록할 겸, 정리해보려 한다! 다크모드는 이미 구글에 자료가 넘쳐난다ㅎㅎㅎ 1. Tailwind CSS를 사용하자 Next는 기본적으로 Tailwind CSS 친화적이다. 그런 Tailwind에서 다크모드 기능을 제공한다. https://tailwindcss.com/docs/dark-mode Dark Mode - Tailwind CSS Using Tailwind CSS to style your site in dark mode. tailwindcss.com 해당 링크에 잘 정리되어 있는데, 간단히 설명하자면, 기본 로직은 간단하다. 개발자인 내가 html태그 클래스에 dark를 넣거나 빼면 된다. 이 로직은 위 링크에도..

업무 중, 드래그 앤 드랍(dnd)을 구현해야 하는 일이 생겼다. npm trends를 보아하니 무려, Atlassian에서 지원하는 react 전용 react-beautiful-dnd가 여러모로 좋아보였다. 하지만! 구현을 마치고 나니 react-beautiful-dnd에는 큰 문제가 있었다. (전혀 beautiful 하지 않았다,,,) 그것은 바로 flex-wrap과 grid 형태의 dnd를 지원하지 않는 것이었다! https://github.com/atlassian/react-beautiful-dnd/issues/316 해당 깃헙 이슈인데, 나를 포함한 수많은 개발자들의 분노를 느낄 수 있었다. 라이브러리 개발자분의 코멘트를 보면, 앞으로도 지원하지 않을 것 같다. ^---^ 결국, 구글링 끝에 d..

const 변수 = '개행이 \n되지 않는다' 문제 변수에 문자열을 담아 브라우저에 표현하고 싶었다. 당연히 문자열 사이에 개행문자('\n')를 넣었으니 줄바꿈이 되겠지 싶었으나, 그렇지 않았다. const 변수 = `개행이 되지 않는다` 템플릿 문자열로 띄어쓰기를 해줘도 실패했다. 해결 답은 간단하였다. 브라우저에 텍스트를 표현해주는 태그의 style 속성 white-space의 값이 normal로 되어 있었다. html 기본 값이 normal이라고 한다. white-space: pre를 입력해주니 개행문자와 템플릿 문자열 모두 적용이 된다. white-space 속성으로 위의 사례인 개행과 중복 띄어쓰기를 다룰 수 있다.

개인적으로 개발중인 next 프로젝트를 emotion으로 css 작업을 하고 싶었으나, 에러가 발생하였다. 해답이 전혀 보이지 않았다,,, stackoverflow에도 없고! 하지만, 공식문서에서 답을 발견했다. https://nextjs.org/docs/app/building-your-application/styling/css-in-js Styling: CSS-in-JS | Next.js Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components a..

'Hoisting' 이란 ? 영어 단어 hoist는 끌어올리기 를 뜻한다. 그렇다면, JS에서의 hoisting이란 무엇일까? 호이스팅(hoisting)이란, js interpreter가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다. 더 자세하게는, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이다. 호이스팅에 따르면, js에서는 변수의 선언만 최상위의 순서로 끌어올려진다. 따라서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만, 선언과 초기화를 함께 수행하는 경우에는 선언 코드까지 실행해야 변수가 초기화된 상태가 된다. 호이스팅의 규칙 호이스팅의 존재로 우리가 알아야 할 두 가지가 있다. var로 선언한 변수의 경우, 호이스팅 시 unde..

1. 'DOM' 이란? DOM은 Document Object Model의 약자로, 문서 객체 모델이라는 뜻이다. DOM에 대한 좋아하는 설명이 세 가지가 있다. 웹 브라우저가 HTML 페이지를 인식하는 방법 페이지를 정의하는 객체로, 웹 사이트에 대한 모든 정보를 담고 있는 객체 document 객체와 관련된 객체들의 집합 웹 페이지는 사실 문서(document)이다. 이 문서는 웹 브라우저를 통해 해석이 되어 화면에 나타난다. 이 모든 과정과 뜻을 망라하는 것이 DOM이라고 생각하면 편하다. 2. 'DOM'의 특징 문서 객체 모델(DOM)을 이해하기 위해, 먼저 문서 객체에 대해 알아보자. 문서 객체(document object)란, 이나 같은 html 태그 요소(element)들을 'JavaScrip..

기존에 github 블로그를 운영했었다. 하지만 이젠 티스토리로 운영하려 한다. github 블로그를 하며 느낀 큰 문제 하나가 있다. 모든 것을 신경 써야 한다. 자유로운 커스터마이징이라는 장점은 내가 만족할 디자인으로 블로그를 꾸미게 해줬지만, 전체적인 일관성을 유지하는 것을 까다롭게 했다. 예를 들어 상단바를 디자인하면, 전체적인 블로그 비율을 다시 잡아줘야 했다. 즉, 블로그에 기능이든 디자인이든 무언가를 추가하면, 밸런스를 다시 맞추는 과정이 필요했다. 이 점은 기능 추가를 망설이게 했다. 또한, 커스터마이징을 신경 쓰는 바람에 글의 질이 떨어졌다. 나는 내가 다시 보고, 참고할 글을 작성하고 싶은데, 어느 순간 다른 사람들에게 잘 보여질까 고민하며 글을 작성하고 있었다. 결론은 위의 문제들에 ..