분류 전체보기 (372) 썸네일형 리스트형 [Next.js] CSS Module React에서 했던 것처럼 index.tsx에 관한 CSS 파일을 index.css로 만들어서 import './index.css'로 import 하면 다음과 같은 에러가 발생한다.Global CSS cannot be imported from files other than your App.(전역 CSS는 App 파일 이외의 파일에서는 import할 수 없습니다.) 이는 Next.js가 _app.tsx의 App 컴포넌트가 아닌 다른 파일에서 CSS 파일을 그대로 불러오는 걸 제한하고 있기 때문이다.이렇게 제한하는 이유는 다른 페이지에 작성된 CSS 클래스명과 충돌을 일으킬 수 있기 때문이다. 예를 들어, 아래와 같은 CSS 파일이 있다고 하자.index.css.h1 { color: red;}test.cs.. [Next.js] 프리페칭(Pre-fetching) 프리페칭은 Pre(사전에, 미리)-Fetching(불러온다) 즉, 사용자가 현재 보고 있는 페이지에서 링크로 연결된 모든 페이지를 사전에 불러오는 기능이다. 페이지 이동을 빠른 속도로 지체없이 처리하기 위해 만들어진 기능이다. 그런데..! Next.js의 사전렌더링 방식에 대해 알고 있다면 의문이 들 수 있다. Next.js는 서버가 브라우저에 사전 렌더링된 HTML 페이지를 응답한 후, 후속으로 모든 JS 파일을 번들 파일로 전달한다. 이 때문에 초기 접속 요청이 종료된 이후의 페이지 이동은 서버에 별도의 요청 없이 브라우저 측에서 직접 JavaScript 코드를 실행시켜 컴포넌트를 교체하는 방식(CSR)으로 이루어진다. CSR을 사용하는데 왜 Pre-Fetching이 필요할까?Next.js는 모든.. [Next.js] 사전렌더링 React의 CSR사전렌더링을 알아보기에 앞서, React의 CSR(Client Side Rendering) 방식을 되짚어보자. 이 방식은 초기 요청 시 서버로부터 받은 JS Bundle 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다. 그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 앱을 실행해서 컴포넌트를 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. 하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bundle을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지 오랜 시간이 소요되므로 초기 접속 시간(FCP, First Contentful Paint)가 느리다. Next.js의 사전렌더링Next... [SSAFY] 자율프로젝트 회고 및 2학기 수료 후기 SSAFY에서의 마지막 프로젝트인 자율 프로젝트가 어느덧 끝나게 되었다.취업 준비와 병행하며 힘들었지만, 가장 얻어가는 게 많은 의미있는 프로젝트이기도 하다. 프로젝트 소개누구나 쉽게 LLM 챗봇을 만들 수 있도록 돕는 플랫폼 "Flow Studio"를 개발했다. 복잡한 코딩 없이도 블록코딩으로 챗봇의 대화 흐름을 눈으로 보면서 쉽게 조작할 수 있도록 하였고, 챗봇을 공유하여 커스터마이징 할 수 있는 기능과 챗봇의 성능을 분석하는 기능이 기존 챗봇 제작 플랫폼과의 차별점이다. https://github.com/minseonkkim/FlowStudio GitHub - minseonkkim/FlowStudio: 🤖 누구나 쉽게 만드는 LLM 챗봇 제작 플랫폼🤖 누구나 쉽게 만드는 LLM 챗봇 제작 플랫.. [Javascript] 자바스크립트 모듈 (export, import) JavaScript에서 모듈을 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 다른 파일에서 필요한 기능만 가져다 쓸 수 있다. 자바스크립트 모듈의 기본 개념과 export, import의 사용법을 알아보자.HTML 파일에서 자바스크립트 모듈을 사용하는 방법 type="module" 속성을 사용하면, 해당 스크립트 파일이 모듈로 처리된다.export와 import 사용법1. 개별 함수 내보내기 및 불러오기// hello.js export function hello1() { console.log("Hello 1!"); } export function hello2() { console.log("Hello 2!"); } // main.js import { hello1, hello2 }.. [Typescript] unknown과 any의 차이 1. unknown 타입은 any를 제외한 다른 타입에 할당할 수 없다. Typescript 3.0 버전부터 추가된 타입이다. any와 마찬가지로 모든 타입의 값을 할당할 수 있다.그렇다면 그냥 any로 사용하면 되지 왜 unknown이 필요한걸까? typescriptlang.org의 설명에 따르면 unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없다.반면 any는 never를 제외한 모든것에 할당 가능하다. 조금 더 쉽게 코드로 예시를 들어보자면, let varr:unknownlet booleanType:boolean = varr // Type 'unknown' is not assignable to type 'boolean'let bool:boolean = truelet unkw:unk.. [React] useState 사용법과 동작원리 useState란?state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 react는 자동으로 UI를 업데이트 시킨다. 다음 예제에서 name은 state가 아니고 단순 변수이기 때문에 버튼을 클릭해도 화면에 표시되는 이름이 바뀌지 않는다.export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( state {name} Change );} state로 만들기 위하여 react hook 중 하나인 useState를 사용한다.https://legacy.reactjs.o.. [SSAFY] 공통프로젝트 회고 (feat. 최우수상🏆) 7주간의 공통프로젝트가 끝났다!! 열심히 달려왔고 목표로 했던 수상, 그것도 1등을 해서 너무 뿌듯한 프로젝트로 기억에 남을 것 같다. 이대로 보내주기 아쉽지만 보내줄 때가 되었으니 회고를 써보려 한다.프로젝트 소개서비스명은 키즈링크, 유치원과 학부모를 연결하는 서비스이다. 유치원 선생님이 겪는 잡무와 학부모의 갑질 문제를 해결하고, 학부모의 입장에서 아이의 안전에 대한 걱정과 상담을 위해 유치원을 방문해야 하는 번거로움을 줄이기 위해 이 프로젝트를 기획했다. 핵심 기능은 AI 아이별 사진분류, 화상상담 예약 자동 일정 조율, 실시간 화상상담, 상담 중 폭언 감지, 등하원버스 실시간 위치 확인이고 부가 기능은 알림장, 성장일지, 서류관리, 일정관리가 있다. 이 프로젝트에서 나는 선생님용 서비스의 전체적인.. 이전 1 2 3 4 ··· 47 다음 목록 더보기
