프로젝트18 [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. [Mudig] 리팩토링 중 마주친 Recoil Hook 무엇이 좋을까? 이 코드는 유저의 정보를 불러오고 갱신하기 위한 코드이다. const [userInfo, setUserInfo] = useRecoilState(userInfoAtom); 하지만 내가 보고있는 코드는 회원가입 유저의 데이터를 저장하는 페이지였다. 그래서 고민이 되었던 것은 유저의 정보를 저장한 것이 없는 신규 유저라면 불러올 정보가 없이 그냥 저장만 하면 되지 않을까 였다. 그리고 그렇게 떠올린 생각을 어떻게 코드에 적용시킬지 고민해보았다. useRecoilState, useRecoilValue, 그리고 useSetRecoilState는 Recoil 상태 관리 라이브러리에서 React 컴포넌트 내에서 상태를 사용하기 위한 훅(hooks)이고 이 페이지에서는 그 3가지를 다 사용하고 있었다. 그래서 이들 .. 2024. 3. 1. [개발] 초기 세팅과 컨벤션 설정 그리고 깃허브 Intro 프론트 개발자분들은 전에 멋쟁이사자처럼 프론트엔드 과정(이하 멋사)에서 한번씩 크고 작게 프로젝트를 함께 했다.함께 했던 경험과 각자 다른 프로젝트의 경험을 가지고 다시 만났을 때 우리는 초기 세팅과 컨벤션에 조금 더 디테일을 추가하는 것이 좋겠다는 결론을 내렸다. 처음에는 깃허브 사용해서 협업하는 것 자체가 의미있었다면 이제는 효율적이고 효과적인 방법에 대한 고민이 조금씩 생기는 것 같다.운 좋게도 우리가 경험한 멋사는 다양한 완성도 있는 프로젝트를 서로 공유하는 문화를 가진, 더 나은 방법에 대한 대화가 열려있는 커뮤니티였다. 초기 세팅에 대해 우리는 각자의 프로젝트에서 사용한 세팅값을 비교했고 좋았던 점과 개선할 점에 대해 편하게 대화할 수 있었다.컨벤션은 개발 기간이 길지 않기 때문에 .. 2023. 11. 23. [기획] 생성형 AI 프로젝트 INTRO프로젝트의 시작은 "재밌을거 같지 않아요?" 였다.GTP에게 질문할 생각만 했는데 그걸 사용해서 무언갈 만들어 낼 수 있다니 구미가 당기는 제안이었다. 하지만 아무것도 없었다.PM도 없었다..(뭐 사실 프로젝트라면 당연하긴 하지만)그러니 기획은 맨땅에 헤딩 하듯이 시작..! 그래도 주제가 흥미로워서 그런지 사람들은 어렵지 않게 모을 수 있었다.백엔드와 프론트가 함께 하면 따로 했을 때 느꼈던 아쉬움이 해결될 거라는 막연한 기대가 가득했다.그 와중에 디자이너도 있으면 대박이겠다는 소리에 디자이너도 모셔왔다. 다 같이 회의를 하기 위해 날짜를 잡고 보니 생각보다 어깨가 무거워졌다..ㅎ'오 프론트 4명에 백엔드 5명에 디자이너 2명이면 스타트업인데..?' 일단 가장 급했던 건 어떤 주제로 프로젝트를 .. 2023. 11. 17. [프로젝트] Whack-a-mole 기능구현 중 마주친 오류 기능 구현을 한 뒤 게임을 해 보았다. 스타트 버튼을 누르면 두더지가 나오고 두더지를 클릭하면 두더지가 사라지면서 점수가 올라가고 300ms 뒤에 두더지가 다른 구멍에서 등장한다. 근데 여기서 문제가 생겼다.. 10마리를 다 잡아도.. 점수가 90점밖에 안나온다.. (HOME 버튼은 css가 적용이 안된거 같다.. 하지만 이건 사소한 거니 나중에 대충 고치는걸로..ㅎㅎ) 그리고나서 곧바로 다른 오류도 발견했다..^^ 클릭하지 않아도 일정 시간이 지나면 두더지가 사라지고 다른 구멍에서 두더지가 나와야 되는데.... 클릭을 하지 않으면 그 두더지는 그대로 있고 새로운 두더지도 나오지 않는다..ㅋㅋㅋㅋㅋ큐ㅠㅠㅠ 로직 자체는 그렇게 복잡하다고 생각하지 않았는데.. 컴퓨터의 사고방식에 좀 더 가까워져야겠다... .. 2023. 5. 23. 이전 1 2 3 다음
