개발/Bootstrap

[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

부트스트랩5 알파가 런칭되었습니다! 아래에서 확인해봐요! 부트스트랩 5(Bootstrap 5) 알파버전 출시! 남들보다 빠르게 공부해보자! 🎉 Bootstrap 5 Alpa 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다 webruden.tistory.com 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of two lowest positive integers

Description: Create a function that returns the sum of the two lowest positive numbers given an array of minimum 4 integers. No floats or empty arrays will be passed. For example, when an array is passed like [19,5,42,2,77], the output should be 7. [10,343445353,3453445,3453545353453] should return 3453455. Hint: Do not modify the original array. 전과 비슷한 문제입니다. 이번 문제는 배열에서 가장 낮은 숫자 2개를 구해서 그 숫자 2..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Largest Elements

Write a program that outputs the top n elements from a list. Example: largest(2, [7,6,5,4,3,2,1]) // => [6,7] 배열의 정렬 메소드와 slice() 메소드를 활용해서 배열에서 제일 큰 값 n개를 뽑아내는 알고리즘입니다.정렬메소드는 문자열 기준으로 동작하므로 숫자를 배열하려면 비교함수를 인자로 넣어줘야되는데요return a - b 를 하면 오름차순return b - a 를 하면 내림차순으로 적용됩니다.

일상/면접

웹퍼블리싱 인터뷰 예상질문

웹퍼블리싱(웹퍼블리셔)으로 이직 또는 취업을 준비하는 사람이라면 실무 면접과 면접 전 테스트 등이 있을 수 있다. 과연 퍼블리싱 분야에 지원하기 위해서는 어떤 준비를 해야할까? 또한 취업까지는 어떤 과정이 있는지 알아보고자 한다. 기본적으로 웹퍼블리셔 또는 프론트엔드 개발자에게 요구하는 역량은 html과 css 그리고 자바스크립트가 있다 하겠다. 일반적으로 회사에서는 실무 면접을 통해 인터뷰에 응시자의 능력을 판단하지만 면접 전 간단한 테스트도 종종 치뤄지고 있다. 테스트라면 어떤 테스트가 있을까? 회사에서 요구하는 웹퍼블리싱 사전 테스트 테스트의 경우 회사마다 다르다. 프론트엔드 중 자바스크립트를 많이 사용하는 회사는 대게 질문지 형태의 서술형 문제가 더 많이 사용된다. 아무래도 얼마나 심도있게 자바스..

개발/Javascript

[자바스크립트] javascript - this

자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달되어집니다. this 인자는 이해하기 조금 까다롭습니다. this가 이해하기 어려운 이유는 자바스클비트의 여러가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문입니다. 아래와 같이 this 바인딩에는 3가지 패턴이 있습니다. 객체의 메소드를 호출 -> 해당 메소드를 호출한 객체로 바인딩함수를 호출 -> 전역 객체에 바인딩샘성자 함수를 호출 -> 새로 생성되는 객체에 바인딩 오늘 차근차근 이 this 바인딩에 대해서 정복해 나가도록 하겠습니다. 1. 객체를 호출할 때 this 바인딩 객체의 메소드를 호출할 경우, 메소드 내부 코..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Fizz / Buzz

Description: Write a function that takes an integer and returns an Array [A, B, C] where A is the number of multiples of 3 (but not 5) less than the given integer, B is the number of multiples of 5 (but not 3) less than the given integer and C is the number of multiples of 3 and 5 less than the given integer. For example, solution(20) should return [5, 2, 1] 3의 배수와 5의 배수 그리고 3과 5의 배수가 동시에 충족시키는 ..

개발/Javascript

[자바스크립트] javascript array (자바스크립트 배열) 정리 2

최근 배열 위주로 코딩을 많이 해야하는 상황을 접하며 생각보다 모르고 있던 ES5 스펙의 Array 메서드들이 많이 있음을 알게 되었습니다. ECMA Script6의 새로운 스펙들이 하나 둘 최신 브라우저에 적용되고 있는 상황에서 기존 ES5에 이미 구현되어 있는 배열의 메서드들 조차도 제대로 파악하고 있지 못하는 사람들을 위해 for 문으로 돌리기 쉬운 몇 가지 메서드들을 정리해보겠습니다. Array 객체에서 제공하고 있는, 배열 전체를 돌며 어떤 작업을 할 때 유용한 다양한 메소드들을 하나씩 살펴보도록 하겠습니다. 배열 작업을 할 때 for문이 먼저 생각나는 사람이라면 꼭 보시면 좋을 것 같습니다. join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. arr 배열에 있는 원소..

개발/Javascript

[2020 최신 ES6+] 자바스크립트 배열 기본부터 응용까지 완벽 정리

자바스크립트로 개발을 하다 보면 배열이라는 자료구조를 접하게 됩니다. 배열이란 무엇일까요? 그리고 배열은 어떤 경우에 사용이 되고 어떤 기능을 가지고 있을까요? 이번 포스팅에서는 배열을 다루기 위한 모든 것을 설명하려고 합니다. 배열이란? 배열은 모든 언어(파이썬(Python), 자바(Java), C, 자바스크립트(Javascript))에서 지원하고 있는 자료구조입니다. 배열을 간단히 설명드리면 연관된 데이터를 하나의 틀에서 관리하기 위한 자료구조입니다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있습니다. 사용하는 언어에 따라서 배열의 특성이 조금 다를 수 있지만, 기본적인 동작 원리는 동일하기 때문에 다른 언어를 사용하시더라도..

개발/CSS3

[CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법

css3에서 자식요소에 float를 적용하면 부모의 height가 0으로 되어버리는 경우가 있습니다. 오늘은 이 현상을 해결하는 법을 알아보도록 하겠습니다. 위 코드를 보시면 nav의 부모태그인 header의 height가 0가 되는 현상을 확인할 수 있습니다. 이유는 float 속성은 쉽게 말해 오른쪽이나 왼쪽으로 붕~띄운다는 뜻입니다. 한마디로 부모를 float로 설정하지 않는 이상, 거기에 적용받지 않고 독립적으로 위로 떠있는 상태죠. 이 상태를 부모요소까지 적용을 시키려면 다른 방법이 필요합니다. 방법 1 (가상 선택자 :after로 clear 하는 방법) 가장 탁월하다고 생각하는 방법이라 첫번째로 소개합니다. 우선 "가상 선택자"라는 개념을 이해하셔야 하기 때문에 약간 이해가 필요한데요. 가상선..

개발/Javascript

[자바스크립트] 이벤트 리스너와 콜백함수(javascript callback)

오늘은 자바스크립트 이벤트 리스너와 콜백함수를 다뤄보도록 하겠습니다. 이벤트 리스너 ? 이벤트 리스너는 쉽게 말해 어떠한 이벤트에 대해 대기중인 상태를 말합니다. 항상 리스닝(들으며) 대기중인거죠. 해당 이벤트가 발생했을 때 등록해놨던 이벤트 리스너가 실행됩니다. 위의 코드를 아마 한버 보신 적이 있을겁니다. 이 코드가 대표적인 이벤트 리스너인데요. window가 load될 때 function 부분이 실행이 되는겁니다. 그럼 load 되었다는 것을 누가 알려줄까요? 바로 브라우저가 알려줍니다.비슷한 코드로, 그리고 자주 사용하는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + "이벤트 명"으로 명명됩니다.onclick, onkeypress, onmousemove 등 처럼요. window ..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of odd numbers

Given the triangle of consecutive odd numbers: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 ... Calculate the row sums of this triangle from the row index (starting at index 1) e.g.: rowSumOddNumbers(1); // 1 rowSumOddNumbers(2); // 3 + 5 = 8 너무 어렵게 생각했다..조금만 더 쉽게 생각했으면 훨씬 쉬운 방법을 생각해낼 수 있었는데..간단하게 바로 생각할 수 있는 문제해결능력을 키우도록 노력해야겠다. 왜 이방법을 생각을 못했을꼬...

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Remove the minimum

Description: The museum of incredible dull things The museum of incredible dull things wants to get rid of some exhibitions. Miriam, the interior architect, comes up with a plan to remove the most boring exhibitions. She gives them a rating, and then removes the one with the lowest rating. However, just as she finished rating all exhibitions, she's off to an important fair, so she asks you to wr..

개발/CSS3

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. px단위로는 height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법하는 방법에 대해서 알아보겠습니다. 아래 box 클래스에 height 100%를 먹여보았으나 정상적으로 작동하지 않는 것을 확인할 수 있습니다.하지만, 필요할 경우를 대비해서 한번 알아보도록하죠. HEIGHT:100%가 적용되게 하는 방법 생각보다 정말 간단하게 해결할 수 있는데요.html과 body 태그에 height 100%를 넣어주는 방법입니다. 위 코드를 적용시켜주면 정상적으로 box 클래스에 height 100%가 적용됨을 확인하실 수 있습니다. 원인 : %는 상대적인 값인데 div의 height값에 %를 적용하면 기준으로 삼을 상위..

카테고리 없음

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - filter vs find)

이전 강의에서 filter를 다뤄봤습니다. 하지만 jQuery에는 비슷한 기능을 하는 것 같은 find()라는 함수가 있습니다. 오늘은 두 가지 기능의 차이점에 대해서 알아보도록 하겠습니다. 위 코드의 결과는 어떻게 될까요?filter를 사용했으니까 그 아래에 있는 li에 색생이 변경됐을까요? 결과부터 말씀드리면 색상이 변하지 않았습니다.한번 복기해볼까요? $(".first_ul") // 제이쿼리는 first_ul이라는 클래스를 찾아라.filter("li") // 그리고 li 태그를 찾아서css 속성을 적용시켜라 ! 무슨말인지 이해하셨나요?.first_ul 자식으로 있는 li태그를 찾아서 색상을 바꾸라는 말이 아닌 .first_ul 클래스를 가진 태그 중 li 태그에 색상을 바꾸라는 뜻입니다.

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - filter)

