작심삼일 개발이야기

이미지를 사용할 때 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의 속성 값으로 초기..

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

올해 1월 중순부터 시작해서 끝까지 다 읽는데 거의 1달 반 정도 걸린 것 같다. 방금 전 마지막 장을 정리해서 업로드하고 바로 이 글을 작성하고 있다. 처음에는 책내용과 나의 생각을 같이 적으려고 했으나 가면 갈 수록 책 내용만 요약하는 글이 된 것 같아서 아쉽다. 비록 개발기술에 관련되지 않았지만 끝까지 다 읽었던 적이 정말 오랜만이라서 뿌듯한 기분도 생긴다. 책의 한 단원씩 읽으며 정리해서 블로그에 기록을 하고 있었는데 다른 사람들에게 도움이 되었으면 좋겠다. 확실히 한 번 읽고 글을 작성할 때 다시 여러번 읽어보게 되어 나에게도 도움이 되는 것도 분명하다. 책의 모든 내용이 나에게 딱 필요하다고 느끼지는 못한 것 같다. 아직 개발을 시작한지 얼마 되지 않아서 그런 것 같다. 여담으로 이 티스토리에..

이 글은 "개발자의 글쓰기"를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 7장의 내용이 궁금해서 이 책을 읽었는데 정말 마지막에 있었다... 길고 길었지만 마지막 장을 정리한다. 1. 기술 블로그를 쉽게 쓰는 방법 3가지 첫째, 주제 의식을 버리고 소재 의식으로 쓰자 소재 의식이란 특정상 대상이나 상황에 자기만의 관점이나 생각이나 해결 방안을 말하는 것이다. 둘째, 독자 수준이 아니라 자기 수준으로 쓰자 보통 어려운 글을 쉽게 설명할 때 비유법을 많이 사용한다. 하지만 비유법은 한계가 있다. 그 원리에 대해 간접적으로 이해한 것으로는 실제로 사용할 수가 없다. 독자를 생각해서 어려운 용어를 해석해 풀어쓰거나 쉬운 용어로 바꿀 필요가 없다. 그대로 사용하되 필요하다면 용어를 정의한 자료를..

배열을 객체로 변환하는 3가지 방법 object.assign() array.reduce() spread 연산자 사용 1. object.assign() const array = ['a','b','c']; const obj = Object.assign({}, array); console.log(obj) // {0: 'a', 1: 'b', 2: 'c'} 2. array.reduce() const array = ['a', 'b', 'c'] array.reduce(function(object, value, index) { object[index] = value; return object; }, {}) // {0: 'a', 1: 'b', 2: 'c'} 여기서 나는 키 값이 1부터 시작하기를 원해서 reduce를 사..