분류 전체보기

조건문이란 조건에 따라 다른 코드를 실행하는 구문입니다. 조건문에는 If와 Switch가 존재합니다. 이번엔 if 조건문에 대해 알아보겠습니다. 1. If 조건문 if 조건문은 '참과 같은 값'이면 코드 블록을 실행합니다. if 키워드 다음 소괄호에 조건을 작성하고 중괄호 범위의 코드 블록에 실행할 코드를 작성합니다. 이때 조건이 '거짓과 같은 값'이라면 구문이 실행되지 않습니다. const isShow = true; const checked = false; if (isShow) { console.log('Show!'); } if (checked) { console.log('Checked!'); } 위 코드에서는 isShow라는 변수가 '참과 같은 값'인 true이기 때문에 첫 번째 코드 블록이 실행됩니..

1. 함수란 함수(Function)란 특정 기능을 수행하는 일부 코드의 집합으로, 변수와 마찬가지로 재사용이 가능합니다. 함수는 여러 코드를 묶어서 실행할 수 있는 코드의 집합이라고도 볼 수 있습니다. 기본적인 형태로 function () {} 라는 형태를 가집니다. 함수를 코드의 집합이라고 부르는 이유는 중괄호 {...} 내부에 코드를 넣기 때문입니다. 그렇다면 함수를 왜 쓸까요? 함수를 쓰면 좋은 점이 있습니다. 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있습니다. 긴 프로그램을 기능별로 나눠 여러 함수로 나눠 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽습니다. 여기서는 기본적인 함수의 패턴과 사용법을 알..

콘텐츠를 이용할 때에 우리는 '검색' 기능을 살면서 필수로 경험하게 됩니다. 필요한 정보를 찾고 싶을 때, 심지어는 무엇을 필요로 할지 고민할 때도 접합니다. 검색과 탐색 UX 분석을 한다면 디자인 설계에 더 도움이 될 것 같아 정리해보았습니다. 사용자는 원하는 콘텐츠를 찾기 위해 검색어를 입력하거나, 메뉴를 탐색합니다. 검색을 할까요, 탐색을 할까요? 이 문제는 서비스 공급자에게 제일 중요한 고민 포인트입니다. 사용자에게 직접 찾아주냐, 아니면 사용자에게 다양한 맥락에서 적합한 방법으로 추천을 해주냐의 차이인 것이죠. 1. 검색과 탐색 검색과 탐색의 가장 큰 차이점 기능 이전, 검색과 탐색의 차이점을 명확하게 짚고 넘어가야 합니다. 검색 사용자가 구체적으로 원하는 정보가 있을 때 필요한 기능 탐색 사용..

1. 자바스크립트 자료형 자바스크립트에서 대부분의 코드는 데이터를 기준으로 작성됩니다. 따라서 데이터를 기준으로 사고하는 능력을 키워야 합니다. 자바스크립트에서 사용되는 데이터 종류, 이를 자료형이라고 하는데 자료형은 다음과 같습니다. String, Number, Boolean, Undefined, Null, Symbol, BigInt, Object, Array, Function 2. 자바스크립트 자료형의 종류 1) String String은 문자 데이터입니다. 큰따옴표, 작은따옴표, 백틱과 함께 표기합니다. 이렇게 특정 기호를 통해 데이터를 표현하는 방식을 리터럴이라고 합니다. const myName = "Seunghyun"; const email = 'seunghyun020907@naver.com';..

자바스크립트의 오해: 자바스크립트 = 자바? 자바스크립트(JavaScript)란 웹 브라우저에서 사용하는 프로그래밍 언어입니다. 참고로 이름과 달리 자바스크립트는 자바라는 프로그래밍 언어와는 거의 관련이 없습니다. 이름이 비슷한 것은 마케팅과 연관이 있기 때문이며 엄밀한 다른 언어입니다. 자바스크립트의 정의 고급 레벨의 객체 지향 다중 패러다임 프로그래밍 언어 무슨 의미인가? 프로그래밍 언어는 기본적으로 우리가 코드를 작성하도록 도와주는 언어입니다. 컴퓨터가 무엇을 하도록 지시하는 언어라고 생각하면 됩니다. 그게 자바스크립트 사용의 주요 목표입니다. 그리고 자바 스크립트는 고급 언어입니다. 복잡한 것을 생각할 필요가 없습니다. 여기서 복잡한 것들은, 컴퓨터 메모리나 프로그램을 실행하는 동안 관리하는 것들..

1. 멀티미디어 인터넷 초기에는 웹 사이트에서의 학인을 PC를 통해서만 가능했습니다. 그래서 여러 가지 미디어 파일을 확인하기 위해서는 ActiveX를 설치해야만 볼 수 있어 불편했습니다. 그러나 HTML5에서는 ActiveX를 따로 설치하지 않아도 텍스트와 이미지, 오디오, 비디오를 웹 페이지에서 바로 볼 수 있습니다. HTML5에서 멀티미디어를 재생하는 방법에 대해 알아보겠습니다. 2. : 오디오 파일을 넣는 태그 HTML5에서는 오디오를 재생하기 위해 태그를 사용합니다. 형태 3.: 영상 파일 넣기 HTML5에서 영상을 실행하려면 태르를 사용합니다. 태그의 형식은 다음과 같습니다. 멀티미디어_비디오 video 태그 안에 들어갈 수 있는 속성은 다음과 같습니다. 속성 설명 controls 웹 화면에 ..

1. 공부 목표 방학에 UX & UI 이론 공부를 진행했습니다. 사람들에게 긍정적인 영향을 주고 싶다는 생각을 계기로 사용자 중심 사고를 배우고 싶었습니다. 시대 흐름에 따라 IT는 사용자와 맞닿아 있은 사회가 되었고, 사람들이 좀 더 손쉽게 변화를 겪을 수 있는 일을 찾고 싶습니다. 사용자는 어떤 불편함을 느끼는지, 이러한 문제들을 해결한다면 회사에 어떤 좋은 점이 있을지 고민하는 시간이 된 것 같습니다. 특히 회사의 방향과 고객의 문제에서 어떤 교집합을 찾아낼 수 있을까를 앞으로도 고민할 과제로 두고 계속 공부할 계획입니다. 저는 완벽한 사용자의 경험이 늘 멈춰 있다고 생각하지 않습니다. 사용자는 늘 변하고, 우리가 유용하게 쓰는 툴도 변하면서 유연하게 고민하는 것이 바로 UX 디자이너의 역량이라고 ..

1. value와 placeholder의 차이점 input 태그 속성에는 value와 placeholder을 지정해줄 수 있습니다. 차이점을 쉽게 파악하기 위해 코드로 바로 확인해보겠습니다. value와 placeholder 차이점 value는 초기값으로, 말 그대로 초기에 이미 입력되어 있는 값입니다. 입력 시 이어서 작성됩니다. 사용자에게 입력할 때 도움을 줍니다. (ex. 휴대폰 번호 input 공간일 때, value로 010-을 입력한다면 직관적 이해에 도움을 줍니다!) placeholder은 예시값으로 입력할 때 삭제되어 보이지 않습니다. 2. 태그 지난 시간에 form 태그에서 다양한 input 태그의 유형에 대해 알아보았습니다. [HTML] form 태그 2 - 다양한 input 태그의 유형..