본문 바로가기

분류 전체보기62

[WriteMate] 디스코드 봇 명령어 설정하기 INTRO 이제 본격적으로 명령어를 설정해 보려고 하는데 그 전에 해야 할 일이 있다. 바로 어떤 명령어가 필요한지 정리하는 것이다. 기능 요구사항을 정리하고 추상화 해서 명세를 간략하게 적어보려고 한다. 따로 양식을 가져온 건 아니고 작은 프로젝트 단위여서 간단하게 생각을 정리하는 용도로 작성하려고 한다. 필요한 기능 시나리오 블로그 스터디 4명이 디스코드 서버에서 블로그 글 업로드 채널을 개설하고 봇 사용, 한달동안 진행하는 스터디이고 매주 글 1개 이상 작성하는데 월요일부터 일요일 자정까지 적어도 1개의 글을 작성해야 하고 작성하지 못하면 벌금, 벌금은 연속으로 작성하지 못하면 2배씩 증가, 월요일 아침에 저번주 결과에 대해 알림, 유저가 글 등록하면 실시간으로 알림이 오고 새 글 링크가 같이 올라.. 2024. 3. 23.
[Mudig] 불필요한 리렌더링 방지로 성능 최적화 하는 방법 IntroReact 애플리케이션의 성능을 최적화하는 데 중요한 포인트로 리렌더링이 과도하게 발생하면, 앱의 반응성이 저하될 수 있다는 것을 고려하는 것이다. 실제로 리렌더링에 대한 부분에 리팩토링을 진행하면서 Light House 검사를 통해 성능이 개선되는 것을 확인했다. 함수 컴포넌트와 클래스 컴포넌트 모두 불필요한 리렌더링을 방지할 수 있는 방법이 있으며, 각각의 접근 방식이 조금 다르다. 프로젝트에서는 함수형 컴포넌트로 구현했지만 공부하는 의미로 함수 컴포넌트와 클래스 컴포넌트 각각을 정리해 보았다. 함수 컴포넌트의 불필요한 리렌더링 방지React.memo: 컴포넌트를 감싸주면, props의 변화가 없다면 리렌더링을 방지하여 성능을 최적화할 수 있다.const MyComponent = React... 2024. 3. 19.
[Wiki Page] 내용에 있는 제목 자동 링크걸기 디버깅 INTRO 머릿속으로 어떻게 해야 이 기능을 동작하게 할 수 있을까 고민했다. 일단 제목 전체가 내용에 있는 텍스트와 비교해서 같은게 있는지 찾고 같으면 링크를 생성하고 그걸 클릭하면 해당 제목의 디테일 페이지로 이동해야 한다. 이정도로 생각을 정리하고 나서 코딩을 시작했다. 조금 더 생각하고 코드를 작성해야 했다.. 시도 1 // 포스트 내용에서 다른 포스트 제목을 찾아 링크로 변환 const renderedContent = post.content.split(' ').map((word, index) => { const matchingPost = posts.find(p => p.title === word); if (matchingPost) { return {word}; } return word + ' '.. 2024. 3. 14.
[WriteMate] 디스코드 봇 만들기 Intro 블로그 글 쓰기 스터디를 진행중이다. 일주일에 적어도 한개의 글을 작성해서 공유하는 스터디로 기록의 중요성은 알지만 신경쓰지 않으면 계속 놓치기 때문에 시작하게 되었다. 약간의 강제성을 위해 벌금을 내기로 했다. 그게 효과가 제일 좋을것 같다는 생각에..^^ 근데 참가자들이 정해진 기간 내에 글을 작성하는 것을 체크하고 벌금을 기록하는 일을 매주 반복하는것이 아주 약간은 귀찮기도 하고 원래 그런건 자동, 반복 같은 키워드가 들어가면 대신해줄 무언가를 개발하는 것에 관심이 가기 마련 아닐까? 저런 생각들을 하다가 찾아보니 javascript로 개발이 가능하다는 글을 보았다. 갑자기 흥미가 생기면서 개발해봐야겠다는 생각이 들었다. Step 1 환경 세팅 일단 이름을 정해야 했다. 이럴 땐 GTP가.. 2024. 3. 12.
[Wiki Page] 4일만에 프로젝트 하나 뚝딱 해치우기 구현 과제를 받았다. 구현해야 하는 기능은 다음과 같다 위키페이지는 제목과 본문으로 구성되며 각각 텍스트 입니다. 처음페이지에서는 여러개의 위키페이지제목이 목록으로 나옵니다. 처음페이지에 목록으로 보여지는 제목의 갯수는 5개이며, 5개가 넘어가면 페이지를 구분해서 표시합니다. 위키페이지 제목을 클릭하면 제목과 본문을 볼 수 있습니다. 위키페이지 본문에 다른 위키페이지의 제목이 있으면 자동으로 링크가 걸리고,클릭하면 해당 위키페이지로 이동합니다. 메인페이지에서 추가 버튼을 누르면 새로이 입력할 수 있는 창이 나오고, 제목과 내용을 입력할 수 있습니다. 위키내용페이지에는 수정 버튼이 있고, 수정을 누르면 내용을 수정해서 저장할 수 있습니다. 여기에서 고민했던 부분은 페이지네이션을 어떻게 구현할지와 본문에 제.. 2024. 3. 10.
[Mudig] 리팩토링 중 마주친 Recoil Hook 무엇이 좋을까? 이 코드는 유저의 정보를 불러오고 갱신하기 위한 코드이다. const [userInfo, setUserInfo] = useRecoilState(userInfoAtom); 하지만 내가 보고있는 코드는 회원가입 유저의 데이터를 저장하는 페이지였다. 그래서 고민이 되었던 것은 유저의 정보를 저장한 것이 없는 신규 유저라면 불러올 정보가 없이 그냥 저장만 하면 되지 않을까 였다. 그리고 그렇게 떠올린 생각을 어떻게 코드에 적용시킬지 고민해보았다.  useRecoilState, useRecoilValue, 그리고 useSetRecoilState는 Recoil 상태 관리 라이브러리에서 React 컴포넌트 내에서 상태를 사용하기 위한 훅(hooks)이고 이 페이지에서는 그 3가지를 다 사용하고 있었다. 그래서 이들 .. 2024. 3. 1.
[1,2월] 무엇을 했는지 돌아보기 1월에 했던 일 뮤딕 리드미 작성, 뮤딕 타입스크립트 마이그레이션, 정처기 필기 준비, 프로젝트 책 집필, 이력서 피드백 12월에 뮤딕 프로젝트를 성공적으로 배포하고 나서 1월에 프로젝트를 마무리하는 문서 작업을 시작했다. 이번 프로젝트에서 느낀 점이 많아서 깔끔하게 문서화 하고 싶었는데 생각보다 쉽지 않았다. 특히 사람들을 모으고 각 파트별로 커뮤니케이션 하는 부분에서 새로운 인사이트를 얻었던 부분에 대해 다루고 싶었지만 리드미는 프로젝트에 대해 기능적 설명을 하다보니 쉽지 않았다. 그러던 찰나에 [프로젝트 그거 어떻게 하는데]라는 가제로 책 집필 팀을 모으고 있는데 함께 해볼 생각 있냐는 권유를 받아서 뮤딕에서 느꼈던 부분과 스스로 아쉽다고 생각했던 문서화에 대해 정리할 수 있는 좋은 기회라고 생각해.. 2024. 3. 1.
[개발] 초기 세팅과 컨벤션 설정 그리고 깃허브 Intro 프론트 개발자분들은 전에 멋쟁이사자처럼 프론트엔드 과정(이하 멋사)에서 한번씩 크고 작게 프로젝트를 함께 했다.함께 했던 경험과 각자 다른 프로젝트의 경험을 가지고 다시 만났을 때 우리는 초기 세팅과 컨벤션에 조금 더 디테일을 추가하는 것이 좋겠다는 결론을 내렸다. 처음에는 깃허브 사용해서 협업하는 것 자체가 의미있었다면 이제는 효율적이고 효과적인 방법에 대한 고민이 조금씩 생기는 것 같다.운 좋게도 우리가 경험한 멋사는 다양한 완성도 있는 프로젝트를 서로 공유하는 문화를 가진, 더 나은 방법에 대한 대화가 열려있는 커뮤니티였다. 초기 세팅에 대해 우리는 각자의 프로젝트에서 사용한 세팅값을 비교했고 좋았던 점과 개선할 점에 대해 편하게 대화할 수 있었다.컨벤션은 개발 기간이 길지 않기 때문에 .. 2023. 11. 23.

티스토리툴바