분류 전체보기

자바스크립트(Javascript)를 더 깊게, 심화해서 알고 싶은 사람에게 권하는 아티클 5개

자바스크립트 고수로 향하는 아티클 5개 자바스크립트를 깊게 공부하고 싶은 분께 몇 개의 아티클을 제공해 드립니다. 1. 고급 자바스크립트 배우기 by John Resig jQuery를 창시한 개발자가 직접 만든 자바스크립트 교육자료입니다. 존 레식 본인의 책인 [자바스크립트 닌자 비급]이라는 책에서 다루는 내용인데, 웹으로 올려놓은 것입니다. https://johnresig.com/apps/learn/ Learning Advanced JavaScript johnresig.com 2. 책 요약본 JSON 포맷을 널리 알린 더글러스 크락포드의 책입니다. 정확히 다 알 수는 없지만 대략적인 요약본이니 읽어보고 궁금하면 전문을 사서 읽어보는 것도 좋을지도? https://www.rinae.dev/posts/ho..

웹 개발, 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버전이거나 그 전 버전인 경우가..

The `style` prop expects a mapping from style properties to values, not a string 오류

뜻 : 당신이 style prop에 값을 넣어야하는데 문자열을 넣었다. 왜 이런 오류가 뜰까? 말 그대로 style에는 CSS 코드 자체가 들어가야하는데 문자열을 넣었기 때문이다. 나는 classname에 적용한다는 것은 style에 작성해버렸다. 1. 오류가 난 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} 2. 수정한 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} className에 지정해야할 것은 style에 직접 넣은 것이 아닌지 확인해보자.

"스크롤"을 구현시 참고할만한 사이트 (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..

해외 여행, 해외 결제에는 무조건 트래블카드(트래블월렛)으로!

미친 혜택의 카드가 있다. 아주 가끔씩 쓰지만 무조건 있어야 하는 카드. 바로 트래블카드이다. 이것보다 해외결제 더 좋은거 많은데요? 해외에서 결제한 거 나중에 페이백되는 것 많은데요? 라고 해도 내가 해외 결제를 매일 밥 먹듯이 하는 것도 아니고 매번 카드 복사 때문에 걱정할 바에는 선불 충전금으로 쌓아두는 것이 훨씬 낫다. 트래블카드는 트래블월렛을 통해서 미리 외화를 충전해두고, 충전한 외화로 결제할 수 있는 카드이다. 진짜 좋은 점은 특별히 결제 수수료나 환전 수수료가 거의 없다는 것이다. (애플아 미안해.. 돈이 없어서 브라질에서 결제했어 앞으로 내가 좀 더 잘할게) 화폐 종류도 엄청나게 많다. 유럽과 아시아는 심지어 한 페이지에 다 캡쳐도 어렵다. 해외 여행이 잦다면 다른 해외 결제 혜택이 큰 ..