국비 교육 과정을 수강중인 사람들에게

2023-08-04T05:03:38.964Z

주위에 국비 교육 과정을 듣고 있는 비전공자분들이 참 많은 편이다.강의 난이도가 전공자들에게 맞춰져 있다. 나는 아무것도 모르는데.. 아니 전공자들은 국비 왜 들음?강사가 용어 설명을 너무 안한다. (난수를 만들어보세요, 난수가 뭐지, 난자는 아는데)진도 따라가는게 너무 어렵다. 나는 다 이해하지 못했는데 진도는 계속 나가고 문제만 던져준다.옆에 어떤놈은 대놓고 그냥 잔다.옆에 전공자 놈은 쏘 이지를 외치면서 짜증나게 한다.이런 식이면 그냥 나는 내 공부 하고 수업 안듣는게 나을것 같다.풀스택 과정이라고 프론트엔드,

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

2023-07-17T17:57:35.332Z

아는 동생들이 최근에 프로젝트를 진행하면서 SNS를 만든다 하더라. 미리 만들어둔 플로우 시안을 피그마로 살펴보다가 좀 어려워 보이는걸 발견하게 되었다.주위에서 흔히 볼 수 있는 인스타그램이나 트위터류 서비스 같은데, 글에 타 서비스의 미리보기 이미지 같은게 보이더라. 서버 스택은 자바 스프링이고, 프론트엔드는 리액트가 아니라 그냥 스태틱. 가령 아래와 같은 기능을 만든다 보면 된다.사용자가 글을 쓸 때 유튜브나 뭐든 링크 하나를 글 내용에 추가를 하면, 서비스 측에서 알아서 판단해서 미리보기를 나중에 함께 보여주는 것이다.

모바일 퍼스트 디자인에 대해

2023-07-14T11:41:20.572Z

인정하자, 사람들은 데스크탑을 쓰지 않는다.최근 지인과 테일윈드 혐/호 토론을 하다가 나온 점이 모바일 퍼스트에 대한 이야기였다.테일윈드는 전에 썼던 글에 언급했다시피 모바일 퍼스트를 은근히 밀고 있다. 나는 테일윈드의 불호와 관련 없이 이 부분은 잘하고 있는 부분이라고 생각한다.사실 우리같은 개발자들이야 데스크탑이 없는 세상을 상상하지 못하지만, 실제로 사회에 나가보면 개발자를 제외한 무수히 많은 사람들이 데스크탑의 필요성을 느끼지 못하고, 스마트폰만 가지고 살아간다. 우리가 아무리 데스크탑으로 코딩 해도 사람들은 스마트폰으

나는 참 Tailwind CSS가 싫어요

2023-07-13T04:03:55.386Z

나는 테일윈드 CSS를 정말 싫어한다.나는 코드를 짤 때 한 파일당 줄 수가 150~200줄이 넘어가게 짜지 않고 채썰어서 관심사 분리를 확실하게 하는 편이다. 하지만 테일윈드는 예전에 부트스트랩이 그러했듯, 미리 정해진 클래스명을 나열하여 스타일을 DOM에 섞이게 만든다. 저기다가 JS 끼얹으려면 또 얼마나 머리 빠개질지 현기증이 난다.

생산성이라는 것

2023-07-13T03:31:43.911Z

뭔가 작업을 할 때 페이지 하나를 하루만에 다 쳐내고, 기능 금방 붙이고, 로직도 잘하고, 마크업도 잘하고.. 이런 것은 시니어 개발자에게 요구되는 최소한의 수준이다. 대부분 수년간 반복적으로 해왔기 때문에 이게 오래걸릴래야 오래걸릴 수가 없다.로그인 페이지를 예로 들어보자. 신입들은 처음 만들어보는 로그인 페이지에 흥분하며 구조를 잡고 디자인을 올려가면서 작업을 한다. 그리고 그 와중에 axios라는 것도 써보고, react-hook-form과 yup에 개털리거나 하는 식으로 시행착오를 반복한다. 그리고 배포를 해보니 CORS

TanStack Query (React Query) v5 업데이트

2023-07-09T06:54:28.237Z

못보던 사이에 리액트쿼리 버전 5 알파 버전이 나왔다.깃허브 가보니 알파 버전 올라가는 중이고, 홈페이지 가서 v5 눌러보니 슬슬 오픈할라고 시동걸고 있던데, 나야 뭐 토이 프로젝트이므로 부담 없이 바로 알파 버전 올려서 쫒아가봤다.공식 문서 마이그레이션 가이드기본 리액트 버전이 18로 변경이 되었고, 제일 큰 변경사항으론 파라미터를 이제 오브젝트 형태로만 받는다는 것이다.// beforeconst { data: posts = [], refetch: refetchPosts } = useQuery( ['getBlogPo

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

2023-07-07T20:49:51.337Z

