Dalin's Archive

프론트엔드 😉 (번역) 자바스크립트로 첫 ChatGPT 플러그인 만들기 챗 플러그인은 ChatGPT가 서드 파티 앱과 상호작용을 할 수 있게 하는 지침, 사양이다. API의 기능, 접근 방법, 호출 시점을 알려줘야 한다 챗 플러그인을 통해 API와 사용자의 상호작용을 더 직관적, 유동적으로 하고, 새로운 고객을 만날 수 있다. 그러나 응답 속도가 느리고, 비용을 지불해야 하며, 제작자가 답변을 조작할 수 있고, API가 잘못 호출될 수도 있다. Express를 이용해서 To do 챗 플러그인을 만들고, 테스트하는 방법을 코드와 함께 설명한다. 커리어, 개발 문화 🤗 변별력을 200% 더 높인 개발자 채용 방법: 코드 리뷰 테스트 채용 절차로서의 '코드 리뷰 테스트'라는 것은 처음 보기도 하고, 요즘 어떻..

개발자로 일한 지 만 1년이 됐다. 개발 공부를 본격적으로 한 지도 만 2년이 넘어간다. 그런데 솔직히 말하자면, 개발이 항상 엄청나게 재미있는 것은 아니다. 꽤 재미있고 뿌듯할 때는 종종 있지만. 그리고 나는 개발에 엄청난 재능 있는 편은 아닌 것 같다. 성실히는 할 수 있고, 아주 아주 잘 안 맞는 것은 아니지만. 동료들 중에는 퇴근 후에도 스터디를 하고, 비싼 유료 코스를 수강하고, 밤 늦게까지 공부하는 분들도 보인다. 개발자 오픈 카톡방에도 여러 군데 들어가 있는데, 보면 진짜 열심히 하시고 잘하시는 분들이 많아 보인다!! 그래서 리더 한 분과의 면담에서 개발자 1년 해봤는데 엄청 못하는 건 아니지만 엄청 잘하는 것도 아니고, 항상 엄청 재미없는 건 아니지만 항상 엄청 재미있지도 않다고, 계속 개..

목차 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 을 올렸더니, 깃허브 액션이 잘 안 돌아갔다. 정확히 그 에러 문구를 적어둔 게 없는데, 대충 아래 ..

Frontend 🔮 극한의 프론트엔드 성능 최적화 시리즈 0편 (프롤로그) 1편(next js 13) 나도 요즘 넥스트 13을 공부하고 있어서 읽어봤다. 아직 조금만 공부해서 완전히 이해되지는 않고 슥.. 읽었다. 넥스트를 좀 더 이해한 후에 읽으면 더 좋을 듯~ - 서버 컴포넌트 등장 : RSC(React Server Component)은 서버 사이드 렌더링을 컴포넌트 단위로 할 수 있게 함. 2편(이미지) cloudinary, react를 이용해서 이미지 최적화하는 방법을 다룬다. lqip를 생성하는 방법은 처음 봤는데, 용량 큰 이미지가 불러와지기 전에 블러 처리된 퀄리티 낮은 이미지를 불러와서 보여주는 것이다. 단순히 한가지 색상의 스켈레톤을 보여주는 것보다 좋아보인다 ! HTML 상자를 사용할 ..

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

으악!! 개발자로 일한 지도 만 1년이 다가온다. 2022년 5월 2일에 입사했으니, 이제 곧 1년이다. 5월 1일은 근로자의 날이라서 쉬고, 5월 2일에 출근하면 만 1년 경력이 된다. 아직도 모르는 게 많고, 매 스프린트 낑낑거리는 일이 꼭 하나씩은 있고, 이제야 조금 회사에 적응한 것 같은데 말이다. 1년이 정말 빠르게 지나갔다!!!!!!!!! 그래도 노션에 대충 하루하루 일한 것을 써뒀어서 기억이 전부 날아가지는 않은 것 같다. ㅎㅎ 이걸 바탕으로 지난 1년을 돌아보려고 한다. 자문자답 형식으로 써보려고 한다. 성장했다고 느끼는 포인트 🎀 개념적으로만 알고 있던 것을 적용하면서, 어떻게 하는 것이고 무슨 장단점이 있는지 체험할 때. (compound 패턴 등) 매 스프린트마다 처음 해보고 막막한 ..

제.곧.내. 제목에 써있는 걸 하고 싶은 상황이다. 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/..