PRDEN

1. 하이드레이션 https://react.dev/reference/react-dom/client/hydrateRoot hydrateRoot – ReactThe library for web and native user interfacesreact.dev 2. Next.js Server Component https://nextjs.org/docs/app/building-your-application/rendering/server-components Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the se..

1. Java, TypeScript(정적 언어) 컴파일 시점에 타입 결정하고 그때 오류 발견한다. (JavaScript : 런타임 시점에 타입 오류 확인 가능) 타입 설정하지 않으면 타입스크립트는 any로 설정함. function add(num1:number, num2:number){ console.log(num1 + num2); } add(1,2); // 3 add(); // NaN = undefined + undefined function showItems(arr:string[]){ arr.forEach((item) => { console.log(item); }); } showItems(['1','2','3']) // 1 2 3 2. 타입 지정 let age:number = 30; let isAdul..

제대로 알고 쓰자 1. 등장배경 Front-end frameworks like Vue.js and React.js have arisen primarily to address the challenges and complexities of building modern web applications. These frameworks provide a structured and efficient way to manage the user interface (UI) of web applications. Here are some reasons why these frameworks have become popular: User Experience Demands: Modern web applications require ..

1. 비동기 처리 및 콜백 함수 'Promise는 자바스크립트 비동기 처리에 사용되는 객체'라는 말을 이해해야 한다. 1) 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 그 예시로는 제이쿼리의 ajax, setTimeout()이다. 2) 콜백 함수로 비동기 처리 방식의 문제점을 해결할 수 있다. 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 3) 콜백 지옥(인코딩, 사용자 인증 등을 처리하기 위해 비동기로 처리하다가 콜백 안에 콜백을 계속 물게 되는 형식) : Promise와 Async를 이용해서 해결 가능. 2. Promise 'Promise는 자바스크립트 비동기 처리에 사용되는 객체..

1. SVG란 : SVG란 Scalable Vector Graphics의 약자로 벡터 이미지를 뜻한다. jpg/jpeg, png파일을 크게 화대해 나타내면 이미지 테투리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라하는데 그런 이미지가 SVG이미지이다. 아이콘이나 로고 이미지에 SVG 이미지 파일 형식을 많이 사용한다. 복잡한 데이터를 웹에 표현해주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 바로 SVG 이미지이다.

1. text-align = "center" block 요소 안 inline 요소만 가운데 정렬 된다. https://blog.pages.kr/2556 [html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-a blog.pages.kr 2. display = "flex", justifycontent="center" 3. maring = "0 auto" https://kikit-study.tistory.com/entry/%EC%B4%..

1. flex- container = Parent display : inline-block을 display : flex로 변경하기 display: flex 와 inline-flex 차이 명확히 flex-direction : row(default) vs column // row-reverse, column-reverse flex-wrap : nowrap(default) vs wrap... 2. Main Axis vs. Cross Axis flex-direction : row(default) vs column // row-reverse, column-reverse 3. Flex Items = Children align-items : stretch(default), flex-start, ... align-co..

1. 가상클래스와 가상요소 웹 요소를 클릭하거나 마우스 커스를 올러놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 활용한다. 1) : link, 가상 클래스 선택자 : 방문하지 않은 링크 스타일에 적용 2) : visited : 방문한 링크 스타일에 적용 3) : hover : 마우스 커서를 올려놓았을 때 스타일 적용 4) : active : 웹 요소를 활성화 했을 때 스타일 적용 5) : focus : 웹 요소에 초점이 맞추어졌을 때 스타일 적용 6) : enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때 7) :checked : 라디오 박스나 체크 박스에서 해당항목을 선택했을 때의 스타일 지정 8) :root : 문서 전체에 적용하기 ... ex13) ::befo..

1. outline https://aboooks.tistory.com/228#google_vignette [css] outline 속성, 용도는? [css] outline 속성, 용도는? 오늘 배울 outline 속성은 border 속성과 비슷합니다. border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) boder를 테두리라고 한다면 outline은 border 바깥 외곽 aboooks.tistory.com 2. width: 100%, height: 100% vs. 100vh, 100vw https://shinye0213.tistory.com/372 [CSS] 100%와 100vw/100vh % %는 부모의 영향을 받는다. 정확히 말하면 부..

1. CH10. Making our Website Responsive 1) hardware device pixels vs. software CSS pixels 생략 시 mobile에서 전체화면 전체가 작게 보임. content에 maximum-scale, minimum-scale, user-scaleable,... 넣을 수 있다. 2) viewport metatag vs. @media query viewport : device viewport에 맞게 hardware pixel을 software CSS pixel로 바꿔주는 역할을 함. 그러나 design의 변화는 없음. @media query : size에 따라 디자인 변경 3) mobile first 4)media query 40rem이상이면~ @med..