갑자기 문득 기행이 하고 싶어서, 웹 화면 로딩 중에 마우스 커서를 모래시계로 만들고싶어졌다.하고 싶으면, 그냥 해야지.착안은 위와 같은 구형 윈도우의 레트로한 모래시계였다. 인터넷 검색하면 잘 나온다.이것을 원본으로 하여 구현을 해보기로.우리는 보통 CSS에서 cursor를 사용할 때, 뭔가 버튼 아닌 것을 버튼 처럼 보이게 하기 위해 cursor: pointer 를 쓰곤 한다.잠시 잡설 들어간다. 나는 이 부분을 매우 비추하는 편이다. 버튼은 button 태그로, 링크는 a 태그를 써야 한다. 만약 당신이

[짧은글] Pages directory cannot be found eslint 문제 해결법

2023-07-01T14:29:47.138Z

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 in your eslint config file.빌드시에 위와 같은 경고 메시지를 볼 경우 매우 정신사나운데, 위 건에 대한 해결책을 공유한다.Next.js App Route를 사용하게 되면 pages 디렉토리가 없는 경우가 많다. 내 경우 app 디렉토리만

Next.js App Router 삽질기

2023-06-30T06:16:14.839Z

2023년 6월 28일에 서초의 오픈소스 소프트웨어 통합 지원센터에서 열린 리액트 코리아 밋업에서 발표한 자료입니다.이날 3명 중 한명으로 발표를 하게 되었는데 후킹이 잘된다는 이유로 첫번째 발표를 하게 되었네요. 아이고 부담시러라 ㅋㅋ 내용은 최대한 딱딱하지 않고, 듣기 재미있게 하기 위해 반존대로 진행했는데, 혹시나 이게 막 불쾌하게 들리지 않으셨으면 합니다.안녕하세요, 방금 인트로 진행해주신 요한님의 부사수로 첫 회사에 입사를 해서, 개발에 입문하게 된 이준혁이라고 합니다. 주로 미리야라는 아이디로 아가리파이터 활동을 했

질문 잘 하는 방법

2023-06-28T03:29:28.367Z

다음 글은 내가 카카오톡 리액트방에 공지로 등록해둔 글 일부를 갖고온 것이다.질문을 잘 하는 법은 나쁜 질문을 하지 않는 것이다. 그렇다면 나쁜 질문은 뭘까?나쁜 질문의 예“질문해도 되나요?”라고 묻는다.궁금한걸 바로 묻지 않고 돌려 묻는다.어떤 작업을 하는 코드인지 말하지 않고 코드가 안되요- 하고만 말한다.에러 부분을 일부만 올리거나 아예 올리지 않는다. “에러가 납니다” X코드를 보여주지 않는다.(들여쓰기, 줄바꿈 등) 포멧이 엉망인 코드를 올린다.이미 시도해본 방법들을 말해주지 않는다.자기 코드에 알량한

Next.js 폴더/파일 구조 잡기

2023-06-16T23:23:58.680Z

주니어 개발자들이 가장 많이 물어보는 질문이 폴더 구조에 대해 묻는 것이다.사실 이런 질문들은 항상 답이 정해져있다. “그때 그때 달라요”아니 시발 그때 그때 다른게 어딨어? 하고 빡이 칠법도 하다. 참 막막하겠지. 내가 그 기분 알지.사실 저런 답변은 내가 가장 싫어하는 종류중 하나인데, 나는 내가 틀린 답을 낼 지언정 빠르게 적용하고 바로 효과를 볼 수 있는걸 주고 싶어한다. (나는 액상과당 같은 사람이니까 과용하면 해롭다) 그리고 내 생각이 영원히 옳지 않다는 것을 알고 있으므로 더 좋은게 나오면 빠르게 갈아탄다.자바스

내가 짜던 똥코드

2023-06-01T15:17:40.000Z

개발 연차로 13년차인데, 나는 아직도 내가 1년차인것 같다. 매번 코드를 짤 때 마다, 혹은 남과 대화 할 때 마다 나는 똥코드를 발견하고 수정하기의 연속이다. 똥코드라..똥코드의 예로 아래와 같은 코드가 있다.const [selected, setSelected] = useState(getIsSelected(id));위 코드에서 문제점을 느끼지 못하고 있다면 당신은 이미 나랑 같은 똥코드를 짜고 있는 것이다.위의 코드는 다음과 같이 수정되는게 맞다.const [selected, setSelected] = useStat

블로그를 새로 만들었다.

2023-05-27T21:56:55.000Z

