티스토리

타미.zip

검색하기

블로그 홈

타미.zip

rrecoder.tistory.com/m

Tamii 님의 블로그입니다.

구독자: 23

방명록 방문하기

반응형

주요 글 목록

[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"; .. 공감수 3 댓글수 0 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.. 공감수 1 댓글수 2 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.. 공감수 0 댓글수 0 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 요청 .. 공감수 2 댓글수 2 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에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡.. 공감수 0 댓글수 0 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.. 공감수 1 댓글수 0 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 ) 파일 삭제 초기 상황 이렇게 파일들.. 공감수 2 댓글수 0 2021. 4. 11.
[React] React 의 특징, JSX 이해하기 CSR 클라이언트 사이드 렌더링 data(json)가져와 클라이언트에서 렌더링 하여 결과 보여줌 json데이터만 받아와서 클라이언트 렌더링 하여라 SSR 서버 사이드렌더링 누르면 페이지 새로고침 ( 페이지 이동) html 파일을 가져와서 서버에서 새로 렌더링 📌 SPA ( Single Page Application ) 한 single page에서 데이터 변화가 다 이루어지도록 만든 페이지 새로고침 없이 빠르게 대응하도록 만듦 백엔드 API 제공 -> 클라이언트 template 작업 -> 렌더링 클라이언트에서 data들을 파싱하면서 JS가 복잡해졌다. 많은 모듈들을 어떻게 객체지향형으로 만들까? 그 중에 비동기 이벤트 처리도 완료해야 함 SPA를 위해 필요한 기술 라우팅 클라이언트 사이드 렌더링 상태관리 .. 공감수 0 댓글수 0 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) => .. 공감수 0 댓글수 0 2021. 4. 6.
[React] 리액트의 Hooks 예제로 정복하기 React Hooks functional component에서 state를 가질 수 있게 만듦 class component, componentdidMount, render() 할 필요가 없음 -> 하나의 funciton 이 됨 이것은 함수평 프로그래밍 이라는 뜻이기도 함! recompose + react = 리액트 훅! 📌Class component를 이용한 react (기존 방식) 버튼 클릭시 count 가 하나씩 증가하는 기능 import React from "react"; import './App.css'; class App extends React.Component{ state = { count: 0 }; modify = (n) => { const { count } = this.state; // .. 공감수 0 댓글수 0 2021. 3. 18.
[React ] React Router를 이용하여 component간에 props 넘겨주기 ( (Link & props) react 를 이용하여 navigation bar를 간단하게 만들어보자 navigation bar를 만들어보면서 reactd에서는 페이지 간에 data를 어떻게 연결하고 공유하는지 공부해 볼 것이다. 1) react-router-dom 설치 * npm 으로 설치 npm install react-router-dom * yarn 으로 설치 yarn add react-router-dom 2) Routes 폴더 생성 routes 폴더에는 내가 만들고 싶은(이동할) 페이지 개수만큼 만든다 routes에 3개의 페이지 생성 - Home.js : 메인 영화설명 (영화를 보여주는 페이지 ) - About.js : 웹페이지 소개글 (자기소개 넣을 예정) - Datail.js : 영화 상세 설명 (영화 클릭시 상세설명 페.. 공감수 4 댓글수 0 2021. 3. 18.
[React] 프로젝트 GitHub Pages 배포하기 + Axios 를통해 json data 가져오기 AXIOS fetch위에 있는 작은 layer // asios 설치 npm i axios data fetch하기 보통 Fetch 를 사용하여 data를 load 하디만 asios를 사용해보자 class App extends React.Component{ state={ isLoading: true, movies:[] }; getMovies = async() =>{ const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount(){ this.getMovies(); } render(){ const {isLoading} = this.state; return ( {.. 공감수 0 댓글수 2 2021. 3. 17.
[React] setState and Lifecycle function component //function component function App() { return ( ) ; } return 한 값을 screen 에 표시 class component React class component 에서 가져온 APP component //App은 react component class App extends React.Component{ render( return () ) ; } React component에서 확장한 것들을 screen에 표시 react가 render() 메서드를 자동으로 실행 class component를 사용하는 이융 state : object ,data를 넣을 공간이 있음 data는 항상 변하기 때문에 state와 같은 공간 이 필요 sta.. 공감수 0 댓글수 0 2021. 3. 16.
[ React ] JSX 이해하기 & Proptypes component HTML 을 반환하는 함수 component를 사용해서 ReactDOM.render( , document.getElementById('root') ); JSX javascrtip 안의 HTML Component를 만들고 어떻게 사용하는지 javascript + HTML의 조합 React 의 component 생성 흐름 react application은 오직 하나의 component만 rendering 따라서 -> 모든 것은 apapplication(API) 안에 들어가야함 구현하고싶은 component 파일들을 만들어 API.js에 import 하고 API.js를 index 에 렌더링하는 방식 REACT의 속성을 이용하여 component 불러오기 ❖ 정적데이터 설정 (직접 넣어준 데이.. 공감수 0 댓글수 0 2021. 3. 16.
React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만들기를 해볼 예정! 오예~ 원래 리액트를 웹브라우저에서 실행하기 위해서는 브라우저는 리액트 코드를 제대로 이해하지 못하기(?) 때문에 원시코드로 변경해야 함 webpack , Babel 다운로드 -> 리액트 코드 컴파일 과정을 거쳐야 함 하지만, create react app 하나의 명령을 실행해서 React Web App 을 실행 1) createreact app을 통해 리액트 환경 구성 ex) 한단계 밖 A 디렉토리에서 생성 -> movie_app 이라는 프로젝트 폴더 생성 //npx create-react-app.. 공감수 0 댓글수 0 2021. 3. 16.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.