[노트장] 적으며 정리해 보는 이론60 [랜더링] CSR & SSR & SSG 페이지의 랜더링 방식 CSR , SSR, SSG에 대해 정리해보려고 합니다 ◼ CSR Client-side Rendering의 약자입니다. 단어를 보면 Client단어가 눈에 띄는데요.단어에 명시되어 있는 것처럼 서버가 아닌 클라이언트에서 랜더링 하는 방식을 이야기합니다.그렇다고 모든 것을 클라이언트 측에서 해주는 것은 아닙니다.다만 서버 보다 더 많은 비중으로 클라이언트에서 랜더링 작업을 해주는 것이죠. 이미지에서 좀 더 설명을 붙이자면, 그러나 한 번 웹 페이지에 접속하여 데이터를 받아오면, 해당 데이터는 브라우저의 캐시에 저장됩니다. 따라서 사용자가 이미 방문했던 페이지에 다시 접속할 때는 새로운 데이터를 다운로드할 필요 없이, 캐시에 저장된 데이터를 바로 불러와서 표시할 수 있습니다. 이는 페.. 2024. 5. 9. [Next.js] Next.js란 fullstack web applications을 개발하기 위한 React 프레임위크 입니다.즉 FE(프론트엔드) + BE(백엔드) 개발을 Next에서 한번에 작업이 가능하다고 합니다.react의 기능을 가지고 있으며, 몇가지 기능이 추가된 프레임워크기에react의 확장판으로 생각하면 좋을꺼 같습니다. nextjs 공식문서에서 주요 특징을 6가지를 적어 놓았는데요.그 중에서 제일 큰 강점으로 꼽히는 것은,Routing, Randering, Optimizations를 강점으로 이야기를 하고 있습니다. nextjs 13버전으로 업데이트 하면서, 기본적으로 제공해주는 기능들이 너무 좋아 Nextjs의 시대라고 할정도 많은 각광을 받고 있는 워크툴입니다. [참고]https://nextjs.or.. 2024. 5. 8. [TypeScript] 간단한 예시로 작성법 보기 ◼ HOOK useState// useStateconst [values, setValues] = useState({ username: '', password: '',});// 타입 지정const [values, setValues] = useState({ username: '', password: '',}); useRef// useRefconst formRef = useRef(); // form// 타입 지정const formRef = useRef(); 주의useRef() () 의 초기값이 없으면 에러가 납니다.그래서 초기 값( null )을 적어 줍니다. => useRef(null) ◼ EventHandler e.target를 사용할때는 태그 타입을 적어주지만.. 2024. 4. 29. [TypeScript]React에 TypeScript 적용하기(타입지정) ◼ HTMLElement 타입 html의 Dom 을 가르키는 타입 입니다."HTML태그네임Element" 형식으로 태그의 타입이 있습니다. HTMLElement를 작성하면 자동완성으로 나오는 것을 보고해당 Tag에 맞는 타입을 찾아서 사용하면 됩니다. HTMLElement 종류https://night-owl-zz.tistory.com/89 [TypeScript]HTMLElement 태그 타입들◼ HTMLElement 종류태그가 워낙 많은데, 사용하는 태그도 있고 아닌 태그도 있어서, 적어 보았다.많이 사용하지 않는 태그에 대해서는 아래에 설명도 해..night-owl-zz.tistory.com ◼ HTMLAttributes 타입 HTML 요소에 대한 기본 속성(props)을 정의하는 데 사.. 2024. 4. 29. [TypeScript]Event 타입 ◼ Event 종류 이벤트에 대한 이벤트 종류를 정리해 보았다.Event { MouseEvents: { "MouseEvent": "마우스 동작에 대한 이벤트를 처리합니다. 클릭, 이동, 드래그 등이 여기에 해당합니다." }, FormEvents: { "SubmitEvent": "폼이 제출될 때 발생하는 이벤트를 다룹니다. 주로 요소에서 발생하는 submit 이벤트를 다룹니다.", "ResetEvent": "폼이 재설정될 때 발생하는 이벤트를 다룹니다. 주로 요소에서 발생하는 reset 이벤트를 다룹니다.", "InputEvent": "입력 요소의 값이 변경될 때 발생하는 이벤트를 다룹니다. 주로 텍스트 입력, 체크박스 선택 등과 같은 사용자.. 2024. 4. 29. [TypeScript]HTMLElement 태그 타입 ◼ HTMLElement 종류태그가 워낙 많은데, 사용하는 태그도 있고 아닌 태그도 있어서, 적어 보았다.많이 사용하지 않는 태그에 대해서는 아래에 설명도 해놓았다.HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; // 축약어 태그 "address": HTMLElement; "area": HTMLAreaElement; // 이미지 맵(Image Map)을 정의 "article": HTMLElement; "aside": HTMLElement; "audio": HTMLAudioElement; "b": HTMLElement; "base": HTMLBaseElement; // head 기본.. 2024. 4. 29. [TypeScript]React에 TypeScript 적용하기(tsconfig.json) ◼ tsconfig.json tsconfig.json 파일은 TypeScript 프로젝트의 루트 디렉토리에 위치하여, 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정하는 설정 파일입니다. 이 파일을 통해 컴파일할 때 필요한 옵션을 미리 정의하여 명령어에 일일이 지정할 필요 없이 사용할 수 있습니다. JavaScript 프로젝트의 경우에는 jsconfig.json 파일을 대신 사용할 수 있습니다. tsconfig.json 몇가지 옵션 설명{ "compilerOptions": { "target": "es2016", // 어떤 ECMAScript 버전으로 변환할지 (ES7(ES2016),ES6(ES2015)나 ES3 ) "mod.. 2024. 4. 29. [TypeScript] Enum(열거형) ◼ Enum? TS에 Enum은 복잡한 구조를 단순화하고, 가독성을 향상 시키기 위해서 만들어진 객체 타입입니다. Enum은 한국말로 [열거형]이라고 합니다.열거형이라는 단어의 의미는 네이버 사전, 위키백과에서는 이렇게 설명하고 있습니다. 짧게 요약하면, 관련있는 상수 값들을 나열, 집합해 놓은거라 생각하면 될꺼 같습니다. 그리고 TS에만 있는 개념이라 JS로 컴파일을 하면 다른 형태로 변환됩니다.// TSenum Direction { Up, Down, Left, Right}// JS로 컴파일 var Direction;(function (Direction) { Direction[Direction["Up"] = 0] = "Up"; Direction[Direction[.. 2024. 4. 25. [TypeScript] 기본타입 inrelliSense Suggest를 보려면 ?{프로그래밍 환경에서 코드를 작성하는 동안 개발자에게 자동 완성 기능을 제공하는 기능} ◼ 기본 타입let value:string = '문자열'let age:number = 30;let person:boolean = true;let don:undefined = undefined;let son:null = null; ◼ 배열 타입 [배열:하나]const size: number[] = [];size.push(100);size.push(0);[결과] [배열:배열 안의 배열타입]const size: string[][] = [ ['a1','b1'], ['a2','b2']].. 2024. 4. 23. [TypeScript] 타입스크립트란? ◼ TypeScript 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 동적 타입 시스템 + 정적 타입 시스템을 더한 <span style="colo.. 2024. 4. 23. 이전 1 2 3 4 5 6 다음
