Dalin's Archive

목차 1. 패키지 주소 404 Not Found error 2. EPERM: operation not permitted in Yarn 3. @types/node 버전 4. yarn.lock 파일이 무엇인지 1. 패키지 주소 404 Not Found error 라이브러리 버전 때문에 일주일 내내 고생했다. (매일 일하는 내내 고생한 건 아니고, 중간 중간 고생했다..ㅎㅎ) 사건의 발단은 월요일에 안 쓰는 라이브러리가 있어서 그걸 제거한 것이었다. (Yarn remove 패키지명) 그리고 로컬에서 서버를 돌리고(yarn dev), 빌드할 때도 (yarn build)할 때도 잘 동작했다. 그런데 깃허브에 pr 을 올렸더니, 깃허브 액션이 잘 안 돌아갔다. 정확히 그 에러 문구를 적어둔 게 없는데, 대충 아래 ..

점핏에서 프론트엔드 개발자 이야기를 들려주는 토크 콘서트를 했다. (개.취.콘 !) 참여 신청하면 추첨을 통해서 오프라인으로 참여할 수 있었는데, 나는 추첨에서 탈락해서 ㅠㅠㅠ 온라인으로 봤다. 좋은 내용, 적용하고 싶은 내용이 많았다 ㅎㅎ 강연 들으면서 요약해 봤고, 내 생각은 보라색 형광펜으로 칠했다. 좋은 강연을 제공해 주신 점핏 & 강연자 님들께 감사하다 ㅎㅎ https://www.jumpit.co.kr/book-concert/12 점핏 개발자 커리어 점프, 점핏 www.jumpit.co.kr 능력 = 하드스킬+ 소프트 스킬 좋은 코드 테스트하기 용이(쪼개기 등) 읽기 쉬움(가독성) -> 내 코드를 다른 사람이, (합의 하에) 한국어 변수명도 가능. 일관성(이름, 파일 구조 등 / 합의 중요) 테..

제.곧.내. 제목에 써있는 걸 하고 싶은 상황이다. static error page를 만들어서, 500대 에러일 때 정적인 에러 페이지를 보여주었다. 그리고 API 응답이 너~~무 오래 걸릴 때도 에러 페이지를 보여주고 싶은데, 어떻게 할지 알아보는 중이다. timeout을 이용하면 되는 것 같다. axios에서는 timeout 옵션을 사용하여 요청이 얼마나 오래 실행될 수 있는지 설정한다. 이 옵션은 밀리초 단위로 설정할 수 있다. 기본값은 0인데, 요청에 제한 시간이 없다는 것이다. axios({ url: 'https://example.com/api/data', method: 'get', timeout: 5000 // 5초 이내에 응답이 없으면 타임아웃 발생 }).then(res =>{}) .catc..

이전 글에서 마우스를 호버하면 카드가 뒤집어지는 애니메이션을 구현했는데, 추가로 구현할 부분이 생겼습니다. 바로 모바일에서는 스크롤하면 카드가 뒤집어지게 하는 것이었습니다. 이 글에서는 꼭 모바일은 아니고, 스크롤 하면 카드가 flip 애니메이션 효과를 구현해보겠습니다. IntersectionObserver라는 걸 활용해서 하는데 이것도 재미있습니다 😀 예제 코드 🌸🖥️ See the Pen Scroll card flip by Seoin (@tjdls111) on CodePen. 설명 🤗💕 Intersection Observer Api를 이용했는데, 이것은 타겟 요소와 상위 요소가 겹치는 부분을 관찰해줍니다. 그리고 페이지가 스크롤되다가, 타겟 요소가 등장하면 원하는 콜백 함수를 실행할 수 있습니다. 핵..

상황 설명 회사에서 서비스 설명하는 사이트가 있는데, 거기에서 카드가 뒤집히는 효과가 들어간 스타일이 있었다. 라이브러리를 써야 하나? 생각할 정도로 어렵고 복잡한 줄 알았는데 해보니까 생각보다 간단했다 ㅎㅎ 일단 구글에 검색을 하니까 w3School에서 flip card를 알려주는 페이지도 있었다! 예시 화면, html, css 코드가 있다. 나는 전체적으로는 이걸 참고했다. 카드 뒤집히는 효과 CSS , HTML 🌈 W3School의 코드를 조금 바꾸고, 설명을 달았다. ㅎㅎ See the Pen Untitled by Seoin (@tjdls111) on CodePen. HTML (봐야 할 부분만) 뒤 Lorem ipsum dolor sit, amet consectetur adipisicing eli..

얼마 전에, 회원가입한 유저가 어디에서 왔는지 유입을 알고 싶다는 요구사항이 있어서, 우리 서비스에 처음 들어올 때 referrer를 가지고 있다가 회원가입할 때 백엔드로 넘기는 일을 마무리했어요~ 처음에는 많이 어려울 줄 알았는데, 생각보다는 쉽고 재밌었어요.ㅎㅎ 그래도 좀 고려해야 할 점이 있어서 글을 남기려고 해요~ 일단 referrer url에 대해서 알아볼게요. 아! 참고로 referrer(참조자)가 올바른 철자인데, HTTP 헤더 referer은 referrer의 오타라고 해요~ 저는 referrer로 사용할게요. referrer은 '현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소.'입니다.(참고: https://developer.mozilla.org/ko/docs/Web/..

싸피 팀 프로젝트에서부터 사용했던 Pritter, ESLint. 회사에서 추가로 사용하는 Stylelint. 사용하면 자동으로 스타일을 맞출 수 있고, 문법 오류도 잡아줘서 편리하다. 하지만 잘못하면 엄청 귀찮아진다 ㅠ 코드 전부 빨간 줄이 생기고..ㅠㅠ 오늘도 그런 일이 있었다. 분명히 ESLint, Prettier, vscode setting에서 모두 작은따옴표를 사용하게 했는데(single quote), 파일을 저장하면 자동으로 큰 따옴표로 바뀌는 것이었다. 그리고 규칙에 안 맞는다고 코드에 전부 빨간 줄을 쳐서 보여줬다 ㅠㅠ 이건 vscode setting에서 Editor: Default Formatter를 잘못 설정해서 생긴 문제였다. 아래와 같이 'Prettier ESLint'로 해야 하는데,..

보호되어 있는 글입니다.

저번 스프린트에 메인 페이지에서 여러 애니메이션을 적용하는 걸 했다. 그때 css 속성 중에 cubic-bezier라는 게 있었다. 그게 뭔지 알고 싶어서 써보는 글이다. bezier 곡선은 두 개 이상의 점을 가지고 정의되는 곡선이다. 점 몇 개로 특정한 곡선을 만들 수 있어서 컴퓨터 그래픽 분야에서 많이 쓰인다고 한다. 나무 위키, 이 블로그에서 베지어 곡선에 대해 잘 설명해준다~~ 1차, 2차, 3차,..... n차가 있는데, cubic-bezier는 3차이다. n개의 조절점으로 베지에 곡선을 만들면 n-1 차 베지에 곡선이라고 한다. 그러면 cubic-bezier는 4개의 조절점이 필요하다는 것이다. 그런데 두 점은 이미 정해져 있다. 시작점인 (0, 0)과 끝 점인 (1, 1)! 그래서 두 점만..

상황 설명 🌈 이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다. 나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다. 디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다. 그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...) 웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!! 그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다. 엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ (pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인..