uni's code uni's code

들어가며 안녕하세요 :) 프론트엔드는 백엔드에 비해 쉽게 UI 변경이 잦고, 기능이 여러 추가됩니다. 이때, 변경할 때마다 쉽게 대응이 가능한 유연한 코드를 짠다면 업무의 양이 줄어들 것입니다..! 마침 변경에 용이한 컴포넌트 짜는 방법에 대해 소개한 글을 발견하여 공유하면 좋을 것 같아 번역글을 작성합니다. 원글: Building future facing frontend architecures Building future facing frontend architectures A deep dive into how component based frontend architectures can implode with complexity at scale, and how to avoid it. frontendma..

안녕하세요. 오늘은 SEO 작업 중 필수적인 Meta tag에 대한 정보를 알아보겠습니다. 먼저 SEO(Search Engine Optimization) 작업은 기본적으로 검색엔진에서 로봇이 잘 ‘탐색’하고 ‘저장’해서 ‘노출’할 수 있도록 하는 것으로, 자신의 서비스가 페이지 상단에 노출하고자 한다면, 필수적으로 해야하는 작업입니다. 제목에서 말한 "Meta tag"만 하면 뚝딱 상위권에 올라온다면, 정말 행복하겠지만(ㅠㅠ) 실제로는 Meta tag 이외에 여러 작업 혹은 마케팅 기술들이 들어갑니다. Meta tag는 기초 중의 기초 작업! 보통 어떻게 SEO를 처리하는지 알아보고, Meta tag 중점으로 설명하겠습니다. 1. SEO 하는 여러 방법 1. 테크리컬 seo(접근성): 소비자가 이용하기 ..

autocomplete를 적용하지 않고 싶은 상황에서, 일반적으로 input 박스에 autocomplete="off"를 설정하면, autocomplete이 적용이 되지 않는다. 1. 문제 원인 하지만, 사파리 브라우저에서 이를 적용하더라도 작동이 잘 안되는 경우가 있다. 이유는 label이나 id에 email, name, password가 들어가면 autofill이 적용되도록 설정되어, 첫번째 input에 자동으로 발생한다. 2. 해결방안 그래서 fake name, password를 추가하여, 실제로 동작하는 input에는 나오지 않도록 한다.

1. i18n이란? 글로벌 유저를 대상으로 하는 서비스일 경우, 글로벌 유저가 자국어가 아닐 경우 페이지를 이탈할 확률은 높다. 그래서, 글로벌 유저를 유치하고자 하는 서비스들은, 각 유저에 맞게 언어를 다르게 보여주며 유저 친화적인 경험을 제공하는 것은 필수적이다. 이렇게 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 해당 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. i18n은 interationalization의 약자로 i와 n사이의 18개의 알파벳이 있다고 하여 i18n이라고 부른다. 2. i18n 의 범위 대표적인 글로벌 사이트인 페이스북, 틱톡, 유튜브 등에 접속해보면, 자동으로 유저의 컴퓨터 브라우저 환경 혹은 접속한 국가에 맞는 언어로 설정되어 있는 것을 확인할 수 있다...

test code를 작성하기 위해, jest와 react testing library를 사용하였습니다. 1. test code의 기본 틀 describe('validation test', () => { it('when nothing input, submit button is disabled', async () => { //given & when render(); //then const submitButton = await screen.findByRole('button', { name: '계정 만들기', }); expect(submitButton).toBeDisabled(); }); it('when email is not valid, email error appear', async () => { //giv..

testcode 관련 eslint 설정에 대해 알아보겠습니다. 일반 규칙 뿐만 아니라, test code에서 권장하는 lint도 고쳐주기 때문에, 협업을 하거나 초기에 배울 때 도움이 될 것 같습니다. 1. install npm install eslint-plugin-testing-library eslint-plugin-jest-dom 2. react 에 적용 // .eslintrc.json { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 3. next.js에 적용 // .es..

시작하기 전 잠깐의 tmi를 풀어보자면.. 지금까지 vuetify, bootstrap, tailwind, antdesign 등등 써보면서, 개인적으로 최애는 tailwind가 될 것 같습니다. 미리 좋은 점에 대해 소개드리자면, css custom이 많이 편합니다. ㅠㅠ 단점은 js기능을 많이 지원하지 않는데, 예를 들어 pagination이라던가.. 하지만 css custom이 많이 편한점이 정말 맘에 듭니다!! 왜 이제서야 안거니.. 내 최애 css 프레임워크 등극이다.. 각설하고 tailwind 적용법에 대해 소개하겠습니다. 1. tailwind란? utility-first 컨셉의 css 프레임 워크입니다. 속성이 중시됨으로, 미리 만들어진 속성에 대한 클래스들이 있고 이를 조합하여 컴포넌트를 구성..

테스트코드를 작성해야한다는 점이 중요하다는 것은 진작 알고는 있었지만, 시간이 없다는 이유로 도전하지 못했었다. 이번에 회사에서 대대적으로 프론트 리빌딩을 하는 과정 속, TDD를 쓰자고 건의하였고, TDD에 대해 알아보면서 정리한 내용을 아래에 담았다. 1. TDD란? test driven development 의 약자로 “테스트 주도 개발” 코드를 개발하는 과정에서 테스트코드가 추가됨으로, 코드 개발을 하고 테스트 코드를 작성하는 과정으로 오해할 수 있으나, 이는 경기도 오산!(ㅋㅋ) TDD 과정은 아래와 같다. 테스트를 작성하고 테스트가 정상이 될때가지 코드를 작성한다~ → 테스트 실패시 코드 작성하며 테스트 성공할때까지 작성 -> 리팩토링 1) 테스트 케이스를 작성 2) 코드 개발 -> 테스트 케..