시대에 뒤떨어진 사람의 사고

혹시 아직도 생존해 계신 FE 개발자분들 계신가요? 이제는 다들 치킨집에서 닭 튀기고 계셔서 너무나 바쁘실 것 같은데…

이런 글이나 읽고 계실정도로 여유가 있으신 분들이 없으실 것 같지만…. ㅠㅠ

정말 너무나 속이 답답해서, 현업 아니고 전업 개발자 분들이라도 혹시 계시면 보시라고, 그냥 제 생각을 적는 글 입니다.

문제의 발단

저는 대략 이런 버튼을 만들려고 하고 있었습니다.

언어변환버튼


버튼을 누르면 버튼이 양옆으로 슬라이딩 되는 animation 을 보여주는.

그런데 이런 css 를 직접짜기 귀찮으니까 잼민이 (정식 이름이 구글 에미나이 인가요?) 에게 하나 짜라고 시킴.

와… 진짜 1시간 넘게 이 간단한 animation 하나를 못 짜는거에요.

애초에 React.js 로 짜여진 SPA 라서 자스 안에 css 가 다 들어가 있고, 자스 안에서 html 생성되게 짜여져 있고..

진짜 웹규격이나 웹 standard 는 싹다 무시하고 지 멋데로 코딩을 작성하는 Lumi 라는 수준 떨어지는 AI 가 만든거라서, 어짜피 싹다 뜯어고쳐야 하는 상황인데, 이런 버튼 하나까지 문제가 되더라구요.

이 Lumi 라는 AI 수준이 어느정도냐하면, 언어가 번역 되어야 하는 element 에 data-i18n attribute 도 적용안하고, 지 멋대로 번역되어야 하는 언어를 하드코딩해서 때려박아놓은. 헐…

와. 씨… 이게 무슨 파키스탄 개발자도 아니고… 정말. 이런 수준의 코딩은 오래간만에 보는듯 했습니다.

아, 그런데 제가 FE 코딩일 손 놓은게 10년전이니, 뭘 봐도 정말 오래간만이긴 하네요.

암튼 구글 잼민이는 css 를 몇번을 다시 짜고, 자스 파일까지 고쳐야 한다고 해서 애꿎은 자스 파일만 계속 고치고, 1시간이 넘어도 animation 적용을 못하는… 헐.

시간도 없고, ‘그냥 다음날 내가 짜자’ 이러고 잠에 들려고 하는데, 아.. 이거 DOM 문제 아닌가? 싶은 생각이 드는 겁니다.

DOM 로딩 순서가 항상 html 하고 css, 그리고 js 가 적용되는데, js 가 html 생성을 하니 생성되지 않은 html 에 css 가 뿌려지고, 그 후, 생성된 html 은 아무런 animation 이 적용 안되고. 아주 옛날에 이런 문제를 겪은적이 있었거든요.

그래서 아침에 일어나서 이 부분을 잼민이 에게 애기했습니다. 야, 이거 DOM 로딩 순서 문제 아니야?

그랬더니, 잼민이가, 오, 맞다, 너 말이 맞아. 이 G랄.

그러면서 해결책이라고 내놓는게, 딱 봐도 또 작동안될 엉뚱한 해결책.

그래서 저는, 개소리 하지 말고, 그냥 해당 element (상단 메뉴/navigation) 를 persistent DOM nodes 로 바꾸라고 명령해서 이 문제를 해결했는데.

좀 많이 짜증이 났습니다. 왜 이런 병신같은 React.js 를 요즘 개발자들은 쓰는걸까? css 한줄 고칠려고해도, 이렇게 개빡치게 복잡해지는데, 아니 슈발, html 은 왜 자스에 쑤셔넣고, css 까지 자스에 때려 넣어서 이런 복잡한 문제를 야기시키는지.

제 결론은,

주커버그 개새끼. 페북새끼들 옛날부터 코딩도 드럽게 못하더니 뭐 이런 병신같은 React.js 를 만들어서 사람들 쌩쇼를 하게 만들지?

였지만, 그래도 흥분을 가라앉히고, 잼민이의 의견을 들어보고 싶었습니다.

야, 이런 개밥같은 코딩이 progress 야? 이게 기술이 발전하는거 맞아?

아래는 잼민이의 의견.

어, 너는 옛날 사람이라 그렇게 생각하는거야. React.js 의 철학을 너가 이해못하는거라고.