jQuery - filter() jQuery의 filter는 CSS 셀렉터로 DOM 트리를 제어했을 때에 감소하는 속도를 커버해주는 기능을 합니다. jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .filter() 함수를 사용하면 선택된 요소들의 일부부을 추출하여 새로운 jQuery 객체를 생성합니다. 바로 예제를 가져와서 설명하도록 할게요 ul의 자식 태그인 li태그에서 짝수만 골라서 색을 변환시켜보는 코드를 짜보겠습니다. 결과를 보면 짝수 menu에 색이 적용된 것을 확인할 수 있습니다. 아니 짝수라면서요?? 왜 menu1부터 색이 들어가 있어요? 코드잘못짠거 아닌가요? 라고 생각하실 수 있는데요. li 태그에 접근할 때 자바스크립트는 내부적으로 반복문을 돌리는데요. 그 반복문은 인덱스를 기준..

개발/Javascript

[자바스크립트] 프로토타입 (Javascript - prototype)

자바스크립트 – 프로토타입이란? 자바스크립트를 처음 접할 때 제일 이해하기 어려웠던 개념 중 하나가 바로 프로토타입이었습니다. 하지만 자바스크립트를 학습하는데 있어서 꼭! 정복해야할 산이기도 한 프로토타입을 오늘 정리해보도록 하겠습니다.이번 기회를 통해 제대로 프로토타입을 이해하고 넘어가길 바랍니다.(사실 저도 머릿속에 제대로 넣기 위해 포스팅합니다...) 자바스크립트는 클래스라는 개념이 없습니다.그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용해서 새로운 객체를 만들어냅니다.이렇게 생선된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 도와주는 ..

