React

React👨‍💻 프론트엔드 기술에서 빠질 수 없는 기술 React 를 익히는 첫 날이다! React는 Javascript 사용자 인터페이스 (UI) 라이브러리 라고 보면 된다. 프레임워크와 착각 할 수 있지만 엄연히 다르다.

우선 SPA 라는 개념을 알아야한다!SPA는 single page application 는 하나의 페이지로 구성된 애플리케이션입니다.이전 웹페이지 같은 경우 페이지의 개수마다 HTML 파일이 존재했지만SPA로 작업된 웹페이지는 단 한 개의 HTML로 구성되어있습니다!

댓글창 구현하기😎 우선 자신이 작업해야 될 큰 그림을 알고있는 것이 좋다고 생각한다! 댓글창을 구현 하려면 어떤 작업을 해야할까! 댓글입력 값 저장 --> 댓글입력값 저장될 곳 지정 --> 엔터,클릭시 입력값 출력장소로 이동--> 댓글출력 댓글입력 값 저장 댓

어떤 함수가 input / output이외의 다른 값을 조작한다면, 이 함수는Side Effect가 있다고 표현합니다!함수컴포넌트에서는 외부세계에 영향을 주는 어떠한 행위입니다.대표적으로 Data Fetching, DOM에 직접 접근(ex. Event Listener

상수데이터 👨‍💻 상수데이터란 변하지 않는 데이터, UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터 1️⃣ 상수데이터를 사용하는 이유 반복적인 구조가 보일 때 달라지는 부분들의 데이터를 배열형태로 분리시켜

SASS 🎨 > sass는 css 전 처리기 입니다. sass 문법이 css로 변환해주는 것! nesting, mixin, 변수 를 이용해 스타일시트의 유지보수와 가독성을 좋게 만들어 줍니다. 설치방법 --save 를 적는이유는 package.json 설치된 패키

이번 1차 프로젝트를 하면서 새로 배운것이 있다.바로 API 주소를 JavaScript파일을 새로 만들어 변수처리해서 사용하는 것이다.이번 프로젝트는 3명의 백엔드 분들이 있어 서버를 하나로 합치기 전 까지3명의 API 주소를 바꾸면서 데이터를 맞춰봐야 했다.이 얼마나

Advanced Router

useRef란 React에서 제공하는 hook 중에 하나이며DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 된다.React에서 제공을 해주는 hook이기 때문에컴포넌트 최상단에 react와 같이 import를 합니다.컴포넌트 내 상단에 useRef(

버튼클릭으로 원하는 컴포넌트 렌더링하는 방법

이미지,동영상 업로드 후 미리보기

defaultProps React에서 props를 받아오는 방법은 간단합니다. 일

useCallback, useMemo

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

스크롤 퍼센트 구하기 > 이전 글에는 요소의 절대위치를 구하는 글을 적었습니다. 이번에는 현재 내가 얼마나 스크롤을 했는지 퍼센트를 구하는 방법입니다! > ( 스크롤 된 높이+ 보고있는화면(viewport)높이 ) / 전체문서높이 * 100 활용하기 Element

틱택토 만들기 > React 공식문서 자습서에 나와있는 틱택토를 타입스크립트와 함수형 컴포넌트로 작업했습니다. > > buildTool: React-Create-App style: styled-component type-check: TypeScript github :

React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다.child (첫번째인자) : ReactChildrencontainer (두번째인자) : DOM 엘리먼트react프로젝트의 h

Context API

Component UI 지금까지 사용해본 React UI 라이브러리는 두 가지 라이브러리입니다. 대표적인 Component UI 방식입니다. Antd MATERIAL-UI 라이브러리를 사용해본 장점으로는 기본값으로 style이 지정되어있고 styled-componen

이전에 블로그에 적었던 버튼 클릭 후 원하는 컴포넌트를 렌더링 하는 방법을 고도화했어요\- Headless 기반으로 제작하여 원하는 방식으로 스타일을 지정할 수 있도록 대응\- 키보드 이벤트를 추가해서 화살표 이동에 따라 TabItem이 Focus가 되어 해당 Tab의

유저가 다운로드 버튼을 클릭할 시 서버에서 받은 이미지 URL을 파일로 저장!다운로드 버튼은 공통적으로 많이 사용할 것 같아 utils 폴더의 downloadFile.ts에 작업했습니다.이미지 URL과 fileName을 받도록 해서 fileName을 넘기지 않을 경우공

프로젝트에서 아이콘을 사용할 때 SVG이용을 많이합니다.기본 사이즈의 png 나 jpg를 이용하면이미지가 깨질 수 있어 svg 이용을 많이 이용하게 됐어요하지만 메인 페이지의 배너 같이 1920사이즈 같은 경우는 svg로는 용량이 무겁기 때문에png파일 크기를 x3을

React의 다양한 라이브러리 중에 아이콘을 편하게 사용할 수 있도록 지원해 주는 라이브러리가 있어요!Lucide React, Radix Icon을 컴포넌트처럼 사용하는 방법을 알려드릴게요.아이콘을 사용할 때마다 아이콘의 이름을 매번 import 하는 것이 너무 싫었어