작심삼일 개발이야기

px은 CSS에서 가장 기본적인 단위이다. px를 사용하여 크기를 설정하면 그 크기는 절댓값이 되어버린다.하지만 웹 페이지 사이즈의 변동이 많아 크기가 고정되어 버리면 접근성에 안 좋아질 수 있다. 보통 웹 브라우저의 기본 폰트 사이즈는 16px로 설정되어 있으며 일부 웹 브라우저는 기본 폰트 사이즈를 확대하는 기능을 제공한다.기본 폰트 사이즈를 확대 하더라도 px로 설정되어 있는 폰트 사이즈는 변함이 없다.(ctrl + 휠 키를 사용한 화면 확대는 화면 전체를 확대하는 것이라 가능하다.) rem을 사용하게 된다면 좋은 점웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다.저시력자 접근성에 대응할 수 있다. rem을 사용하게 된다면 html의 폰트 사이즈를 기준으로 폰트 사이즈를 계산하게 된다.기..

배열을 sort 하려는데 에러 발생... 해결방법 [...배열].sort() 스프레드 문법을 이용해서 새로운 배열로 만들어준 다음에 sort를 했다... 꼭 스프레드 문법이 아니라 map같이 새로운 배열로 만들어 주는 것도 하나의 방법일 듯 아직 원인 파악을 하지 못했다. 아시는 분 알려주세요. read only property라서 그런가...

overflow: overlay라는 속성에 대해 새롭게 알게 되어서 다른 속성들까지 간단하게 정리해보았다. 기본 css 설정 이미지를 기준으로 설명하려고 한다.overflow속성을 따로 지정한 것은 없다.overflow: scroll항상 스크롤바를 생성하기 때문에 내용의 변화에 따라 스크롤바를 생성하거나 사라지게 하지 않는다.  콘텐츠 내용이 지정한 크기보다 넘치지 않은 경우에도 위의 사진과 같이 무조건 스크롤이 생성되는 것을 확인할 수 있다. overflow: auto컨텐츠가 요소 안에 들어간다면 visible과 같아 보이나 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 생성한다.   같은 overflow: auto를 적용했는데 height의 값에 따라서 스크롤이 자동으로 생성되는 것을 확인할 ..

이미지를 사용할 때 tag와 background-image를 사용하는 두 가지 방법이 존재한다. 이미지를 사용해서 렌더링 되는 결과는 똑같다. 결과는 같지만 사용법이 다른 두가지가 무엇이 다른지 검색해봤다. 결론은 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 더 효율적인 tag를 사용하고 그게 아니라면 background-image를 사용해라 tag와 background-image의 차이점 tag의 경우 이미지가 로딩을 실패하면 broken image와 alt 텍스트가 보이지만 반대로 background-image경우 실패하면 아무것도 보이지 않는다. 이미지에 대해 사용자가 알아야 한다면 tag를 사용할 것이고 있어도 그만이고 없어도 그만이라면 background-ima..

Cookies.set을 하는 도중에 해당 에러를 만났다 const parseJwt = (token) => { const base64Url = token.split(".")[1]; const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/"); const jsonPayload = decodeURIComponent( atob(base64) .split("") .map(function (c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }) .join(""), ); return JSON.parse(jsonPayload).expires_in; }; Cookies.set("refreshToken..

낙관적(optimistic) 업데이트, 비관적(pessimistic) 업데이트라는 말이 있다. 두 개 단어 모두 이름에서 나타내듯 낙관적, 비관적이 포인트이다. 낙관적은 사용자 수정 요청 -> 화면 갱신 -> 서버에 수정 요청 (실패 시 이전 상태로 되돌리기) 비관적은 사용자 수정 요청 -> 서버에 수정 요청 -> 성공하면 화면 갱신 사용자의 경험을 위해서 순서를 바꿔가며 업데이트를 해주는 것 같다. 중요한 기능의 경우 비관적 업데이트 방식을 주로 사용한다. 실패할 수도 있기 때문에 미리 성공한 화면을 보여줬다가 실패해버리면... 내가 사용자라고 해도 짜증이 날 것 같다. 여러 글을 읽어보니 낙관적 업데이트는 페이스북의 좋아요 버튼에 사용한다고 한다. 사용자의 경험을 위해 실시간 업데이트나 요청을 실패해..

다른 사람의 코드를 읽다 보니 을 본 적이 있다. 한 번도 button에 type을 사용해본 적이 없던 나로서는 뭘까 싶었다. 솔직히 아무 문제없이 잘 사용하고 있어서 별로 관심이 없었던 것도 있다. button의 type mdn에서 button에 대해서 찾아봤다. button의 type은 3가지가 있다. submit 서버로 양식 데이터를 제출. 타입을 지정하지 않는 경우 기본 값. 유효하지 않은 값일 때도 사용 reset 처럼, 모든 컨트롤을 초깃값으로 되돌린다. button 기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다. IE 10 이하에서 form 태그에 속하지 않은 input에서 엔터키를 누르면 submit을 실행하는 이슈가 있다. type="button"을 명시해준다면 실행되지가 않는다...

api 통신을 하다보면 조건에 따라 객체를 생성할 필요가 있다. 예를 들어 아래의 코드와 같은 상황이 생긴다. const obj = {} if(필터 조건이 있을 때){ obj.type = filter obj.id = api에 필요한 id 값 } else { obj.id = api에 필요한 id 값 } 새로운 방법을 알기 전 까지 많은 if문을 통해서 객체를 관리했었는데 지금 소개하는 방법을 사용하면 코드양을 많이 줄일 수 있고 더욱 직관적으로 코드를 읽을 수 있다. const obj = { ...(filter && {type : filter}), id : api에 필요한 값 }

front-end 하면 빠질 수 없는 것이 Form이다. 하나하나 만들어서 관리하려니 코드도 길어지고 너무 힘들어서 라이브러리를 통해 관리해보려고 찾아봤다. 대표적인 라이브러리로 Formik과 React-hook-form이 있다. 이번에는 form라이브러리인 Formik과 유효성 검사 라이브러리 Yup을 사용해보려 한다. 제일 처음 formik과 yup을 설치하자 npm i formik npm i yup form에 사용 할 상태의 초기 값을 initialValues을 통해서 설정한다. const formik = useFormik({ initialValues: { firstName: "", lastName: "", channel: "", }, }); 초기 값을 사용 할 곳에서 value의 속성 값으로 초기..

역시 경주는 봄이 제일 이쁜 것 같다 분황사 근처 버스정류장 경주월드 여기 어디더라.. 이쁘구만 ㅎ_ㅎ