개발/HTML5

기초부터 배우는 HTML5 1강

기초부터 배우는 HTML5 (Basic of HTML5) 인터넷이라고 하면 웹이 바로 생각이 나고, 웹과 함께 HTML이나 CSS, Javascript 같은 용어들이 같이 떠오를 겁니다. 웹에 사용되는 이 용어들이 무엇이고, 어떻게 시작이 되었는지 먼저 가볍게 살펴보면서 진행하도록 하겠습니다. HTML이란? HTML은 Hyper Text Markup Language라는 의미를 담고 있는 하나의 언어입니다. 한마디로 hyper text가 담긴 문서를 제작하는 언어라는 의미죠. 그렇다면 하이퍼텍스트가 뭔지 궁금해 하셔야겠죠? Hyper Text(하이퍼 텍스트)란 하나의 Text(문서)로 두는 것이 아니라 문서와 문서를 서로 연결시켜, 도시의 복잡한 도로처럼 상호 연결하여 접근 방식을 다양화시킨 문서를 가리킵..

개발/SASS

[4강] 효율적인 CSS작업을 위한 SASS 강의

주석 처리 SASS 파일 내부에 주석을 처리하는 방법은 두 종류가 있습니다. 일반적으로 CSS와 동일하게 이런 방식으로 처리하는 방법과 이런 방식으로 처리하는 방법이 있습니다. 결론적으로 말하면 첫번째 방식은 SASS 컴파일의 결과물인 CSS 파일에도 그대로 반응되는 반면, 두번째 방법은 CSS 파일에 전혀 나타나질 않습니다. 그렇기 때문에 첫번째 방식은 CSS 파일에 저작권 또는 CSS 파일 버전 등을 표시할 때 사용하고, 두번째 방식은 SASS의 속성을 지정하여 유지보수 할 때 편합니다. 왜냐하면 CSS 파일 내부에 텍스트가 많으면 많을수록 브라우저가 사이트를 렌더링 하는 속도가 더뎌지게 될 것이고, 또한 CSS 속성에 대해서 굳이 개발자 이외의 사용자들에게 보여 줄 필요가 없다고 보기 때문입니다. ..

개발/SASS

[3강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 CSS 확장(CSS Extensions) 앞에서 Nested Rules라고 중첩하는 방법에 대해서 다뤄봤는데요. 다시 한번 설명하면, 중첩이란 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 활용하면, 적은 코딩으로 효율적이게 각 선택자에 속성을 지정해 줄 수 있습니다. 특히 사이트가 복잡해지기 시작하면, 하위 또는 자식 선택자들이 상당히 많아지게 되며, 각각의 하위 또는 자식 선택자를 지정하기 위해 부모 선택자까지 전부 CSS 코드에 넣기 시작하면 정말 코드가 복잡해집니다. 하지만 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 아주 편리한 기능입니다. CSS 확장에는 중첩뿐만 아니라 태그 선택자와 연계된 클래스 또는 아이디 선택자끼리 쉽게 묶어주는 ..

여행/스페인

[스페인] 마드리드 여행기 (산티아고 베르나베우)