반응형 분류 전체보기201 [React] sticky Header CSS가 변하는 sticky Header 만들기와 최적화 여러 웹사이트에서는 scroll과 관계없이 상단에 붙어있는 sticky header를 자주 사용하고 있는데요, 아래 예시와 같이 특정 영역에서 css가 바뀔 수 있는 header를 만들어 보겠습니다. ⚙️ 사용 스택 : React, emotion/css 📌 기본 구조 생성하기 헤더는 공통적으로 사용할 가능성이 높기 때문에 Header로 분리했습니다. App.js import { css } from "@emotion/react"; import Header from "./Header.jsx"; export default function App() { return ( ); } const wrapStyle = css` `; Header.jsx import { css } from "@emotion/react"; .. 2022. 5. 17. 그림으로 보는 Error Boundaries | Error Boundary의 등장 JS component의 error는 React 상태 흐름을 방해하고 숨은 에러를 발생킨다. 이런 오류로 인해 app 전체를 정지시켜선 안되므로 "error boundary"가 등장했다. ✨ Error bounaries는 자식 component tree 어디서에나 일어난 JS error 를 잡고, error를 loging하고 fallback UI를 보여준다. 다만 아래 error들은 catch 하지 않는다 이벤트 핸들러 비동기 code ( setTimeout ... ) SSR (server side rendering) error boundary 자식이 뱉는 error Error Boundary의 사용처와 Uncaught Errors Error Boundaries는 J.. 2022. 4. 30. textarea 줄 수에 따라 style 변경하기 ( line count에 따른 border radius설정 및 textarea line count 개수를 이용한 CSS 설정 ) 디자인팀에서 요청이 들어왔다. textarea에 들어가는 line에 따라 border-radius가 달라졌으면 좋겠다는 요청! 문제는 해당 부분을 사용하는 공간의 text area의 width가 고정되어 있지 않다는 점이다. 유저의 기기는 정말 다양하기 때문에 width를 고정할 수 는 없었다 ex) iphone se에서 3줄일게 z-fold에서는 1줄이 될 수 있다.. 😅 1) Textarea의 text value를 줄바꿈 기준으로 split 처음 생각한 방법은 text area의 value를 잡아서 splilting 하는 법! const getCurInputTextLineCnt = useCallback((text) => { const lines = text?.split(/\r|\r\n|\n/); co.. 2022. 4. 25. 프론트엔드 입사 6개월 회고! 취업한지 벌써 6개월이 되었다. 시간은 정말 쏜살같이 흘러갔고 그 과정에도 많은 변화가 있었다. 내가 경험한 것들과 현재 생각, 그리고 앞으로의 다짐을 적을 예정! 처음 입시하고 나선, 우리 팀 너무 좋아😎 친구들이 3개월은 있어봐야 안다고 우려했지만 6개월이 된 지금도 나는 좋다. 나는 인턴으로 입사했다, 사실 정규직 전환을 크게 염두에 두고 들어간건 아니었고 가장 중요하게 여겼던 가치는 성장. 팀원은 적지도 많지도 않았는데, 선임같은 두 분이 계셨다. 내가 들어갈때쯤 메인 개편 건이 있었고, 그로 인해 신규 서비스에 참여하게 되었다. 타입스크립트 ,리코일 등 어떤 기술스택을 쓸건지 치열하게 고민하고 선정했다. 들어오자마자 모두가 그렇듯이 2주는 실무에 투입되지 않고 코드 파악만 했었는데, 일단 나는 .. 2022. 4. 12. Bitbucket 여러 계정 SSH key 설정 : git@bitbucket.org: Permission denied (publickey). - Mac 오류 상황 git@bitbucket.org: Permission denied (publickey). Bitbucket에 있는 프로젝트를 clone시 발생한 오류 등록되진 않은 기기에서 clone, push 가 일어날 때의 인증오류 ssh를 등록하지 않아 접근권한이 없는 상태로 clone,push를 해서 그렇다! 그렇다면 ssh key를 생성하고 등록해보자! + 필자는 개인용, 회사용 구분을 위해 계정 여러개를 생성했어요! 1. ssh key 생성 > 엔터 ssh-keygen -t rsa -C "이메일" 2. 키 생성 2-1) 키 이름 기본으로 설정 시 (id_rsa) > 엔터 Generating public/private rsa key pair. Enter file in which to save the .. 2022. 3. 27. [책] 피터의 고객을 끌어오는 구글 애널리틱스4 📙 피터의 고객을 끌어오는 구글 애널리틱스4 마케터,기획자와의 생산적인 대화를 하기 위해 그들의 도구를 만져나 보자! 🤔 책을 읽으며 요근래 고객들을 대상으로 하는 개발을 하다보니, 고객의 행동데이터를 수집하는 방법이 궁금했었는데 마침 딱 좋은 책이 있었다. ‘고객을 끌어오는 구글 애널리틱스4’ 직접 사용하는 법부터 시작해서 실습사이트와 앱을 제공해주는 점이 무척 좋았고 처음 사용해도 금방 따라할 수 있게 친절하게 설명되어 있어서 좋았다. 이 책은 출퇴근길에 완독하는 것보다 직접 노트북이나 데스크톱으로 해보는 책이기 때문에 여유가 있을 때나 아니면 구글 애널리틱스를 직접 사용해야할 때 읽어보면 좋을 것! 이런 고객을 분석하는 툴이 왜 필요한 지 궁금했고, 어떻게하면 쉽게 분석할 수 있을 지 궁금했던 차에.. 2022. 3. 27. OAuth scope로 인한 Create a repository webhook error - 특정 repository에 webhook 생성 오류 문제 상황 특정 repo에 webhook 생성요청을하면 create가 안되고 error 발생 해결 전 createWebhook : repo주인 이름, repo명, token을 넣어 webhook 생성 POST 요청 함수 🔗 Github Docs - Create a repository webhook 참고 const createWebhook = (owner: string, repo: string, token: string) => { return axiosApi( { url: `/repos/${owner}/${repo}/hooks`, method: 'POST', data: postData }, token ); }; 사용자는 을 하는 과정에서 오류가 발생한 것!! Github아이디로 로그인 > 본인 repo중 .. 2022. 3. 9. [책] AI로 일하는 기술 - 인공지능은 어떻게 일이 되는가 📙 AI로 일하는 기술- 인공지능은 어떻게 일이 되는가 인공지능의 성장기를 들어보고 차근히 이해하니, 아는 만큼 보일 수 있게 해주는구나! 🤔 책을 읽으며 취향에 의해 자기개발서 혹은, 프론트 엔드 개발 지식을 위한 JavaScript 관련 책만 읽어 왔었는데 이런 독서 편식을 막을 좋은 기회가 왔다! 사실 AI라고 해서 무거운 마음으로 첫 장을 시작했는데 막상 읽어보니 술술 넘어가는 느낌! 직접 개발하기 위함이 아니라 AI의 역사부터 시작해 현재 어떤 분야로 전망을 이룰 수 있는지 47개의 질문을 6챕터에 나눠 한가지씩 해결하는 구조인데 출퇴근길에 들고다니며 완독! 하도 들고 다니다보니 실수로 물을 쏟아서 쭈글쭈글 해졌다ㅠㅠ 잘 안보이지만 나는 무지개 색연필🌈과 함께 책을 읽는데 인공지능의 정확한 의미.. 2022. 2. 23. [git 오류] Bibucket ssh key 생성하기 - You are using an account password for Git over HTTPS 문제 상황 You are using an account password for Git over HTTPS. remote: Beginning March 1, 2022, users are required to use app passwords remote: for Git over HTTPS. remote: To avoid any disruptions, change the password used in your Git client remote: to an app password. remote: Note, these credentials may have been automatically stored in your Git client remote: and/or a credential manager such as G.. 2022. 2. 15. 이전 1 2 3 4 5 6 ··· 23 다음 반응형
