현재 블로그에서도 Promise.all()를 사용해 데이터를 불러오고 있어 공부 겸 정리해보았다.Promise.all()Promise.all() 은 여러 개의 Promise 들을 비동기적으로 실행하여 처리할 수 있다.Promise.all() 은 여러 비동기 태스크를 동시에(병렬적으로) 실행하고, 가장 마지막 태스크가 완료될 때 완료 상태의 프라미스를 반환합니다.Promise.all() 은 여러 개의 Promise 들 중 하나라도 reject 를 반환하거나 에러가 날 경우, 모든 Promise 들을 reject 시킨다.Promise.all 내부에서는 태스크들의 순서가 제어되지 않기 때문에, 태스크의 순서가 중요한 경우라면 절대로 Promise.all을 통해 관리해서는 안된다. const foodList =..

🍀 비사이드 407 포텐데이X클로바 스튜디오 해커톤 후기 :  AI 서비스 개발올해 새로운 도전으로 24.07.15부터 24.08.10(고도화 트랙 참여)까지 포텐데이 x 클로바 스튜디오 해커톤에 참여했다. 기획자(박예령, 서지연), 디자이너(이희재), 프론트(박민선), 백엔드(박지호)  5인으로 팀 빌딩을 진행 후 발표 준비에 어려움을 겪는 사용자들을 위한 AI 발표 준비 도우미  서비스를 기획, 개발 및 배포하였다.    📌 프로젝트 깃허브, 배포 링크  및 서비스 소개서현재 운영 중인 서비스입니다. 한 번 사용해 보세요!또랑또랑: https://www.ttorang.site/프로젝트 깃허브 : https://github.com/orgs/Ttorangttorang/repositories 프로젝트..

페이지 진입 시 특정 이벤트가 발생하길 원하는 경우가 있어 정리 해보았다. HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다.DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않는다.load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.DOMContentLoaded 이벤트// only documentwindow.addEventListener("DOMContentLoaded", () => { alert..

미뤄두었던 Node, npm 업데이트를 진행했다. Node 현재 버전 확인cmd를 열고 아래 코드를 치면 현재 버전이 나온다.node -v npm 남아 있는 캐시 삭제 npm cache clean --force node 버전 업그레이드mac이나 linux 환경n 설치npm install -g n최신 버전의 node로 업데이트n lts / n latest 윈도우 환경하위 깃허브에 들어서가서 nvm (node version manager) 다운로드 및 설치한다.https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically wr..

웹 용어에 대해 정리해보았다.GNB (Global Navication bar)웹사이트 전체에 동일하게 적용되는 내비게이션 바이다.보통 웹사이트 최 상단에 위치하며 어떤 페이지를 클릭해도 동일하게 보여지며 메인 메뉴이다.  LNB (Local Navigation Bar)GNB를 클릭하거나 마우스를 댔을 때 나오는 하위 카테고리 리스트로 서브 메뉴이다.  SNB(SIde Navigation Bar)보통 왼쪽이나 오른쪽에 위치해 Side라고 표현해 보통 메인 메뉴와 서브 메뉴를 제외한 기타 메뉴로 구성한다.  FNB (Foot Navigation Bar)GNB와 동일하게 모든 웹페이지 가장 하단에 위치한 내비게이션 바로 보통 웹페이지가 기업이라면, 기업의 로고와 연락처, 주소 등 웹페이지의 정보를 기재한다.

가끔 브랜드 웹페이지 랜딩페이지에 스크롤을 유도하는 가이드선을 볼 때가 있어 간력하게 구현해 보았다.scroll guide 구현HTML  CSS⭐ 스크롤할 수 있게 유도하는 것이 중요함으로 적절한 애니메이션 효과를 사용하면 좋다.*{ margin: 0; padding: 0;}section { width:100%; height:100vh; position:relative; background-color: #1c1c1b;}.scroll_guide { opacity: 1; position: absolute; bottom: 0; left: 50%; width: 1px; height: 160px; background: rgba(255, 255, 255, 0.3); transform: t..

svg 태그에 대해 알아보면서 추가적으로 , , 태그에 대해 알아보았다.요소는 그라데이션에 사용할 색상과 위치를 정의할 수 있다.offset : 그라데이션 스톱이 그라데이션 벡터를 따라 어디에 배치되는지를 정의stop-color : 그라데이션 스톱의 색상을 정의stop-opacity : ****그라데이션 스톱의 투명도를 정의  태그를 사용하면 다른 SVG 요소에 선형 그라데이션을 적용할 수 있다.x1 : 기준 축의 시작 점 x좌표y1 : 기준 축의 시작 점 y좌표x2 : 기준 축의 끝 점 x좌표y2 : 기준 축의 끝 점 y좌표gradientTransform (그라데이션 변환) : 그라데이션 좌표 시스템에 대한 추가적인 변환단위 : %See the Pen svg linearGradient by pmin..

svg로 작업을 하던 중 , 태그가 보여 알아보았다.나중에 참조할 그래픽 요소 같은 것들을 담아놓는 공간 요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않는다. 화면에 렌더링 하려면 요소를 통해 참조를 해야 하며 사용 방법은 앞서 다운 요소와 동일하다. 내부에 선언된 그래픽 요소의 id 속성을 요소의 xlink:href 속성을 통해 참조하여 문서 전체에서 사용할 수 있다요소는 문서 전반에 걸쳐 요소를 재사용할 수 있다. x, y, width, height 속성을 사용해 설정이 가능하며, xlink:href 속성을 사용해 재사용할 요소를 호출(식별자 ID 참조) 할 수 있다. 요소를 재사용함으로써 제작 시간을 아낄 수 있고, 코드를 최소화할 수 있다. 기본 사용법See the Pen d..

SVG란?벡터 그래픽을 표현하기 위한  XML 마크업 언어이다. 픽셀 단위로 이미지를 구성하는 png, jpg와는 다르게 벡터 기반으로 이미지를 표현할 수 있다. 벡터 기반이다 보니 이미지를 축소하거나 확대해도 이미지가 깨지지 않고, 용량이 작기 때문에 웹상에서 주로 사용하는 이미지 형식이다.  W3C에서 개발했으며 CSS, DOM, SMIL과 호환된다. 태그란?웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그이다. SVG 이미지를 구현하기 위해서는 태그로 시작하는데 width, height 속성을 사용하여 이미지의 가로와 세로 길이를 조절할 수 있다. HTML 상에 코드를 그대로 넣어줌으로 웹상에서 벡터 이미지를 구현할 수 있는데, 이 장점은 이미지를 따로 로드하지 않아도 된다는 것이다. 이미..

비동기통신, 동기통신은 웹에서 데이터를 주고받는 방식을 설명한다.동기통신(Sync), 비동기통신(Async) 차이점동기(Synchronous)요청과 응답이 동시에 일어난다는 뜻직렬적으로 태스크(task)를 수행 (순차처리)웹페이지를 새로고침하면서 데이터를 불러오는 방식대표적인 예 - Form 제출 : 클라이언트에서 폼을 서버에 제출하면 서버로부터 새로운 웹페이지를 받아서 화면에 표시한다.웹페이지의 전체를 갱신할 수 있게 해주는 기술이 바로 동기(Sync) 통신이다.동기 통신의 장점동기(Sync) 통신은 비동기(Async) 통신보다 코드를 작성하고 이해하는 것이 쉽다.요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있다.동기(Sync) 통신은 요청을 보낸 후에 응답을 받아야 ..