전체 글67 [CSS] aspect-ratio 없이 요소 비율 유지하기 크로스 브라우징 이슈로 회사에서 caniuse에서 95%이상 지원되는 css속성만 사용해야 하는데asepct-ratio는 95%가 되지 않아 사용할 수 없었습니다🥹 aspect-ratio없이 어떻게 요소의 비율을 유지할 수 있을까요?바로 padding-top(또는 padding-bottom)을 이용하는 것입니다.⭐️기본적으로 padding값의 백분율은 부모 요소의 width값을 기준으로 계산이 됩니다.⭐️-> 컨테이닝블록으로부터_백분율_계산하기(MDN문서 참고) 이러한 성질을 이용해서 간단한 css 트릭을 만들 수 있습니다. See the Pen without aspect-ratio by JM K (@JM-K-the-selector) on CodePen. 이 상.. 2024. 8. 11. [JS]병렬적으로 비동기 처리하기 비동기를 병렬적으로 수행하는 것에는 크게 3가지 방법이 있습니다. 1. Promise.all 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([.. 2024. 4. 19. [6주차] 데브코스 6주차 복습 관심사별로 API를 어떻게 구분할까? express의 Router 사용하기 //app.js const express = require("express"); const app = express(); app.listen(3000); const userRouter = require("./routes/user"); const videoRouter = require("./routes/video"); app.use("/", userRouter); app.use("/videos", videoRouter); app.js에서는 어떤 관심사로 라우터를 나눌지 작성해줍니다 각 라우터들은 routes 폴더 하위에 파일을 만들어서 추가해줍니다. // routes/user.js const express = require('exp.. 2024. 4. 12. [TIL]HTTP 기본 정리 & REST API 배운 내용과 추가적으로 공부한 내용을 정리했습니다. HTTP HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이다. HTTP는 TCP기반 프로토콜이기 때문에 높은 신뢰성을 보장한다.. 간략한 TCP 특징 오류 없는 데이터 전송 순서에 맞는 전달(보낸 순서대로 도착) 조각나지 않는 데이터 스트림 Method 서버에게 어떤 동작이 취해져야 하는지 말해주는 역할 모든 HTTP 요청 메시지는 한 개의 메서드를 가짐. GET: 서버에서 어떤 문서를 가져온다 POST: 서버가 처리해야 할 데이터를 보낸다. PUT: 서버가 수정해야 할 데이터를 보낸다(전체 수정) PATCH: PUT처럼 수정할 데이터를 보내지만, 일부만 수정한다.. 2024. 3. 17. [모던리액트딥다이브] 1.7 선택이 아닌 필수, 타입스크립트 1.7 선택이 아닌 필수, 타입스크립트 타입스크립트란? TypeScript is JavaScript with syntax for types. (= 자바스크립트 문법에 타입을 추가한 것) 왜 사용하는가? 자바스크립트는 동적 타입 언어이기 때문에 코드를 실행했을 때만 에러를 확인 할 수 있습니다. 하지만 타입스크립트는 빌드 타임에 타입 에러를 확인 할 수 있기 때문에 에러를 미리 찾을 수 있어 디버깅하기에 유리합니다. 타입스크립트를 사용할 때 참고할 팁 1. any 대신 unknown을 사용하자 any 타입은 모든 타입을 받아들이기 때문에 타입스크립트의 이점을 없앱니다. 불가피한 경우에만 사용하는 것을 권장합니다. 타입을 아직 단정할 수 없는 경우에는 unknown을 사용한 후 타입가드를 통해 타입을 좁혀나.. 2024. 3. 10. [2주차 3일] CSS, JavaScript CSS란 무엇일까? Cascading Style Sheets의 약자로, HTML을 꾸며줄 때 사용한다. CSS를 적용하는 방법에는 인라인 : 태그의 style 속성을 사용해서 css를 적용하는 것 내부 스타일 시트: head 태그 안에 style태그를 사용해서 안에 작성하는 것 외부 스타일 시트: 별도의 css파일을 작성하여 link태그를 통해 연결하는 것 CSS TEST 버튼 특정 요소에 스타일을 적용하는 방법 내부 스타일 시트, 외부 스타일 시트 모두 특정 요소에만 스타일을 적용할 수 있다. 태그 이름, 혹은 선택자를 사용하면 된다. 클래스 선택자는 .클래스이름으로 사용할 수 있다. 아이디 선택자는 #아이디이름으로 사용할 수 있다. 일반적으로 선택자의 우선순위는 아이디 클래스 요소 순으로 높다 Jav.. 2024. 3. 9. 이전 1 2 3 4 ··· 12 다음