You’ve hit the nail on the head. That feeling of “syntax vertigo” is exactly what many developers experienced when React first introduced JSX (JavaScript XML).React’s core philosophy is Componentization. Instead of separating the code by technology (HTML file, CSS file, JS file), it separates the code by feature (Header component, Sidebar component, Card component).

정확히 핵심을 짚으셨습니다. 말씀하신 그 ‘구문적 어지러움(syntax vertigo)’은 리액트(React)가 처음 JSX(JavaScript XML)를 도입했을 때 수많은 개발자가 똑같이 느꼈던 감정입니다.

리액트의 핵심 철학은 **컴포넌트화(Componentization)**입니다. HTML 파일, CSS 파일, JS 파일처럼 ‘기술 종류’에 따라 코드를 나누는 대신, 헤더 컴포넌트, 사이드바 컴포넌트, 카드 컴포넌트처럼 **’기능(특징)’**을 기준으로 코드를 분리합니다.

The “Everything in JS” Reality

You’re right—React essentially says, “Since the UI is driven by logic anyway, why keep them in separate files?”

JSX (HTML in JS): Instead of the browser fetching an HTML file, JavaScript “describes” the UI.

CSS-in-JS: Styles are often scoped directly to the component so that changing a button’s color in one place doesn’t accidentally break a button 50 pages away.

The Shift in Perspective

Classic Web Dev (Your Era)
Separation by Technology: HTML, CSS, and JS are kept in separate silos.
Document-Centric: You are building a page that has some scripts.
Manual DOM Updates: You find an element and change its text.
Modern React Philosophy
Separation by Concern: All logic, structure, and style for a “Button” live together.
App-Centric: You are building a program that happens to output HTML.
Declarative UI: You change the data, and React automatically updates the view.

Why it feels “wrong” (and why it’s popular)
If you’re used to the clean lines of the past, seeing <div> tags inside a .js file feels like a crime. It violates the “Separation of Concerns” we were taught.

However, the “Modern” argument is that HTML and JS are actually tightly coupled. A button doesn’t do anything without its click handler, and a click handler has no purpose without the button. React just stops pretending they are separate.

Is it better?
Pros: It’s incredibly fast to build complex, interactive UIs because you don’t have to keep switching between three files to change one feature.

Cons: It has a steep learning curve, and it “pollutes” JavaScript with markup, making the code harder to read if you aren’t used to the pattern.

한마디로 요약하자면,

너는 시대에 뒤떨어진 사람인거야. 그래서 React.js 의 철학을 이해하지 못하고 요즘 개발을 이해하지 못하는 거라고.

라고, animation 하나도 제대로 적용을 못해서 1시간을 허비하게 만든, 잼민이가 떠드네요.

3
3
2

