본문 바로가기

개발

typescript+pwa 구현하기 이전 시간에 cra(create-react-app)+pwa를 구현했습니다. 이번에는 cra(create-react-app)+typescript+pwa를 구현해보겠습니다! 1. `create-react-app 파일명 --template pwa-typescript`을 진행합니다. 2. src/index.tsx의 18줄을 serviceWorkerRegistration.register()로 변경해주세요. 3. 빌드를 해줍니다 by 'npm run build'. *deploy상태에서만 pwa 적용이 가능합니다. 그런데 build를 해주면 아래와 같이 에러가 발생합니다. 에러 해결을 위해 build 결과를 localhost로 띄우겠습니다. 4. public/server.js에 파일을 생성해서 아래 코드를 넣습니다... 더보기
next.js에서 csr nex.tjs는 react기반 웹에 ssr방식을 제공하는 프레임 워크입니다. 그리고 종종 next.js개발을 하다가 csr이 필요한 경우가 있어서 오늘은 next.js에서 csr을 사용하는 방식을 다루려 합니다. 1. import dynamic from "next/dynamic을 최상단에 import 합니다 import dynamic from "next/dynamic"; 2. csr방식으로 rendering할 component를 아래 방식처럼 써줍니다. -ssr: false로 해줘야 합니다 const Components = dynamic(() => import("../components"), { ssr: false, }); 이상입니다! 간단하죠? 감사합니다 더보기
즉시 실행 함수 in javascript javascript에서 즉시 실행함수는 아래와 같은 형식을 가집니다. //정의 (() => { console.log('test') }) //정의와 실행 동시에 (() => { console.log('test') })() ()을 붙이면 실행도 하고, 붙이지 않으면 정의만 합니다. 그런데, 즉시 실행 함수를 사용하다 종종 에러가 발생합니다. '....is not a function' 인데요. 왜 발생할까요? 원인은 ;에 있었습니다. javascript가 주는 편리함중 하나는 ;를 쓰지 않아도, 언어 자체에서 ;처리를 합니다. 그래서 ;를 쓰는 습관이 줄었고, ;로 끝나지 않은 코드에 즉시 실행 함수를 실행하니 에러가 발생한 것이었습니다. //err console.log('err?') (() => { cons.. 더보기
port already issue in linux linux에서 nodejs로 작업을 하다가 port already 이슈가 발생했습니다. port already로 서버가 꺼질경우, 죽이고 재실행하도록 했는데 port already가 계속 떴습니다. 콘솔을 찍어보니 저는 0920으로 포트 설정을 해줬는데, 920 port already로 뜹니다. 흠..... 요건 머지 싶었는데, "linux나 nodejs에서 포트를 숫자로 간주하는 건가? "라는 추측이 들더군요. 그래서 일단은 0920 => 1920으로 변경하니 잘됩니다. 정리: 해당 이슈는 nodejs에서 발생한 이슈로 의심이 많이 갔습니다. 아무래도, javascript는 문자, 숫자 구분이 없어 nodejs에서 0920을 920으로 listen하는듯 합니다. 감사합니다 더보기
유용한 공백 공백 "ㅤ" 더보기
지역 변수와 전역 변수 in javascript 종종 let이 지역변수고, var가 전역변수라고 알고 계시는 분들이 계십니다.(초창기 저라고는 안하겠습니다ㅎㅎ) 그런데 지역과 전역은 선언방식이 아닌 유효 범위(선언 위치)에 따라 구분됩니다. 지역 변수: 함수 내부에서 정의된 변수 let a = 'a' var func = () => { let a1 = 'a1'; var a2 = 'a2'; } console.log(a) console.log(a1) console.log(a2) 위 코드를 실행하면 a만 콘솔이 찍히고, a1과 a2는 not defined에러가 발생합니다. a1과 a2는 func() 안에서 선언되기 때문입니다. 그렇다면 func()를 실행하고 콘솔을 찍으면 어떻게 될가요? let a = 'a'; var func = () => { let a1 .. 더보기
'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. next.js에서 npm run dev나 build를 하는데, 위와 같은 에러가 뜰때가 있습니다. mac이나 linux에서는 문제없는데 window에서 종종 발생하죠. next가 깔려있는데, 위 에러는 왜 발생할까요? 정확한 이유는 파악하지 못했지만, 해결법은 간단합니다. 바로 package-lock.json파일을 삭제해주면 됩니다. package-lock.json은 npm install시 생기는 파일인데, dependency가 꼬여서 발생하는 문제인듯해 삭제를 해주니 해결이 됐습니다. 결론: package-lock.json파일을 삭제하면 됩니다 이상입니다 더보기
th>tr styling in antd of react antd는 table, button등 디자인된 component들을 제공하는 모듈입니다. antd table작업중, docs에는 를 styling하는 방법이 안나와 있어 약간 헤맸습니다. 그래서 오늘은 antd table의 th를 styling 하는 방법을 다뤄보겠습니다. 1. 개발자도구를 통해, 변경하고자 하는 tr의 class이름과 위치를 얻습니다 -그림1의 경우, class는 ant-table-thread이고 위치는 antd.css의 24947번째에 있습니다. 2. /node_modules/antd/{css파일}에 들어갑니다 -그림1의 경우 antd.css가 됩니다 3. 바꾸고자하는 class명에 속성값을 추가하거나 변경해줍니다 - 저는 padding을 추가해줬습니다 4. 다시 npm run dev.. 더보기

티스토리툴바