본문 바로가기

Front-End Study89

Next.js 기본 Next.js는 무엇인가🏷️ 초기 로딩이 느리고 검색 엔진에 제공하는 정보가 적은 리액트의 단점을 커버한 프레임워크pre-rendering을 통해 미리 렌더링할 정보를 저장하거나 서버가 그때 그때 렌더링하여 화면을 출력한다.Vercel를 통한 서버 호스팅을 이용해 빠른 코드 배포가 가능하다.파일 시스템 기반 라우팅을 통해 편하게 페이지를 나누고 개발이 가능하다.어떻게 만들어야 할까?🏷️ 생성 과정npx create-next-app을 이용해 프로젝트를 생성한다.파일 정리 및 기초 세팅 후 npm run dev을 통해 개발자 모드를 열어 개발한다.🔖 프로젝트 초기 구성project |- components |- lib |- pages |- public |- styles eslintr.. 2024. 5. 27.
타입스크립트.. 누구냐 너 타입스크립트는 뭐지?🏷️자바스크립트를 포함하는 상위 확장자(superset)이라고 할 수 있으며, 기존의 동적 타이핑 언어이던 자바스크립트에 타입을 부여하여 정적 타이핑 언어로 변환한 언어를 지칭🔖자바스크립트를 기반으로 동작하기 때문에, 사용되려면 자바스크립트로 변환되는 "컴파일" 과정을 거쳐야 한다.타입스크립트를 사용하는 이유는?🏷️타입을 정의하여 사전에 버그를 예방 가능하다.타입스크립트는 컴파일 과정에서 타입을 결정컴파일 과정에서 타입을 정의하기 때문에 컴파일 시 에러 예방🏷️높은 생산성을 제공한다.기존 자바스크립트와 다르게 변수의 이름 뿐 아니라 데이터의 자료형까지 전부 파악 가능🏷️강력한 호환성을 가진다.기존 자바스크립트의 상위 확장자이므로, 자바스크립트 코드를 가지고 확장하는 형식으로 .. 2024. 5. 24.
타입스크립트 기본 문법 정리 기본형🏷️종류와 타입종류 타입 문자열 string 숫자형 number 불린형 boolean undefined undefined null null 배열과 튜플🏷️배열은 타입을 적은 후 [] 붙이기, 튜플은 개수와 순서가 정해져 있으므로 [] 안에 순서대로 타입을 구분// 배열const cart: string[] = [];cart.push("c001");cart.push("c002");// 배열의 배열const carts: string[][] = [["c001", "c002"], ["c003"]];// 튜플let mySize: [number, number, string] = [175, 30, "L"];객체 타입🏷️{} 내부에 프로퍼티 네임 작성 후 콜론, 타입 작성🏷️각 프로퍼티는 세미콜론으로 구분?.. 2024. 5. 18.
기초 프로젝트를 마치며 비교적 짧은 기간 동안 진행된 코드잇 기초 프로젝트를 마쳤다👍이번 프로젝트는 프로젝트 주제도 정해져있는 것들 중에 선택하는 것이었고, 또 기본적으로 API들도 모두 제공되어 정말 지금까지 공부한 기초적인 내용을 써먹어보는 구성으로 진행했다.물론 간단한 프로젝트였고, 앞으로 해나갈 공부나 프로젝트들에 비하면 작은 걸음이지만 나름 느낀걸 작성해보고자 한다😁어떤 프로젝트?1. 프로젝트의 목적이번에 우리팀이 진행한 프로젝트는 온라인 롤링페이퍼 서비스를 구현하는 것을 목표로 진행했다.주제는 한정적이었고, 함께 진행하는 팀은 많았기 때문에 여러 팀과 주제가 겹치지도 했고 이미 선정한 주제를 가지고 진행하는 것이라 한계가 정해져있는 프로젝트라고 볼 수 있었지만, 주어진 시간과 한정된 자원을 이용해서 기본적인 요구.. 2024. 5. 17.
SCSS 기본 정리 SCSS란✏️SCSS는 CSS 전처리기 라이브러리 중 하나로, 컴파일을 통해 CSS의 확장 문법을 다룰 수 있다.// 기존 CSS에선 불가능한 여러가지 문법을 지원.container { width: 50px; .box { color: red; }}SCSS 데이터 종류데이터설명예시Numbers숫자1, .82, 20px, 2em...Strings문자bold, relative, "/images/a.png", "dotum"Colors색상 표현red, blue, #FFFF00, rgba(255,0,0,.5)Booleans논리true, falseNulls아무것도 없음nullLists공백이나 ,로 구분된 값의 목록(apple, orange, banana), apple orangeMapsLists와 유사하.. 2024. 4. 27.
CSS-IN-JS에 대하여 CSS in JS🔖CSS in JS는 CSS 스타일을 JS 코드 안에 포함하여 작성하는 패턴을 의미한다. 대표적인 라이브러리로 "Styled-components"가 있다.✅장점스타일을 JS 파일에 직접 작성함으로서 캡슐화에 유리하다. 이를 통해 스타일 간의 충돌을 완화하고 유지보수를 용이하게 만든다.JS코드와 비슷한 작성법을 이용하여 동적으로 스타일링하기에도 용이하다.CSS 로드 우선순위 이슈 또한 해결할 수 있다.🚫단점기존의 CSS 작성법과는 어느정도 차이가 있다보니 학습 곡선이 높다.(실제로 내가 그렇다.)JS를 통해 스타일이 동적으로 생성되어 성능 오버헤드가 발생할 수 있다.일부 브라우저에서 지원되지 않을 수 있다.➡️솔직히 아직까진 기존의 작성법이 편하기도 하고, 현재는 Tailwind 등 간.. 2024. 4. 25.

티스토리툴바