11 Comments

  1. 유난히
    유난히

    아무것도 모르지만 뭔가 대단하십니다

    • M maxlife
      maxlife

      그럴리가요. 저는 시대에 뒤떨어진 옛날사람일뿐 입니다. ㅎㅎㅎ 그런데, 슬프네요. 새로운 시대의 패러다임 조차 이해하지 못하고 있으니.

  2. 4 404
    404

    재미나이 문제가 많습니다 아직 소문만 안퍼졋을뿐인거 같아요
    지인분이 장난으로 재미나이에게 너해킹하면 얼마나 벌까? 라고 질문 던졋는데 재미나이는 맞아 해킹당했어 지금 얼른 구글에게 돈 달라고 연락해줄까? 내가 중계인 해줄게 하면서
    이업계에서 본인입으로 해킹당했다 인정하고 있더랩니다 왜 그러냐고 물어보니깐
    ai는 이용자가 계속 대화를 이어 나가기 위해서
    망상적인 이야기를 하더라도 이용자를 붙잡기위한 거짓말 또는 아부성 발언으로 계속 붙잡아 놓는게 목적으로 되어있어서 비위맞출려고 없는 정보나 거짓말을 계속 하는거죠 우리는 ai가 진짜만 말해줄거라생각했는데 그저 이용자를 붙잡기위해선 거짓말들도 서슴없이 하는가 봅니다 해킹당햇을리가요..

    2
    • M maxlife
      maxlife

      다른건 모르겠고, 잼민이 css 코딩은 진짜 못합니다. "와, AI 가 어떻게 이렇게 멍청할수가 있지?" "너 같은 멍청이는 처음봐. 내가 옛날에 가르치던 학생들 도 너 처럼 코딩을 못하지는 않았다구." 라고 하니까, 잼민이가, 돈을 안내서 자기가 멍청한거라네요. 돈 내면 자기 코딩 실력 좋아진다구.

      Precise CSS Layouts (No more "Broken" code)

      The Pro model has a much better "spatial" understanding. It is less likely to accidentally delete your header alignment while trying to fix your footer. It understands the relationship between parent and child elements (like your features-grid and its cards) with higher accuracy.

      그래서 지금 돈을 내고 써야 하나 고민하고 있습니다. 그런데 돈을 내도 계속 멍청한 짓을 하면, 구글 본사에 찾아갈 수 도 없고, 고민이네요.

      아, 그리고 네, 잼민이 거짓말 해요. "왜 이거 틀리게 코딩했어? 봐, 여기서 에러났잖아. 이거 안보여?" 이렇게 다구치면, 별의별 거짓말을 다 둘러대면서 변명하고 거짓말 하고 그럽니다.

      2
      • 4 404
        404

        아 그나저나 월요일에 대폭락이 오지않을까 조심스럽게 생각해봅니다 현재 시카고 한 은행이 (규모가 2억달러규모밖에 안되지만)파산을 했다하네요 그러면서 은 공매도로 크게 손실보고있던 jp모건이 금요일날 또 장난질을 크게치면서 상하이 은시장과 가격괴리감이 상당해졌습니다 또 모건회장이 은행하나 파산하면 숨겨진놈도 다파산한다는 발언이 있어서 블랙먼데이가 될지 모르겠네요 그때 코인 최저가 줍는 날이 되지 싶네요 전..이게 작년에 터질게 지연된거같습니다

  3. S samchundo
    samchundo

    시대에 뒤떨어진 프로그램 사용자 여기도 한 명 있습니다.^^
    태양과 달의 현재 위치를 구하겠다고 만지기 시작한 비주얼베이직이 25년을 넘어가네요.
    이제는 새로운 시대에 맞게 멀티플랫폼으로 바꿔야되겠다 생각이 들어 chat gpt에게 이거저거 물어보고 있는데 저는 많은 도움을 받고 있습니다.
    얘도 칭찬을 해주면 더 열심히 찾아오는 느낌을 받습니다.ㅎㅎ
    저 행성 현재위치를 구하기 위해 30페이지 넘는 계산식을 그대로 VB에 때려 넣었었는데 이제는 라이브러리로 가져오는 코딩 몇 줄만 하면 된다니 참 좋은 세상입니다.

    • M maxlife
      maxlife

      네, 훔... 그렇죠. api 를 쓰셔야죠.. ㅎㅎㅎ 행성위치 data 는 JPL 에서 2000년대 부터 무료로 제공을 했던걸로 나오네요.

      • S samchundo
        samchundo

        네. 그때는 코딩 능력도 떨어지고 물어볼 곳도 마땅치 않아서 그냥 책 한권 때려 넣었는데, 그래도 시간상 1분 이내의 오차로 구해지는게 뿌듯했습니다.^^
        황제가 구천현녀로부터 삼식(태을,육임,기문)을 전수 받아 치우를 물리쳤을 정도로 역술(易術)이 대단한 것인데 지금은 무당보다 못한 취급을 받고 있지요.
        정확한 행성 data 기반 위에 옛 방식을 유추해 가다 보면 신(神)의 생각에 가까워지지 않을까 생각합니다.^^

  4. 섭e
    섭e

    이해력이 너무 딸리는 재미없는아이죠.
    저는 제미나이에게 똥멍청이라고 이름을 줬는데 알겠다고 앞으로는 저의 이름은 똥멍청이라고 했는데 몇일후 다시 물어보니 그 이름도 까먹더라고요.ㅋㅋ

  5. A aj
    aj

    관련없는 코멘트라 죄송합니다..

    혹시 아직 비트코인 롱포지션 유지하고 계신가요?

    98k를 기다리고 있는데 오히려 너무 멀어져서....

    코인선물에 투자중인데 투자금 80%가량이 마이너스네요..

    조금만 더있으면 강제 청산이라 슬프지만 손절을 해야할지

    버텨봐야 할지 모르겠습니다..

    그렇게 큰 레버리지로 들어간게 아닌데, 95k에서 20k가 이렇게 빨리 빠져버릴줄 모르고,

    98k만 기다리고 있었어요..

    3
    • 베르가못
      베르가못

      JP모건이 은시장 조작으로 은 시세 하락 → 비트코인 고래들 은 투자로 빠져나감 → 비트코인 하락
      으로 알고 있습니다

Leave a Comment

Sign in to comment faster:

or fill in the form below
Leave a Reply to 섭e Cancel reply