그린그린티라떼

코루틴(Coroutine) 코루틴은 경량 스레드와 비슷한 개념으로, 하나의 스레드 내에서 여러 개의 서브루틴(subroutine)이 동시에 실행되는 것을 가능하게 합니다. NodeJS에서는 코루틴을 구현하기 위해 co라이브러리나 async/await 문법을 사용할 수 있습니다. 코루틴은 비동기적인 코드를 동기적인 코드처럼 작성할 수 있도록 도와주어 비동기적인 프로그래밍을 보다 간편하게 만들어줍니다. NodeJS의 이벤트 루프와 코루틴을 통해 비동기 작업을 효율적으로 처리할 수 있으며, 단일 스레드로 더 높은 동시성을 구현하는 데 도움이 됩니다. 코루틴 라이브러리는 JavaScript에서 비동기적인 작업을 더욱 쉽게 다루기 위해 사용됩니다. 여기서는 co 라이브러리를 사용하는 코드 예시를 통해 설명하겠습니..

SPA에서 서버 사이드 렌더링(SSR)이 필요한 이유? 단일 페이지 애플리케이션(SPA)은 현대 웹 개발의 주요 트렌드 중 하나이며, 이는 그들의 빠른 응답 시간과 사용자 경험에 큰 부분을 차지합니다. 그러나 SPA만으로는 모든 것을 해결할 수 없으며, 때로는 서버 사이드 렌더링(SSR)이 필요한 경우가 있습니다. SSR의 장점을 살펴보고, SPA에 이를 적용할 때 고려해야 할 주요 사항들에 대해 논의해 보겠습니다. 1. SEO 최적화 검색 엔진 최적화(SEO)는 모든 웹사이트에게 중요한 요소입니다. 검색 엔진은 보통 서버에서 렌더링된 콘텐츠를 클라이언트 측에서 렌더링된 콘텐츠보다 더 쉽게 크롤링하고 이해할 수 있습니다. Google과 같은 검색 엔진은 자바스크립트를 실행하여 콘텐츠를 인덱싱하지만, 이 ..

클라이언트측 렌더링(CSR) CSR에서 서버는 CSS 및 JavaScript에 대한 링크와 함께 거의 비어 있는 HTML 문서를 보냅니다. 그런 다음 JavaScript는 클라이언트의 브라우저에서 실행되어 HTML을 만들고 페이지를 업데이트합니다. 이로 인해 JavaScript가 처리되는 동안 "로딩" 화면이 나타날 수 있습니다. 다음은 CSR의 기본 흐름입니다. 사용자가 페이지를 요청합니다. 서버는 CSS 및 JavaScript에 대한 링크가 포함된 최소한의 HTML을 보냅니다. 클라이언트는 최소한의 HTML을 수신하고 표시합니다. 클라이언트가 JavaScript를 다운로드하고 해석합니다. JavaScript는 페이지의 HTML을 생성하고 상호 작용을 추가합니다. 코드에서 React와 같은 라이브러리를..

javascript tutorial websocket https://ko.javascript.info/websocket 간단하게 웹소켓 통신 nodejs, express로 구현 https://github.com/syoungee/websocket 정리를 정말 잘해둔 포스팅 https://hudi.blog/websocket-with-nodejs/

Windows 기기에서 스크롤바 숨기기 Windows에서 작업할 경우, vw를 추가하면 스크롤바가 나타나는 것을 경험했을 것입니다. 스크롤바가 포함되지 않은 Windows에서 vw를 사용할 때 일어나는 현상입니다. - vw: 100 = 뷰포트 너비의 100% + 스크롤바 Mac에서는 문제가 없지만, Windows에서는 스크롤바가 자동으로 표시되는 문제가 발생합니다. 스크롤바를 표시하고 싶지 않은 경우, 다음 방법 중 하나를 활용하시면 됩니다. - 너비(width) 활용: vw: 100 대신 100% 사용하기 - shared.css 파일에서 body 선택자에 overflow-x: hidden을 추가해 가로 스크롤바 숨기기 (세로 스크롤바를 숨기려면 overflow-y: hidden 추가) ::-webkit..

