[TypeScrip.js] alt 속성에 대하여
2024. 6. 17. 10:13
Frontend/React.js
이전에 react.js로 작성했던 코드들을 typescript.js로 바꾸는 작업에서 아래와 같은 에러가 발생 WARNING in [eslint] src/components/EmotionItem.tsx Line 22:7: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text 기존에는 alt를 따로 설정하지 않았어서 아래와 같이 추가해주었다. alt이란?alt 속성은 HTML의 img 요소에 사용되며, 이미지의 대체 텍스트를 제공하는 역할을 합니다. alt 속성의 주요 목적과 역할은 다음과 같습니다: 접근성:시각 장애인이나 저시..
[React.js] 페이지 라우팅
2024. 6. 12. 15:01
Frontend/React.js
MPA (Multi Page Application)애초에 서버가 여러개의 페이지를 가지고있어서 요청하면 해당하는 html을 반환하여 렌더링함 많은 서비스가 사용하는 전통적인 방식 쾌적한 페이지 이동을 제공하기 어려움 페이지를 이동할때마다 원래 렌더링했던 페이지를 지우고 새로운 페이지를 다시 화면에 그려줌-> 이렇게 되면 이동할때마다 화면이 깜빡 거리는걸 볼 수 있음 (예전에 만든 대법원 사이트 참고) 서버는 동시에 아주 많은 사용자가 페이지에 접속하게되면 서버 부하가 심해짐 접속대기열 혹은 사이트가 터져버리는 현상이 생길 수 있음 SPA(Single Page Application)단일 페이지 어플리케이션 페이지 이동이 매끄럽고 효율적임다수의 사용자가 접속해도 크게 상관 없음 번들링 과정은 Vite..
[React.js] Context
2024. 6. 12. 14:28
Frontend/React.js
Context란?컴포넌트간의 데이터를 전달하는 또 다른 방법기존의 Props가 가지고있는 단점을 보완 Props의 단점props를 계층구조상에서 B까지 전달하려면 A한테 주고 A한테서 받는 형태로 진행했어야했음 서비스의 규모가 커져서 많은 컴포넌트들을 거쳐야하는 상황에서 굉장히 좋지 않음 React Context로 해결! React Contextcontext : 데이터 보관소(객체) context에 보관해놓고 필요한 곳에 데이터를 공급하는게 가능함 //보통 컴포넌트 외부에서 생성 const TodoContext = createContext(); import "./App.css";import { useRef, useState, useReducer, useCallback, createCont..
[React.js] 최적화
2024. 6. 12. 14:03
Frontend/React.js
최적화란?웹 서비스의 성능을 개선하는 모든 행위를 일컫음아주 단순한 것부터 아주 어려운 방법까지 매우 다양함 일반적인 웹 서비스 최적화 방법서버의 응답속도 개선이미지,폰트,코드 파일 등의 정적 파일 로딩 개선불필요한 네트워크 요청 줄임 . . React App 내부의 최적화 방법컴포넌트 내부의 불 필요한 연산 방지컴포넌트 내부의 불 필요한 함수 재생성 방지컴포넌트의 불 필요한 리렌더링 방지 최적화를 언제하면 좋은지?기능 구현최적화 어떤 것들이 최적화 대상이 되는가?유저의 행동에 따라 개수가 굉장히 많아질 수 있는 컴포넌트함수를 굉장히 많이 가지고 있는 컴포넌트최적화가 꼭 필요한 것에만 해주기! (사소한 것은 제외) useMemo"메모이제이션" 기법으로 불 필요한 연산을 최적화 하는 리액트 훅 cons..
[React.js] 라이프 사이클
2024. 6. 11. 18:46
Frontend/React.js
라이프사이클이란?LifeCycle = 생애주기Mountlike 탄생컴포넌트가 탄생하는 순간 (A 컴포넌트가 마운트 되었다)화면에 처음 렌더링 되는 순간서버에서 데이터를 불러오는 작업Updatelike 변화컴포넌트가 다시 렌더링 되는순간리렌더링 될 때를 의미어떤 값이 변경되었는지 콘솔에 출력UnMountlike 죽음컴포넌트가 화면에서 사라지는 순간렌더링에서 제외 되는 순간을 의미 컴포넌트가 사용하던 메모리 정리 컴포넌트의 라이프 사이클 단계별로 컴포넌트들이 각각 다른 작업을 수행하도록 하는 것을 라이프사이클 제어라고 하는데, React Hook인 useEffect를 활용할 수 있다. useEffect리액트 텀포넌트의 사이드 이펙트를 제어하는 새로운 리액트 훅사이드 이펙트 : 우리말로 부작용이라는 뜻이지..
[React.js] 리액트 입문
2024. 6. 11. 11:58
Frontend/React.js
Component HTML 태그들을 반환하는 함수를 함수 컴포넌트라고 부른다.클래스로도 만들 수 있으나 직접 작성해야하는 코드의 양이 어마어마해지기때문에 함수로 만드는게 일반적이고 대중적임 컴포넌트를 생성하는 함수의 이름은 첫글자가 대문자여야함 App component를 root component로 설정하여 사용하는게 관례 (App component 의 자식 컴포넌트로 있어야 화면에 렌더링되어 보여짐) 모듈화를 위해 컴포넌트별로 파일을 각각 나눠서 작성src - components 파일 생성 - 하위에 파일 생성 리액트 앱으로 개발할때는 es모듈시스템을 사용하지만 import 할때 확장자까지는 작성하지 않아도 됨 JSX (JavaScript Extensions)확장된 자바스크립트의 문법React.j..
[React.js] React.js 개론
2024. 6. 11. 11:06
Frontend/React.js
React.js란?Meta(facebook)이 개발한 프론트엔드를 위한 오픈소스 JavaScript 라이브러리대규모 웹 서비스의 UI를 더 편하고 빠르게 개발하기 위해 만들어진 기술 [ React.js로 만들어진 서비스 ]넷플릭스 페이스북 인스타그램 노션 기술적인 특징컴포넌트 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 ( 명령형 프로그래밍)업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있음.화면 업데이트가 빠르게 처리된다. Rander Tree: 웹페이지의 청사진Layout: 요소의 배치를 잡는 작업 Painting : 실제로 화면에 그려내는 과정 Lay..
[Node.js] Node.js 기초
2024. 6. 11. 10:36
Frontend/Node.js
패키지Node.js에서 사용하는 프로그램의 단위 패키지 생성 방법vscode에서 터미널(command + J) 열어서 명령어 npm init입력npm init packagege name vversion (배포할때 의미있음)description(패키지 간단한 설명)entry point (메인으로실행될 js파일) test commandgit repositorykeywordauthorlicense..필요한 정보들 기입 (넘어갈땐 enter 눌러서 진행) node를 이용해서 실행할 수 있음node {실행시킬 파일 이름)//폴더 안에있는 파일을 실행할 때node 경로/{실행시킬 파일 이름) 경로가 복잡해질때는 패키지 스크립트를 이용하면 좋다.package.json 파일안에 해당란에 작성해주고, 명령어 실행"sc..