기본

💡 HTML Semantic elements에 대해 알아보고 정리해보자! 목표 HTML 시멘틱 엘리먼트가 무엇인지 설명할 수 있다. 시멘틱 엘리먼트들 각각이 어디에서 사용되는지 설명할 수 있다. HTML5로 넘어오면서 시멘틱 엘리먼트가 추가가 되었다. HTML4와 HTML5의 차이는 아래와 같다. HTML4는 div 태그에서 id 값으로 페이지 구역을 나누는 반면, HTML5는 , , , , , , 등으로 나타낼 수 있다. 태그를 읽기만 해도 어떤 구역인지 파악이 가능해진 것이다. 구역을 나타내는 요소들 실제 화면에 보이는 내에서 페이지의 구역을 나타내는 요소들이 중첩되어 사용된다. : 웹 문서 맨 윗부분, 웹 사이트 로고 영역. ex) 로그인, 회원가입, 사이트맵, 언어 선택 등. : 현재 페이지 내 ..

새로운 프로젝트를 만드는 것을 두려워하지 말자! 테스트 코드 만들고 익숙해져야지. 보통 스프링 레거시 혹은 스프링 부트 프로젝트를 빠르게 만들기 위해서 spring initializr 사이트를 활용한다. 그리고, 유용한 라이브러리들을 빠르게 패키징할 수 있기 때문에 애용하게 된다. 위 정도만 패키징하면, 대부분의 기능들을 사용할 수 있다. 필요한 건 나중에 추가하면 된다. spring initializr는 기본적으로 src를 root로 만들어준다. 개인적으로 root를 app으로 만드는 것을 좋아하는데, 이럴 때는, settings.gradle 파일을 아래와 같이 수정해주면 된다. 왜 수정해야 할까? 안 하면, run application이 활성화가 안 된다!!! # settings.gradle root..

'상속'이라는 개념이 존재하지 않는 자바스크립트가 클래스를 어떻게 흉내내는지 파악해보자! 자바스크립트는 프로토타입 기반의 언어이기 때문에 '상속'의 개념이 존재하지 않습니다. 다만, 클래스에 대한 니즈에 따라 ES6에서 클래스 문법이 추가 되었지만, 일정 부분은 프로토타입을 여전히 활용하고 있습니다. 이 때문에 ES5 에서 클래스틑 흉내내기 위한 구현 방식을 학습할 필요가 있습니다. 그럼 클래스(Class)가 무엇일까요? 사전적으로 '집합, 집단'의 의미를 가지고 있습니다. 다음 예시를 통해 간단히 살펴보시죠. SuperClass는 부모 클래스입니다. 최상위 집단인거죠. SubClass는 자식 클래스입니다. 하위 집단입니다. 최상위 집단으로 '음식' 클래스가 존재합니다. '음식'에는 '고기'도 있고, '..

모든 것의 시작은 문법이다. Linux 환경의 가장 큰 벽은 편집기인 것 같습니다. 한컴 타자기로 한/영 타자를 연습했던 것 처럼 하루에 20분씩 vi 편집기 연습을 해봅시다 : ) [출처] https://kldp.org/node/102947

클로저라는 개념 뽀개봅시당...!! 대표적으로 DOM의 addEventListener를 예시로 들 수 있습니다. 아무 생각없이 아래와 같이 사용하고 있었으며, 이 예제가 어떤 방식으로 클로저를 사용한 것인지 파악해보시죠 :) var fruits = ["apple", "banana", "grape"] var $ul = document.createElement('ul') var alertFruitBuilder = function(fruit) { // 고차함수 return function() { alert("Choosed! '" + fruit + "'"); } } fruits.forEach(function(fruit) { var $li = document.createElement('li'); $li.inner..

문제출처 - https://programmers.co.kr/learn/courses/30/lessons/12948 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 4 이상, 20이하인 문자열입니다. 입출력 예) phone_number return 01033334444 *******4444 027778888 *****8888 [ Python ] def solution(phone_number): length = len(phone_number) return ("*"..

문제출처 - https://programmers.co.kr/learn/courses/30/lessons/12969 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수입니다. 입력 5 3 출력 ***** ***** ***** [ Python 3 ] a, b = map(int, input().strip().split(' ')) answer = ('*..

javascript를 사용하면서 정말 많이 사용되는 중요한 개면인 this를 아작내보자!!! 이번에 공부할 내용은 this 입니다. 보통 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미하죠. 근데... 자바스크립트에서의 this는 보다 자유롭고 복잡합니다. 자바스크립트의 this는 어디서든 사용할 수 있다는 점이 좀 다르죠. 상황에 따라 this가 바라보는 대상이 달라지는데, 이러한 이유로 this의 대상을 파악하기 힘들어질 수 있습니다. 이를 좀 더 원할하게 파악할 수 있도록 정확한 작동 방식을 파악해보시죠. 일단, 함수 호출과 메서드 호출에 대한 차이를 분명히 하시는게 좋습니다. 프로그래밍 언어에서 함수와 메서드를 구분은 독립성에 있습니다. 함수는 그 자체로 독립적인 기능을 수행하고..

조금 생소하기 때문에 차근차근 뽀개보자..! 기본형과 참조형의 구분에 대해 이해하기 위해서 메모리와 데이터에 대한 배경지식이 필요합니다. 허허... 뭐하나 쉽게 이해하기 어렵죠. 뭐든지 쉬운 길을 없습니다.. 1) 메모리와 데이터 컴퓨터는 0과 1로 모든 데이터를 기억하고 있습니다. 0과 1을 표현하는 단위를 비트(bit)라고 하며, 하나의 메모리 조각입니다. 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있는데, 너무 작은 단위인 비트로 하기에는 비효율적이죠. 그래서 여러 조각들을 묶어서 새로운 단위를 만들었고, 이로써 표현 가능한 값을 넓히고 검색 시간도 줄일 수 있습니다. 여러 조각들의 묶음이 바로 바이트(byte)입니다. 1byte는 (256)개의 주소를 2byte는 (65536)개의 주소값을..