꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서풀스택 개발을 진행하면서 사용자의 입장을 우선으로 하여 사용자 경험을 최우선으로 개발하려 노력합니다. 얼마 전에 읽은 책에서"개발하는 사람이 수고롭다면 사용하는 사람이 편리하고, 개발하는 사람이 편리하다면 사용하는 사람이 수고롭다" 라는 말을 되새겨 봅니다! Prefetching이란 무엇인가?프리페칭은 데이터가 실제로 필요하기 전에 미리 데이터를 가져와 캐시에 저장하는 과정을 말합니다. 이러한 프리페칭 기술을 통해 데이터를 미리 캐싱하면 사용자 경험을 향상할 수 있습니다. 간단히 설명하면💡 미리 필요할 수 있는 데이터를 가져오는 것을 의미합니다. 대표적으로 페이지네이션과 특정 탭을 누를 확률이 높은 곳에서 프리페칭을 많이 사용합니다.화면이 부드럽게 이동하고 캐싱데이터에 액세스 해서..

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다.   기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다. 한줄 효과 기존 CSS 방식p { width: 6rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clam..

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..

🤷‍♂️ 본론에 앞서프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교https://cometruedream.tistory.com/224 프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교🐣모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일cometruedream.tistory.com 🤷‍♂️ 로컬 개발 환경 CORS 오류?프론트 개발을 하다 보면 로컬 환경에서 API CORS 오류가 빈번..

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다.  🤷‍♂️ FSD 아키텍처란?FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다.  프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유https://cometrued..

🤷‍♂️ 본론에 들어가기 앞서 React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다. 🤷‍♂️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택 input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법 select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다. EX: App() {..

🤷‍♂️ React에서 동일한 파일 업로드 구현 프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우 input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 파일 업로드 과정 브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수..

immer 란? React에서 불변성을 유지하느라 난잡해진 코드를 짧고 간결하게 불변성을 유지할수 있게 도와주는 라이브러리이다. 반대로 immer 사용함으로 짧은 코드가 길어지는 경우도 있다. 불변성 개념 불변성이란 기존의 상태 값을 유지하면서 새로운 상태 값을 추가하는 것을 의미한다. 불변성을 지키는 이유 만약에 list OR 상태 값을 리렌더링 하고 싶을때가 있다고 가정한다. state.push({ title: "값 추가" })을 통해서 배열에 직접 10이라는 값을 추가한다. React에서는 해당 state라는 값은 새로운 참조값으로 바뀐것이 아니기 때문에 push 이전에 값가 push 이후에 값에 state 참조하는 메모리값이 같다고 판단하여 리렌더링이 일어나지 않는다. 이러한 이유로 state 값..

리액트 & 타입스크립트 활용해서 장바구니 기능 구현했다. 웹/앱 개발에서 중요한 CRUD 기능 및 useReducer 활용해서 생산성이 좋게 설계해서 만듬. 기본적인 프로그래밍에 개념과 가장 기본적이 hooks 활용에 대해서 깊이 공부할 수 있다. javascript filter, reduce, map, switch 활용했다. useReducer 미리 숙지하고 하면 유용하게 사용할 수 있다. useReducer: useState처럼 state생성하고 관리하는 hook 이다. useReducer 잘사용하려면 3가지를 알아두면 좋다. Reducer, Dispatch, Action Reducer: State 상태를 업로드하는 역할 Dispatch: Reducer 요구를 하는 역할 Action: 어떤 요구를 보..

리액트 & 타입스크립트를 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. 사용자에게 정보를 제공할때 사용된다. 🙆‍♂️ 리액트 재렌더링 조건을 미리 숙지하고 있으면 이러한 기능을 만들때 유용하다. 렌더링 조건 1. state(상태) 변경이 되었을때 렌더링 2. 새로운 props가 전달될때 렌더링 3. 기본 props가 업데이트될때 렌더링 4. 페이지에 처음 들어올때 렌더링 Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/react-camp GitHub - yoogukhyeon/react-camp Contribute to yoogukhye..

Next.js typescript 프로젝트 구축, 보일러 플레이트처럼 만들어 놓고 쓰면 좋을꺼 같다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/next-boilerplate GitHub - yoogukhyeon/next-boilerplate Contribute to yoogukhyeon/next-boilerplate development by creating an account on GitHub. github.com structure 구조 pages, components, config, public, styles, .babelrc pages: next에서 auto routing 되는 페이지를 생성한다. components: 재사용 ..

🤷‍♂️ React 로그인후 로그인 이전페이지로 이동하는 방법. 1. 커뮤니티에서 페이지 이동시 navigate에 state에 pathname 값을 할당 2. 커뮤니티에서 login 페이지로 이동하고 로그인 후 다시 커뮤니티 페이지로 이동 Router Header Login 이동 1. react-router-dom에 useLocation 사용 2. pathname으로 현재 페이지 path값을 찾고 login 이동시 state에 현재 페이지 path를 넣어준다. Sign in 이동 1. react-router-dom에 useLocation 사용 2. useLocation에 state 찾는다. 3. 로그인 성공 후에 navigate에 받아온 state 값으로 이동시킨다. url로 접속 하게되면 state 없..

git address: https://github.com/yoogukhyeon/react-study-group/tree/api 🤷‍♂️ json-server란? 프론트엔트 사이드프로젝트 혹은 개발을 하다보면 server 데이터가 필요합니다. 백엔드 개발에 많은 시간을 사용할 수 없다면 json-server를 활용해서 API서버를 만들수 있습니다. 이런 경우에 필요한 도구가 json-server 입니다. 참고로 이 도구는 프로덕션에서 사용하기위하여 만들어진것입니다. 실제 운영에서는 사용하시면 안됩니다. * 프론트엔드 테스트 용도 1. json-server npm 설치 npm i -D json-server //dev에 설치 프로젝트 package.json에 scripts 추가 "scripts": { "sta..

📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으로 바벨등등을 사용하여 트랜스파일러로 javascript 형태의 코드로 변환이 된다.JSX 문법은 반드시 부모요소 하나가 감싸는 형태 여야한다. 문법으로 부모요소를 만드는 경우가 많다. JSX에서 javascript 표현식을 작성하려면 {}로 코드를 감싸줘야한다. {isLoading && Loading} JSX에서 class사용이 아닌 className을 사용한다.🤳React-query 란?  React-query는 서버 상태 라이브러리 입니다. 서버와 클라..

리액트 프레임워크중에 꼭알아야할 React hooks 중에 가장 중요한 useState 상태관리 입니다. useState 간단하게 컴포넌트 상태를 간단하게 생성하고 업데이트를 시킬수있는 도구를 제공합니다. 기본 문법은 useState import시키고 import React, {useState} = 'react'; const [state, setState] = useState(초기값) 이런 문법으로 사용하실수있습니다. state를 변경시키고 값을 할당할때는 setState로 값을 할당할수있고 state변수에 저장된다. useState 활용방법 입니다. **** setNumber(number + 1) 보다는 setNumber(preNumber => preNumber + 1) 활용하자 기존 값을 업데이트 하..