본문 바로가기

반응형

Web

(55)
[Tailwind] tailwindcss cli 프론트 개발을 한다고 하였을때 특히 js 관련 프로젝트를 진행한다고 하였을 때 tailwind를 모르기란 쉽지않다. 오랜만에 프론트 진행을 하였는데 가벼운 프로젝트라 python 으로 서버를 돌리고 jinja 템플릿을 조금 사용하고 js로 함수로 기능을 붙이고.. 하였다.. 이때 css의 사용 편의성을 위하여 tailwind를 사용하였는데 커스텀이 필요하였다. 처음에는 아래와 같이 tailwindcss를 기본적으로 넣고 수정이 커스텀 css 들을 작성하여 반영하는 방식으로 하였다. 근데 이렇게 했을 경우 문제점이 자꾸 모듈을 넣어줘야하니까 화면이 깜박깜박거리는 것이다.엄청나게 거슬린다. 그래서 그걸 고치는 방법을 찾아봤는데 tailwindcss cli 로 패키징을 다시해주는듯하다. 원래는 이렇게 사용하는..
[JS/VS Code] 다국어 지원 개발 i18n Ally extensions 다국어 개발을 진행할때  i18n Ally 를 사용하면 좋다. 다른 방법들도 많을테지만,이때 vscode나 인텔리J 에 익스텐션도 제공하는듯 싶다.  다양한 프레임워크에서 사용할 수 있어서 너무 좋다.https://github.com/lokalise/i18n-ally/wiki/Supported-Frameworks더보기 옛날 옛적 이게 뭐였는지 json 가서 보던 시절은 갔다..간단히 적어보면 화면에서 보이는 단어를 선택할 수 있고,호버하면 전체 다 볼 수 있고관리도 그나마 쉽고다양한 다국어를 지원한다. 더 다양한 기능과 사용법은 docs나 다른 사용자의 사용기를 참고하자.https://github.com/lokalise/i18n-ally/wiki Home🌍 All in one i18n extension..
[JS] SpreadJS (feat. excel) Javascript 로 엑셀하기!! https://grapecity.co.kr/spreadjs?gclid=Cj0KCQjwmvSoBhDOARIsAK6aV7gdUFdt17Fi-fx2rsuKu_KYi3a4YnvlAb_0ljNYjtJ4_4rQAdBgG5waAv2vEALw_wcB SpreadJS | JavaScript Excel UI 컨트롤 | JavaScirpt 스프레드시트 Empower Developers grapecity.co.kr
[React] pdf export image S3 CORS (feat. html2canvas, react-pdf) react에서 pdf로 파일을 내보내는 기능을 만드는데 CORS 에러가 났다. html2canvas와 react-pdf로 시도해 보았다. 기본적으로 해주어야하는것 서버쪽에서 cors권한 추가해주면 된다고해서 S3 CORS 정책을 추가하였다. 일반적인 경우 서버쪽에서 이런 처리를 해주면 된다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "HEAD" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2" ], "MaxAgeSeconds": 3000 } ] 근데도 안되었다.. 멘붕;; 원인 S3 에서는 ..
[nginx] nginx 에서 ws 를 연결할 수 있는가 (feat. ChatGPT's Q&A) 나중에 공부해야하는거 ChatGPT's Q&A nginx 에서 ws 를 연결할 수 있는가 네, nginx는 WebSocket 연결을 지원합니다. WebSocket 모듈을 로드하고 설정 파일에 WebSocket 업스트림과 프록시 패스를 추가하면 됩니다. 아래는 예시입니다: http { upstream websocket { server 127.0.0.1:3000; } server { listen 80; server_name example.com; location /ws/ { proxy_pass http://websocket; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ..
[javascript] 커링 (feat. f(a)(b)(c)) 참고 https://ko.javascript.info/currying-partials 커링 ko.javascript.info
[javascript] 동일한 이름의 사진을 업로드하였을 때 새 이미지로 새로 고침이 안되는 경우 웹이든 모바일이든 캐시로 인하여 이름 및 확장자가 같은 경우 같은 파일이라고 인지되어 새로 받아오지 않는 현상이 일어난다. 그럴때 해결방법 url에 쿼리스트링 등 을 추가속성을 붙여준다. 예를 들어 원래 요청이 https://24hours-beginner.tistory.com/img/test.jpg 라고하였을때 실제 요청은 아래와 같이하면 된다. 1. 쿼리스트링 https://24hours-beginner.tistory.com/img/test.jpg?t=2022-09-20_16:08:55 2. 목차 https://24hours-beginner.tistory.com/img/test.jpg?#2022-09-20_16:08:55 참고 [javascript] 동일한 URL에서 새 이미지로 이미지 새로 고침 [j..
[TypeScript] .d.ts 파일이란? https://spookyjelly.tistory.com/83 [예전 글 다시쓰기] .d.ts 파일이란? 과거에 썼던 글 https://spookyjelly.tistory.com/39 을 다시 쓴 글입니다. 0. 들어가는 말 약 1년 전에 d.ts 파일에 관해 글을 적었는데, 지금 와서 다시 읽어보니 글의 깊이가 없고 거의 위키 글을 복붙한 수 spookyjelly.tistory.com [예전 글 다시쓰기] .d.ts 파일이란? 도깨비젤리· 2022. 6. 26. 19:37 과거에 썼던 글 https://spookyjelly.tistory.com/39 을 다시 쓴 글입니다. 1. d.ts 파일이 필요한 이유 .d.ts 파일은 JS 모듈을 TS에서도 사용할 수 있도록 타입만을 선언한 파일 2. d.ts 파..

반응형