분류 전체보기 (36) 썸네일형 리스트형 <a> 태그 코딩 시 체크하면 좋을 것들 - button과 a를 분리하자 ! a태그는 정말 많이 사용되는 태그이지만 웹 접근성 등에서 오류가 자주 발견되는 태그이기도 하다. 리액트, 자바스크립트, 뷰.js등 페이지를 효율적으로 관리하기 위한 많은 기술들이 있지만 웹페이지를 마크업하는 가장 주축이 되는 언어는 단연 html/css라고 생각한다. 가장 접근하기 쉬운 언어라 쉽게들 생각하는 경향이 있지만, 사실 이 퍼블리싱을 잘하는 사람이 생각보다 많지 않다고 한다. 그냥 굴러가는 페이지가 아니라 유지/보수, 웹 접근성, 태그의 구조등에도 신경을 써서 페이지를 구현해야 비로서 퍼블리싱을 잘한다고 말할 수 있지 않을까? 이전까지는 페이지를 구현하는것에 급급했다면 이제는 안좋은 습관들을 고치고 조금 더 적합한 태그를 사용하여 '잘 만든 홈페이지'를 만드는 것에 욕심이 난다! 사실 나는 b.. 웹서버 띄우기 - 내장 모듈 / Express node.js를 통해서 웹 서버를 띄우는 방법은 여러 가지가 있지만 가장 대표적으로 많이 쓰이는 방식인 내장 모듈을 이용한 방식과 Express를 이용한 방식이 있다. Express란 Node.js의 핵심 모듈인 http와 Connect컴포넌트를 기반으로 하는 웹 프레임 워크이다. 본 포스팅에서 중점을 둘 부분은 Express인데, Express는 Node/js에서 가장 많이 사용되고 있는 웹 프레임 워크이다. 많은 사람들이 사용하고 있기 때문에 인수인계나 교육이 용이하고, 많은 오류코드에 대한 분석을 찾아볼 수 있기 때문에 (stackoverflow등에 많이 올라와있다.) Node.js를 사용하는 개발자라면 이 express를 잘 알아야 한다. (인수인계나 접할수 있는 정보의 양은 프레임워크 선정 시 .. npm npm이란? node.js pakage manager의 약자이며 이는 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 이는 자바스크립트로 구성된 어떠한 기능을 하는 코드들을 패키지화 하여 관리하며 노드를 설치할 때 자동적으로 함께 설치된다. npm 사용방법 npm을 사용하기 위해서는 ① cmd창에 npm init이라는 명령어를 친다. ② npm init을 하고나면 위와같이 순서대로 json에 입력할 정보를 요청하는 메시지가 뜨는데 각자 키워드에 맞게 적어준 후 마지막에 yes를 입력하면 pakage.json파일이 생성된다. 이 과정이 귀찮다면 npm init-y를 입력해 바로 pakage.json파일을 생성한 후 에디터 프로그램을 이용해 파일 내부에서 수정 할 수도 있다. pakage.json의 .. 모듈 패턴 모듈 패턴이란? 모듈이란 독립적으로 재활용이 가능한 소프트웨어 덩어리를 의미한다. 웹페이지를 관리할 때 한가지 카테고리의 기능들을 그룹화(파일링)한 후 다른 파일에서 실행하고 싶을 때 불러서 사용하는 것을 모듈 패턴이라고 한다. Node.js안에서 사용되는 모듈의 규칙은 다음과 같다 내보낼 때 -> Module.exports 변수명 불러올 때 -> require 파일명 이것만 봐서는 이해가 잘 되지 않을것이다. 당연한거니 걱정할 필요 없다 ! 그래서 아주 짧은 문법예제를 통해 모듈을 사용하는 방법에 대한 감을 잡아보겠다. ① 변수 모듈 상황 ) myvar.js파일 내부의 [Hello yourim]이라는 문자열을 index.js를 통해 콘솔창에 때 출력시키고자 한다. ㉠ myvar.js파일 생성 후 내부에.. Nodejs의 개요 Nodejs란 무엇일까? Nodejs는 백엔드 언어이다. 하지만 프론트앤드 개발자들이 nodejs를 공부하는 것을 많이 볼 수 있을것이다. 그 이유는 무엇일까? 바로 nodejs는 프론트에서 가장 큰 비중을 차지하는 컴퓨터언어인 JavaScript를 사용한 백앤드 언어이기 때문이다. Nodejs는 어쩌다가 탄생을 하게 되었을까? 일단 이전의 웹 개발자들은 페이지를 생성하고 수정하기 위해서 html로 일일히 마크업을 해야했다. 그러나 인간이 사용하는 웹 페이지의 양이 늘어나고 많은 정보가 생생되면서, 일일히 문서를 작성하는것이 많은 노동력이 필요하게 되었다. 그뿐 아니라 오류가 생겼을때 페이지마다 찾으러 다니면서 이를 수정해야 하는 번거로움이 있었고 그렇기 때문에 방문자들이 직접 글을 작성하게 하는것에 많.. DOM EVENT DOM이란? DOM이란 Document Object Model의 약자로 문서 객체 모델을 의미한다. 쉽게 말해 HTML안의 내용물들을 node(html을 구성하는 최소 단위?정도로 이해하면 될 것 같다)의 형태로 변화시켜서 script문서 내에서 관리 할 수 있도록 만들어주는것이다. 즉 웹을 구성하는 html의 내용물(text, img, elemet등)을 DOM을 이용해서 조작 할 수 있다. 그런데 왜 우리는 간편한 html문서를 두고 dom을 이용하여 문서를 조작하는것일까? 그 이유는 html은 정적인 요소만을 마크업 할 수 있지만 우리의 웹페이지는 정적이지 않다. 사용자가 어떻게 페이지를 사용하느냐에 따라 화면의 변화가 일어나야 한다. 그렇기때문에 dom을 이용하여 사용자가 페이지를 조작할 때 화면을.. 배열 내장함수 총 정리 앞서 자주쓰이는 배열함수들을 포스팅했다 이번 게시물은 복습겸 그 배열 내장함수을 모아서 간단하게 정리를 해보고자 한다. 각 내장함수에 대한 예시코드들은 따로 게시물을 작성해두었다 :) 1. forEach - 반복적인 기능을 수행하여 for문과 유사한 함수로, 배열 안에서 주어진 요소들을 하나씩 호출한다. 2. map - 배열 안에 있는 원소들을 주어진 조건에 맞추어 변환 후, 새로운 배열로 만들어낸다. 3. indexOf - 배열 안에서 특정 문자열의 위치를 확인하여 그 index번호를 반환한다. 문자열이 여러번 등장하는 경우 첫번째 요소의 index를 반환한다. 4. findIndex - 배열 안의 객체, 혹은 특정 조건에 맞는 값을 찾아서 그 index를 반환한다. 5. find - findIndex.. 배열내장함수 - reduce reduce함수는 잘 사용할 수 있으면 정말 유용한 함수(라고한)다..ㅋㅋ 이 함수는 배열이 주어졌을때 배열 안에 있는 모든 값들을 사용하여 어떠한 값을 연산해야 할 때 사용된다 이해를 돕기 위해서 배열이 주어졌을때 배열의 내부 값들을 모두 더해야 된다고 가정해보자 여러가지 방법이 있겠지만 나는 forEach문으로 예시를 들어보고자 한다 const numbers = [1,2,3,4,5,6,7,8]; let sum = 0; numbers.forEach(n => { sum += n; }) console.log(sum); //36 위의 식을 사용해서 numbers의 합을 구할수도 있지만 reduce를 사용한다면 좀더 간결하게 식을 짤수가 있다. 일단 reduce함수의 사용 방법은 다음과 같다 배열.reduce.. 이전 1 2 3 4 5 다음
