목록평일코딩 (107)

이안의 평일코딩

[JS] 기초 (2) - 문자대체, 찾기, 개수, 중복제거, 대소문자 변환

문자대체 .replace(/원래문자/, '변경할문자'); 문자찾기 .split(a) a에 해당하는 문자를 잘라낸다 대문자찾기 .toUpperCase() 대문자로 변경 .charCodeAt() ASCII코드로 변경. 대문자 65~90, 소문자 97~122 대문자로 통일 ASCII 소문자 a 97, 대문자 A 65. 차이는 32 대소문자 변환 .toUpperCase() .toLowerCase() 가장 긴 문자열 Number.MIN_SAFE_INTEGER 최대값을 찾기위해 먼저 가장 작은 정수로 잡는다. 가운데 문자 출력 Math.floor() 소수점 내림, 나눈 몫 구하기 .substring(2, 4) : 2번 인덱스부터 3번 인덱스까지. length => ng .substr(2, 4) : 2번 인덱스부터 ..
Study/JS Algorithm Rocket 2021. 5. 17. 15:40
[JS] 기초 (1) - 최솟값, 삼각형, 개수, 합, 홀수, 10부제, 일곱난쟁이

최솟값 삼각형 판별 만약 c가 max라면 a+b>max여야 삼각형 조건이 성립된다. 연필 다스 수 (12개당 1다스) Math.ceil, Math.floor 1부터 N까지의 합 최솟값 구하기 홀수 x%2!=0 https://iancoding.tistory.com/226
Study/JS Algorithm Rocket 2021. 5. 17. 11:18
[Vue] props 대신 slot을 써보자

slot으로 부모 -> 자식 데이터 전송법 FilterBox.vue (자식) 1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치) Container.vue (부모) {{filter}} 2. 태그사이에 데이터를 넣는다. slot 여러개 사용하기 name 속성을 주면 된다. (복잡하니 그냥 props 쓰자) FilterBox.vue (자식) 1. Container.vue (부모) 데이터1 데이터2 2. 보낼거 slot props slot 사용할 때 부모가 자식데이터 필요한 경우. FilterBox.vue (자식) 1. Container.vue (부모) {{작명.msg}} 2. 부모는 {{작명.자식데이터}} slot의 한계 slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. 즉..
Front-end/Vue 2021. 5. 14. 18:28
[JavaScript] 배열(Array)의 unshift(), push(), shift(), pop()

배열에 값 추가 .unshift() 배열의 맨 앞값 추가 .push() 배열의 맨 뒷값 추가 var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var unshift = fruits.unshift("Grape"); console.log(fruits); //"Grape","Apple", "Banana", "Orange", "Strawberry" var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var push = fruits.push("Grape"); console.log(fruits); //"Apple", "Banana", "Orange", "Strawberry","Grape" 배열에 값 제거 .sh..
Front-end/JavaScript 2021. 5. 14. 17:21
[Vue] 이미지 업로드 및 불러오기

이미지 업로드한 것을 HTML에 보여주려면 두가지 방법이 있다. FileReader() : 파일을 글자로 변환해준다. URL.createObjectURL() : 이미지의 가상 URL을 생성해준다. (다만 새로고침하면 사라진다.) => background-image속성으로 집어넣으면 된다. multiple을 넣으면 다수의 파일을 선택할 수 있다. accept="image/*"를 넣으면 이미지 파일을 가져올 수 있게 기본으로 설정된다. var file = e.target.files; file[0].type과 같이 자바스크립트에서 .type 사용하면 image/png 와 같이 확장자 검사가 가능하다. 조건문을 사용해 일부 확장자만 가능하게끔 설정을 해주면 된다. App.vue URL.createobjectUR..
Front-end/Vue 2021. 5. 14. 16:53
[CSS] 우선순위 배치 Navbar 가장 최상단으로 올리기

z-index 웹사이트를 제작하는데 왼쪽사진과 같이 Navbar위로 이미지가 상단으로 올라가 당황했다. 하나만 기억하면 된다. 바로 CSS에 z-index로 우선순위를 매기면 되는 것. .Header { position: fixed; color: white; font-family: 'NanumSquare', sans-serif; background-color: #11ffee00; font-size:40px; font-weight: 400; width: 100%; height: 80px; top: 0; z-index:1; } Header라는 className을 가진 Navbar에 z-index:1을 넣어주면 가장 최상단으로 올라가 해결된다. z-index의 숫자가 낮을수록 우선순위로 밀리고 높을수록 우선순..
Front-end/CSS & SASS 2021. 5. 12. 13:58
[React] 리액트 헤더 스크롤 시 CSS 변경

헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다. iancoding.tistory.com/216 [Vue] 스크롤 시 헤더 색 변경 1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록.. iancoding.tistory.com Vue는 위의 블로깅을 참조. Header.js import React, {useState, useEffect} from 'react'; import "./css/Header.css"; fu..
Front-end/React 2021. 5. 12. 11:40
[React] 리액트 이미지 넣는 방법 (이미지 경로)

리액트 이미지 경로 보통 public에 이미지들을 다 집어넣고 쓰는 편인데 정말 간편한 방법이 있어 공유하고자 한다. 먼저 public에 img라는 폴더를 만들어준다. 그리고 src에서 작업하는 곳에서 이미지를 불러올 때 경로를 img/를 넣으면 아주 쉽게 불러온다. import React from 'react'; import "./Card1.css"; function Card1() { return ( ) } export default Card1; 간단하쥬?
Front-end/React 2021. 5. 11. 13:55
Prev 1 2 3 4 5 6 ··· 14 Next