입력값이 배열인지 아닌지 판단하려면 어떻게 해야 할까?기본적으로 다음과 같이 if문을 쓰고 여러가지 조건을 붙이는 생각을 할것이다 1. typeof =='object'배열의 type은 기본적으로 'object'로 출력된다그래서 typeof연산자를 이용해 'object'인지 아닌지 판단한다 그렇지만 이러면 일반적인 객체도 type이 object이기 때문에 이것만으로 배열을 골라낼 수는 없다따라서 2번,3번 조건들로 object값을 가지는 다른 객체들 중에 배열이 아닌 것들의 특징을 이용해 배열을 골라내보자 2. inputArray !== nullJavaScript에서 null은 객체이며, 배열도 객체이기 때문에, null을 제외하는 조건을 추가해야 한다. 그래서 !==null 조건으로 inputArray가..

자바스크립트 비구조화 할당(Object Destructuring Assignment)에 대해 알아보겠습니다 다른 언어에도 이와 비슷한 문법은 있습니다 다른 언어에서는 '구조분해 할당(Structuring/Pattern Matching/Destructuring Assignment)' 이라고 부르는데, 둘 다 같은 문법과 기능이며 자바스크립트에서만 특별히 비구조화 할당이라고 부릅니다 비구조화 할당을 쓰지 않고 코딩하기우선 비구조화할당을 사용하지 않고 코딩을 해보겠습니다 다음과 같은 사용자의 이름, 키, 국적을 저장하는 객체가 있다고 가정해봅시다const user = { name: 'clice', height: 183, country: 'Korea' }; 그런다음 사용자의 이름, 키, 국적을 출력하려면 다음과..

프론트엔드 공부를 하면서 Figma 디자인을 직접 하고, 웹 페이지를 만들어야 할 일이 종종 있었다. 문득 내가 하고 있는 일은 프론트 개발이 아니라 웹 퍼블리싱인것 같다는 의문과 현타가 왔다. 내 진로는 프론트엔드 개발자인데, 국비 출신 비율이 높은 웹 퍼블리셔 가 되는것이 아닌지 걱정이 되었다. 웹 퍼블리셔를 무시하는것이 아니라, 나는 개발자가 되고 싶은데 컴퓨터 전공과 멀어지고 있는 기분이 들었다. 프론트엔드 개발자로서 이정표를 확실하게 하기 위해 웹 퍼블리셔와 프론트엔드 개발자가 각각 어떤 일을 하고 그 차이점이 무엇인지에 대해 알아보자 프론트엔드 = 웹 퍼블리셔 ??웹퍼블리셔와 프론트엔드 개발자는 둘 다 웹 사이트 제작 과정에서 중요한 역할을 한다. 많은 국비학원에서 이를 동일시 하는데 업무 범..

동적 타입 언어 자바스크립트 언어는 크게 동적타입언어, 정적 타입언어, 강타입 언어, 약타입 언어로 나눌 수 있다. 동적 자료형 언어는 런타임 시에 변수의 자료형이 결정된다. 예시로는 Python, JavaScript, PHP, Ruby 등이 있다. 자료형이 런타임에 결정되기 때문에, 코드 작성 시 자료형을 명시적으로 지정해 줄 필요가 없다. 반면 정적 자료형 언어는 컴파일을 할 때 변수의 타입이 결정된다. 예시로는 C, C++, Java, C#, Scala 등이 있다. 자료형이 컴파일을 할 때 결정되기 위해서는, 코드 작성 시 명시적으로 자료형을 지정해주어야 한다. 자바스크립트는 동적 자료형(Dynamic) 언어이다. 그렇다면 자바스크립트가 동적 타입 언어라는걸 아는게 왜 중요할까? 아래 예시를 살펴보..

hasOwnProperty 함수의 기능 객체, 문자열 등 대상이 특정 속성을 가지고 있는지 판단하는 함수이다. 있는지 없는지 '판단'하는 함수이니까 반환값이 참/거짓으로 나온다. (Boolean 값으로 반환된다) 함수 사용 방법 대상.함수('찾을대상') 으로 사용한다 Variable.hasOwnProperty('Property') 로 사용한다. 예제 예제를 한번 살펴보자 //첫번째 예제 var actor1='주현영' var actor2='주만년' var actor3='주변호' var actor4='주집착' 배우 4명의 이름이 위와 같다. 이름은 순서대로 주현영, 주만년, 주변호, 주집착이다. 이때, 이름이 '주현영'인지 확인하고 싶다. 그러면 actor.hasOwnProperty('주현영') 으로 확인하..

나도 모르는 사이 에러를 만드는 Javascript자바스크립트는 전 세계 모든 웹 페이지에서 쓰이는 아주 인기 많은 언어이다. 하지만 인기에 비해서, 의외로 10일만에 개발된 아주 허접한 언어이다. 그렇기에 허점이 많다. 가장 큰 허점은 바로 타입을 명시하지 못 한다는 점이다. 그렇기에 한 변수에 숫자가 들어가기도 하고, 문자가 들어가기도 한다. 예제를 한번 살펴보자//매개변수 두개를 더하는 함수 function add(a,b){ return a+b }add(1,1) //2 두 매개변수를 더하는 add 함수가 있을때, 위와 같이 add(1,1)을 넘겨주면 반환값은 2가 된다. add(1,'1') //11 하지만 두번째 매개변수가 문자 1이라도, 자바스크립트는 어떻게든 두 변수를 더할것이고, 2가 반환될것..

