profile
안녕하세요~
태그 목록
전체보기 (130)filter(5)API(5)html(5)form(4)grid(4)github(3)Map(3)Table(3)git(3)font(3)CSS(3)JavaScript(3)link(3)slice(3)fixed(2)relative(2)title(2)GET(2)<method="post">(2)POST(2)head(2)Fetch(2)선택자(2)number(2)Holy Grail Layout(2)placeholder(2)db(2)div(2)delete(2)font-size(2)padding(2)vscode(2)SOME(2)tr(2)library(2)Flex(2)absolute(2)static(2)객체(2)ol(2)grid template columns(2)fr(2)value(2)margin(2)useState(2)find(2)Java Script(2)inline(2)indexOf(2)time(2)<a href>(2)td(2)transform(2)redux(2)stickey(1)쓰레드(1)Center(1)text align(1)animation-iteration-count(1)header(1)가상클래스(1)animation-name(1)LineChart(1)transition-delay(1)<meta charset="utf-8">(1)Thead(1)background-position(1)serif(1)grid-row-gap(1)stack(1)queue(1)배포(1)Week(1)<strong></strong>(1)가상요소(1)react router dom(1)heap(1)nowrap(1)flex wrap(1)right(1)atom(1)minmax(1)findIndex(1)fontello(1)React.FC(1)Index(1)download(1)url(1)th(1)color(1)<taxt>(1)<tel>(1)React(1)display block(1)<taxtarea cols="" rows="">(1)cascading(1)input(1)float(1)기업협업(1)hosting(1)stylish(1)border_bottom(1)item(1)legend(1)<form action>(1)useEffect(1)JOIN(1)event loop(1)animation-duration(1)multipart/form-data(1)Recharts(1)left(1)http-equiv(1)img(1)px(1)@autofocus(1)git init(1)reject(1)비동기(1)tooltip(1)<details>(1)class(1)html editor(1)< input type="text">(1)react hook(1)web font(1)media quary(1)width(1)< input type="password">(1)npm start(1)tfoot(1)<month>(1)github pages(1)npm install gh-pages --save-dev(1)동적(1)justify(1)uu][(1)method(1)main(1)login(1)body parser(1)prev()(1)br(1)p(1)span(1)selector(1)action(1)mark(1)CartesianGrid(1)buttons(1)<lingk>(1)<td rowspan>(1)inheritance(1)git remote add origin(1)wrap(1)background-blend-mode(1)@media(1)json(1)concat(1)replace(1)event.preventDefault()(1)inline level element(1)box-sizing(1)transition-property(1)회원가입(1)1세대(1)repeat(1)2세대(1)Font Weight(1)background-attachment(1)mix-blend-mode(1)foreach(1)interface(1)put(1)animation-direction(1)grid row end(1)<!DOCTYPE html>(1)key(1)select(1)option(1)li(1)장바구니(1)속성(1)배열 함수(1)display inline(1)visited(1)media query(1)content="width=device=width, initial-scale=1.0"(1)useMemo(1)useReducer(1)2차원 변형 함수(1)Sort(1)inline block(1)this(1)쇼핑몰(1)@Target(1)Preprocessor(1)YAxis(1)transition-timing-function(1)mysql(1)Custom Hooks(1)stringify()(1)git push origin master(1)styled(1)styled components(1)input type = "submit"(1)grow(1)button(1)reset(1)hidden(1)useCallback(1)sans-serif(1)lesscss.org(1)@property(1)git commit -m " "(1)순서정렬(1)gh-pages branch(1)reduce(1)border(1)a tag(1)Margin collapsing(1)ul(1)LINE(1)line height(1)background image(1)upload(1)localstorage(1)block(1)Multiple(1)inline-grid(1)email(1)name(1)array.index()(1)transition(1)reverse(1)rotate(1)meta(1)단축키(1)background color(1)grid-column-gap(1)required(1)array(1)submit(1)shrink(1)sart(1)display(1)rem(1)XAxis(1)toString(1)<Dropdown List>(1)onClick(1)연결선택자(1)git add .(1)perspecticve()(1)active(1)express(1)height(1)semantic web(1)변수(1)transition-duration(1)svg(1)grid column start(1)border-box(1)wrap-reverse(1)<botton>(1)@midia(1)autocomplete(1)국내폰트(1)Date(1)em(1)underline(1)Coding(1)utf 8(1)modal(1)mockdata(1)Routes(1)set(1)<td colspan>(1)<table border=" ">(1)tbody(1)range(1)multi column(1)3세대(1)hover(1)<method="get">(1)block element(1)typescript(1)animation(1)tag(1)구조 가상 클래스(1)background-repeat(1)keyframe(1)JSON Server(1)object(1)npm run deploy(1)web(1)고정폭(1)resolve(1)article(1)footer(1)nav(1)aside(1)section(1)background-size(1)semantic tag(1)minify(1)font-famliy(1)sass-lang.com(1)3차원 변형함수(1)enctype(1)stylus-lang.com(1)promise(1)import(1)every(1)figure!(1)blend(1)
post-thumbnail

쇼핑몰 & 장바구니

checked={checkLists.includes(cart.id) ? true : false}체크 박스가 선택 구현은 include를 이용하는 것이다. checkbodx는 boolen 타입이라 true, false 만 받는다. 따라서 cart.id 가 check

2022년 11월 10일
·
0개의 댓글
·

돈의 자릿수 마다 점 찍기

const convertPrice = (price) => { return price.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); };

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

장바구니 중복된 물건을 또 다시 선택시..

