전체 글 237

CSS Grid, Flex

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com

[React] 배열 다룰 때 사용하는 함수

React에서는 불변성을 유지해야하기 때문에, state 내부의 값을 직접적으로 수정하면 안된다. (함수를 사용하여 새로 만들어야한다.) 값을 직접 수정할 시 상태가 바뀌었다고 React에서 파악하지 못한다. 따라서 React 배열을 다룰때 사용하지 말아야하는 함수와 사용해야하는 함수가 있다. >> React에서 배열을 다룰 때 사용하지 말아야하는 함수 (상태값을 직접적으로 바꾸는 함수들) push splice unshift pop >> React에서 배열을 다룰 때 사용하는 함수 (새 배열을 만드는 함수들) concat (새로운 배열 추가) slice (배열 안에 값을 잘라 올때) map (배열 안의 값을 변경 할 때) filter (특정 조건만 제외할 때 = 배열 안의 값 삭제 하고 싶을 때 사용)

[JavaScript] 비구조화 할당

객체 안에 있는 값을 추출하여 바로 사용할 수 있다. const object = { a: 1, b: 2 }; const { a, b } = object; //비구조화 할당 문법 console.log(a); // 1 console.log(b); // 2 const [ inputs, setInputs ] = useState({ //state 지정 //const [ 상태 값 저장 변수 , 상태 값 갱신 함수 ] = useState(상태 초기 값) calResult : '', calculating : false //계산 누르면 F->T 클리어 누르면 T -> F }); const { calResult, calculating } = inputs; //비구조화 할당

공부/JavaScript 2022.11.17

노마드 코더 Coin Tracker 챌린지 문제

노마드 코더 Coin Tracker 챌린지 문제 - 가지고 있는 달러를 내가 원하는 코인으로 변환 했을 때 얼마나 되는지 계산하는 문제 import React, { useEffect, useState } from 'react'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [dollars, setDallars] = useState(""); const [result, setResult] = useState(""); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response..

22년 11월 네이버 플러스 멤버십데이 (11/13~11/15)

22년 11월 네이버 플러스 멤버십데이 (11/13~11/15) 네이버 멤버십 데이 공지가 떳네요. 네이버 플러스 멤버십 데이 11월 날짜는 11월 13일 부터 11월 15일 까지 혜택은 아래와 같습니다. 첫째날 (13일 ~ 14일) 장보기 20% 할인 - 딱히 장볼게 없어서 패스! [주의 사항] 발급 기간 : 11월 13일(일)~14일(월) 유효 기간 : 발급 당일 23:59까지 할인 조건 : 이마트몰/SSG새벽배송/홈플러스/GS프레시몰/트레이더스/프레딧/농협하나로마트/초록마을/올가/동네시장 내 100원 이상 구매 시, 상품 1개에 한해서 20% 할인(최대 3천원)조건 : 발급 기간 내 각 마트별, 동네시장 대상으로 ID당 매일 1회씩 발급멤버십 회원일 경우에만 할인 쿠폰을 받을 수 있습니다. (패밀리..

[React] 리액트 , ES6 문법 잘모르는 거 정리

1. 리액트 상태 변경 시, constants을 보낼때와 function을 보낼때 차이 const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); setToDos((currentArray) => [toDo, ...currentArray]); //setToDos에 함수를 보낸다. => 함수를 보낼때 첫번째 인자는 현재state다! 따라서 currentArray 인자는 현재 상태를 뜻한다. setToDo(""); //setToDo에 constants를 보낸다. 풀코드 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); co..

2022 지니뮤직어워드 태연 여자 Solo 부문 수상 !! (Feat. 태연 콘서트)

끼야 !! 나이가 먹어서 예전만큼 시상식 다 챙겨보진 않지만, 오늘 유튜브 보는데, 울 태연이 2022 지니뮤직어워드에서 여자 솔로 부문 수상했네 ㅎ 축축축 무대가 없어서 조금 아쉽긴하지만, 그래도! 태연이가 수상소감 마지막 쯔음에 조만간 콘서트 한다네요 !! 이 얼만의 콘서트인가 !? 이번엔 꼭 가고 말겠어 아래 2022 지니뮤직어워드 태연 수상소감 영상 !! 1:50 쯔음에 콘서트 떡밥 살짝 투척 ㅋㅋ 팬들 환호성 ㅋㅋㅋㅋㅋ 니맘내맘 사진 출처 : https://twitter.com/TaeNy_Bar/status/1590311827099254785?t=L5F7_nh9SMjN2WxKSb4LRg&s=19 존멋탱구리 탱구!

STAR/태연 2022.11.09

드디어 포켓몬빵 득했다

와우 편의점에서 처음으로 포켓몬빵을 구매했다 ㅋㅋ 오후 1시 쯤에 커피 사가지고 집에 돌아오는 길에, 골목에 있는 GS25 편의점을 지나가다가 혹시나 하고 들어갔는데, 딱 하나 구석에 숨겨져 있어서 냉큼 사왔다 ㅋㅋㅋ 태어나서 첨으로 사보네 ㅜㅜㅜ 감격 토게피의 딸기우유슈 빵 안에 딸기 크림이 있었는데 맛있었다. 안에 스티커는 !? 오늘의 포켓몬은 뭘 까아아 요? 띠딕 니로우 !! 악 비행 타입 만족! 한때 포켓몬 4세대까지 미쳐서 게임이고 만화책이고 애니고 다 챙겨봣는데 ㅋㅋㅋ 추억이 새록새록 하구만 ㅋㅋㅋ 백수라서 시간도 많겠다 종종 포켓몬빵 구하러 구석에 숨겨진 편의점 돌아다녀 봐야겟다.

하얀종이 2022.11.09

티빙 최신 영화 리스트 보는 방법 (TIVING 최신 업데이트 영화)

티빙 최신 영화 리스트 보는 방법 (TIVING 최신 업데이트 영화) 개인적으로 요즘 넷플릭스보다 더 많이 사용하고 있는 TIVING, 근데 새로 업데이트 된 영화가 뭐가 있는 지 보고 싶은데 어디서 봐야하는지 찾을 수 가 없다. 영화 항목에 들어가서 밑으로 내리다보면 '최신 업데이트 영화' 카테고리가 있기는 한데, 이게 있을 때도 있고 없을 때도 있어서 난감할 때가 있다. 이것저것 눌러보면서 찾은 티빙 최신 영화 리스트 업 보는 법을 포스팅 해보겠다! 일단 위에 스크린샷 처럼 '티빙 > 영화 > 최신 업데이트 영화' 카테고리가 있으면 전체보기를 눌러서 보면 바로 갈 수 있다. 하지만 '최신 업데이트 영화' 카테고리가 안보인다면? 아래와 같이 찾아 갈 수 있다. 티빙/ TIVING / 티빙 영화 / 티빙..


반응형