문제상황회사 프로젝트를 진행하며 한 페이지에서 하나의 svg icon을 여러 번 호출하는 경우가 많이 있었다. 평소에는 잘 보이던 이미지가 해상도마다 다른 컴포넌트를 보여주기 위해 media query를 이용해서 display: none 설정을 해주는 부분에서 svg가 정상적으로 표출되지 않는 문제가 발생하였다. See the Pen Untitled by 유지영 (@hagfyiyi-the-sans) on CodePen.예시로 작성한 코드처럼 동일한 svg 파일로 fisrt, second, third를 만들어주고 first에만 해상도에 따라 display: none 을 설정해주었는데 second, third의 svg 파일도 깨지는 것을 확인할 수 있다. 실제 프로젝트에서는 svg 파일이 아예 표출되지 않..
타입 변환은 크게 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환과 자바스크립트 엔진에 의해 암묵적으로 타입을 변환하는 암묵적 타입 변환이 있다. 암묵적 타입 변환 : 코드의 문맥에 부합하지 않을 때 자바스크립트는 에러를 띄우는 것이 아니라 암묵적 타입 변환을 통해 표현식을 평가한다. '10' + 2 // '102' 5 * '10' // 50 !0 //true if(1) {} 문자열 타입으로 변환 이항 연산자 +를 사용할 때 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작하여 다른 하나도 문자열로 변환된다. 1 + '2' // '12' '2' + 1 // '21' → 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이기 때문! 0 + '' // '0' -0 + '' // '0'..
이진법 관련 알고리즘 문제를 풀다가 알게 되었다. 하나의 줄만 사용하여 이진법 관련한 계산을 간단하게 할 수 있다. single vertical bar ('|') 란? : 각 수를 이진법으로 변환한 후 각 자리를 1 또는 0으로 합한 후 결괏값에 대한 십진법 수를 반환한다. single vertical bar를 사용할 때와 사용하지 않을 때 어떤 차이가 있는지 알아보자. single vertical bar 없이 구현하기 const number1 = 21; const number2 = 28; number1.toString(2); // '10101' number2.toString(2); // '11100' 이진법으로 변환하면 각각 10101, 11100이다. 그리고 이 두 이진법의 각 자리를 비교하여 1이 ..
코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=3774s 구조 분해 할당(Destructuring assignment) :배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let [x, y] = [1, 2]; console.log(x); //1 console.log(y); //2 let users = ["Mike", "Tom", "Jane"]; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // l..
유튜버 코딩앙마님의 자바스크립트 중급 강좌를 보며 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=2396s Array arr.splice(n, m) : 특정 요소 지움 : n부터 시작해서 m개 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr); //[1, 4, 5] arr.splice(n, m, x) : 특정 요소 지우고 추가 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr); //[1, 100, 200, 5] 두 번째 인자로 ..
유튜버 코딩앙마님의 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh 숫자, 수학 메소드 toString() :10진수를 2진수 또는 16진수로 변환 괄호 안에 2를 넣으면 2진수로, 16을 넣으면 16진수로 변환하여 문자열로 만들어진다. let num = 10; num.toString(); //'10' num.toString(2); //'1010' let num2 = 255; num2.toString(16); //'ff' Math Math.ceil(): 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1) //6 Math.ceil(nu..
유튜버 코딩앙마님의 자바스크립트 중급 강좌를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=639s var과 let의 차이점 var은 재선언이 가능하지만 let은 불가능하다. var name = 'mike'; var name = 'snake'; //가능 let name = 'mike'; let name = 'snake'; //에러 hosting :스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 var은 선언하기 전에 사용할 수 있다. console.log(name); //undefined var name = 'mike'; 이렇게 var을 선언하기..
https://myhappyman.tistory.com/13 Javascript - 슬라이드쇼(SlideShow) 만들기 인터넷을 하다보면 여러 광고 사이트 또는 화장품, 쇼핑몰 등에서 흔하게 이미지가 하나하나 넘어가면서 상품이나 기술등을 나열한 모습들을 볼 수 있다. - 좌, 우버튼에 따른 이동 - 하단부 myhappyman.tistory.com 위 블로그 글을 바탕으로 원하는 부분을 변경하였습니다. 슬라이드 쇼를 만들 때 주로 사용하는 방법은 가로로 이어서 원하는 부분을 %로 변경하며 나타나게 하는 방법이다. 하지만! 굳이 이미지를 가로로 잇지 않고 해당하는 부분은 나타나게 하고 아닌 부분은 display를 none으로 해도 가능하지 않을까? 생각했고 그거에 해당하는 방법을 위 블로그에서 찾았다!..
×자바스크립트로 계산기를 만들어보고자 했다! 만들기 위해 참고한 글은 이곳 https://aosceno.tistory.com/615 [JS] 바닐라 자바스크립트로 간단한 계산기 만들어보기(2) 개선 사항 : 좀 더 단순화한 data object +/- 음수 양수 변환 추가 연산자로 이용한 연속계산과, = 버튼을 이용한 반복계산 오류 안 나게 개선 eval이 아닌 switch문으로 변경 See the Pen Caculator v1.2 by Oh.. aosceno.tistory.com 해당 글을 참고하여 계산기를 만들었고 그 과정에서 찾은 오류들을 해결하여 최종 계산기를 만들었다. 해당 글에서 찾은 오류는 1. 여러 값을 연속으로 계산하는 경우 앞의 연산자가 아닌 뒤의 연산자를 기준으로 계산되어서 5+3+2..