쇼핑몰 만들기 중 동일 품목에서 장바구니를 2번 눌렀을 때 수량만 올라가야 하는데,객체가 아래 사진과 같이 2개가 생성된다. 이럴 때에 객체가 2개만 생성되어야 하는데 같은 아이디 값이 2 인 것이 2개가 생겼다. 이를 막기 위해 아래와 같이 코딩한다.

2022년 11월 5일
·
0개의 댓글
·

TypeScript

→ Open in Slid타입스크립트 image타입스크립트 image타입스크립트 image타입스크립트 image타입스크립트 image타입스크립트 image타입스크립트 imageStars 컴포넌트에 return 타입은 따로 명시하지 않았는데 React.FC 타입에서 함수

2022년 11월 1일
·
0개의 댓글
·

VSCODE 단축키

→ Open in SlidVSCODE 단축키 image함수를 보고 싶을때 함수명에 커서대고 F12 누른다.‏‏‎ ‎VSCODE 단축키 image한 화면에서 다른 곳에 있는 함수를 보고 싶으면 alt + F12 누른다.VSCODE 단축키 imageHTML 에서도 할 수

2022년 11월 1일
·
0개의 댓글
·

실용 Redux

→ Open in Slid실용 Redux image‏‏‎ ‎실용 Redux image실용 Redux image실용 Redux image실용 Redux image\* 일단 Redux를 사용하기 위해서는 createStore 로 store를 만든다.실용 Redux imag

2022년 10월 28일
·
0개의 댓글
·

Redux

→ Open in SlidRedux image‏‏‎ ‎Redux imageRedux image‏‏‎ ‎Redux image‏‏‎ ‎Redux image‏‏‎ ‎Redux imageRedux imageRedux imageRedux image‏‏‎ ‎Redux images

2022년 10월 28일
·
0개의 댓글
·

Custom Hooks

→ Open in SlidCustom Hooks image‏‏‎ ‎Custom Hooks image‏‏‎ ‎Custom Hooks image‏‏‎ ‎Custom Hooks image‏‏‎ ‎Custom Hooks image‏‏‎ ‎Custom Hooks image‏‏‎

2022년 10월 23일
·
0개의 댓글
·

useReducer

→ Open in SliduseReducer image‏‏‎ ‎useReducer image‏‏‎ ‎useReducer image‏‏‎ ‎useReducer image‏‏‎ ‎useReducer image‏‏‎ ‎useReducer imageuseReducer imag

2022년 10월 23일
·
0개의 댓글
·

useCallback

useEffect (()=> { console.log('sumeFunction 이 변경 되었습니다.')},someFunction);useEffect 를 사용하여 console 값이 1번 만 나오는 줄 알았는데, 버튼을 누르면 someFunction으로 가고 여기에

2022년 10월 23일
·
0개의 댓글
·

useRef

p>useRef 에서는 Ref 올려 버튼을 계속 눌러도 카운터가 올라가지 않는다. 왜냐하면 useRef는 랜더링이 되지 않기 때문에 숫자는 계속 올라가고는 있으나 랜더링이 안되기 때문에 화면에 숫자는 올라가지를 않는다. 그대신 State 올려를 눌렀을 때 State

2022년 10월 21일
·
0개의 댓글
·

useMemo

const location = { country : isKorea ? '한국','외국',},useEffect(()=>{ console.log('useEffect 호출');},location);(17:04)(17:35)(17:55)(19:48) 위의 location

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

Input 을 이용해 배열의 정보를 찾는 것

Input 을 이용해 배열의 정보를 찾는 것제가 하려는 것은 예약이 되있는 지 확인하는 코딩입니다.input 창에 폰 번호를 입력하면 이미 배열로 되어 있는 숫자와 비교하여 중복 되는 것이 있는지 아닌지 찾는 것입니다.제가 코딩한 주요 핵심은처음에는 .onChange

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

병원 예약 시스템 구축

병원에 가려고 예약을 하려고 합니다.예약이 가능한 일자를 선택하여, 예약을 진행하려고 합니다. 노쇼 방지를 위한 설계를 합니다.styled-componentsreact-domreact-router-domprettiermodala tagmedia quarylocalSto

2022년 10월 19일
·
0개의 댓글
·

MocData map으로 돌리는 법

useState(\[]) 안에 각 가로를 꼭 넣어서 초기화 해야 한다!!!.JSON 파일은 array 이기 때문에 되게 해야 하기 때문에 의 이름인 feeds를 불러냈고 feeds? 를 쓰는 것은 랜더링시 true 일 경우 map을 실행하기 위함이다.

2022년 10월 18일
·
0개의 댓글
·
post-thumbnail

오디오 재생 프로그램 만들기

오디오를 녹음하고, 재생하는 등 오디오 파일을 관리하는 프로그램을 개발합니다.구현 중 라이브러리 및 오디오 태그 사용 최소화합니다. (CSS 관련 라이브러리는 제외)화면 별 컴포넌트 분리합니다. (그 이상 분리해도 문제 없음)UI는 자유롭게 개발합니다.추가적인 기능 개

2022년 10월 14일
·
0개의 댓글
·

gh-pages로 내 React 웹사이트 배포하기

링크텍스트

2022년 10월 14일
·
0개의 댓글
·
post-thumbnail

Array APIs 총정리

결과값

2022년 9월 28일
·
0개의 댓글
·

Use Promise

Promise 사용전 Promise 사용후

2022년 9월 27일
·
0개의 댓글
·

JSON

json = JSON.stringify(rabbit);console.log(json)json = JSON.stringify(rabbit,'name','color','size');console.log(json)원하는 것만 뽑아서 json에 넣을 수 있다. json = J

2022년 9월 27일
·
0개의 댓글
·