개발/개발일지17

• 

  한 박스에서 이미지와 비디오 엘리먼트 서서히 변하게하기 문제 마우스를 올렸을 때 화면이 서서히 변하는 걸 하고 싶다. transition만 추가하면 될지 알았는데 생각보다 오랜 시간이 걸렸다. 스택 React, styeld component, typescript 코드 분석 관련없는 코드는 삭제하고 왼쪽화면 관련된 코드만 남겼다. 컴포넌트 화면에 마우스를 올리면 숫자가 1씩 증가하여 화면을 변경시키는 로직이다. const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = (event: React.MouseEvent) => { setTimeout(function () { setLeftNum(leftNum + 1); }, 100); return ( {leftScreenData.. 개발/개발일지 2024. 1. 22.

• 

  무한 슬라이드 구현 (with React, TypeScript, styled-component) 무한 슬라이드(?)를 구현해 보았다. 1. setTimeout을 통해서 이 데이터를 하나씩 추가되도록 만들어 데이터가 끊임없이 만들어지도록 만들고 2. transform: translate3 d(0px, 0px, 0px)};을 활용하여 x축에 해당되는 첫 번째 인자가 계속해서 증가하는 -값으로 만들고 3. 좌우 그러데이션으로 사라지게 하기 1. 데이터가 계속해서 생기게 만들기 무한 슬라이드가 되도록 만들려면 데이터가 끊임없이 생성되어야 한다. slideNum가 2초마다 1씩 증가하도록 만들고 또한 WorkSlideData도 2초마다 순차적으로 하나씩 데이터가 들어가도록 만들었다. 첫 번째 데이터를 0으로 넣은 이유는 렌더링 되는 과정에서 첫 번째 데이터가 두 개가 생성되기 때문에 이를 숨기기 위해 빈 .. 개발/개발일지 2023. 11. 17.

• 

  화면크기에 따른 자식순서 바꾸기 반응형으로 화면을 만들고 있는데 화면크기가 767px이하일 때 3번째 있는 자식이 첫 번째로 와야하는 화면을 만들어야 했다. 이걸 css를 통해서 구현을 해보자. React와 styled-component를 사용하였다. 코드 컴포넌트부분 const Header = () => { const navigate = useNavigate(); return ( { navigate('/work'); }} > work VNTRS { navigate('/'); }} > WILLACREATIVE.COM CONTENT INFO ); }; css부분 (order있는 부분만 가져왔다.) .work { order: 1; } .vntrs { order: 2; } .url { order: 3; } .content { order: 4.. 개발/개발일지 2023. 11. 2.

• 

  마우스 커서 div박스로 만들기 cousor옵션을 사용하는 것이 아닌 div박스를 통해서 커서를 만들어보자. 1. x, y축 데이터 가져오기 const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event: React.MouseEvent) => { setMousePosition({ x: event.clientX, y: event.clientY, }); }; return ( willacreative.com ); }; useState를 사용해서 x축과 y축 데이터를 담아줄 state를 만들어준다. handleMouseMove함수를 만들어 event.clientX와 event.clientY를 이용하여 커서의 위치를 state에 담.. 개발/개발일지 2023. 10. 20.

• 

  before after 사용해서 줄 긋기 진행하고 있는 프로젝트에서 댓글창 부분 위아래로 회색선을 만들어야했다. 좀 더 깔끔한 코드를 위해서 before와 after를 이용해서 구현해보았다. 기존 코드 // 컴포넌트부분 const CommentOptionsBar = ({ postProps }: { postProps: PostProps }) => { return ( 댓글 {postProps.postData.commentCount} ); }; // styled-component 부분 const CommentOptionsBarS = styled.div` height: 2.5rem; background-color: var(--color-white); display: flex; align-items: center; justify-content: spac.. 개발/개발일지 2023. 10. 11.

