대단한 동현 블로그
javascript class 업캐스팅
<language>/javascript 2024. 9. 21. 00:24

상속js에서 상속은 c++처럼 메모리 블록단위가 아닌 프로토타입이라는 단방향 링크드리스트 기반으로 구현된다. 때문에 c++에서는 포인터 사이즈를 변경해 구현하는 업캐스팅을 js에서는 아래와 같이 프로토타입 변경을 통해 구현할 수 있다 프로토타입 체인상속받은 부모 객체를 못 찾았을때 계속 타고 올라가 찾는 것.(null에 도달할 때까지)업캐스팅// 부모 클래스 function Animal(name) { this.name = name; } Animal.prototype.makeSound = function() { console.log("Some generic sound"); }; // 자식 클래스 function Dog(name) { Animal.call(this, name); // 부모 생성자 호출 // ..

article thumbnail
협업 툴 사용해서 효율적으로 일하기
<memo> 2024. 9. 21. 00:08

입사 후로 두달동안 정신없이 일만 한 결과 만족할만한 성과가 나왔다. 아래는 두달동안 처리한 linear ticket임.jira 나 linear같은 협업 툴을 처음 사용해 봤는데 적응하고 나니 매우 효율적으로 작업이 가능했다.본인의 방법에 대해 소개한다해당 티켓에서는 그 일만 하기개발 티켓을 하나 만들고 작업할때.개발 하다보면 추가하면 좋을 점들이 이것저것 생각난다. 이런걸 그 티켓에서 작업하지 않고 추가 개발 요소를 인지 하며 개발하고 그 추가 개발 요소는 backlog 티켓으로 만들어 설명을 적어둔다.이것저것 추가하다보니 티켓 하나가 너무 비대해지고 산정된 일정이 딜레이되더라플래닝 하고 작업 시작하기촉박한 일정이라도 손코딩보다 뇌코딩을 많이 하는게 좋더라해당 티켓의 모든 요소를 파악하고 개발하니 체감..

React에서 동적인 key 왜 필요할까?
<frontend> 2024. 9. 20. 23:55

프론트 개발하다 보면 array를 뷰에 표시할 때마다 시뻘건 오류로 unique key props를 설정하라는 워닝을 보게 된다.backend에서 unique키 안주면 대충 index나 nanoid로 때우던 본인은 이번에 key props관련으로 꿀잼 이슈를 겪게 되었다.문제 상황아래와 같은 코드를 사용하여 테이블을 렌더링 하고 있었다 {futuresCoinData.map((coin) => ( { changeSymbol(coin.name); }} > {coin.name} ))}위 코드에서 nanoid()를 사용하여 각 요소에 고유한 키를 부여하고 있다.c..

styled-component -> tailwindcss migration reset css
<frontend> 2024. 8. 1. 22:12

어이 당신. 혹시 nextjs에서 styled-component를 사용하기 위해 죄다 use client를 박고 있지 않은가?용기를 가지고 tailwindcss로 마이그레이션을 진행하다 reset css가 둘이 달라서 레이아웃이 다 뭉개지지 않는가?바로 그게 접니다. tailwind의 base layer에서 초기화 해주지만 reset css와 스타일이 조금씩 다르다때문에 base를 재적용하고 덮어씌웠다/* global.css */@tailwind base;@tailwind components;@tailwind utilities;@layer base { /* Reset styles */ html, body, div, span, applet, object, iframe, h1, h2, h..

article thumbnail
zero runtime css-in-js PandaCSS
<frontend>/next.js 2024. 7. 29. 00:34

https://panda-css.com/docs/overview/getting-startedSSR환경에서 css-in-js를 쓰면 안되는 이유출처: https://pozafly.github.io/css/explore-how-to-apply-modern-css/https://hj-devlog.vercel.app/blog/서버컴포넌트에서의 CSShttps://www.joshwcomeau.com/react/css-in-rsc/next localfont 제대로 지원안합니다.tailwindcss, cssmodule 쓰세요 허참next/localfont 제대로 지원 안함 레퍼런스도 없음2주일 전에 스택오버플로우 이슈로 고치고있다고 써있고 그냥 눈물줄줄https://stackoverflow.com/questions/..

nextjs 렌더링 예제
<frontend>/next.js 2024. 7. 29. 00:26

https://github.com/donghyun1998/nextjs-rendering-example/tree/main GitHub - donghyun1998/nextjs-rendering-example: nextjs에서 서버컴포넌트, 클라이언트 컴포넌트, static rendering,nextjs에서 서버컴포넌트, 클라이언트 컴포넌트, static rendering, dynamic rendering시 어떤식으로 실행되는지 예시 - donghyun1998/nextjs-rendering-examplegithub.comnext.js의 다양한 렌더링 과정이 헷갈리는 사람들을 위한 예제.개인적으로 ssg를 걍 잊어먹고 생각하는게 이해하기 편하다빌드 과정 중 static rendering/dynamic rende..