REACT
-
페이지의 특정 부분으로 스크롤하는 방법프론트엔드 개발자가 될거야./react 2023. 8. 7. 17:07
구현 중에 버튼을 누르면 해당부분으로 자동으로 스크롤하게 하는 기능을 구현하게 되었다. 스크롤하게 하는 기능은 같은 페이지 내에서도 가능하고 다른 페이지로 이동한 후 해당 부분으로 스크롤하게 할 수 있다. 페이지 내에서 특정 부분으로 스크롤해주는 것은 사소한 부분일지라도 유저에게는 매우 편리한 기능이기에 알아두면 좋을 거 같다. case 1. 같은 페이지일 때 해당 부분으로 스크롤하기 같은 페이지 내에서 해당 부분으로 스크롤하는 방법은 간단하다. a부분으로 스크롤 a부분 이 예시에서는 'a부분으로 스크롤' 버튼을 누르면 해당 부분으로 스크롤된다. 이는 간단한 해시 값을 활용한 스크롤 이동이다. case 2. 다른 페이지로 이동해서 해당 부분으로 스크롤하기 다른 페이지로 이동한 후 해당 부분으로 스크롤하는..
-
stacked card slider 구현하기(react, styled-component)프론트엔드 개발자가 될거야./react 2023. 5. 11. 12:59
디자이너님에게 아래에 있는 card slider처럼 stacked card slider를 구현해달라는 요청을 받았다. Stripe Sessions 2023 | Stripe Sessions Conference San Francisco 그동안 슬라이드를 구현할 때 react-slick 라이브러리로 구현했는데 stacked card slider는 react-slick로 구현할 수 없었다. react-slick의 verticalSwipeToSlide를 활용해볼까도 했지만 라이브러리가 너무 망가져서 슬라이더가 오히려 이상해지기만 했다. 구글링을 통해 codepen에서 html, css, jQuery로 구현된 좋은 예시를 발견했고 이 코드를 내 코드로 녹여 구현할 수 있었다. https://codepen.io/ak..
-
[이미지 업로드, 이미지 프리뷰] FileReader객체란? reader.onload 함수란? (feat. chatGPT 너 진짜 똑똑하다..)프론트엔드 개발자가 될거야./react 2023. 2. 16. 18:09
이미지를 업로드하고 그 업로드 한 이미지를 프리뷰하는 기능을 구현하고 있다. const [previewImage, setPreviewImage] = useState(""); const [file, setFile] = useState(null); const inputRef = useRef(null); const handleImageUpload = (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0]; if (selectedFile) { if (selectedFile?.size > MAX_FILE_SIZE) { alert("파일 크기가 너무 큽니다."); return; } const reader = new FileReader(); read..
-
[1인 헤어샵 예약 시스템 구현기] 초기세팅과 firebase (기술스택: react, ts, redux-toolkit, styled-component + firebase)프론트엔드 개발자가 될거야./react 2022. 10. 21. 16:14
부트캠프를 수료한 후 개인적으로 typeScript, redux-toolkit을 공부해서 프로젝트 리팩토링도 하고 개인 프로젝트도 했다. 기초적인 toDoList, 가위바위보 게임을 구현했었기에 더 깊게 파볼 수 있는 프로젝트를 하고싶었다. 이에 적절한 토이프로젝트가 뭐가 있을까? 고민하다가 1인 미용실 예약 시스템을 구현하기로 했다. 기술스택은 react, ts, redux-toolkit, styled-component + firebase 이정도! 항상 backend가 없어서 한정적인 데이터만 보여줄 수 있으니 아쉬웠는데 firebase로 예약정보를 관리해보려고 한다. 기대된다!!!! firebase과의 만남... 이 글에는 초기세팅과 firebase를 어떻게 세팅하는지 적어보려고한다. https://..
-
props 제대로 이해하기프론트엔드 개발자가 될거야./react 2022. 7. 24. 10:47
부모 요소 Parent 자식 요소 Chlid import React from "react"; import Child from "./Child"; const Parent = () => { const sayHello = () => { alert("안뇽~") } // 이렇게 주는 것 처럼 똑같이 key:value형태로! // string이외의 형태는 자바스크립트 형태로 보내줄 수 있어 html에서는 안되니까 return ( ); }; export default Parent; Props 자식요소에게 전달하기 - 이렇게 주는 것 처럼 똑같이 key:value형태로 전달해야한다. - html에서는 string만 되고 나머지는 안되니까 string이외의 형태는 {}안에 넣어 자바스크립트 형태로 보내줄 수 있다. im..
-
map 함수 적용시 key props를 부여하는 이유프론트엔드 개발자가 될거야./react 2022. 7. 10. 13:55
map 함수를 적용할 때 왜 key props를 부여해야 할까? 나도 map으로 댓글 추가 기능을 구현할 때 key props를 부여했다. {props.comment.map((data, i) => { return ; })} 이렇게 말이다! 간단하게 말하면 그래야 리액트가 댓글들을 각각 구분할 수 있기 때문이다. 만약 map을 돌릴 때 key값을 넣어주지 않으면 이렇게 콘솔에 warning메세지가 뜬다. key에 대해 더 알아보기 key는 element list를 만들 때 포함해야하는 특수한 문자열 속성이다. arr.map()안에서 리스트의 각 항목에 key를 할당해야한다. - key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다. - key를 선택하는 가장 좋은 방법은 리스트의 ..
-
instagram 댓글 기능 구현프론트엔드 개발자가 될거야./react 2022. 7. 10. 11:28
이번주 내내 React를 했다. React가 무엇인지, 왜 사용해야하는지, CRA, Component, JSX, Sass, Router를 배우고 마지막으로 리액트의 가장 핵심인 State, Props를 배웠다. 이번에는 js로 구현했던 댓글 추가 기능을 React로 구현해보는 미션이었는데 정말 어려웠다.. 하지만 절대 포기하지 않지!! 어려웠지만 결국은 구현해냈다. 다시한번 정리해보며 내것으로 만들어보려고한다! 댓글 기능 추가하기 - 사용자가 댓글 입력 후 enter 를 누르거나 버튼 클릭 시 댓글이 추가되도록 구현해주세요. - 댓글 기능을 구현하기 위해서는 배열 데이터 타입 활용해야 합니다. - 댓글 하나를 컴포넌트화 시키고 필요한 데이터는 props로 넘긴 다음 부모의 state에 저장된 댓글 데이터..
-
[TIL] Today I Learned : React sass - @mixin프론트엔드 개발자가 될거야./react 2022. 7. 5. 17:44
css.. 웹이 발전하면서 css 또한 유지보수하기 힘들어졌다. javascript를 위해 React가 나온 것 처럼 css를 위해서는 Sass가 나왔다고 생각하면 쉽다. 실제로는 React의 라이브러리 중에 하나다. sass로 작성하면 알아서 css로 변환되어 나타난다. sass에는 Nesting, mixin, 변수 활용, & 연산자 등 여러 유용한 기능이 있지만 그 중 가장 헷갈렸던 mixin에 대해 포스팅 해보려고 한다. @mixin 자주 사용하는 요소들은 @mixin으로 묶어줄 수 있다. 예를 들어 display: flex; align-items: center; justify-content: center; 이 세 개는 가운데 정렬을 해주기 위해 자주 쓰니 묶어서 @mixin으로 불러오면 코드가 한..