국비 교육 과정을 수강중인 사람들에게개발 이야기

주위에 국비 교육 과정을 듣고 있는 비전공자분들이 참 많은 편이다. 강의 난이도가 전공자들에게 맞춰져 있다. 나는 아무것도 모르는데.. 아니 전공자들은 국비 왜 들음? 강사가 용어 설명을 너무 안한다. (난수를 만들어보세요, 난수가 뭐지, 난자는 아는데) 진도 따라...

og 이미지 크롤링을 어디서 해야할까?개발 이야기

아는 동생들이 최근에 프로젝트를 진행하면서 SNS를 만든다 하더라. 미리 만들어둔 플로우 시안을 피그마로 살펴보다가 좀 어려워 보이는걸 발견하게 되었다. 주위에서 흔히 볼 수 있는 인스타그램이나 트위터류 서비스 같은데, 글에 타 서비스의 미리보기 이미지 같은게 보이더라...

모바일 퍼스트 디자인에 대해개발 이야기

인정하자, 사람들은 데스크탑을 쓰지 않는다. 최근 지인과 테일윈드 혐/호 토론을 하다가 나온 점이 모바일 퍼스트에 대한 이야기였다. 테일윈드는 전에 썼던 글에 언급했다시피 모바일 퍼스트를 은근히 밀고 있다. 나는 테일윈드의 불호와 관련 없이 이 부분은 잘하고 있는 부분...

나는 참 Tailwind CSS가 싫어요개발 이야기

나는 테일윈드 CSS를 정말 싫어한다. 나는 코드를 짤 때 한 파일당 줄 수가 150~200줄이 넘어가게 짜지 않고 채썰어서 관심사 분리를 확실하게 하는 편이다. 하지만 테일윈드는 예전에 부트스트랩이 그러했듯, 미리 정해진 클래스명을 나열하여 스타일을 DOM에 섞이게...

생산성이라는 것개발 이야기

뭔가 작업을 할 때 페이지 하나를 하루만에 다 쳐내고, 기능 금방 붙이고, 로직도 잘하고, 마크업도 잘하고.. 이런 것은 시니어 개발자에게 요구되는 최소한의 수준이다. 대부분 수년간 반복적으로 해왔기 때문에 이게 오래걸릴래야 오래걸릴 수가 없다. 로그인 페이지를 예로 ...

TanStack Query (React Query) v5 업데이트개발 이야기

못보던 사이에 리액트쿼리 버전 5 알파 버전이 나왔다. 깃허브 가보니 알파 버전 올라가는 중이고, 홈페이지 가서 v5 눌러보니 슬슬 오픈할라고 시동걸고 있던데, 나야 뭐 토이 프로젝트이므로 부담 없이 바로 알파 버전 올려서 쫒아가봤다. 공식 문서 마이그레이션 가이드 ...

애니메이티드 커서 적용하기개발 이야기

갑자기 문득 기행이 하고 싶어서, 웹 화면 로딩 중에 마우스 커서를 모래시계로 만들고싶어졌다. 하고 싶으면, 그냥 해야지. 착안은 위와 같은 구형 윈도우의 레트로한 모래시계였다. 인터넷 검색하면 잘 나온다. 이것을 원본으로 하여 구현을 해보기로. 우리는 보통 CSS에...

[짧은글] Pages directory cannot be found eslint 문제 해결법개발 이야기

Pages directory cannot be found at 프로젝트 경로/pages or 프로젝트 경로/src/pages. If using a custom path, please configure with the no-html-link-for-pages rule...

Next.js App Router 삽질기개발 이야기

2023년 6월 28일에 서초의 오픈소스 소프트웨어 통합 지원센터에서 열린 리액트 코리아 밋업에서 발표한 자료입니다. 이날 3명 중 한명으로 발표를 하게 되었는데 후킹이 잘된다는 이유로 첫번째 발표를 하게 되었네요. 아이고 부담시러라 ㅋㅋ 내용은 최대한 딱딱하지 않고,...

질문 잘 하는 방법개발 이야기

