어제 작성을 해두고 올리지 않아서 오늘 올려본다. 오늘 아래 사진과 같이 각 tab 마다 읽지 않은 내용이 있다는 것을 알리는 기능을 추가 가능한지 물어 보아서 생각해 보았다. 내용을 읽지 않았다면 주황색 점이 붙게된다. 처음 내용을 들었을 땐 간단하게 생각했지만 구현을 하기위해 작업을 하다보니 생각보다 고민해야할 부분이 많았다. 일단 원래 기획에 없던 사항이라서 반응형 레이아웃에서 문제가 생긴다 370px 아래로 내려가게 되면 tap 부분의 자리가 부족하여 점이 tab 밖으로 밀려나가게 된다. 기능적인 문제로는 프론트만 구현을 한다고 하면 반쪽 짜리 알림이 되는 것이였다. 왜냐하면 페이지를 새로고침 하거나 다른 페이지로 갔다가 다시 들어올 경우 한번 읽었다고 하더라도 저 점이 계속 붙어 있게 된다. 백..

책에서 "소프트웨어에서 이름은 어디나 쓰인다" 라고 말하는 것처럼 정말 변수명, 함수명 외에도 컴포넌트의 파일 명을 정할때 URL path 명을 정할 때 타입의 이름을 정할 때 코드를 작성하다 보면 수많은 이름을 지정한다. 이 장에서는 이렇게 자주 사용되는 이름을 잘 짓는 간단한 규칙을 몇 가지 소개한다. 1. 의도를 분명히 밝혀라 - 변수의 존재 이유는? - 수행 기능은? - 사용 방법은 ? 위의 질문들에 대해서 내가 이전에 작성한 코드를 보고 질문에 답을 해보았다. 함수의 존재 이유는? article 들을 filter 하여 보여주기 위해서 수행 기능은? articleList를 for문을 돌면서 article 의 category 가 tag와 일치하는지 확인하고 일치하면 filterArr 에 담아서 출력..

text 로 불러오는 문장에서 []로 감싸진 부분을 하이라이트 해주고 n 문자가 오면 엔터를 걸어 주어야 했다. 3가지 방법을 고민을 했는데 1. react에서 제공해주는 dangerousHtml 메서드를 사용하는 방법. - text를 DB에 저장할때 [] 대신 태그로 n 대신 태그를 같이 넣어준다. - DangerousHtml 컴포넌트를 만들어 해당 컴포넌트로 text 값을 넘겨주어 dangerousHtml메서드를 이용하여 변환 시켜준다. - DangerousHtml 컴포넌트 css 파일에 span 태그는 font-weight과 color 가 적용 되도록 만들어 준다. span { font-weight: bold color: green } ex) 안녕하세요 개발자 입니다. => 안녕하세요 개발자 입니다..

next 에서 그리드 시스템을 적용하는 중 속성 선택자로 [class^="col-"] 와 같이 설정을 해 두었을 경우 pure css 에는 className 또는 id 값이 있어야 한다 라는 에러가 뜨게 된다. 이 에러의 원인은 next.js 였다. next.js 9.2 이상 버전에서 sass 속성 선택자 attribute starts with 는 전역 css 에서만 사용이 가능하다. 나는 _grid.module.scss에서 적용을 해주고 있었는데 _grid.scss 로 바꾸어 주고 App.js 에서 전역으로 적용을 해주어야 했다. 아래 깃헙 이슈에서 이 문제를 발견하고 해결할 수 있었다. https://github.com/vercel/next.js/issues/10142

getServerSideProps 는 runtime 시 실행 getStaticProps 는 빌드시 실행 next build 명령어를 실행하게 되면 Next.js 는 페이지를 3 타입으로 최적화 한다. λ (Lambda): 이러한 페이지는 런타임에 렌더링되며getInitialProps 또는getServerSideProps를 구현할 수 있습니다. ○ (Static): Static으로 렌더링 된 페이지에는 HTML 만 포함되며 이 페이지는 매우 빠르다. ● (SSG): 정적 사이트 생성 페이지도 정적 방출로 제공됩니다. 이는 HTML 및 프리 페치 된 props (getStaticProps 정적 메소드에서)을 렌더링한다는 점에서 정적 페이지와 다릅니다. 완전히 서버레서 렌더 하려는 이유 사이트 엔진 최적화를 ..

카카오 템플릿 생성은 카카오 개발자에 페이지에 가서 도구 메뉴를 클릭한 후 메시지 템플릿에 들어가면 템플릿을 만들 수 있다. 자세한 설정은 아래 링크로 들어가보면 잘 나와 있다. https://developers.kakao.com/sdk/reference/js/release/Kakao.Link.html#.sendCustom__anchor https://developers.kakao.com/docs/latest/ko/message/js#link-send-with-template-id // 페이지 진입 시 kakao initialize useEffect(() => window.Kakao.init(process.env.KAKAO_API_KEY, []); // 템플릿 객체 생성 카카오 개발자에서 생성한 템플릿I..