옛날 옛적(어제), 한 개발자가 살았어요.이 개발자는 아이디어가 떠오를 때마다 도구를 만들어 제공하려고 하는 특징이 있었지만,사내 비즈니스 로직이 엮여있을까봐 마음편히 배포하지 못하고 어떻게 해야할 지 고민을 하고있었어요.정말 아쉬웠어요.그렇게 계속해서 쌓여만 가는 코드들을 가만히 내버려 둘 수는 없던 저는 방법을 찾아보기로 했습니다.그렇게 찾은 굉장한 프로그램, Electron을 소개합니다!왜 하필 Electron이죠?Electron?Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, 웹 기술(HTML, CSS, JavaScript) 을 사용하여 데스크탑 애플리케이션을 만들 수 있게 해줍니다.Node.js와 Chromium을 결합하여 크로스 플랫폼 애플리케이션을 개발할 수 있으며, 윈도우..

https://medium.com/@tminstaller/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9[…]D%94%EA%B5%AC%EC%A1%B0%EB%8A%94-%EC%97%86%EB%8B%A4-ba3a47e91508 프론트엔드에 적절한 폴더구조는 없다. 폴더구조엔 정답이 있을까요? medium.com

들어가며 나는 포트폴리오 웹사이트를 만들었다. 처음엔 그저 언젠간 나만의 페이지를 만들어야지 싶었는데, 그러지 못했다. 왜냐하면 처음부터 너무나도 완벽한 것을 바랬으니, 디자인이 마음에 들지 않으면 제작하지 않기를 반복하였다. 그렇게 시간이 흘러 웹 개발을 시작한 지 1년이 다 되어갈 무렵, 클린코드에 대한 컨퍼런스를 다녀오며 프로젝트와 코드를 대하는 마음가짐을 어떻게 설정해야 할 지에 대한 생각의 변화가 생겼다. 바로 이 글을 통해 생각이 변했다. 우선 만들어두고, 계속해서 발전시켜나가야겠다. 언제곤 머릿속에서만 아이디어로 남겨둘 수는 없다. 그렇게 생각하는 순간 바로 이 계획을 실행하기로 했다. 간단하게 초안을 만들고, 계속해서 업데이트 해나가는 방식으로 코드를 성장시키기로 했다. 그렇게 만들어진 사..

0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..

상황 : .prettierrc 파일에 따로 typescript 설정을 해두지 않았습니다. 문제는 아래와 같았습니다. const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const [rel, setRel] = useState(null); // 위와 같아야 하던 코드가 Prettier 세팅으로 인해 아래와 같이 변경됨 const [position, setPosition] = useState { x: 0, y: 0 }; const [dragging, setDragging] = useState false; const [re..