다음 글은 내가 카카오톡 리액트방에 공지로 등록해둔 글 일부를 갖고온 것이다. 질문을 잘 하는 법은 나쁜 질문을 하지 않는 것이다. 그렇다면 나쁜 질문은 뭘까? 나쁜 질문의 예 “질문해도 되나요?”라고 묻는다. 궁금한걸 바로 묻지 않고 돌려 묻는다. 어떤 작업을 하...

Next.js 폴더/파일 구조 잡기개발 이야기

주니어 개발자들이 가장 많이 물어보는 질문이 폴더 구조에 대해 묻는 것이다. 사실 이런 질문들은 항상 답이 정해져있다. “그때 그때 달라요” 아니 시발 그때 그때 다른게 어딨어? 하고 빡이 칠법도 하다. 참 막막하겠지. 내가 그 기분 알지. 사실 저런 답변은 내가 가장...

내가 짜던 똥코드개발 이야기

개발 연차로 13년차인데, 나는 아직도 내가 1년차인것 같다. 매번 코드를 짤 때 마다, 혹은 남과 대화 할 때 마다 나는 똥코드를 발견하고 수정하기의 연속이다. 똥코드라.. 똥코드의 예로 아래와 같은 코드가 있다. const [selected, setSelected...

블로그를 새로 만들었다.개발 이야기

뭐 아는 사람들은 알겠지만 왕년에 나는 조-금 유명한 블로거였다. 2005년도에 처음 블로그를 만들었는데, 이 당시에 나는 회원수 100만명짜리 다음 카페를 하나 운영하고 있었다. 나는 카페를 상당히 체계적으로 운영했는데, 가령 뭐 카페의 페이지뷰, 신규 가입자수 등을...

사용자 uid로 아바타 이미지 만들기개발 이야기

최근 블로그를 만들고 호작질을 하다보니 뭔가 또 재미난 생각이 떠올랐다. 내 홈페이지에 로그인하는 사용자는 구글이나 페이스북 등 SNS로 로그인 할 수도 있고, 이메일 + 비번으로 로그인할 수도 있다. SNS 로그인의 경우 사용자가 설정해둔 프로필 사진이 제공되기 때문...

지랄같은 쿠키를 정복해보자개발 이야기

이 쿠키 말고.. 쿠키는 정말 지랄맞다. 웹 개발을 하는 동무들이면 대부분 그렇게 생각하리라 믿는다. CORS도 지랄이고, webp도 지원 늦고 온갖 렌더링 따로 가는 사파리도 지랄이고 10년 전에는 IE도 지랄의 끝판왕이었다. 야! 라때는 말이야! 이거 충분히 ...

Next.js APP에서 og:image 자동으로 생성하기개발 이야기

오늘은 og 태그가 뭐하는 놈인지, og:image는 어떻게 구현되는지, 그리고 Next.js에서 자동으로 og:image를 생성하려면 어떻게 해야하는지 글 하나로 끝내볼까 한다. 대략적인 og:image 소개 일단 og:image가 뭔지는 다들 알고 있으리라.. 믿긴...

Next.js APP에서 사이트맵 동적으로 생성하기개발 이야기

위 이미지는 그냥 퍼온 짤.. 보통의 사이트맵은 sitemaps.org의 프로토콜에 맞춰 아래와 같은 형태로 작성한다. <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/sche...

마우스 따라 돌아가는 눈알 만들기개발 이야기

로그인 창을 구현하다가, 비밀번호 가리기/보이기 버튼을 만들게 되었다. 근데 그냥 만들면 왠지 심심하니 좀 더 기믹을 넣어보고 싶었다. 아무래도 내 개인 프로젝트인 만큼 내 맘대로 하는 재미가 좀 있어야지. 다른 웹 사이트를 돌아다니다가 가끔 보면 마우스 움직임에 따라...

치과 이야기사는 이야기

자 갑자기 치과 이야기 해볼까.. 6년 전 어느날, 새벽에 봄베이 사파이어 750ml를 20분만에 마시고 만취해서 횡단보도 건너다 자빠져서 앞니가 A자로 깨졌다. 내 비루한 신체중에 가장 잘 생긴 부위가 눈썹과 앞니였는데 앞니 사망.. 당시에 자주 가던 강남의 치...