scss5 hover 시 이미지 및 글자 색 바뀌도록 구현하기 우리 사이트에서 유일한 재사용 컴포넌트가 아래에 적어내려갈 상품 미리보기 컴포넌트이다. 메인과 상품 리스트 그리고 상품 상세페이지에 들어갈 컴포넌트이기 때문에미리 분리 작업을 했었다. 그리고 제일 먼저 작업을 해 main으로 merge해 이후 작업에서 바로 쓸 수 있도록 활용했다. 처음 시작을 할때엔 hover 시 이미지가 바뀌는 것이니까 css의 hover 속성을 이용해서 해보려고 했으나 바뀌어야하는 이미지가 db에서 받아와야하는 데이터라서 할 수 없었다. 다른 방법을 찾은 결과 event 중 mouseOver 와 mouseOut이 있었다. 그래서 이번엔 event를 사용해 이미지를 바꿔주는 작업을 해보려고 한다. 만약 styled-components를 사용한다면 js 파일에 css를 적을 수 있기때문.. 2023. 8. 9. 간단하게 Sign In 구현하기 로그인 페이지로 생애 첫 프로젝트를 시작했다. 로그인 페이지는 기존에 하던것과 다른 부분이 GET 요청 뿐이라서 어려움없이 진행할 수 있었던 것 같다. 기획 단계에서 로그인 페이지에 아이디 저장을 하자고 해서 localstorage를 이용해 아이디를 저장해두고 그 값을 defalut value로 불러와 구현을 하였다. 하지만 실제 프로젝트에는 제외하게 된 이유가 2가지가 있다. 첫번째는 추가로 defalut value에 있는 값과 한 글자라도 바뀌게 되면 아이디저장 체크박스가 해제되도록 하고 싶었는데 구현하기가 너무 까다로웠다. 두번째로는 defalut value로 관리를 하다보니 백엔드에게 데이터를 보낼때 인식을 못해서 값이 안 가는것이었다. 두번째 이유로 결국 아이디저장을 추후에 구현하는 것으로 했고.. 2023. 7. 11. 1차 프로젝트 회고록 & 위코드 5주차 1. About team Seoulminer - mining codes 개발기간: 2023.06.23 ~ 2023.07.07 깃헙 링크 : FrontEnd, BackEnd Clone Coding project - 배민문방구 웹 개발의 첫 걸음을 뗀 seoulminers는 사람들이 가장 일상적으로 영위하는 행동 중 하나인 상거래를 웹페이지로 구현해 보기로 했다. 그러던 중 우리의 눈에 발견된 우아한형제들의 우아한 브랜드, 배민문방구 우리에게 주어진 시간은 단 2주. 2번만의 스프린트 안에 최대한 클론 할 수 있는 범위 내에서 우당탕탕 이나마 굴러가는 프로덕트를 만들어 내야 한다. 우리가 구현해야 할 행위 - 전자상거래 인터넷이 우리 생활에 보급된 이래, 사람들이 현실세계에서 영위하는 행동들 중 많은 수가 .. 2023. 7. 10. 로그인 버튼 활성화 구현하기 idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다. 그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다. 바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데 리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다. 일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; id와 pw의 input 창의 값.. 2023. 6. 19. CSS를 SASS의 한 종류인 Sass로 바꿔보기 기존에는 css로 레이아웃을 짜주었는데 css는 문법이 어려워 여러기능을 사용할 때 어려움이 있어 scss라는 문법이 나왔고 이 문법을 바꿔주기 위해 scss라는 파일 전처리기를 이용해 브라우저에게 css로 변환하여 보여준다. 이번에는 기존에 작업하던것에 scss를 적용해보려고 한다. [과제 2] 기존의 css 파일을 scss로 변경하고 그에 맞게 수정하기 variables.scss 파일과 mixin.scss 파일을 생성해주세요 variables.scss에 black, red, green의 색을 담는 변수를 만들어주세요 mixin.scss에는 두 개의 mixin을 만들어주세요 (flexCenter : 가운데 정렬, textStyle : font의 size와 weight를 인자로 넣으면 적용) Assign.. 2023. 6. 15. 이전 1 다음
