티스토리

Web Development

검색하기

블로그 홈

Web Development

simostory.tistory.com/m

알아가는 번데기 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

React를 사용하는 이유? - 1 ) SPA과 VirualDOM React를 사용하는 이유에 대해서 프론트엔드 데이터 처리를 쉽게 도와주는 라이브러리 정도로만 알고 있어 React가 뭔지는 알겠는데 왜 사용하는지? 어떤 문제점을 해결하기 위해 만들어젔는지 알지 못해 찝찝했다, 그 찝찝함을 덜기위해 React를 좀더 자세하게 알아볼려고 한다. 이번 포스팅에선 React를 사용하는 이유에 대해서 알아 보기전에 숙지해야될 개념인, SPA와 VirualDOM에 대해서 알아보고자 한다. React는 SPA방식에 최적화된 라이브러리다! SPA (Single Page Application) SPA는 웹사이트 구성방법중 하나로 1개의 페이지만 있는 어플리케이션이라 정의 할 수 있다, 보편적인 웹 사이트 처럼 회원가입, 글쓰기 등 복잡한 기능을 지원하지만 처음에 호출된 HTML상에서.. 공감수 0 댓글수 0 2020. 7. 8.
CSS ) Flexbox 기본적으로 주 컨텐츠 내포하는 태그들은 block 성질을 가지고 수직으로 배치 되게 된다, 웹사이트 자체로만 봐도 컨텐츠 배치를 수직으로 제작한 경우가 대부분이다, 하지만 메뉴바와 같은 수평적으로 작성되는 컨테츠들이 존재하게 되는데, 기존 방법으로 float 속성을 사용하거나 display: inline으로 block 성질 컨텐츠를 수평으로 배치하였다, 하지만 해당 방법들은 다양한 문제를 발생시켰던 차선책에 불가하였다. flexbox는 수직수평 구조 조정의 적합한 기능들을 가지고 레이아웃을 보다 쉽게 구성할 수 있게 도와주는 개념(속성들)이라 보면된다. flexbox는 크게 container(부모)와 item(자식)으로 나눤 구조를 가지고 있다. flexbox는 item의 부모인 container클래스의.. 공감수 0 댓글수 0 2020. 6. 27.
이벤트 처리기로 등록하는 세가지 방법 이벤트 처리기란? 이벤트가 발생했을떄 실행되는 함수를 말한다, 이벤츠 처리로 등록하는 방법으로 세가지가 존재한다 1. HTML요소의 속성으로 등록하는 방법 2. DOM 요소의 프로퍼티로 등록하는 방법 3. addEventListener 메서드를 사용하는방법 HTML 요소의 속성으로 등록하는 방법 type = 액션의 타입을 지정한다 value = 지정값 (view의 보여지는 값) onclick = 이벤트 처리기의 종류를 나타내는 이름으로 onclick을 포함한 여러가지 이벤트 처리기가 존재한다. (onclick, ondblclick, onmousedown 등등) 위와 같은 선언으로 input 태그는 버튼이 클릭되었을때 이벤트처리기 뒤에 선언되는 함수의 기능을 실행하게 된다. displayTime() 위와 .. 공감수 0 댓글수 0 2020. 6. 27.
CSS) box model CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다. HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다, 그러기 때문에 요소들 마다 값을 지정해줘야 된다 * 익스플로러 8과 그 이전 버전에서는 width나 height를 지정할때 요소값도 포함되어 지정 되었었다, 이러한 차이점을 없애기 위해서는 반드시 HTML문서에 태그를 삽입해야만 한다. margin 특성상 backgrund 속성을 가지지 못하기 때문에 요소의 컨텐츠가 서로 떨어져 보이게 되는데 요소를 다른 요소의 위에 겹치게 하기 위해선 margin의 속성값을 음수로 .. 공감수 0 댓글수 0 2020. 6. 17.
HTML5 )Semantic HTML 사용이유와 태그 왜 시멘틱 태그를 사용해야되는가? 일반적으로 웹 페이지의 레이아웃을 잡기위해 div 태그를 사용하여 id이름으로 해당 레이아웃에 정보를 담아 사용하였다, 그로인해 개발자 간 협업 과정에서 각기 다른 해석과 분석으로 커뮤니케이션의 불편함이 존재했다, 그래서 W3C에서는 HTML5부터 의미요소(Semantic Element) 태그를 정의하여 각기 다르게 정의한 id 값을 역할에 맞는 태그로 명명 하여 기존에 발생한 문제점을 계선 해주었다. 의미요소(Semantic)의 사용은 이러한 커뮤니케이션에서 발생하는 문제 뿐만아니라 검색 엔진 최적화(SEO)에도 영향을 미친다, SEO가 기능을 할때 Semantic한 문서는 검색엔진이 결과 도출이 정확하고 빠르게 되어 시스템 부분에 긍정적인 영향도 나타나게 된다. HT.. 공감수 0 댓글수 0 2020. 6. 14.
HTML ) 엔티티 (Entity) html 태그 작성중 html에서 정의한 기호를 문자셋으로 사용하기 위해서 대체대는 기능이다. 추가적인 엔티티를 알고싶다면 아래 링크를 이용하기 바람 tcpschool.com/html/html_text_entities 공감수 0 댓글수 0 2020. 6. 14.
JavaScript ) 객체 리터럴 일반 문자열과 템프릿 리터럴의 차이점 작성방법 : 일반문자열 "..." , 탬플릿 리터럴 ` ... ` 1. 일반 문자열은 줄바꿈을 표한할때 시퀸스(/n)을 사용해야되지만 탬플릿 리터럴 ``은 일반적인 줄바꿈이 가능하다. var normal = "aaaaa aaaa" => 오류 발생 / (\n)시퀸스를 사용해야됨. var template = `aaaaa aaaaaaa` => 정상 동작 2. 탬플릿 리터럴 안에는 플레이스 홀더( ${...} )를 넣을 수 있다. var a = 1, b = 2; console.log(`${a} + ${b} = ${a+b}`); => 1 + 2 = 3 정상출력 플레이스 홀더 ${...}란 입력 값처럼 실행시점 외부에서 주어지는 값을 표현하는 식 객체 JS에서 객체란 이름(Pr.. 공감수 0 댓글수 0 2020. 6. 12.
WebSite가 생성되는 과정 ( 렌더링 과정 ) 웹 서버와 웹 브라우저의 통신 방법 웹 서버에 위치한 index.html파일을 웹 브라우저가 해당 웹서버의 IP주소로 요청을 한뒤 html결과값을 웹 브라우저로 받아와 렌더링과정을 거쳐 화면에 뛰어주게 된다. 랜더링이란 html,css,JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 아래 이미지는 웹이 만들어지는 일련의 과정이다 Backend Time(서버)과 Frontend Time(브라우저)으로 구분하여 웹 이 어떻게 화면에 표시되는지 보여준다. 기본적으로 브라우저마다 렌더링을 수행하는 렌더링 엔진이 존재한다, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표현한다 웹 프로그래밍 하며 사용되는 도구(태그,선택자)들 마다 엔진에 호환범위가 다르기 때문.. 공감수 0 댓글수 0 2020. 6. 8.
JAVA ) 다중 인터페이스 선언과 익명구현 객체 클래스의 상속은 단일적으로 이루어지는 반면 인터페이스를 구현하는 객체는 다중적으로 인터페이스를 선언할 수 있다. 다중 인터페이스를 구현한 객체는 implements한 인터페이스들의 추상 메서드의 실체 메서드들을 구현해야 된다. 만일 implements 한 인터페이스의 추상메서드를 하나라도 구현하지 않는다면 에러가 발생한다. 추상 메소드를 선택적으로 선언하고 싶다면, 객체를 추상 클래스(abstract)로 선언해야 된다. public class 구현 클래스명 implemnts 인터페이스 A, 인터페이스 B { // 인터페이스 A에 선언된 추상메서드 실체 메소드 선언 // 인터페이스 B에 선언된 추상메소드 실체 메소드 선언 } 인터페이스의 자동 타입 변환을 사용한 선언 방식은 두 가지가 존재한다, 일반적으로.. 공감수 0 댓글수 0 2020. 6. 2.
JAVA ) interface의 역할과 선언방법 (코드) 저번 포스팅에서 interface의 개념과 역할의 대해서 이론적인 내용만 다뤄었다, 백문이 불여일견이라고 이번엔 직접 interface를 구성하는 멤버들 각각의 선언방식과 의미 및 특징에 대해서 코드로 구현해보며 이해하려고 한다. interface를 구성하는 멤버 - 정적필드 - 추상메소드 - 디폴트메소드 - 정적메소드 // 인터페이스 public interface Annotation { // 상수 필드 public int MAX_VOLUME = 10; public int MIN_VOLUME = 0; // 추상 메소드 public abstract void turnOn(int volume); // 디폴트 메소드 default void setMute(boolean mute){ if(mute){ System... 공감수 0 댓글수 0 2020. 5. 27.
JAVA ) interface의 역할과 선언방법 (개념) interface란 무엇인가? 자바에서 interface의 역할이란 객체의 사용 방법을 정의한 타입이다. 일반적으로 개발코드가 직접 객체를 호출하고 사용하는데, 인터페이스를 사용하게되면 개발코드가 인터페이스 메소드를 호출하게 되고 인터페이스 메소드가 객체를 호출해서 개발코드로 리턴해주게된다. 즉 인터페이스는 개발코드와 객체가 서로 통신하는 접점 역할을 하는 것이다 그럼 왜 굳이 인터페스를 개발코드와 객체 사이 접점으로 사용하는 걸까? 이유는 개발 코드를 수정하지 않고 사용하는 객체를 변경 할 수 있도록 하기 위해서이다 한번에 이해가 되질 않기에 예시를 가져와 보았다. 출처: https://limkydev.tistory.com/197 서울시는 밤길 여성들의 안전한 귀가를 위해 30억을 투입해 1000개 유.. 공감수 0 댓글수 0 2020. 5. 27.
JAVA ) 생성자의 중복 초기화를 축약시키는 this()클래스 생성자,메소드에서 매개값으로 받은 인스턴스를 해당 클래스 필드 변수에 대입하여 초기화 하는 방법에 대해서 몇 주전에 다뤄본적이 있다, this.매개변수 = 필드변수; 하지만 해당 개념만 숙지한뒤 모든것을 아는 것 처럼 넘어 갔지만 this클래스의 기능을 간과하고 있었던것 같다.. 오늘은 간과했던 this의 또 다른 기능에 대해서 포스팅 해볼려고 한다. 메소드가 오버로딩이 가능하듯이 생성자또한 오버로딩이 가능하다, 이때 생성자 오버로딩이 많아질 경우 생성자 간의 중복된 코드가 발생할 수 있다. 매개 변수의 수만 달리 하고 필드 초기화 내용이 비슷한 생성자에서 이러한 현상을 많이 볼 수 있다 이 경우에 필드 초기화를 담당하는 기능은 한 생성자에만 집중적으로 작성하고 나머지 생성자는 초기화 내용을 가지고 있는.. 공감수 0 댓글수 0 2020. 5. 25.
JAVA ) 추상 클래스와 추상 메소드 추상적, 구체성이 없이 사실이나 현실에서 멀어져 막연하고 일반적인 것 그렇다면 추상 클래스는 뭘 의미하는 거지? 추상 클래스도 위 개념과 동일하다 볼 수 있다. 추상 클래스는 실체 하지 않고 추상적인 형태를 가지고 있기 때문이다! 좀 더 자세하게 들어가 보자면 객체들의 공통되는 특성을 추상적으로 정의한 클래스라 볼 수 있다. 예를 들어 새, 물고기, 고양이 등의 실체들의 공통되는 특성을 추출해보면 동물이라는 공통점이 있다, 실체 된 것이기보단 실체들의 공통된 특성을 가지고 있는 것이 추상적인 것이라 볼 수 있다. 여기서 실체 하는 것이란 실체 클래스를 의미한다, 실체 클래스란 우리가 일반적으로 사용하는 필드, 생성자, 메서드로 구성된 클래스를 말한다, 즉 추상 클래스란 실체 클래스 안에서 공통되는 필드와.. 공감수 0 댓글수 1 2020. 5. 19.
JAVA 필드의 다향성 ( 예제 프로그램 작성 다향성이란 동일한 타입을 사용하지만 다양한 결과가 나오는 성질을 말한다. 주로 필드의 값을 다양화함으로써 실행 결과가 다르게 나오도록 구현하는데 필드의 타입은 변환이 없지만 실행도중에 어떤 필드로 저장하느냐에 따라 실행 결과가 달라진다. 이것이 필드의 다향성이다. 필드의 다향성을 알아볼 프로그램을 작성해보자. 프로그램설명 1. 자동차 타이어 4개의 수명을 선언 2. 자동차 타이어가 회전 반복 3. 자동차 타이어가 터질 시 다른 타이어로 교체 tip : 생성자 자동형변환, 오버로드 사용 프로그램 실행순서 및 이벤트 설명 1.메인에서 Car의 런메소드 실행 2. Run메소드에서 Tire.roll 실행 3. roll을 실행후 Run메소드에게 트루값 리턴 4. 값이 flase가 될때까지 2번 반복 5. roll.. 공감수 0 댓글수 0 2020. 5. 13.
JAVA 상속관계 자동 타입 변환과 다향성 기본 타입의 변환에 대해서는 java공부 초반부에 학습했을 것이다, 이번에는 기본 타입형 형변환이 아닌, 클래스 타입의 변환을 배워 보자 한다. 기본적으로 클래스 타입의 변환은 상속관계에 있는 클래스 사이에서만 발생한다. 부모클래스 타입으로 선언된 객체는 부모 클래스의 필드,메소드만 사용이 가능하다. 단 자식클래스가 부모클래스의 메소드를 오버로드(재정의) 하였다면 부모타입으로 선언된 객채라도 자식클래스에서 재정의 된 필드와 메소드를 사용할 수 있다. 그 외 오버로드 되지 않은 필드와 메소드는 사용이 불가능하다. 하지만 클래스관계의 자동타입 변환을 사용한다면 부모클래스 타입으로 선언된 객체도 부모클래스와 상속자인 자식클래스 둘 다 모두 사용 가능하다, 위와 같은 개념은 객체지향 프로그램이 추구하는 다향성과.. 공감수 0 댓글수 0 2020. 5. 8.
JAVA @어노테이션이란? 설명하기 앞서 어노테이션을 보다 쉽게 이해를 돕기위해서 메타데이터란 무엇인지 알아보자 메타데이터란? 메타데이터란 데이터의 대한 속성정보이다, 데이터의 대한 데이터로서 하위 레벨 데이터를 설명 및 기술하는 데이터라고 보면 된다. 도서관을 예시로 들어보자면 표제,저자,주제명,분류기호 등이 포함되어 있는 목록이 메타데이터의 속한다 메타데이터를 어느정도 이해하였다, 그렇다면 어노테이션은 무엇인가? 어노테이션이란 메타데이터라고 볼 수 있다. 프로그램 실행 관점에서보면 프로그램이 처리할 메인 데이터가 아니라 실행과정에서 데이터를 어떻게 처리할것인지 알려주는 서브 데이터라고 볼 수 있는 것 이다. 직접적으로 사용해보기 전에 어노테이션의 용도와 사용방식을 알아보자. 어노테이션의 크게 세 가지 용도로 사용된다. 1. 코.. 공감수 2 댓글수 0 2020. 5. 2.
JAVA 필드,생성자,this 개념과 사용방법 정리 필드란? 객체의 고유 데이터로 변수와 다르게 실행메소드가 종료되도 값이 지속 되는 상수를 말한다. - 필드는 초기값없이 생성되도 초기값을 갖게된다. (객체 초기값 참조) - 필드는 생성자와 모든 메소드에서 사용가능하다. - 필드는 클레스 외부로 부터 접근이 가능하다. - 필드 초기화는 두가지 방법이 있다, 필드 생성시 초기값을 주는것과 생성자에서 초기값을 주는것. - 외부에 데이터로 초기화를 하고싶다면, 매개값을 받아 사용하는데 이때 this메소드가 필요하다. 생성자란? new연산자와 같이 사용되어 '객체초기화'를 담당한다 '객체초기화'란? 필드 값을 초기화(수정) 하거나 메소드를 호출하여 사용준비 해두는 것을 의미한다. 생성자의 호출방식 - 생성자는 new 연산자로 메모리에 객체를 할당받아 생성한다. .. 공감수 0 댓글수 0 2020. 4. 22.
JAVA 메모리구조, 메소드 영역(클래스 영역) JVM이 실행되면 운영체제에서 메모리를 할당해준다. 할당받은 메모리(Runtime Data Area)는 영역을 구분하여 사용한다. 크게 메소드 영역 , 힙 영역, 스택 영역 으로 나뉜다. JAVA 실행 과정 메소드 영역이란 ? JVM이 시작할때 생성된다. 상수풀,필드,데이터메소드,생성자 코드 등을 분류해서 저장한다. 모든 스레드가 공유가능한 영역이라 의미상 공유 메모리 영역이라고도 불린다. 클래스 로딩 처리구조 1.프로그램에서 메소드 호출 2.해당 메소드 클래스 바이트코드가 메소드영역에 로딩된 적이 있는지 확인 3.없다면 JRE라이브러리 폴더에서 클래스를 검색 (또는 환경변수 지정폴더) 4.검색한 클래스 파일 바이트코드 검증 5.일치확인후 메소드 영역으로 로딩 6.클래스 변수 명령어 존재시 메소드 영역에.. 공감수 0 댓글수 0 2020. 4. 15.
에라토스테네스의 체 (소수를 찾는 방법) 에라토스테네스의 체란? - 고대 그리스 수학자 에라토스테네스가 발견한 소수를 찾는 방법이다. - 어떤수( 소수를 구하고자 하는 값 )의 제곱근보다 작은 소수의 배수를 없애면 남은 수가 어떤수의 소수가 된다. 한마디로 어떤수가 100이라고 가정할때 100의 소수를 구하려면 매우 어렵지만 100의 제곱근인 10의 소수의 배수를 배제하고 나면 100의 소수만 남게된다는 방법이다. 에라토스테네스의 체 알고리즘 처리구조 1. 요소의 소수의 배수를 제거하는 구조 2. 소수에 다음 소수를 대입하는 구조 3. 소수가 입력값 제곱근 이하일 때 반복하는 구조 4. 소수인 첨자를 출력 코드구현 // input Scanner sc = new Scanner(System.in); System.out.print("소수를 구할 값을.. 공감수 0 댓글수 0 2020. 4. 4.
퀵정렬 퀵 정렬이란? - 기준값(pivot)을 정한뒤 기준값(pivot)을 기준으로 데이터를 대소 그룹의 둘로 나누어 두개에 집합을 만든뒤 분할하여 전체 정렬을 만들어 내는 정렬 알고리즘. + 기존 정렬 알고리즘 들 의 비하여 빠른 실행성능을 가진다. - 기준값(pivot)을 어떻게 설정하느냐의 따라 실행성능이 좌우된다. 퀵정렬 처리구조 1. pivot 정하기 2. pivot 중심으로 대소관계를 나누어 2개의 집합으로 분할 하는 처리 3. 작은수의 집합에 2번 처리를 반복 4. 높은수의 집합에 2번 처리를 반복 코드구현 public void QuickSort(int[] array, int left, int right){ int i = left + 1; int k = right; int w = 0; while( .. 공감수 0 댓글수 0 2020. 3. 24.
단순 삽입법 (삽입 정렬) 단순 삽입법 이란 ? - 데이터 정렬알고리즘 중 하나로서 요소를 차례대로 올바른 위치에 삽입해나감으로서 오름차순,내림차순 으로 정렬하는 알고리즘이다. + 구현하기 쉽고 요소들이 이미 정렬된 상태라면 효율적일 수 있다. - 요소 수가 많다면 많은 이동을 필요로 하기에 적합하지 않다. 단순 삽입법 구조 1. 테이블에 첫번째 칸을 기준값으로 정한뒤 정렬된칸 과 정렬안된 칸을 나눈다. 2. 정열된 칸의 뒤에 위치한 수와 대소 관계를 비교한뒤 정열된 칸에 삽입한다. 3. 정열된 칸에 존재했던 기존에 값과 새로 삽입된 값을 비교후 정렬한다. 4. 테이블 크기 만큼 반복 코드 int[] array = {7,6,5,4,3,2,1}; int i = 1; while( i < 7 ){ int x = array[i]; int.. 공감수 0 댓글수 0 2020. 3. 23.
단순 교환법 (버블정렬) 단순 교환법( 버블정렬 )이란? 인접한 데이터를 교환하는 처리를 반복하여 전체를 정렬한다. # 처리과정이 마치 거품이 올라오는것 같이 보여서 버블 정렬이라 불린다함. 창의력 지립니다.. + 알고리즘이 단순하여 구현하기가 쉽다. - 처리량이 많아 실행속도가 느리다. 처리구조 1.오른쪽 끝부터 순서대로 앞에 공과 비교하여 오름차순으로 정렬 2. 왼쪽 끝 부터 확정된 최소값을 넣으며 배열크기만큼 확장 코드구현 int[] array = {5,3,4,1,2}; int w = 0; int k = 0; while( k k ) { if(array[i-1] > array.. 공감수 0 댓글수 0 2020. 3. 19.
단순 선택법 (선택 정렬) 정렬 알고리즘이란 ? 데이터를 큰 순서 또는 작은 순서로 바꾸어 나열하는 알고리즘이다, 정렬을 영어로 표현하면 소트(sort)이므로 소트(sort) 알고리즘이라고도 한다. 정열알고리즘 종류 다양한 정열 알고리즘이 존재하지만 가장 기본적이고 널리 알려진 알고리즘을 네가지로 추려보면, 1. 단순 선택법 (선택 정렬) 2. 단순 교환법 (버블 정렬) 3. 단순 삽입법 (삽입 정렬) 4. 퀵정렬 정도가 있고 그중 오늘 기록할 알고리즘은 단순 선택법 (선택 정렬) 이다. 단순 선택법( 선택 정렬 ) 이란? 가장작은 데이터를 선택하여 맨 앞부터 순서대로 정렬해 나가는 알고리즘 + 단순하고 구현하기 쉽다. - 처리속도가 느리기 때문에 데이터가 많을 경우 적합하지 않다. 처리구조 1. 탐색 범위의 최솟값을 찾는 처리 .. 공감수 0 댓글수 0 2020. 3. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.