콘텐츠기획자의 IT입문서

이번 과제는 내가 좋아하는 프론트엔드 작업 뜯어보기다! 어떤 프로덕트를 선정할까 고민하다가 음악 스트리밍 서비스 '바이브'로 선정하였다. 바이브는 웹과 앱을 모두 지원하며, 웹 페이지의 경우 반응형 웹으로 구성되어 있다. 앱 서비스의 경우 코드를 확인할 수 없으니 웹 페이지를 바탕으로 어떤 식으로 서비스가 구성되어있는지 살펴보려 한다. 모든 페이지를 다루려면 꽤 많은 시간이 소요될 것 같아 메인화면에서의 HTML, CSS를 파악하고 어떤 식으로 동작하도록 설계되어있는지 분석해보았다! (그래도 많아서 스크롤 압박 예상됨^_ㅠ) HTML : 콘텐츠의 레이아웃 바이브의 index 페이지는 크게 , 'container'라는 이름을 가진 , , 'player'라는 이름을 가진 태그로 구성되어 있다. 대부분의 웹 ..

자바스크립트에서의 연산 왼쪽에서 오른쪽으로 순차적으로 진행된다는 점을 명심하자!! 단항 연산자 Unary = 피연산자를 하나만 받는 연산자. (양수와 음수를 나타내는 +, -) let x = 1; x = -x; alert( x ); 이항 연산자 Binary = 두 개의 피연산자를 받는 연산자. let x = 1, y = 3; alert( y - x ); 삼항 연산자 연산자 종류 1) 덧셈 연산자 + : 대체로 숫자를 더한 결과값을 반환하지만, 이항 연산자 +의 피연산자로 문자열이 전달되면 문자열을 병합한다. : 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어난다. : 단항 연산자로 +를 사용할때, 피연산자가 숫자가 아니라면 숫자형으로의 변환을 ..

형 변환 Type Conversion 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. Alert 창에서 전달받은 값은 문자열로 자동 변환됨. 수학 관련 연산자가 전달받은 값은 숫자로 변환함. 전달받은 값을 의도를 갖고 원하는 타입으로 명시적 변환해 주는 것도 가능하다. 1. 문자형으로 변환 무언가를 출력할 때 주로 발생하는 형 변환. Alert 메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다. 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다! String(value) 함수를 호출해 전달받은 값을 문자열로 변환하는 것도 가능하다. 2. 숫자형으로 변환 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 ..

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있으므로 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다! // no error let message = "hello"; message = 123456; 따라서 자바스크립트는 동적 타입 언어이다. *동적 타입 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어. 자바스크립트에는 10가지 기본 자료형이 있다. 자료형은 크게 원시 자료형과 참조 자료형으로 나뉜다. *원시 자료형 : 한 가지 값만 표현할 수 있는 자료형. *참조 자료형 : 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있는 자료형. 원시 자료형 1. 숫자 Number = 정수 & 부동소수점 숫자 +) 숫자형엔 일반적인 숫자 ..

변수 LET 변수란, 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 따라서 변수명은 간결하고, 명확해야 하며, 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다. 자바스크립트에서 let 키워드를 사용해 변수를 생성한다. (과거에는 'var'을 사용했다.) 변수명을 정하기 위한 규칙 userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요. 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요. 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용..

jQuery 쓰는 것도 카페24 쓰니까 click 이벤트로 css 바꿔주는 정도만 쓰다보니 자바스크립트 배웠던 게 기억 속에서 희미해져서.... ^_ㅠ 복습 차원에서 다시 차근차근 공부해본다! 스크립트 HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용해야 한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장해야 한다. 그 이유는 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다고 한다! 예를 들어, 여러 페이지에서 동일한 스크립트를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하기 때문에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다. 문 (St..

- 문제점 - 은 파일 선택 버튼과 파일명이 출력되는 부분이 하나로 되어있기 때문에 스타일을 변경하고자 해도 생각한대로 잘 안된다. 이럴 경우 을 통해 스타일링을 해주면 된다! 1. label과 input을 연결한다. 2. input을 hidden 처리한다. 3. 스타일을 label에 적용한다. 나는 추가적으로 파일명을 노출 시키고 싶어서 이 부분은 스크립트로 작동되게 했다. jQuery만 썼더니 자바스크립트로 어떻게 작성해야할지 너무 헷갈린다..^_ㅠ (리액트 공부 전 다시 자바스크립트부터 공부해야겠다.) 에 변화가 있을 경우 에 파일명을 노출 시킬 것이라 에 onchange로 기능을 주었고 스크립트는 아래와 같이 작성해주었다. function addImg(){ var fileName = documen..