PRDEN

1.  자바스크립트에서 외부 사이트(웹이 아니여도 가능)를 호출해 브라우저로 띄우는 방식 (Post 방식으로 파라미터 바인딩 가능)- 새로운 브라우저 윈도우 오픈 -> form을 동적으로 생성 후 특정 URL로 전송(POST)방식 이용const externalSystem = () => { // Part1 const newWindow = window.open("", "newWindow", "width=600,height=400"); newWindow?.moveTo(0, 0); newWindow?.resizeTo(1300, 800); /* • window.open() creates a new browser window or tab. The first argument (..

React Query의 이점1. 캐싱 반복적인 비동기 데이터 호출 방지, 최신데이터 : fetch, 기존데이터 : stale 2. Client 데이터와 Server 데이터간의 분리  3. React-Query가 데이터를 다루는 방법 : Context API 기반server 데이터를 관리하는 QueryClient가 Query를 사용할 때 명시하는 Key 기반으로 데이터를 저장한다. QueryClient는 단순히 서버에서 불러온 데이터를 저장하는 용도로 사용 4. get의 useQuery첫 번째 파라미터로 unique key를 포함한 배열이 들어간다. 이후 동일한 쿼리를 불러올 때 유용하게 사용된다.첫 번째 파라미터에 들어가는 배열의 첫 요소는 unique key로 사용되고, 두 번째 요소부터는 query ..

1. Next-Auth소셜로그인, 자체 로그인 구현 쉽게 가능.  https://next-auth.js.org/getting-started/example Getting Started | NextAuth.jsThe example code below describes how to add authentication to a Next.js app.next-auth.js.org

CSS Module -> SASS로 && UI Framework (Ant Design or MUI)섞어서 사용. TailwindCSS && Headless UI(무제한 사용은 유료임)CSS-in-JSCSS-in-JS libraries such as styled-jsx, styled-components, and emotion 특징1. Styled JSX- Next.js의 내장 기능으로 별도의 패키지 설치 필요없음2. 자바스크립트 코드 안에 정의한 CSS는 실행 도중 또는 컴파일 시점에 CSS로 변환된다.  단점 :1. 코드 내에서 CSS에 대한 의존성이 점점 더 커지며, 애플리케이션 번들이 커지고 느려지게 될 가능성이 있다. -> 큰 사이트 적절하지 않음. 2. 서버가 미리 CSS 규칙을 생성해 놓아도 클..

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%..