FE 5

[React]import시 나는 오류 해결법 정리

[참고]프로젝트 기본 설정React, Styled-component, TypeScript, Yarn, VercelCannot find module 'react' or its corresponding type declarations.ts(2307)[문제원인] TypeScript가 'react' 모듈을 찾을 수 없거나 해당 모듈에 대한 타입 선언을 찾을 수 없음[해결방법] React DOM 및 패키지 설치(React DOM 사용시 적용 가능)yarn install --save-dev@types/react An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.ts(5097)[문제 원인] Ty..

FE/React 2024.06.29

[Figma]Figma Intro

1. 탄생배경 웹 --> 모바일 사용자 多 모바일 해상도의 급 부상 포토샵 --> figma로의 트렌드 이전 2. 활용 협업: 비대면 상황시에 유용, 한 파일에서 동시에 작업 가능 기본 디자인: 만들고자 하는 디자인 작업 가능 공간, 쉐어 가능 3. 내가 사용하게 된 계기 FE공부를 하면서 UI, UX디자인에도 관심이 생김 평상시에 디자인관련 잡무를 많이 맡음 만들기 전에 바로바로 해보는 거보다 구상해보고 실행하는 편을 선호함 내 손으로 결과물을 만들어 성취하는 것을 즐김 4. 사용 후기 아직 초창기라 그런지 모든 기능을 체험해보진 못했지만, 28조원의 가치를 가진 이유를 알 것 같은 느낌 앞으로 진행할 웹 프로젝트 시안을 짜는 데 많은 도움이 될 것 같음

FE/UI, UX 2023.03.25

[FE]What is Front-End?

ABOUT FE 1. 프론트엔드란 클라이언트 사이드:사용자 측 처리,CSLvsSSR 반응형 웹:브라우저, 기기, 스크린 사이즈에 따른 지원 웹뷰 구현:프론트엔드의 웹, 앱환경 담당 디자인 구현: 웹 퍼블리셔와 커넥 기능 개발:사용자가 주로 사용하는 기능을 구현 어플리케이션(웹앱) 최적화:로딩, 반응속도, 불필요한 데이터 제거, 비동기 프로그래밍 등 사용자가 최적화된 웹을 경험할 수 있도록 다양한 브라우저, 운영체제 지원:크롬, 웨일, 사파리, 파이어폭스 등 브라우저 별 지원 상이 2. 프론트엔드 VS 백엔드 프론트엔드 사용자가 보는 화면, 사용자 인터페이스 담당 html, css, js 등 하는 일 데이터를 잘(예쁘게)사용자에게 보여주기 디자인을 html, css로 구현 기기, 브라우저, 화면에 맞게 디..

FE 2023.01.12

[FE]What is Next.js?

The React Framework for Production React Next.js는 React로 만든다. 즉, React는 Next.js의 기능과 규칙의 원형이 된다. React vs Next.js React는 클라이언트사이드 렌더링(CSR), Next.js는 서버사이드 렌더링(SSR)의 방식을 주로 채택한다. SSR의 방식의 이점은 다음과 같다. 1. 로딩 시간 감소 CSR의 경우 모든 엔트리 포인트의 렌더링을 담당함으로써 클라이언트 측의 모든 JS파일을 로드한다. 이때 걸리는 로딩 시간이 바로 사용자가 마주하게 되는 빈 화면 상태인데, SSR은 서버에서 이를 모두 렌더링하기 때문에 로딩 시간이 줄어들게 된다. 2. 검색 엔진 최적화 CSR의 경우 검색 엔진이 자바스크립트를 읽는데, 이때 로드되지..

FE 2023.01.11