코딩기록

요즘 만들고 있는 거... 하나가 되면 두개가 안되고 하나를 하려면 조건이 두세개가 따라오고.. 기획과 디자인의 필요성을 너무 깨닫는 중이고.. 이미 시작한이상 제대로 끝내봅니다..

프로젝트 완성하고 얼른 회고록 쓰고싶어서 쓰는 기록 ㅎㅎ 프로젝트 링크 주소입니다! https://yyeojung.github.io/pixel_art_maker/html/paintBoard.html Pixel Art Maker Grid Width Reset Eraser yyeojung.github.io ❤️ 개발 의도 간단하게 그림판을 만들어보고 싶어서 찾아보던 중 픽셀아트로 만들면 좀 더 특별하게 만들 수 있을 것 같아 선정하게 되었습니다. 📅 개발 기간 총 1일(디자인, 개발) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, javascript 배포: Github.io 🎨 디자인 💡 그림판이 픽셀아트인 만큼 배경도 그와 어울리는 배경으로 하고싶었습니다...

메모장 만들기2 를 만들려다가 회고록을 쓴 김에 퉁치는 포스팅 프로젝트 링크: https://yyeojung.github.io/react_memo MEMO yyeojung.github.io ❤️ 개발 의도 자바스크립트와 리액트 강의를 들은 후 기술 습득을 위해 만들었습니다. 📅 개발 기간 총 4일(디자인 1일, 개발 3일) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, React.js, styled-component 배포: Github.io 🎨 디자인 간단한 메모 기능을 할 수 있는 메모장을 만들고 싶었고 그에 맞게 레트로라는 컨셉으로 배경화면까지 디자인하였습니다. 저는 주로 다크모드로만 사용을 하는터라 제가 만드는 프로젝트에도 다크모드 기능을 넣고 싶었..

모양은 이래저래 만들었는데 1. 다크모드 import BgLightMode from '../image/lightmode.png'; import BgDarkMode from '../image/darkmode.png'; import AddMemoLight from '../image/addMemo.png'; import AddMemoDark from '../image/addMemoDark.png'; import backLight from '../image/backLight.png' import backDark from '../image/backDark.png' export const lightTheme = { textColor: '#000', subTextColor: '#000', bgImg: `url(${B..

가계부 디자인을 끝낼즈음에 리액트 강의 받아쓰기만 한 내가 만들 수 있을지 의문이 들어,, 간단하게 연습해보려고 얼른 메모장 디자인을 만들어보았음. 물론 간단한 연습은 안되겠지. 난 아무것또 모르니까! ㅜㅜㅜㅜㅜㅜㅜㅜㅜ 😭 😭 😭 😭 😭 😭

영화 등장인물 api를 받아와서 슬라이드로 만들었다. 원래 슬릭은 사용해본적이 없어서 swiper를 이용해서하려다가 화살표 바깥으로 빼는게 리액트로하기엔 좀 번거로울 것 같아서 슬릭을 사용해봤다. 슬릭을 설치해주고,, import React from 'react'; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import styled from 'styled-components'; import { API_IMG } from '../../API' import empryIcon from '../../image/icon/empty.png' ..

뭐라고 해야할지,, 하트 아이콘,, 찜,, import React from 'react' import { useState } from "react" import styled from 'styled-components'; import icon1 from '../../image/icon/icon_heart_1.png' import icon2 from '../../image/icon/icon_heart_2.png' function Addwish() { const [Wish, setWish] = useState(true); const wishClick = () => { setWish(!Wish); } return ( ) } export default Addwish const WishIcon = styled.bu..

function StarRating(props) { const AVR_RATE = Math.round(props.voteAverage * 10) ; // 평점 const STAR_IDX_ARR = ['first', 'second', 'third', 'fourth', 'last']; //별의 고유 아이디 const [ratesResArr, setRatesResArr] = useState([0,0,0,0,0]); //별점 리스트 상태 const calcStarRates = () => { let tempStarRatesArr = [0,0,0,0,0]; //임시리스트 let starVerScore = (AVR_RATE * 70) / 100;//별의 width가 14이므로 14*5=70, 100점 만점인 현재와 ..

홈화면 메인 이미지는 인기 1순위의 영화로 해놨지만 지금 1위 포스터가 무서워서 잠시 바비로 바꿔놨다,, 그리고 귀여운 엘리멘탈 노마드 코더 리액트 강의를 듣고 페이지를 좀 더 꾸며보려다가 https://www.youtube.com/watch?v=e8xMcMXqYGw&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV 강의를 발견해서 참고하면서 만드는 중이다. 나름 재밌음 ㅎㅎ