문자열 다루기 이제 익숙해질 때가 됐는데 매번 검색하는 나 발견 substr, substring, slice 이 세 가지 함수들만 기억하자 ✔️ 문자열을 뒤에서부터 자르려면 slice()함수 사용 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Expected output: Array ..

✔️ Vite에 대해 간단히 정리 npm package를 활용한 웹 개발 시 의존성 있는 패키지 소스코드를 esbuild를 사용해서 빠르게 pre-bundling해 준다 es6 modules, HMR을 이용해 실시간 미리보기(npm run build) 기능 제공 JSX, CSS module 번들링도 잘 되는 build tool 웹팩처럼 plugin 사용 가능, cli를 이용한 프로토타이핑 쉬움 ✔️ 문제? npm을 이용한 라이브러리 다운로드(node_modules 용량 매우 큼) 친화적이지 않은 import / require 문법 ✔️ 이에 대한 해결책? Static ASSETS bundling을 통해 모든 JS파일을 하나로 합쳐서 사용하기 ✔️ 결론적으로 VITE 사용 이유? 1. 빠른 빌드 빠른 es..

채팅 답변이 왔을 때 도로로로 실시간으로 데이터를 받아오는 것 같은 UI를 구현하려고 한다. 관련 지식 습득 후 포스팅에 추가 예정이다. https://gilssang97.tistory.com/69 알림 기능을 구현해보자 - SSE(Server-Sent-Events)! 시작하기에 앞서 이번에 개발을 진행하면서 알림에 대한 요구사항을 만족시켜야하는 상황이 발생했다. 여기서 말하는 알림이 무엇인지 자세하게 살펴보자. A라는 사람이 스터디를 생성했고 B라 gilssang97.tistory.com https://surviveasdev.tistory.com/entry/%EC%9B%B9%EC%86%8C%EC%BC%93-%EA%B3%BC-SSEServer-Sent-Event-%EC%B0%A8%EC%9D%B4%EC%A..

오늘은 모니모 앱에 대해서 간단하게 소개해드릴게요! 제가 하고 있는 출퇴근길 앱테크 앱들만 모아둔 폴더가 있는데 그 중에 가장 깔끔하고 직관적인 UI/UX를 자랑하고 있어요 삼성증권과 함께하는 앱이라 파란색이 포인트 컬러인가봐요🥰🥰 젤리 챌린지를 통해 적립금을 모을 수 있는데요 일단 하루에 한 번 접속하면 젤리 하나를 받을 수 있고 챌린지에 참여하면서 젤리를 얻을 수 있어요😯 일반 젤리는 10원~ 특수 젤리는 1000원~ 요런 식으로 당첨되는 것 같더라구요!! 이 앱의 가장 큰 장점 포인트 현금 인출을 바로 할 수 있다는 장점인데요 그 부분에서 테이크아웃 커피값 벌고 싶은 분들께 강추합니다👍🏻 결론!! 저랑 같이 모니모해요! 아래 코드 복사해서 가입해주시면 스페셜젤리와 함께 1000원~3000원 받고 시..

https://a.atmos.washington.edu/~ovens/javascript/colorpicker.html HTML Color Picker a.atmos.washington.edu https://www.colorcodeslab.com/ko/hex/ffffff/ #ffffff 16 진수에서 RGB로, HSL, CMYK, XYZ, Yxy, 이진, 10 진수, 헌터 랩, CIE 랩, CIE 루브 컬러 변환 여기에서 16 진수, RGB, HSL, HSV, CMYK, XYZ, Yxy, CMY, 10 진수, 10 진수 RGB, 이진, 헌터 랩, CIE 랩, CIE Luv 색상 변환 정보를 얻을 수 있습니다. 또한 선택된 색상 코드의 음영 및 색조, 보완, 단색, 분할 보완, www.colorcodesla..