보안 정책에 의거해 프로덕션 서버에서 localhost를 cors처리해 둔상황에서 유용한 방법을 소개한다.cors는 서버 to 브라우저에서 발생하는 오류니 dev환경에서 localhost에 띄워둔 next server를 proxy로 우회하는 방법이다.const nextConfig = { async rewrites() { if (process.env.NODE_ENV !== "development") { return []; } return [ { source: "/proxy/:path*", destination: `${process.env.NEXT_PUBLIC_SERVER_URL}/:path*`, }, ]; },}export default nextConfig 이처럼 구성하면 de..

상속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); // 부모 생성자 호출 // ..

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

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

어이 당신. 혹시 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..