Dalin's Archive

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

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

4월 내내 작성합니다. 작은 따옴표 안의 글은 직접 인용한 부분입니다. 프론트엔드 (번역) 🔥 자바스크립트 메모리 관리: 일반적인 메모리 누수를 방지하고 성능을 개선하는 방법 자바스크립트 메모리 관리 -> 애플리케이션 성능에 영향 자바스크립트 메모리 관리 가비지 컬렉터 : 더이상 사용하지 않는 객체를 식별해서(참조되고 있는지 체크) 제거. 사용 중인 모든 객체 '표시' -> 힙을 '정리' 사용중이지 않은 객체 제거하는 과정을 주기적으로 수행. (번역) 프런트엔드 개발의 종말 제목부터 무섭다 ㅠㅠ chat GPT 등 인공지능이 발달하면서, 앞으로 발생할 일에 관한 저자의 가설이다. LLM(Large Language Models)은 프롬프트가 주어지면, 그 뒤에 올 가능성이 높은 문자 집합을 찾아낸다. LL..

작은 따옴표 안의 글을 해당 아티클을 직접 인용한 부분입니다. 프론트엔드 개발 Javascript에서도 SOLID 원칙이 통할까? 취준생 시절, 면접을 봤는데 'SOLID 원칙에 대해서 설명해보라'라는 질문을 받은 적이 있다. 그때 SOLID 원칙이라는 것을 들어본 적도 없었고, 그 후에 찾아보려고 했지만 어려워 보였고 자바 예제가 많이 나와서 ㅇㅁㅇ...했던 적이 있다. 면접에서 충격을 받았던 SOLID... 이제라도 알고 싶어서 읽어봤다! SOLID 원칙 : 객체 지향 프로그래밍 및 설계의 기본 원칙 5가지의 첫 문자를 따서 만든 말. 왜 원칙이 필요한가? 코드 변경에 유연한, 좋은 구조를 가진 코드를 작성하기 위해서 SOLID 원칙은 객체 지향 프로그래밍 원칙인데, 함수형에 적용 가능한가? => 필..

소프트웨어 설계 20년 해보고 깨달은 '좋은 설계'의 조건 '모든 상황에서 모든 문제를 해결해주는 모범답안 같은 완벽한 해법은 없으며, 설계는 정교한 의사소통을 돕는 도구로 활용될 때만 의미가 있다고 믿습니다.' - 본문 중- '소통 없이는 완벽한 설계 문서란 없다.', '당장 개발을 위한 소통에 쓰이지 않는 문서나 그림 형태로 설계하는 일은 지양해야 헙나다.' - 본문 중- 완벽하고 철저한 설계는 있을 수 없고, 코딩 직전에 어떻게 해야 할지 정도만 설계하면 된다. 개발 전에 모든 것을 꼼꼼하게 설계하지 말고, 개발-리팩토링하면서 지속적으로 설계도 해나가야 한다!! (약간 애자일 개발방법과도 연결되는 것 같다 !) [Korean FE Article] 내가 작성한 Jest 테스트는 왜 이렇게 느릴까? 읽..

이해하기 쉬운 코드 작성방법 정리 https://chodragon9.github.io/blog/easy-code/#%EC%9D%B4%EC%A0%9C-%EB%B3%B8%EB%A1%A0%EC%9C%BC%EB%A1%9C-%EB%93%A4%EC%96%B4%EA%B0%80%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4 이해하기 쉬운 코드 작성방법 정리 | ChoDragon9 이해하기 쉬운 코드 작성방법 정리 글의 목적 코드 리뷰를 받다보면 본인이 작성한 네이밍의 의미가 모호하다는 피드백을 받거나 로직이 이해하기 힘들다는 피드백을 받을 때가 있다. 동료들이 chodragon9.github.io 제목 그대로 이해하기 쉽게 코드를 작성하는 방법을 다룬다. - 이해하기 쉬운 코드를 작성해야 하는 이유?..

인프콘 2022 다시보기 https://www.inflearn.com/course/infcon2022 [무료] 인프콘 2022 다시보기 - 인프런 | 강의 인프런의 첫 오프라인 콘퍼런스, 인프콘 2022에서 진행된 오프닝 및 발표 세션을 영상으로 다시 보실 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 인프콘 가고 싶었는데 추첨이 안돼서 아쉬웠다ㅠ 인프콘 2022 다시보기를 제공해서~ 추석 연휴에 관심있는 것들을 봤다 !! 인프런 짱 !!!!! 코드를 사랑하지 마세요 https://hajoeun.blog/more-important-than-my-code 코드를 사랑하지 마세요 코드보다 중요한 것 hajoeun.blog 실무에서 일하면서 공감하게 된 것들이 많았다.. 회사에서..

[번역] 모든 개발자가 알아야 하는 61가지 프론트엔드 웹 개발 트렌드 용어 https://velog.io/@cookie004/61-frontend-web-development-buzz-words [번역] 모든 개발자가 알아야 하는 61가지 프론트엔드 웹 개발 트렌드 용어 친구들이 웹 개발에 대해 토론할 때 소외감을 느끼고 싶지 않다면... 이 글을 읽으셔야 합니다😊 velog.io 프론트엔드 용어들, 간단한 설명이 쓰여있다. 가볍게 슥 보기 좋다. 프론트엔드 개발자와 협업하는 기획자, 디자이너, 백엔드 개발자가 보셔도 좋을것 같다 ! 내가 몰랐던 것~ 14: CTA: Call to Action 21: FCP: First contentful Paint 23: 접기(fold): 스크롤하지 않고 볼 수 있는..

출퇴근 길에 여러 플랫폼에서 개발 관련 아티클을 읽는다~ 그런데 읽었던 내용을 다시 찾고 싶은데 까먹을 때가 많아서, 매주 읽은 아티클 중 기억하고 싶은 것을 간단히 남겨둔다~~ https://yozm.wishket.com/magazine/detail/1645/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 나에게 맞는 웹 기술 스택을 고르는 방법 | 요즘IT 세상에는 웹 개발을 하기 위한 많고도 다양한 기술 스택이 존재합니다. 그러나 어떤 스택을 채택해야 하는지, 언제 그것을 사용할 수 있는지를 아는 것은 특히 초보자에게 어려운 일입니다. 이 yozm.wishket.com -> 회사 채용 공고에서 ..

친구 J가 오랜만에 연락이 왔다. J의 친구인 C님이 개발 공부를 할지 고민 중인데, 내 연락처를 줘도 되겠냐는 부탁이었다. 나는 당연히 좋다고 했고, C님과 카톡으로 이야기를 나눴다. 나도 개발 공부 시작할 때 고민됐던 질문들이었다. 그래서 그 중 일부를 블로그에 남긴다. 주의 !! 제 짧은 경험을 바탕으로 쓴 글이니 주관적입니다. (혹 다른 의견을 공유하고 싶으시면, 댓글로 알려주세요.) 1. 코딩 학원이 많은데, 어느 곳이든 취업에 상관이 없나요? 네, '취업하는 데'는 지장이 없는 것 같습니다. '실력'이 중요합니다 !! 어느 코딩 학원 출신인지는 취업에 그렇게 중요하지 않은 것 같습니다. 제 주변에도 비전공자 + 독학으로 취업하신 분도 계십니다. 다만 본인의 스타일, 학원 커리큘럼 등에 따라서 ..