안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클76 Next 13에 Vanila Extract 적용하기 보호되어 있는 글 입니다. 2024. 5. 31. 다국어를 지원할 때 언어에 따라 다른 CSS를 적용하고 싶을 때 목차· 다국어 설정하기· 다국어 스타일 시트 적용하기사내에서 콘텐츠 허브 서비스를 맡아, 개발을 진행하고 있어요 아무래도 국내 시장에서는 큰 점유율을 보유하고 있어 글로벌 시장 진출을 활발하고 있는데, 서비스 별로 가장 중요한 기능 중 하나가 바로 다국어 기능이에요. 입사를 하고 거의 3~4개월만의 연구소 공식 블로그 서비스를 런칭해야하기 때문에 새로 배우는 점이 참 많아요. 그 중 하나가 다국어에 따라 CSS를 변경하고 싶을 때예요.다국어 설정하기다국어 설정을 위해 주 언어가 일본어라면 아래와 같이 설정을 해줄 수 있어요.그 외의 언어들은 다음과 같이 설정할 수 있답니다./* *//* */위와 같이 HTML lang Attribute를 사용하는 이유는 아래와 같아요.웹 접근성 준수검색엔진 최적화 (.. 2024. 5. 31. 개발자는 내가 만드는 제품에 대한 애정을 가져야한다 왜 이런 버그들을 늦게 발견되었는지 알아? 우리가 제품을 많이 써보지 않았기 때문이야 작년 첫 회사에서 필드로 출시하기 위해 준비 중인 제품에 들어갈 웹 에디터를 개발하면서 버그가 발생했다. 출시 일이 얼마 남지 않았기 때문에, 생각보다 긴급 이슈로 분류가 되었고 위와 같은 말을 들었다. 생각해보니 맞는 말이다, 첫 회사는 규모는 크지만 업무 단위는 스타트업처럼 작은 규모로 조직화되어 움직이고 있었고, 전체 제품을 세분화하여 쪼개놓은 팀은 아니었기 때문에 제품 자체를 전반적으로 이해하고 계속해서 트래킹을 했어야했다. 작년까지는 정말 어린 생각을 하고 있었던 것 같다. 주니어 개발자라면 한번 쯔음 거쳐가는 생각을 했다. 개발자라면, 제품에 오류가 없게 개발만 잘하면 되는거 아닌가? 주어진 일을 잘해내는 것.. 2024. 5. 12. nth-child와 nth-of-type의 차이 목차 · nth-child · nth-of-type nth-child nth-child는 모든 자식의 순서에서 지정해준 값을 찾는다. 위의 예시에서 3개의 자식이 있는 상태에서 2번째 b요소를 찾고싶을 때, 3번째 예시에서는 3개의 자식 중에서 2번째의 위치가 a가 되므로, 아무것도 찾지 못하게 된다. nth-of-type nth-of-type은 지정된 자식 태그 요소에서의 순서를 찾는다. 첫번째 예시에서 nth-child 였을 경우 2번째 자식 요소에 a 태그가 없으므로 아무것도 찾지 못한다. 하지만 nth-of-type은 2번째에 있는 a 태그를 찾기 때문에 3번째 자식인 a를 찾을 수 있게 된다. 2024. 3. 25. Vue 공식 문서 훑어보기 - 템플릿 문법 · 반응형 기초 · 계산되어진 속성 목차 · 템플릿 문법 · 반응형 기초 · 계산되어진 속성 템플릿 문법 데이터 바인딩의 가장 기본적인 형태는 `이중 중괄호` 문법을 사용하는 방법입니다. 메시지 : {{ msg }} 이중 중괄호 태그 내 msg 는 해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체된다. 또한 msg 속성이 변경될 때마다 업데이트가 되어집니다. 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야합니다. v-html 이라는 새로운 속성은 디렉티브라고 하며, 디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 v-를 사용하며, 렌더링된 DOM에 특별한 반응적 동작을 적용합니다. 텍스트 보간법 사용 : {{ rawHtml }} v-html .. 2024. 3. 19. Vue3로 업데이트 되면서 어떤 부분이 변화했을까? 목차 · 성능 개선 · Composition API · Fragments · Global API · 라이프 사이클의 변화 · 익스플로러 미지원 성능 개선 Vue3는 V-DOM과 렌더링 성능을 개선하였으며 스캐폴딩을 통해 어플리케이션을 생성 시에 기본적으로 Vite를 사용하여 빠른 렌더링 속도를 제공한다. Composition API Vue2와 Vue3의 가장 큰 변경점이라고 한다면, 바로 Composition API가 도입된 것이다. 이로 인해 스크립트 영역의 소스 코드 영역이 크게 변하게 되었다. Composition API는 Vue2에서도 플러그인과 같은 확장 기능으로 도입하는 것이 가능하기는하지만, Vue2에서 기본적으로 Options API를 이용하는 경우가 많다. Options API에서는 Co.. 2024. 2. 29. 이전 1 2 3 4 5 6 ··· 13 다음
