코딩기록

연말이라고 바쁜 건 아닌데 어쩌다 바쁨...? 그래서 시간 날때마다 틈틈히 공부중입니다.. 다음엔 후기로 찾아올 수 있길..

- 타입 스크립트는 타입을 정확히! 명시해주어야함. - string, number, boolean, null, undefined ...등 만약 이런 객체를 써야한다면? let data:Restaurant = { name: '식당', category: 'western', address: { city: 'incheon', detail: 'somewhere', zipCode: 123123 }, menu:[ { name: 'rose pasta', price:2000, category: 'pasta' }, { name: '갈릭', price:2000, category: '스테이크' } ] } Restaurant.ts 새 페이지로 만들어서 객체마다 타입을 명시해주고 address와 menu같은 경우엔 새로운 타입을..

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

프로젝트 완성하고 얼른 회고록 쓰고싶어서 쓰는 기록 ㅎㅎ 프로젝트 링크 주소입니다! 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..

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

제목이 굉장히 길어졌지만 내가 보려고 남기는 자바스크립트 1. 문자열 메소드 *indexOf, includes function hasCola(str) { if (str.indexOf("콜라") > -1) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } function hasCola(str) { if (str.includes("콜라")) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } hasCola("사이다가 짱"); //통과 hasCola("콜라가 최고"); //금칙어가 있습니다. hasCola("콜라"); //금칙어가 있습니다. - "콜라"가 있으면 0보다 크고 "콜라"가 없으면 -..

*생성자 함수 function Item(title, price) { // this = {}; this.title = title; this.price = price; this.showPrice = function() { console.log(`가격은 ${price}원 입니다.`); } //return this; } //new를 안붙이면 그냥 함수실행 const item1 = new Item('인형', 1000); const item2 = new Item('인형2', 2000); const item3 = new Item('인형3', 3000); item3.showPrice(); // => 가격은 3000원 입니다. - 생성자 함수를 사용하면 주석으로 돌린 코드와 같이 실행됨. - new를 안붙이면 그냥 함수..

import { RouterProvider, createBrowserRouter } from 'react-router-dom' import Layout from "./components/layout"; import Home from "./routes/home"; import Profile from "./routes/profile"; import Login from "./routes/Login"; import CreateAccount from './routes/CreateAccount'; import { createGlobalStyle, styled } from 'styled-components'; import reset from 'styled-reset'; import { useEffect, useSta..