본문 바로가기

📗 React15

[React] sticky Header CSS가 변하는 sticky Header 만들기와 최적화 여러 웹사이트에서는 scroll과 관계없이 상단에 붙어있는 sticky header를 자주 사용하고 있는데요, 아래 예시와 같이 특정 영역에서 css가 바뀔 수 있는 header를 만들어 보겠습니다. ⚙️ 사용 스택 : React, emotion/css 📌 기본 구조 생성하기 헤더는 공통적으로 사용할 가능성이 높기 때문에 Header로 분리했습니다. App.js import { css } from "@emotion/react"; import Header from "./Header.jsx"; export default function App() { return ( ); } const wrapStyle = css` `; Header.jsx import { css } from "@emotion/react"; .. 2022. 5. 17.

그림으로 보는 Error Boundaries | Error Boundary의 등장 JS component의 error는 React 상태 흐름을 방해하고 숨은 에러를 발생킨다. 이런 오류로 인해 app 전체를 정지시켜선 안되므로 "error boundary"가 등장했다. ✨ Error bounaries는 자식 component tree 어디서에나 일어난 JS error 를 잡고, error를 loging하고 fallback UI를 보여준다. 다만 아래 error들은 catch 하지 않는다 이벤트 핸들러 비동기 code ( setTimeout ... ) SSR (server side rendering) error boundary 자식이 뱉는 error Error Boundary의 사용처와 Uncaught Errors Error Boundaries는 J.. 2022. 4. 30.

textarea 줄 수에 따라 style 변경하기 ( line count에 따른 border radius설정 및 textarea line count 개수를 이용한 CSS 설정 ) 디자인팀에서 요청이 들어왔다. textarea에 들어가는 line에 따라 border-radius가 달라졌으면 좋겠다는 요청! 문제는 해당 부분을 사용하는 공간의 text area의 width가 고정되어 있지 않다는 점이다. 유저의 기기는 정말 다양하기 때문에 width를 고정할 수 는 없었다 ex) iphone se에서 3줄일게 z-fold에서는 1줄이 될 수 있다.. 😅 1) Textarea의 text value를 줄바꿈 기준으로 split 처음 생각한 방법은 text area의 value를 잡아서 splilting 하는 법! const getCurInputTextLineCnt = useCallback((text) => { const lines = text?.split(/\r|\r\n|\n/); co.. 2022. 4. 25.

[React] OAuth Github 로그인 구현하기 전부터 너무나도 해보고 싶었던 깃허브 OAuth 로그인을 성공적으로 구현했다. 구현단계와 방법을 설명해볼 예정! 📌 프로젝트 구성 * React 함수형 컴포넌트 (jsx) 방식으로 구현한 프로젝트입니다! * BE와 함께한 프로젝트로 BE 단에서는 access-token 발급과 정보 요청을 맡아 처리했습니다. * FE단에서는 code요청한후에 Github 계정 정보를 바로 요청했습니다. 깃허브 로그인 구현을 검색해보면 구현하는 여러가지 방법이 있지만 크게 두가지로 나뉘는 느낌을 받았고, 2번 방법으로 처리했다 . 1) FE단에서 code 요청한 후 POST 로 jwt 요청 : 참고 (https://devhyun.com/blog/post/15) 2) ✅ FE단에서 code 요청한 후 GET으로 jwt 요청 .. 2021. 6. 5.

[React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux) 📌 React의 상태관리는 어떻게 진행되고 있었나? React 에서 서로 다른 component를 연결하는 방법은 props drilling 이다 . top레벨의 components에서 bottom레벨의 components 에겟 속성을 전달해야 한다. < 실제 TodoList 프로젝트 당시 props drilling 상황 Atomic design 패턴을 고려하여 만든 프로젝트를 진행할 당시 * TodoList Column을 누르면 popup이 나오고 * 그 안 (의안의안)의 Buton을 누르면 popup이 닫히는 동작을 작동시킬때 popup state를 끌고끌고 들어가야 했다... 이걸 해결하기 위해서는⭐️ global state가 모든 components에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡.. 2021. 5. 4.

[React] json-server에서 axios 로 데이터 불러오기 json serve 라이브러리를 이용해서 CRUD를 구현해 보자 json-server 설치 npm install -g json-server db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "Javascript", "completed": true } ], "users": [ { "id": 1, "name": "Lee", "role": "developer" }, { "id": 2, "name": "Kim", "role": "designer" } ] } server.js생성 // server.. 2021. 4. 12.

[React] CRA로 프로젝트 초기 세팅 create react app CRA 설치 //npx create-react-app {프로젝트파일명} npx create-react-app movie_app https://rrecoder.tistory.com/96?category=955706 React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만 rrecoder.tistory.com 이렇게 설치를 하면 사용하지 안아도 될 파일과 디렉토리가 넘친다. 나의 새로운 프로젝트를 위해 지워도 될 파일들을 싸그리 지워보자!! 1️⃣ 삭제 1️⃣- 1 ) 파일 삭제 초기 상황 이렇게 파일들.. 2021. 4. 11.

[React] React 의 특징, JSX 이해하기 CSR 클라이언트 사이드 렌더링 data(json)가져와 클라이언트에서 렌더링 하여 결과 보여줌 json데이터만 받아와서 클라이언트 렌더링 하여라 SSR 서버 사이드렌더링 누르면 페이지 새로고침 ( 페이지 이동) html 파일을 가져와서 서버에서 새로 렌더링 📌 SPA ( Single Page Application ) 한 single page에서 데이터 변화가 다 이루어지도록 만든 페이지 새로고침 없이 빠르게 대응하도록 만듦 백엔드 API 제공 -> 클라이언트 template 작업 -> 렌더링 클라이언트에서 data들을 파싱하면서 JS가 복잡해졌다. 많은 모듈들을 어떻게 객체지향형으로 만들까? 그 중에 비동기 이벤트 처리도 완료해야 함 SPA를 위해 필요한 기술 라우팅 클라이언트 사이드 렌더링 상태관리 .. 2021. 4. 11.

ReactHooks 정복하기 1탄 ( useState, useClick ) 기본적인 구조 useHooks라는 Hook이 있을 경우 const useHooks = (initial, ~) =>{ const [ curr, setCurr ] = useState(initial, ~); return { currItem : curr, changeItem: setCurr } } const App = () =>{ const {currItem , changeItem} = useHooks(초기값); {currItem} {changeItem(0)} } 🔥 useState 🔥 useInput (초기값 , 유효검사function) input 을 넣고, 원하는 입력 조건에 해당하는 값만 받기 //useInput Hooks const useInput = (initialValue, validator) => .. 2021. 4. 6.

이전 1 2 다음

티스토리툴바