뭐 아는 사람들은 알겠지만 왕년에 나는 조-금 유명한 블로거였다.2005년도에 처음 블로그를 만들었는데, 이 당시에 나는 회원수 100만명짜리 다음 카페를 하나 운영하고 있었다. 나는 카페를 상당히 체계적으로 운영했는데, 가령 뭐 카페의 페이지뷰, 신규 가입자수 등을 엑셀 시계열차트로 뽑아서 통계를 내가며 실험을 한다던가, 운영자와 파트장, 회원간의 관계를 피라미드 구조로 관리하게 한다던가.. 뭔가 상당히 노력하면서 운영하는 편이었다. 이걸 또 다음 커뮤니케이션 측에서 알고는 우리 카페에만 새로운 다음 카페 신기능을 적용해준다던가

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

2023-05-22T00:34:27.000Z

최근 블로그를 만들고 호작질을 하다보니 뭔가 또 재미난 생각이 떠올랐다.내 홈페이지에 로그인하는 사용자는 구글이나 페이스북 등 SNS로 로그인 할 수도 있고, 이메일 + 비번으로 로그인할 수도 있다. SNS 로그인의 경우 사용자가 설정해둔 프로필 사진이 제공되기 때문에, 그걸 보여주면 된다. 하지만 이메일로 로그인했을 경우 내가 알 수 있는 데이터는 오직 Firebase Authentication에서 정한 uid와 사용자 이메일 주소 밖에 없다.이메일 주소의 경우 아무리 마스킹 처리를 한다고 해도 타인에게 노출되면 영 꺼림찍할

지랄같은 쿠키를 정복해보자

2023-05-22T00:24:37.000Z

이 쿠키 말고..쿠키는 정말 지랄맞다. 웹 개발을 하는 동무들이면 대부분 그렇게 생각하리라 믿는다. CORS도 지랄이고, webp도 지원 늦고 온갖 렌더링 따로 가는 사파리도 지랄이고 10년 전에는 IE도 지랄의 끝판왕이었다. 야! 라때는 말이야! 이거 충분히 가능한게 IE니… (니들 IE5.5에서 투명 png가 회색으로 나오는 버그 겪어봤어?)사진은 경주시에 있는 오베르 카페 옥상이다. 다음에 꼭 참배 갈까 한다. 카페 주인은 나랑 같은 프론트엔드 개발자였을까? 개인 돈 들여서 저런걸 만들 정도면 허심탄회하게 대화하며

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

2023-05-14T21:38:49.000Z

오늘은 og 태그가 뭐하는 놈인지, og:image는 어떻게 구현되는지, 그리고 Next.js에서 자동으로 og:image를 생성하려면 어떻게 해야하는지 글 하나로 끝내볼까 한다.대략적인 og:image 소개일단 og:image가 뭔지는 다들 알고 있으리라.. 믿긴 하는데, 설명하자면 og는 OpenGraph의 약자다.OpenGraph 프로토콜은 페이스북이 만들어 2010년에 발표했으며, 간략히 설명하여 SNS에서 링크 공유할 때 미리보기를 만들어주는 기능을 한다.og:title - 링크의 제목.og:type - 링크의 타

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

2023-05-14T21:38:28.000Z

위 이미지는 그냥 퍼온 짤..보통의 사이트맵은 sitemaps.org의 프로토콜에 맞춰 아래와 같은 형태로 작성한다. https://aaa.com/ daily 1.0 ht

마우스 따라 돌아가는 눈알 만들기

2023-05-14T11:27:53.000Z

로그인 창을 구현하다가, 비밀번호 가리기/보이기 버튼을 만들게 되었다.근데 그냥 만들면 왠지 심심하니 좀 더 기믹을 넣어보고 싶었다. 아무래도 내 개인 프로젝트인 만큼 내 맘대로 하는 재미가 좀 있어야지. 다른 웹 사이트를 돌아다니다가 가끔 보면 마우스 움직임에 따라 다르게 반응하는 UI를 본 적이 있었다. 지금 샘플을 갖고 오라면 못찾겠는데.. 여튼, 내 마우스가 움직이는대로 눈알이 따라다니면 좀 섬뜩하면서도 재미있겠지.. 하는 생각이 들더라.위에 나온 것 처럼 클릭 가능한 눈 버튼은 아주 흔한 UI다. 이제 저 눈을 마

치과 이야기

2023-05-13T13:30:28.000Z

자 갑자기 치과 이야기 해볼까..6년 전 어느날, 새벽에 봄베이 사파이어 750ml를 20분만에 마시고 만취해서 횡단보도 건너다 자빠져서 앞니가 A자로 깨졌다. 내 비루한 신체중에 가장 잘 생긴 부위가 눈썹과 앞니였는데 앞니 사망..당시에 자주 가던 강남의 치과에선 레진으로 예쁘게 때워줬으나, 이게 내구성이 불량해 반년 간격으로 다시 떨어진다. 이게 주로 음식 먹을때 뚝 떨어지는데, 음식 먹다가 떨어진것만 나열하면, 간장게장(당연), 삼각김밥(!), 샌드위치(!), 최근에는 맘스터치 싸이버거 .. 아니 햄버거나 샌드위치 하

√ MIRiyA's AstraLog