정말 감사하게도 2025 오픈소스 컨트리뷰션 참여형 프로젝트 fedify의 멘티로 참여하게 되었다. 참여가 결정된 날, 멘토님으로부터 fedify에 대한 설명이 담긴 메일을 받았다. 첨부된 링크에는 fedify에 대한 설명과 함께 fedify를 활용하여 마이크로블로그를 만드는 튜토리얼을 볼 수 있었다.🔗 https://hackers.pub/@hongminhee/2025/fedify-tutorial-ko fedify에 대한 사전지식이 많지 않았기 때문에 잘 따라갈 수 있을까 걱정했지만 설명이 매우 자세하게 써져있었기 때문에 어렵지 않게 따라갈 수 있었다. 튜토리얼을 진행하며 fedify와 연합우주 그리고 개발에 필요한 내용들을 알 수 있게 되었고, 이 지식들은 앞으로 오픈소스 컨트리뷰션을 할 때 많은 도..

얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com 1. ..

얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com1. 파..

얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com1. N..

이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..

이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..

이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..

주의: 정확하지 않은 서술이 있을 수 있습니다. 컴포넌트 A에서 버튼을 클릭하면 recoil state가 변경되고, Hook B의 useEffect의 의존성 배열에 해당 recoil state가 있어서 Hook B에서 동작이 수행되게 설계를 했었다.하지만 Hook B에서 recoil state의 변경을 잘 감지하지 못하는 경우가 발생했고, 따라서 의도치 않게 작동이 되는 상황이 벌어졌다.1. 왜 recoil state의 변경을 감지하지 못했을까? // Component A const [something, setSomething] = useRecoilState(somethingState); const handleItemClick = (e: React.MouseEvent) => { set..

사용자가 글을 입력할 수 있는 컴포넌트를 만들려면 보통 input이나 textarea를 활용한다. 디자이너님께서 새로 메모장 디자인을 전달해주셨는데,글이 한 줄일 때는 뒤의 회색 배경이 글자와 딱 맞게 입력해야할 때마다 따라와야 하지만,두 줄 이상일 때부터는 배경이 메모장의 최대 width로 유지되면서 줄 수 만큼 height가 늘어나야했다. 처음에는 textarea를 활용해보았는데, 뒤의 회색 배경이 글자를 따라오게 만드는데 실패했다 (fit-content 속성을 주었음에도 불구하고) 그 다음에는 input을 활용해보았는데, 뒤의 회색 배경이 글자를 따라오긴 하였지만, 글이 두 줄일 때 뒤의 회색 배경이 다음 줄로 넘어가지 않았다. 그래서 div에 contentEditable 속성을 주어 원하는 동작..

현재 인턴으로 근무하는 회사의 웹 프론트엔드 프로젝트는 다수의 프로젝트를 단일 레포지토리에서 관리하는 모노레포 방식을 채택하고 있다. common 프로젝트에 컴포넌트 A가 있었다. 컴포넌트 A가 common 프로젝트에 있긴 했지만 현재 내가 작업하고 있는 프로젝트 B에서 밖에 사용이 안되었고, 프로젝트 B에서 만든 api hook을 활용해 컴포넌트 A에서 데이터를 주고받아야 했기 때문에, 고민 끝에 컴포넌트 A를 common 프로젝트에서 프로젝트 B로 옮기기로 하였다.1. 그냥 drag and drop을 하면 될 것이라 생각했지만컴포넌트 A를 옮길 때 고려해야 될 내용이 있었나 싶었지만, vscode가 알아서 업데이트해주겠지 싶어서 일단은 그냥 drag and drop으로 파일을 옮겼다. 옮기고 나서 v..