• 

  모달 만들기 모달 만들기를 해보았다. UI를 먼저 만들고 나서 클래스를 붙이는 방식으로하니 그렇게 어려운 건 없었다. 핵심적 코드 open modal을 클릭하면 display:none이 붙은 클래스를 없애는 방식으로 진행하였다 저번에 했던 navigation코드와 매우 비슷 hidden 클래스를 JS로 붙였다뗏다하는식으로 완성 Modal content .hidden { display: none; } (JS) const modal = document.querySelector(".modal"); const modal_btn = document.querySelector(".modal_btn"); const modal_exit = document.querySelector(".modal_exit"); modal_btn.add.. 개발/개발일지 2023. 8. 30.

• 

  반응형 Navbar 만들기 이번에 반응형 Navbar를 만들면서 내 능력에 대한 자괴감이 들었다. 엄청 쉬운거같은데 생각의 정리를 안하고 무작정 코드를 짜면 이렇게 되는구나 느꼈던 프로젝트이다. 핵심적 코드 가장 핵심적인 부분은 화면이 줄어들면 menu와 sns가 없어지는 @media부분 그리고 list_menu 아이콘을 누르면 세로로 menu들이 나오는 부분이다. 여기에서 너무 막무가내로 코드를 짜서 엄청 헤매었다. 이런거를 할때는 변하기 전, 변한 뒤 코드를 짜고 이걸 연결시키면 편하다는 걸 너무 늦게 깨달아버렸다. 이것들을 만드는 코드 ui를 먼저 만들고 연결해주면 편하다. media 부분 @media all and (max-width: 725px) { // sns 아이콘 사라짐 #sns { display: none; } /.. 개발/개발일지 2023. 8. 28.

• 

  sidebar 만들기 핵심적 코드 화면크기에 따라 코드다르게 하려면 미디어쿼리(Media Query) 화면크기에 따라 css가 달라지게하는 코드가 있다. 정확히는 조건에 따라 스타일을 달라지게 만들 수 있다. max-width: 500px 전체 화면크기가 500px 이하일때 sidebar_container의 width를 100%로 해버렸다. (scss) @media all and (max-width: 500px) { #sidebar_container { width: 100%; transition-duration: 0.5s; } } 미디어쿼리 미디어쿼리(Media Query)란? 조건에 따라서 스타일을 적용하고 싶을때 사용한다. @media로 시작하는 미디어 쿼리의 기본적인 문법 구조는 아래와 같다. /* css파일 */ @m.. 개발/개발일지 2023. 8. 25.

• 

  리뷰 캐러셀 만들기 만드는 방법에 대해서 전체적으로 설명하기보다는 가장 핵심적인 코드와 내가 배웠던 부분에 대해서만 다루어 보겠다. 요즘 react강의와 js프로젝트를 병행하고 있는데 확실히 react를 사용하는게 편하다는 것을 느끼게된다. 핵심적 코드 데이터를 배열에 객체형태로 담아서 그것을 활용해서 리뷰 캐러셀을 만드는 것이 핵심이라고 생각했다. html에서 이렇게 만들고 // HTML JS에서 getElementById를 통해서 셀렉터를 만들어준다. const img = document.getElementById("person_img"); const author = document.getElementById("author"); const job = document.getElementById("job"); const i.. 개발/개발일지 2023. 8. 25.

• 

  tap 만들기 강의를 듣다가 tap을 만드는 과제를 주어졌는데 bootstrap를 사용해서 css를 만들고 구현을 했는데 나는 bootstrap을 사용하기가 싫어서 직접 styled-component를 사용해서 만들어보았다. (기능구현위주라서 css는 대충 만들었다.) react, styled-component 사용 UI를 만드는 단계 applecoding에서 배운 ui를 만드는 단계는 크게 3단계로 나뉘어져 있다. 1. html css로 디자인 미리 완성 2. UI의 현재 상태를 저장할 state 하나 만듬 3. state에 따라서 UI가 어떻게 보일지 작성 그래서 이걸 토대로 tap을 만들어보자. html css로 디자인 미리 완성 전체적인 button을 모아놓은 content를 모아놓은 를 통해 디자인만 미리 만.. 개발/개발일지 2023. 8. 23.