목록Programming (74)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열에 원소를 추가 및 제거하는 네 가지 메소드에 대해서 알아보도록 하겠습니다. 알아볼 메소드는 unshift(), push(), shift(), pop() 메소드 들 입니다. 이들의 역할을 그림을 통해서 직관적으로 알아보도록 하겠습니다. [ item1, item2, item3 ] 과 같은 배열이 있다고 생각해 봅시다.이 배열에서 원소를 맨 앞에 추가하거나, 맨뒤의 원소를 제거하려면 어떤 메소드를 사용하면 좋을까요? 위의 그림과 같이 맨 앞의 원소를 추가하는 메소드는 unshift 메소드이고, 맨 뒤에 원소를 추가하는 메소드는 push 메소드 입니다.원소를 제거하는 경우에는 제거 대상이 맨 앞의 원소일 경우 shift, 맨 뒤의 원소일 경우에는 pop 메..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 문자열의 split 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식부터 살펴보도록 하겠습니다. str.split([separator[, limit]])split 메소드는 문자열(dataType)에서 사용하는 메소드이며, 두 개의 선택적 파라메터를 가지고 있습니다.seperator 는 문자열을 구분하는데 사용하는 하나 이상의 문자를 나타내는 정규표현식(Regular Expression) 개체입니다.(seperator 가 생략되면 전체 문자열을 포함하는 length 가 1인 배열을 반환합니다.)limit 은 반환되는 배열의 길이를 제한하는 값입니다. 메서드의 리턴값은 seperator 를 기준으로 나눈 문자열의 배열입니다.(seperator 로 사용된 정..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 Node.js 를 이해하는데 필수적인 개념인 콜백함수와 동기, 비동기적 처리에 대해서 알아보도록 하겠습니다. 저번 포스팅에서 Node.js 의 특징 중 첫 번째가 무엇이었는지 기억하시나요? 그것은 바로 '비동기적 I/O 처리, 이벤트 위주' 였습니다. * I/O 는 input, output 을 의미합니다. 동기 / 비동기 비동기적 I/O 처리. 저번 포스팅에서 Node.js 의 특징에 대해서 설명하면서 간단히 설명했지만 아직 감이 안 잡히시는 분들이 많을 것입니다. 비동기의 반댓말은 동기 입니다. 이를 영어로 표현하면 다음과 같습니다. Synchronous (동기) ASynchronous (비동기) 보통 프로그래밍에서 코드의 실행은 작성된 코드의 위에서 ..
안녕하세요, 프로독학러 입니다. 본 카테고리에서는 자바스크립트 엔진을 기반으로 만들어진 사버 사이드 플랫폼인 Node.js 에 대해서 알아보도록 하겠습니다. Node.js 란? Node.js 는 구글 크롬의 자바스크립트 엔진(V8 Engine) 을 기반으로 만들어진 서버 사이드 플랫폼입니다. 웹 브라우저에서 동작하는 자바스크립트를 이용해 서버측에서 하는 역할을 수행할 수 있도록 하는 플랫폼이며, 이를 이용하면 PHP 나 JSP 의 역할을 대체할 수 있습니다. Node.js 의 특징 비동기 I/O 처리, 이벤트 위주 : Node.js 라이브러리의 모든 API는 비동기 방식입니다. 즉, 한 작업이 완료될 때까지 기다렸다가 작업하는 것이 아니라 멈추지 않고 계속해서 코드를 실행한다는 의미입니다. Node.js..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 의 레이아웃을 위한 도구 중 하나인 flex 에 대해서 알아보도록 하겠습니다. * 본 포스팅의 내용은 생활코딩의 flex 강의를 복습한 내용입니다. 생활코딩에서 직접 강의를 수강하고 싶으신 분들은 아래의 링크를 참조해 주세요https://opentutorials.org/course/2418/13526 이전에는, flex 가 생기기 이전에는 레이아웃을 만들기 위해 table 을 사용하거나, position, float 등을 이용했습니다. 물론 위의 방법들을 통해서도 원하는 레이아웃을 만들 수 있지만, 이는 원래의 목적에 반하는 코딩을 하는 것이었습니다. table 은 표를 위한 도구이며, 이는 정보를 의미합니다. 정보를 위해 만들어진 도구를 디자인에..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 라우트 내부에 라우트를 설정하는 방법에 대해서 알아보도록 하겠습니다.이는 react-router 가 버전 4로 업데이트 되면서 기존의 방식과는 달라진 것이기 때문에 기존 버전을 사용하신 분들이라면 자세히 들여다 보시는 것을 추천드립니다. * 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 라우트 내부의 라우트 먼저 버전 4 이전에 라우트 내부에 라우트를 설정하는 방법에 대해서 잠깐 살펴 보겠습니다. 123 Colored by Color Scriptercs 이전 버전의 리액트 라우터에서 라우트 안에 라..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 SPA 어플리케이션 안에서 다른 라우트로 이동하는 방법에 대해서 알아보도록 하겠습니다. * 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 Link 컴포넌트 SPA 안에서 라우트간의 이동은 HTML 의 태그를 이용하지 않습니다. 태그는 페이지 전체를 다시 로딩, 즉 새로고침 해버립니다. 따라서 새로고침하지 않고 라우트로 이동하고자 할 때는 리액트 라우터의 Link 컴포넌트를 이용합니다.Link 컴포넌트를 사용하면 페이지 전체를 새로고침 하지 않고, 이동을 원하는 라우트로 화면을 전환해 줍니다. Lin..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리액트 라우터에 대해서 좀 더 자세히 알아보도록 하겠습니다. * 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 0) URL 에서 path 와 qurey string 이란? http://a.com/topic?id=1 위와 같은 url 이 있다고 생각해 봅시다.대부분의 웹 어플리케이션의 url 은 위와 같은 형식으로 이루어 져 있습니다.위의 url 에서 'http://' 은 프로토콜을 의미합니다.프로토콜 뒤에 나오는 'a.com' 을 도메인 이라고 부르고,도메인 다음에 나오는 / 이후의 'topic' ..
안녕하세요, 프로독학러 입니다. 이 카테고리에서는 리액트 라우터(version_4 이상)에 대해서 배워보도록 하겠습니다. 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 1) 리액트 라우터의 효용 리액트 라우터는 SPA(Single Page Application)를 리액트를 통해 구현하는데 필요한 라이브러리입니다. SPA 와 반대되는 개념은 전통적인 웹 어플리케이션 입니다.전통적인 웹 어플리케이션은 여러 페이지로 구성되어 있으며, 한 페이지에서 다른 페이지로 이동할 때 페이지 전체를 다시 렌더링 합니다.이런 방식의 전통적인 웹 어플리케이션의 렌더링은..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 이미 작성된 Document 를 수정하는 메소드인 update() 메소드에 대해서 알아보도록 하겠습니다. 표현식 update() 메소드의 표현식은 다음과 같습니다. db.COLLECTION_NAME.update( , , ) 첫 번째 파라미터인 query 는 find() 메소드의 query 와 같습니다. update 할 대상을 찾는 것으로, 데이터 타입은 document(객체) 입니다.두 번째 파라미터인 update 는 qurey 를 기준으로 선택된 도큐먼트에 적용할 변동사항입니다. 데이터 타입은 document(객체) 입니다.세 번째 파라미터인 options 는 객체 형식이며 세부 옵션은 다음과 같습니다. (*optional) {upsert : ,mult..