HTML을 영단어 외우듯이 암기하고 있는 개발자는 없다. 항상 필요할 때 마다 검색을 해보고, 그때 그때 사용하는 편이다 이번 글에서는 진짜 자주 사용하는데, 정작 헷갈리는 태그들에 대해 정리해보자 반드시 다 외우라는 것이 아니다! 여러번 보면 자연스럽게 익숙해듯이, 이번 기회에 한번 더 보라는 취지의 글이다. CSS-Tricks 에서 제공한 자료에 따르면 가장 유명한(자주 쓰는) HTML 태그는 위와 같다 그럼 진짜 자주 쓰지만, 정작 헷갈릴 때가 많아 항상 검색해보는 태그들에 대해 알아보자 주석이다 가끔 // 나 /* 을 사용하는 경우가 있는데, 이건 Javasciprt 주석이다. 이걸 헷갈리는것 만큼이나 쪽팔린건 없으니까 꼭 기억하자 문서의 구획을 정의한다. 실제 프로젝트에서 CSS와 함께 활용할 ..

링크드인에서 BX 디자이너라는 직업을 알게 되었다 처음 들어보는 직업이라 신기해서 찾아보게 되었다 BX 디자이너 BX 디자이너는 Brand eXperience의 약어로, 브랜드 경험을 전문적으로 다루는 디자이너를 의미한다. 브랜드 경험은 사용자가 브랜드와 상호 작용하며 느끼는 모든 측면을 아우르는데, 로고 및 디자인뿐만 아니라 서비스, 제품, 홍보 등 다양한 영역을 포함한다 BX디자이너가 하는 역할 BX 디자이너는 브랜드의 이미지와 가치를 설정하고 유지하는 역할을 맡는다. 브랜드를 대중에게 의도한 대로 전달하고, 대중이 받아들이는 과정에서 의도하지 않은 이미지가 생기지 않도록 관리하며, 이를 통해 브랜드가 지닌 가치와 신뢰도를 높이는 작업한다 BX 디자이너의 중요한 이유 이 직업은 브랜드 경험을 총체적으..

호이스팅에 대한 개념은 자바스크립트 개발 면접에 필수적으로 나오는 사항이니, 프론트엔드 개발자라면 꼭 다른사람에게 설명할 수 있을만큼 숙지하고 넘어가자 호스팅? 호이스팅? 호스팅(Hosting)과 호이스팅(Hoisting)은 이름만 비슷한 완전 다른 개념이다- 인도와 인도네시아 정도 차이라고 생각하면 된다 호스팅은 웹 서비스나 서버 호스팅을 할 때 쓰는 용어이다 홈페이지를 만들어서 AWS서버에 올리면, 서버에 프로젝트가 '호스팅' 되었다 라고 한다 반면 호이스팅은 자바스크립트의 '특징'을 칭하는 용어다. Javascript는 인터프리터 언어임과 동시에 컴파일 언어다. 그래서 이러한 특징이 존재한다. 그럼 호이스팅에 대해 더 자세히 알아보자 호이스팅(Hoisting)의 개념 호이스팅(Hoisting)은 J..

프로젝트를 하다가 이미지 슬라이드를 만들 일이 있었다 그래서 다양한 영상을 찾아봤는데 좌우로 슬라이드 되는 코드는 아래 영상을 보면 된다 https://youtu.be/qHzSQrLjxlQ?si=qu4nNl1GeI4PdhyJ 근데 나는 위 아래로 슬라이드 되는 코드가 필요했다 30분 정도 구글링을 하다가, 시간이 조금 지연되길래 날먹 방법을 생각해냈다 슬라이드 되는 동영상 다운 받아서 video로 만든 다음에 autoplay, loop로 자동재생, 무한루프 시키는것이다 그렇게 되면 슬라이드가 계속 바뀌는 것 처럼 보인다~ 방법 넣을 동영상을 import 한 뒤에 넣고자 하는 위치에 아래 태그를 사용한다 직접 이미지를 쪼개서 넣고 직접 슬라이드를 만들어봐야겠지만, 이렇게 야매로 짜서 완성만 하는 경험도 중..

더보기진로를 프론트엔드로 정하고 공부했었다.그동안 프론트엔드를 공부하면서 노션에 정리해둔 개념을 블로그에 올리고자 한다대부분 혼자 공부한 내용이라 틀린 부분이 있을수도 있다. 댓글로 알려주시면 바로 고치겠습니다!   컴포넌트란?컴포넌트는 재사용 가능한 코드조각이다(UI의 함수)엘리먼트와의 차이는 엘리먼트는 컴포넌트에 포함되어 있다 사용자 정의 함수=컴포넌트둘이 같은 말이다 리액트를 통해 사용자 정의 함수를 만들어보자이때 사용자 정의 함수는 대문자로 작성한다    사용자 정의 함수(컴포넌트) 만들기함수니까 function을 사용하여 정의하자  이렇게.  그리고 이 함수를 가져다 쓸 때는이런식으로 작성하면 된다  코드 예시컴포넌트 정의를 하고 function Header() { return ( ..

생활코딩 책을 보고 실습 🎲 코드 🎲 실행결과 night버튼을 누르면 야간 모드로 day버튼을 누르면 주간 모드로 바뀌는 것을 확인할 수 있다