IT에 관한 글

웹 개발, YouTube로 시작하자! (HTML, CSS, JS 배우기 좋은 영상 링크)

0. 준비사항 저는 알고 있습니다. 이 글을 읽는 여러분이 긴 시간의 영어 유튜브를 모두 이해하지 못할 것이라는 걸요. 하지만 이 크롬 확장프로그램 하나만 있으면 그런 것도 끝장낼 수 있습니다. 바로 아래 사진처럼 유튜브에서 자동으로 인식해서 나오는 영어자막을 실시간으로 한글로 바꿔주는 게 있습니다. 세상은 배우기 위한 무궁무진한 기회로 가득한 곳입니다. 이 확장프로그램은 Language Reactor라는 프로그램으로 이곳(https://www.languagereactor.com/)에서 내용을 확인할 수 있고, 여기서 다운로드 가능합니다 ( 링크 바로가기 ) 확장프로그램을 설치했다면 이제 시작합시다! 1. 기초는 이것 한 방에 우리가 익혀야 할 것은 단기적으로는 HTML, CSS, Javascript이고..

내가 경험한 Next.js 13.3 버그 (app route에 대하여)

관련 글 : https://brunch.co.kr/@princox/250 웹 프로그래밍을 독학해서 제품을 만들며 느낀 점들 무언가를 하나 온전히 배우는 것은 쉽지 않다. | 이 글은 유사 시리즈물입니다. 이전 글을 보면 더 풍부한 경험을 할 수 있습니다. 1. https://brunch.co.kr/@princox/235 2. https://brunch.co.kr/@princox/236 3.https:// brunch.co.kr Next.js 13.3 버전에서 App Route를 쓰면서 신나게 버그를 경험하고 있습니다. 크게 한 3가지의 고난/역경을 이겨냈으나 지금은 못 이겨내고 있는게 있습니다. 바로 route할 때 URL에 .txt가 붙는 현상인데요. 아래와 같은 현상이 일어납니다. https://gi..

Next.js 13 App Router를 쓰며 static으로 빌드해본 경험

1. 연속된 실패의 시작 사이드 프로젝트를 본격적으로 시작한지 한 달 정도가 되었다. 야심차게 Next.js 13.3 버전으로 프로젝트를 시작했고, 새로운 라우트 방법인 app directory를 사용했는데 정말 큰 실수인 것 같다. 현재 static으로 빌드해서 cloudflare page에 배포하고 있는데 총 39번의 배포가 실패했다. 간단한 퀴즈 앱을 배포하는 데에 이렇게 어려운 길이 있는지 몰랐다. 단순히 리액트로 개발을 시작했다면 벌써 다 배포하고 SEO까지 끝냈을 지 모른다. (젠장) 새로운 기술을 시도한다는 것이 이렇게 어려울 줄이야. 2. 내가 겪어온 실패들 배포가 실패하면서 크게 3가지의 어려움을 겪었는데, 첫번째, 내가 찾는 모든 Next.js 자료는 12버전이거나 그 전 버전인 경우가..

"스크롤"을 구현시 참고할만한 사이트 (Scroll, Animation)

1. 아, 예쁜 홈페이지 만들고 싶다. 오늘도 경제적 자유를 희망하는 사람으로서, 어떻게 해야 사람들에게 도움이 되는 제품을 만들 수 있을까 하다가, 제가 관심이 있는 "경제적 자유" 그 자체를 소개해주는 홈페이지를 만들어야겠다는 생각을 하게 됐습니다. 홈페이지의 기능은 간단합니다. IRP, ISA, 연금저축펀드에 대한 개념하고 어떤 ETF를 납입하면 좋을지를 간단히 소개해주는 기능, 미국 주식 배당주를 살 때 배당금 포함해서 재투자시 일정 기간 후에 얼마의 목돈이 생기는 지 확인해주는 기능, 배당금으로 내가 원하는 생활 수준이 달성되려면 얼마를 넣어야하는지 확인하는 기능 등.. 이런 것들을 개발해보고 싶다는 생각이 들었습니다. (다른 사람도 쓰면 좋은데, 그냥 내가 쓰고 싶어서 ㅎㅎ) 2. 당신은 웹페..

Fira code, Cascadia Code에서 화살표가 정상적으로 보이지 않을 때 (화살표가 안 먹혀요)

Fira code를 적용하면 정상적으로 화살표가 바뀌어야 합니다. 그런데 안되는 경우가 있습니다. 그럴 때는 setting.json의 설정의 문제가 있어서 입니다. 바로 "editor.tokenColorCustomizations"의 textMateRules에서 "storage"를 건드렸을 확률이 높습니다. "editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [ "comment", "entity.name.class", // class name "keyword", // import, "constant", // String, number, boolean, this, super // "storage", // String, let "storage..

Javascript랑 Python으로 코딩하세요? ChatGPT 쓰세요

복세편살. 복잡한 세상 편하게 살기 위해 소프트웨어를 만들고 있건만 코딩하는 것이 쉽지가 않습니다. 그럴 때는? 역시 ChatGPT입니다. 저는 최근에 파이썬 코드를 짜면서 ChatGPT 무서움을 느끼고 있습니다. 예를 들어 requests 모듈이 아니라 비동기로 http get을 하는 코드를 만들고 싶을 때 이렇게 물어봅시다 이렇게 답변이 옵니다. ChatGPT가 답변해준 코드 전문입니다. import asyncio import aiohttp async def fetch(session, url): async with session.get(url) as response: return await response.text() async def main(): urls = ['https://www.example..

(1인 개발자) 혼자서 코딩해서 돈을 번다는 것

0. 기술로 자급자족 혼자 벌어먹고 살기에 쉽지 않은 세상입니다. 저도 개발과 전혀 상관없는 회사를 다니면서 저녁과 주말에는 코딩으로 시간을 보내고 있습니다. 오늘 첫 페이지의 MVP를 개발했고 이제 스타일링을 하려고 CSS가 잘 꾸며진 몇 개의 사이트를 찾아보고 있습니다. 세상은 혼자서 살아남기 쉽지 않습니다. 그래서 규모의 경제가 있는 것이고, 개인이 모여 법인을 구성하여 사업을 진행하는 것이죠. 하지만 클라우드, API, 수많은 라이브러리와 프레임워크가 생기면서 개발의 허들이 낮아지고 자바스크립트를 통한 풀스택이 생기면서 개인형, 소규모 창업과 성공이 늘어나고 있어 보입니다. 개발의 허들이 낮아지면서 애플은 Apple silicon을 통해서 하드웨어를 저전력의 고성능을 만들어내고 있고, Google..

백엔드(Backend) 개발자라면 봐야할 영상 (토스, DFD 그리고 개발자노트)

그것은 바로 토스의 「SLASH 22」의 "왜 은행은 무한스크롤이 안되나요" 영상이다. 은행에서 개발하지 않은 사람에게도 유용한 영상이다. 왜냐하면, "서비스를 위해 백엔드를 어떻게 구성해야 하는지"에 대한 고민의 흐름이 보이기 때문이다. 0. 스타트업에서의 백엔드? ※ 참고) 이 글을 쓰는 저는 클라이언트 개발만 해봤습니다. (프론트엔드 / 안드로이드 클라이언트) 그러므로 이 글에 공감되지 않는다면 깊게 듣지 않아도 된다는 장점이 있습니다. 한마디로 뇌피셜이라는 말씀. 우선 백엔드 개발자가 하는 일을 100%라고 한다면, 우선 장애대응은 없다고 가정한다. 실제로 클라우드의 메모리나 CPU 점유율 등 서버에 대한 트래픽이 폭증했을 때가 가장 일이 많고 짜증나겠지만, 일단 처음 시작하는 단계에서의 백엔드 ..