O612의 데브런닷 스튜디오

Prologue Vanilla 환경에서 한글로 클래스명 짓기, JavaScript 변수명 짓기, Element 생성하기를 해보고 싶었습니다. 과연 잘 될까요? 어떠한 영향도 받는 상황이 연출되지 않게 Live Server 조차도 사용하지 않은 상태에서 테스트가 진행되었습니다. CSS & HTML 아무 문제없이 렌더링이 이루어졌습니다. React에서는 JavaScript로 그리기 때문에 클래스명이 다른 이름으로 변경이 되지만 여기서는 Vanilla 환경이기 때문에 어떠한 영향도 주지 않았습니다. class…

import { v4 as uuidv4 } from 'uuid'; import YouTubeVideo from '../components/utilities/youTube'; import LinkButton from '../components/utilities/linkButton'; import "@deckdeckgo/highlight-code"; import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"; deckDeckGoHighlightElement(); Prologue…

import { v4 as uuidv4 } from 'uuid'; import YouTubeVideo from '../components/utilities/youTube'; import LinkButton from '../components/utilities/linkButton'; import "@deckdeckgo/highlight-code"; import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"; deckDeckGoHighlightElement(); Prologue 한문은 와세이칸고 형태로 테스트했습니다. Next.js…

Prologue 클래스 이름이 뭐예요? (나 쉬운 클래스 아니예요) Next.js로 예제를 작성했으니 염두하고 읽어주세요 CSS (CSS Module 말고 그냥 CSS) Global CSS를 사용하라는 에러가 뜸 CSS Module(.module.css)이 아닌 CSS(.css)를 생성해서 사용하려고 하면 에러가 뜹니다. Next.js에서는 global.css(또는 global.sass)를 제외한 CSS 파일은 지원하지 않기 때문에 에러가 뜨는 것입니다. 그래서 단순 CSS 파일은 한글로 작성하든, 영문으로 작성하든, 어떤 형태든 위처럼 에러가 뜨는 것을 확인할 수 있습니다. global.css를 글로벌.css 처럼 non-English 형태로 작성하고 _app.js에서 global.css…

Prologue 한글로 변수명을 지정하기, 컴포넌트명 지정하기에 이어서 이번 글에서는 디렉토리명, 이미지 파일명을 한글로 짓기에 도전해볼게요! js 파일이나 jsx 파일명을 한글로 짓는 건 문제가 없었으니 디렉토리명과 이미지 파일명도 한글로 짓는다고 특별한 문제는 없을 거라는 추측은 미리 해볼 수 있을 듯 합니다. 시작합니다. 코드 작성 Next.js로 예제를 작성했으니 염두하고 읽어주세요 렌더링 결과 svg 특성상 용량이 작은 이미지이기 때문에 base64로 처리되었습니다. 아니 이게 아닌데???? 파일명을 제대로 인식하는지 궁금했기 때문에 용량이 큰 png 파일로 다시 도전해봤습니다. 역시나 제대로 인식합니다. 쳇! Epilogue…

Prologue 지난 글에 이어서 이번에는 function, component 이름에 한글을 사용해도 되는지를 테스트해볼게요! export default function 테스트 (근데 한글 파일명을 곁들인) 노 플라블럼! 한글 변수로 값 받아오기 와우네... 잡탕밥 어썸! 아이고 의미업ㄸㅏ Epilogue 다음 포스팅은 디렉토리(폴더)명, 이미지 파일명 둘 다 한글로 만들고 그걸 object로 리스트를 만들어 관리를 해도 잘 돌아가는지 테스트 해볼 생각입니다.

Prologue 이전 글에서도 언급했지만 문득 한글로 변수명을 만들어도 잘 동작하는가?에 대한 의문이 항상 있었습니다. 이 글에서는 한글로 여러 방법으로 변수명을 만들어보고 멍청하게 동작하는 부분은 없는지 확인합니다. 텍스트 테스트 여기서 문제가 생기면 당연히 안되겠죠? 한글을 못 쓰면 React로는 영어로만 개발이 가능하다는 거니까요. 변수 테스트 1: emotion 변수명만 변경되서 그런지 class 이름도 변경이 이루어지지 않고 렌더링 되었습니다. (이건 의외...) 변수 테스트 2: export default export default에 사용하는 변수명도 한글로 작성해도 특별한 문제가 보이지는 않네요. 이왜진 Epilogue 다음에는 function, component…

Prologue JavaScript에서 변수명을 한글로 작성해도 동작할까? 하는 상상에서 시작된 글입니다. 개발 환경 React 환경에서 다양한 인간 언어(human language)로 변수를 만들고 Vanilla 환경(생코딩)에서도 변수를 만들어서 동작하는지를 테스트해 볼 것입니다. 그리고 스타일 코드도 궁금하니 동일 환경에서 Sass 코드 및 Emotion Styled 변수를 만들어서 테스트를 진행 할 생각입니다. 불타오르네 Epilogue 이번 글에서는 어떻게 진행할지에 대해서만 언급했고, 본격적인 테스트 진행은 다음 글에서 이어집니다. 다음 글 관많부! : )