STUDY BITS STUDY BITS

컴퓨터/HTML & JS & TS

• LeetCode 문제 번역 크롬 확장자 만들기

  컴퓨터/HTML & JS & TS 2024. 11. 9. 11:37

  https://chromewebstore.google.com/detail/leetcode-translator/clegkmajaieakemdjngmaiipghfmppgf LeetCode Translator - Chrome 웹 스토어Translate LeetCode problems into multiple languages using GPT.chromewebstore.google.com 크롬 확장자 방식이 궁금해서 만들어보았다.딱히 어려운 것은 없고 단순 html path 싸움과 GPT API 부르는 것이었다.gpt-4o-mini API를 쓰니까 백만 토큰을 써도 0.01 달러이다.그래서 아무리 많이 사용해도 1달러도 안 나올 듯하다. 스토어에 올리고 싶을 때는 아래 사이트 가서 제안해야 한다.https:/..

  Read More
• Spring Boot: Mailsender HTML 보내기

  컴퓨터/HTML & JS & TS 2023. 11. 28. 17:32

  templates에 있는 passcode.html을 사용하려고 아래처럼 thymeleaf 엔진 설정을 했다. spring: thymeleaf: cache: false prefix: classpath:/templates/ Bean 하나 만들어준다. 구글을 사용했다. @Configuration public class EmailConfig { @Value("${spring.mail.username}") private String FROM_ADDRESS; @Value("${spring.mail.password}") private String EMAIL_PASSWORD; @Bean public JavaMailSender javaMailService() { JavaMailSenderImpl javaMailSende..

  Read More
• JS: valueOf, toString, toPrimitive

  컴퓨터/HTML & JS & TS 2022. 10. 14. 17:26

  Javascript 기능 중 valueOf, toString, toPrimitive를 이용하면 말이 안 되는 것을 할 수 있다. // 기본적으로 toString은 아래처럼 쓰일 수 있다. let a = { id: '123oij21312838', toString() { return '한글'; }, }; if (a == '한글') { console.log('a는 한글'); } // 결과: a는 한글 출력됨 위에 따르면 아래처럼 진행된다. // a가 string 'a' == a is True // a가 boolean True == 1 is True // a가 object => conversion toPrimitive @객체를 원시형으로 변환하기 object가 숫자형이나 문자형으로 형 변환시 toPrimitiv..

  Read More
• ReScript: TypeScript와 비슷한 Javascript 파생 언어

  컴퓨터/HTML & JS & TS 2021. 2. 4. 22:19

  ReScript ReScript Documentation The ReScript language and ecosystem docs rescript-lang.org 1. 소개 Javascript 최적화, 파생 언어는 워낙 많다. 그중 TypeScript가 제일 잘 살아남은 것 같은데 찾아보니 ReScript란 OCaml 타입 시스템을 참고한 느낌의 언어도 있다. 새로 생긴 언어는 아니고 ReasonML (페이스북)과 BuckleScript (블룸버그)를 rebranding 한 것이다. React에서도 사용할 수 있다. TypeScript나 JS에서 ReScript로 바꾸려면 시간이 꽤 걸릴 것 같다. 2. 문법 세미콜론 (;) 없음 주석 같음 (/*, //) String은 ", char은 ', 문자 연결은..

  Read More
• TypeScript: Bubble Sort (거품 정렬)

  컴퓨터/HTML & JS & TS 2020. 11. 8. 21:31

  TypeScript Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types to the language. www.typescriptlang.org # TypeScript 1일차 언어를 공부할 때 정렬 알고리즘부터 시작하는 편이다. Go언어, Python type hinting 버전과 비슷한 느낌이지만, interface, JS 기능들이 많이 미숙하기에 공부가 더 필요 1. 문법 소개 one-line swapping (한 줄로 값 변경) 특이하게, array안에 넣어서 해야한다. (함수에서 두가지를 return 할 때도 return [a, b]로 쓸 수도 있다. [array[i], array[i + 1]] = [array[i..

  Read More
• 홈페이지 electron 프로그램으로 바꾸기 (nativefier)

  컴퓨터/HTML & JS & TS 2020. 8. 18. 13:54

  Nativefier jiahaog/nativefier Make any web page a desktop application. Contribute to jiahaog/nativefier development by creating an account on GitHub. github.com 1. 소개 Nativefier은 ElectronJS을 이용한, 웹사이트를 프로그램으로 바꿔주는 프로그램이다. 개발할 때 문서 사이트 프로그램화하면 편할 것 같다. (프로그램 크기는 약 156mb 정도 나옴) 설치법은 아래와 같다. npm install -g nativefier 사용법은 아래와 같다. nativefier --name "appName" "URL" 옵션은 nativefier --help로 확인할 수 있다. (윈..

  Read More
• HTML webp 이미지 포맷

  컴퓨터/HTML & JS & TS 2020. 8. 17. 11:14

  webp [weppy] A new image format for the Web | WebP | Google Developers A new image format for the Web. developers.google.com 소개 : webp 포맷은 구글에서 만든 무손실/손실 지원 이미지 압축 포맷 방식이다. (jpeg, png, gif) Google Lighthouse(사이트 성능 점수 확인)를 써보니, next-gen 이미지 포맷을 사용하라고 하길래 써봤는데, 퀄리티도 나쁘지 않고, 로딩이 빨라져서 webp 포맷을 계속 사용할 것 같다. (특히 썸네일 파일을 webp로 압축하여, 로딩 속도를 조금 높였다. (약 0.8s) 1. 설치법 옵션 1) binary 파일을 받아서 직접 실행 https://sto..

  Read More
• JS Lodash 튜토리얼

  컴퓨터/HTML & JS & TS 2020. 8. 15. 10:25

  Lodash Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com 0. 소개 JQuery처럼 자바스크립트 유틸리티 라이브러리 중 하나인데, _(underscore) 라이브러리 파생 React 프로젝트에서도 많이 쓰이며, 요즘 인기가 제일 많다. 1. 설치법 HTML 스크립트 부분에 아래를 추가하고, npm으..

  Read More