본문 바로가기

분류 전체보기

 (104)
<자바스크립트 Javascript> 데이터 타입 자바스크립트의 데이터 타입은 크게 두 가지로 나뉜다. 원시 타입과 객체 타입이 그것이다. 1. 원시 타입 1) 숫자 타입 : 정수, 실수의 구분이 없음(C, 자바 언어와의 차이점). 대신 모두 실수로 처리함. *NaN 산술 연산 불가(not-a-number) 2) 문자열 타입('', "", `` 기호로 감쌈) 3) 불리언(boolean) 타입 : 참과 거짓을 나타냄 4) undefined 타입 : var 키워드에 자동으로 할당됨 5) null 타입 : 값이 없음을 의도적으로 명시할 때 사용(대소문자 구별 필요) 6) 심벌(symbol) 타입 : ES6에서 새로 추가된 타입. 변경 불가능하다는 특징을 가짐 2. 객체 타입 원시 타입의 6가지 항목 이외의 값은 모두 객체 타입이다. 3. 정적 타입과 동적 타..
<자바스크립트 Javascript> 자주 사용되는 용어 알기 자바스크립트에서 자주 사용되는 용어와 그 의미를 정리한 것이다. 내용은 아래와 같다. 1) 값 식(표현식)이 평가되어 생성된 결과이다. 평가는 식을 해석해서 값을 생성하거나 참조한 것이다. ex. 10 + 20 -> 평가되어 30이라는 값 생성 2) 리터럴 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 혹은 약속된 기호('', "", ., [], {}, // 등)를 사용해 값을 생성하는 표기법이다. 자바스크립트는 리터럴을 평가해 값을 생성한다. 3) 표현식 값으로 평가될 수 있는 문(statement)이다. 표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다. 리터럴도 값으로 평가되기 때문에 표현식이 된다. ex. 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출..
<CSS> 페이지 전환 효과 - CSS 페이지 전환 효과 페이지 이동 시 슬라이딩으로 다음 화면이 나타나는 효과를 구현하였다. 기능은 CSS의 animation을 이용하여 transform 속성 값에 슬라이딩 효과처럼 보이도록 코드를 작성하였다. 코드는 아래와 같다. 1) HTML 먼저 인덱스 페이지(첫 페이지)의 코드를 아래와 같이 작성한다. Welcome Home About CSS는 외부 파일로 연결하였고, a 링크의 About 폰트가 있는 버튼을 클릭 시(버튼 태그는 아니고, 버튼처럼 모양을 만든 a 링크 태그이다) 다음 페이지로 이동하도록 작성하였다. 다음 페이지인 About 페이지의 HTML 코드도 똑같이 작성한다. id명과 버튼 클릭 시 다시 첫 페이지인 인덱스 페이지로 이동되는 것 외에는 모두 동일하다. Welcome ..
<자바스크립트 JavaScript> 변수 1) 컴퓨터의 작동 방식 역할 - CPU : 연산 / 메모리 : 데이터 기억 *메모리 : 데이터를 저장할 수 있는 메모리 셀(cell)의 집합체. 메모리 셀 하나의 크기는 1바이트(8비트). 컴퓨터는 메모리 셀의 크기인 1바이트 단위로 데이터를 저장, 읽음. ex. 10 + 20 의 계산 - 코드를 계산(평가)하고, 10,20,+라는 기호(리터럴과 연산자)의 의미를 알고, 10+20이라는 식(표현식)의 의미를 해석(파싱)한다. 2) 메모리 주소 메모리 셀의 각 셀은 고유의 메모리 주소를 갖는다. 메모리 크기만큼 정수로 표현되며, 메모리에 저장되는 데이터는 모두 2진수로 저장된다. 3) 변수 메모리 주소를 통해 직접 값에 접근하는 것은 치명적 오류를 발생시킬 가능성이 있어 매우 위험하다. 따라서 자바스크립..
<자바스크립트 JavaScript> 배경과 역사 - 자바스크립트의 탄생배경과 역사 코딩 공부하는데 왠 탄생배경과 역사냐, 할수도 있겠다. 그런데 자바 웹 프로그래밍을 공부할 때에 책을 통해 Servlet과 JSP의 탄생배경을 배우게 되었는데, 그러고나니 덕분에 두 기능의 차이점이 보이고 웹 프로그래밍에서 어떤 역할을 하는지 이해하게 되면서 드디어 전체적인 흐름을 이해하여 코드를 작성하는 것이 가능해지더라. 그래서 자바스크립트를 사용하고 배워가면서 동시에 이런 역사적인 흐름도 알고 있는 것이 좋겠다, 라고 생각하여 기본서를 천천히 읽어보고 있다. 다만, 탄생한 시기라던가 만든 회사명까지 일일이 기억해야 하고 그런 것은 물론 아니다. 어디까지나 더 깊은 이해를 통한 개발을 위해서다. 따라서 위 주제에 대해 간단히 핵심만 짚고 가자면 다음과 같다. - 탄생..
<CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이 2. 자식 요소 flex item 자식 요소인 flex item를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다. *유의점 : CSS 기존 속성 중 float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다. 1) order flex container에 추가된 순서를 기준으로 각 flex item에 번호를 부여하여 순서를 바꿀 수 있다. ex. order:정수값; 2) flex-grow 각 flex item들에 대해 설정한 값으로 너비를 준다. 화면이 늘어나면 같이 늘어난다. *기본값은 0 ex. flex-grow:양의 정수값; 3) flex-shrink 각 flex item들에 대해 설정한 값으로 축소된다. 화면이 줄어들면 설정한 값만큼 축소된다(숫자가..
<CSS> Flexbox 레이아웃 (1) - Flexbox란? CSS3의 새로운 레이아웃 방식으로, 비교적 최신 브라우저에서 사용이 가능하다. Flexbox 레이아웃을 이용하면 부모 태그 내 자식 태그들의 위치나 정렬 등의 레이아웃 설정을 보다 편리하게 할 수 있다는 장점이 있다. - Flexbox 레이아웃 구성 크게 flex container라는 부모 요소가 있고, 이 내부에 flex item이라 불리는 자식 요소들이 위치한 형태로 구성된다. 이러한 관계를 갖고 있기 때문에, Flexbox를 사용하려면 부모 요소에 display 속성의 값을 flex로 먼저 설정한 후 사용할 수 있다. 혹은 부모 요소가 inline이면 inline-flex로 display 속성의 값을 설정해주면 된다. 구성은 flex container과 flex item들이 ..
<자바스크립트 Javascript> mouseover, mouseout 이벤트 - 자바스크립트 mouseover, mouseout 이벤트 자바스크립트에서 마우스와 관련된 이벤트들을 활용하여 재미있는 효과를 만들었다. 사용한 이벤트는 mouseover와 mouseout인데, 선택한 영역에 마우스가 진입하는 이벤트가 나타나면 효과가 나타나고, 마우스가 영역 밖으로 벗어나는 이벤트가 나타나면 효과가 사라진다. 다음은 개인 프로젝트의 예시 사진이다. 프로그래밍을 위한 추천 도서를 소개하는 페이지에 나열된 목록 중 하나다. 도서의 사진 위로 마우스가 이동하면, mouseover 이벤트가 발생하면서 이미지는 흐려지고 '더 알아보기' 문구가 나타난다. 클릭하면 도서 소개 페이지로 이동도 한다! 그리고 마우스가 다시 사진 영역을 벗어나면, mouseout 이벤트가 발생한 것으로 인식하고 원본 도..
<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (4) 결과 페이지를 위한 코드 구현 시, 방법이 없다고 판단하여 일일이 나열하는 것으로 마무리했었다. 그런데 다시 생각해보니 반복문으로 코드 길이를 줄이면서 더 효율적으로 코드 구현이 가능한 전제 조건은 이미 마련되어 있었다. 그것은 바로 반복분에서 사용하는 '인덱스'를 활용하는 것이었다. 따라서 차례로 다음과 같이 코드를 변경하였다. //변경 전 코드 function result() { const r1 = JSON.parse(localStorage.getItem('a1')); const r2= JSON.parse(localStorage.getItem('a2')); const r3= JSON.parse(localStorage.getItem('a3')); const result = [r1.a1, r2.a2, r..
<자바 Java> 쿠키(Cookie)와 세션(Session) - 세션 트래킹(Session Tracking) HTTP 프로토콜로 통신하는 웹 페이지들끼리는 그 특성상(stateless 방식) 서로의 상태나 정보에 대해 알 수 없다. 따라서 서버 단에서는 이를 포워딩이나 바인딩을 통해 처리해주는 것인데, 클라이언트 관점에서는 이를 '세션 트래킹(Session Tracking)' 기능으로 개발자가 구현하고, 웹 페이지들간에 서로의 상태를 알고 정보 공유를 할 수 있도록 만들어준다. 보통 이러한 정보 공유는 DB를 통해 이루어지지만, 동시 사용자 수가 많아지는 경우 속도가 느려질 수 있어 보다 빠른 속도로 이용하기 위해 세션 트래킹 방법을 사용한다. *데이터 연동 : DB 저장 세션 트래킹 - 클라이언트 PC, 서버 메모리 등 저장 가장 큰 예로 한 웹 서비스에 회원가..

티스토리툴바