분류 전체보기

JQUERY scroll 계산하기

$(window).scroll(function(){ // 해당 div의 top값 var mileageOffset = mileageEl.offset().top; // $(document).scrollTop() 함수를 통해 현재 스크롤바의 위치값 var scroll = $(window).outerHeight() / 2 + $(window).scrollTop(); console.log(scroll,mileageOffset); if(scroll > mileageOffset){ if(!mileageEl.hasClass("on")){ mileageEl.addClass("on"); $($(mileageList).get().reverse()).each(function(idx, el){ $(this) .delay(idx..

indexOf()

String.prototype.indexOf() 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환 str.indexOf(searchValue[, fromIndex]) searchValue : 찾으려는 문자열 fromIndex : 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값 fromIndex 값이 음의 정수이면 전체 문자열을 찾는데 fromIndex >= str.length 이면, 검색하지 않고 바로 -1을 반환 'Blue Whale'.indexOf('Blue'); // returns 0 'Blue Whale'.indexOf('Blute'); // returns -1 'Blue Whale'.indexOf('Whale', 0); // r..

작업시 폰트 로컬 폰트 연결하기

.eot, .woff 폰트가 font폴더에 있다는 가정하에 만약 .otf 폰트만 있다면 컨버트 하여 변경해준다. 폰트 변경할 수 있는 사이트 : https://cloudconvert.com/ CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert +200 Formats Supported CloudConvert is your universal app for file conversions. We support nearly all audio, video, document, ebook, archive, image, spreadsheet, and presentation formats cloudconvert.com font..

useState 비동기 동작

리액트로 계산기 작업중 이해가 가지 않았던 코드부분이다. const onClick = (item) => { if (item.type === "number") { // 여기서 setCalc((prev) => {})부분이 이해가 가지 않았다. 어떻게 이전값을 가져올 수 있는지.. setCalc((prev) => { const inputValue = shouldSetNumberRef.current ? item.text : prev.inputValue.replace(/(^0+)/, "") + item.text; shouldSetNumberRef.current = false; return { ...calc, inputValue, }; }); } if (item.type === "operator") { switch..

map, filter, concat, reduce

map, reduce, filter는 새로운 배열을 만들어내는 것이고, 기존 배열 내용은 유지 const arr = [ { id: 1, text: 'Text', done: false, info: { check: false } }, { id: 2, text: 'Text2', done: false, info: { check: false } }, { id: 3, text: 'Text3', done: false, info: { check: false } }, { id: 4, text: 'Text4', done: false, info: { check: false } }, ] let id = 2 map 요구사항: id가 2인 객체의 text값을 Text22로 변경해줘 arr.map((item) => item.id ..

background 이미지

calculator contextapi

calculator contextapi 사용하기 context > calculator.js import { createContext, useState, useRef } from "react"; 1. react패키지 createContext를 사용해 context생성 const CalculatorContext = createContext({ state: { inputValue: '', buttonArray: [] }, actions: { calculate: () => {} } }) 2. calculatorProvider 생성 contextProvider에는 하나의 value값으로 하나의 객체만 들어갈 수 있다. const CalculatorProvider = ({ children }) => { // 연산자..

리액트설치 깃 연동하기

노드설치 후 vscode창에 1. 폴더를 새로 만들었을 경우 바로 설치 npx create-react-app . 2. 프로젝트 폴더를 새로 만들경우 npx create-react-app 프로젝트명 3. 깃허브 들어가서 리포지토리 생성후 4. 깃허브 계정이 2개일 경우 ssh 로 클론 받은 후 5. git remote add origin git@github.com-git2:[파일명]git -git1 : 회사계정 / git2 : 개인 깃 계정 이모션 설치 npm i @emotion/styled @emotion/react

이미지 태그가 항상 center를 보여주도록 하는방법

방법1. -css .c_img { position: relative; left: 50%; max-width: 1920px; margin-left:-960px; line-height: 0; font-size: 0; text-align: left; } .c_img > img { position: relative; left: 50%; max-width: 1920px; margin-left: -960px; } 방법2. .img-size { overflow:hidden position: relative; width: 100%; height: 600px; } .img-center { text-align: center; position: absolute; top: 0; right: -200%; bottom: 0; l..