(3D)Dev Deep Dive
-
옛날 옛적(어제), 한 개발자가 살았어요.이 개발자는 아이디어가 떠오를 때마다 도구를 만들어 제공하려고 하는 특징이 있었지만,사내 비즈니스 로직이 엮여있을까봐 마음편히 배포하지 못하고 어떻게 해야할 지 고민을 하고있었어요.정말 아쉬웠어요.그렇게 계속해서 쌓여만 가는 코드들을 가만히 내버려 둘 수는 없던 저는 방법을 찾아보기로 했습니다.그렇게 찾은 굉장한 프로그램, Electron을 소개합니다!왜 하필 Electron이죠?Electron?Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, 웹 기술(HTML, CSS, JavaScript) 을 사용하여 데스크탑 애플리케이션을 만들 수 있게 해줍니다.Node.js와 Chromium을 결합하여 크로스 플랫폼 애플리케이션을 개발할 수 있으며, 윈도우..
Electron, 웹 개발인데요, 앱입니다.옛날 옛적(어제), 한 개발자가 살았어요.이 개발자는 아이디어가 떠오를 때마다 도구를 만들어 제공하려고 하는 특징이 있었지만,사내 비즈니스 로직이 엮여있을까봐 마음편히 배포하지 못하고 어떻게 해야할 지 고민을 하고있었어요.정말 아쉬웠어요.그렇게 계속해서 쌓여만 가는 코드들을 가만히 내버려 둘 수는 없던 저는 방법을 찾아보기로 했습니다.그렇게 찾은 굉장한 프로그램, Electron을 소개합니다!왜 하필 Electron이죠?Electron?Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, 웹 기술(HTML, CSS, JavaScript) 을 사용하여 데스크탑 애플리케이션을 만들 수 있게 해줍니다.Node.js와 Chromium을 결합하여 크로스 플랫폼 애플리케이션을 개발할 수 있으며, 윈도우..
2024.06.06 -
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
프론트엔드에 적절한 폴더구조는 없다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
2024.02.24 -
들어가며 나는 포트폴리오 웹사이트를 만들었다. 처음엔 그저 언젠간 나만의 페이지를 만들어야지 싶었는데, 그러지 못했다. 왜냐하면 처음부터 너무나도 완벽한 것을 바랬으니, 디자인이 마음에 들지 않으면 제작하지 않기를 반복하였다. 그렇게 시간이 흘러 웹 개발을 시작한 지 1년이 다 되어갈 무렵, 클린코드에 대한 컨퍼런스를 다녀오며 프로젝트와 코드를 대하는 마음가짐을 어떻게 설정해야 할 지에 대한 생각의 변화가 생겼다. 바로 이 글을 통해 생각이 변했다. 우선 만들어두고, 계속해서 발전시켜나가야겠다. 언제곤 머릿속에서만 아이디어로 남겨둘 수는 없다. 그렇게 생각하는 순간 바로 이 계획을 실행하기로 했다. 간단하게 초안을 만들고, 계속해서 업데이트 해나가는 방식으로 코드를 성장시키기로 했다. 그렇게 만들어진 사..
<TimeMap.dmg> WEBP 이미지를 통해 웹 렌더링 시간을 개선해보자들어가며 나는 포트폴리오 웹사이트를 만들었다. 처음엔 그저 언젠간 나만의 페이지를 만들어야지 싶었는데, 그러지 못했다. 왜냐하면 처음부터 너무나도 완벽한 것을 바랬으니, 디자인이 마음에 들지 않으면 제작하지 않기를 반복하였다. 그렇게 시간이 흘러 웹 개발을 시작한 지 1년이 다 되어갈 무렵, 클린코드에 대한 컨퍼런스를 다녀오며 프로젝트와 코드를 대하는 마음가짐을 어떻게 설정해야 할 지에 대한 생각의 변화가 생겼다. 바로 이 글을 통해 생각이 변했다. 우선 만들어두고, 계속해서 발전시켜나가야겠다. 언제곤 머릿속에서만 아이디어로 남겨둘 수는 없다. 그렇게 생각하는 순간 바로 이 계획을 실행하기로 했다. 간단하게 초안을 만들고, 계속해서 업데이트 해나가는 방식으로 코드를 성장시키기로 했다. 그렇게 만들어진 사..
2023.12.18 -
0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..
[GitHub] Git에서 팀 단위로 협업하기0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..
2023.07.14 -
TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
[TailwindCSS] 디자인 적용이 잘 안된 것 같다면??TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..
2023.07.14 -
상황 : .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..
[Prettier] Prettier를 세팅할 때 타입스크립트를 생각해야합니다상황 : .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..
2023.07.11 -
프론트엔드를 함에 따라 기본적인 개발과정을 따를 수 있으면 한 번 씩은 바라보는 주제가 있습니다. 바로 시각화 입니다. 어떤 주제로 개발을 할 때, 개발에 사용했던 데이터를 이용하여 시각화를 하는 것은 꽤나 값진 경험이 될 것입니다. 그렇기에 오늘은 D3를 이용하여 간단한 노드를 연결하는 작업을 해 볼 것입니다. 우선, D3가 무엇인 지 알아보아야겠죠? D3를 이전에 정리했던 글에서 살펴보실 수 있습니다. [D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자 D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 time-..
[시각화] D3를 이용하여 간단한 노드관계 만들어보기프론트엔드를 함에 따라 기본적인 개발과정을 따를 수 있으면 한 번 씩은 바라보는 주제가 있습니다. 바로 시각화 입니다. 어떤 주제로 개발을 할 때, 개발에 사용했던 데이터를 이용하여 시각화를 하는 것은 꽤나 값진 경험이 될 것입니다. 그렇기에 오늘은 D3를 이용하여 간단한 노드를 연결하는 작업을 해 볼 것입니다. 우선, D3가 무엇인 지 알아보아야겠죠? D3를 이전에 정리했던 글에서 살펴보실 수 있습니다. [D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자 D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 time-..
2023.07.10 -
웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. Columns과 Rows로 나뉘며 스펙은 다음과 같습니다. 이런 그리드가 들어올텐데 Columns와 Rows는 Grid를 선택해서 고를 수 있습니다. 제작 후 눈 모양을 통해 켜고 끄며 그리드를 활용하여 웹 디자인을 진행할 수 있습니다. Columns(세로줄) Count Color Type Width Offset Gutter 10 FF0000, 10% Center 80 0 20 Rows(가로줄) Count Color Type Height Offset Gutter 10 FF0000, 10% Center 16 0 16 결과물 End
[Design] 피그마 그리드 템플릿웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. Columns과 Rows로 나뉘며 스펙은 다음과 같습니다. 이런 그리드가 들어올텐데 Columns와 Rows는 Grid를 선택해서 고를 수 있습니다. 제작 후 눈 모양을 통해 켜고 끄며 그리드를 활용하여 웹 디자인을 진행할 수 있습니다. Columns(세로줄) Count Color Type Width Offset Gutter 10 FF0000, 10% Center 80 0 20 Rows(가로줄) Count Color Type Height Offset Gutter 10 FF0000, 10% Center 16 0 16 결과물 End
2023.06.05 -
상황 설명 Project: HQRoutine IDE: Visual Studio Code Environment: Mac M1(Apple Sillicon) 상황: 맥북 초기화 이후 Project 리팩토링 중 작업 branch에서 git pull origin develop을 할 때 아래와 같은 문제 발생 사실 이건 Mac을 산 지 얼마 되지 않았을 때에도 발생했던 문제라서 이렇게 기록을 남겨두면 좋겠다 싶었습니다. 1st Trying - yarn 다시 설치해 보기 Git log 상태 2023-06-03 23:05:13.974 [info] > git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file - [32ms] 2023-06-03 ..
[Dev Setting, yarn, husky] Git Commit이 무언가에 막혀서 안된다면?상황 설명 Project: HQRoutine IDE: Visual Studio Code Environment: Mac M1(Apple Sillicon) 상황: 맥북 초기화 이후 Project 리팩토링 중 작업 branch에서 git pull origin develop을 할 때 아래와 같은 문제 발생 사실 이건 Mac을 산 지 얼마 되지 않았을 때에도 발생했던 문제라서 이렇게 기록을 남겨두면 좋겠다 싶었습니다. 1st Trying - yarn 다시 설치해 보기 Git log 상태 2023-06-03 23:05:13.974 [info] > git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file - [32ms] 2023-06-03 ..
2023.06.04 -
아마 이 글에서 NIMBY는 이런 뜻일 겁니다. Now I am going to tell you about how I fixed error about setting Mysql and mariadb in local environment. But I can't solve this problem. so reset Your computer 2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 문제 정의 - 왜 내 lo..
[Dev Setting, Mariadb/Mysql] local DB 설치과정 중 NIMBY 현상 발생아마 이 글에서 NIMBY는 이런 뜻일 겁니다. Now I am going to tell you about how I fixed error about setting Mysql and mariadb in local environment. But I can't solve this problem. so reset Your computer 2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 문제 정의 - 왜 내 lo..
2023.06.03 -
SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..
[Template] SEO 향상을 위한 Header 템플릿SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..
2023.05.24 -
우선, 이 파트는 메인 분야가 아니므로 천천히 업데이트될 예정임을 알립니다. 갑자기 이러는 데 이유가 있을 꺼 아니에요.. 그동안 프론트엔드의 길을 잘 걷고 있다가 문득 든 생각이 있습니다. "백엔드에 대해 어느 정도 알고 있으면 협업이 더 잘 되지 않을까?" 맞습니다. 요즘에는 프론트엔드에서도 백엔드의 구조를 어느 정도 알고 있어야 하는 시대입니다. 그리고 백엔드도 할 줄 알면 더 좋다는 건 다른 사람들도 알고 있는 사실이죠. 물론 가장 근본적인 이유는 이 타입스크립트를 이용해 백엔드 코드까지 직접 작성하다 보면 코딩테스트 준비에도 많은 도움이 될 것이라고 생각해서이기도 합니다. 그럼, Nest.js의 세계에서 백엔드와 TypeScript라는 두마리의 토끼를 함께 잡으려고 하는 글을 이제 시작하겠습니다..
[Nest.js, Swagger]간단한 게시판 서버 만들기 - 1편우선, 이 파트는 메인 분야가 아니므로 천천히 업데이트될 예정임을 알립니다. 갑자기 이러는 데 이유가 있을 꺼 아니에요.. 그동안 프론트엔드의 길을 잘 걷고 있다가 문득 든 생각이 있습니다. "백엔드에 대해 어느 정도 알고 있으면 협업이 더 잘 되지 않을까?" 맞습니다. 요즘에는 프론트엔드에서도 백엔드의 구조를 어느 정도 알고 있어야 하는 시대입니다. 그리고 백엔드도 할 줄 알면 더 좋다는 건 다른 사람들도 알고 있는 사실이죠. 물론 가장 근본적인 이유는 이 타입스크립트를 이용해 백엔드 코드까지 직접 작성하다 보면 코딩테스트 준비에도 많은 도움이 될 것이라고 생각해서이기도 합니다. 그럼, Nest.js의 세계에서 백엔드와 TypeScript라는 두마리의 토끼를 함께 잡으려고 하는 글을 이제 시작하겠습니다..
2023.05.20