로니의 개발 이야기

Node.js exress 서버 개발 환경 구축 0️⃣ Server (root directory) : package.json 파일 만들기 (1) 프로젝트의 이름, 어떻게 실행할 것인지, 어떤 버전을 이용할 것인지에 대한 부분을 작성한다. (2) 아래의 코드에서 주목해야 할 부분은 dev이다. dev를 통해서 client와 sever의 서버를 동시에 구동할 수 있다. (3) 또한 dependencies에 있는 항목들은 npm install을 통해서 설치해 줄 수 있다. { "name": "management_product", "version": "1.0.0", "private": true, "scripts": { "client": "cd client && yarn start", "server": "node..

1️⃣ 비동기 처리란 무엇일까? 비동기 처리의 가장 흔한 사례는 jquery의 ajax이다. 이 ajax를 통신을 통해 데이터를 서버로부터 가져올 수 있기 때문이다. 👀 아래의 ajax 코드를 한편 살펴보자. function getData(){ var dongleData; $.get('https://domain.com/product/1', function(response){ dongleData = response; }); return dongleData; } console.log(getData()); // undefined ▫ $. get()이 ajax 통신을 하는 부분 ▫ https://domain.com에 HTTP GET 요청을 해서 product 1번을 요청 ▫ 서버에서 받아온 데이터는 respon..

💡 Template literal 자바스크립트를 좀 더 편하게 사용하기 위해 Template literal을 간단하게 사용해보기로 했다. var nick_name = 'dongle'; var letter = 'Dear' + nick_name + '\n\n Hello, my name is dongri.'; console.log(letter); 위의 코드는 아래와 같이 실행될 수 있다. +라던가 \n 등을 사용하지 않고 좀 더 편하게 사용할 수 있게 template literal을 적용해볼 수 있다. literal이 시작되는 부분에 grave accent( ` ) 를 입력 ${선언된 변수} 입력 literal이 끝나는 부분에 grave accent( ` ) 를 입력 var letter = `Dear ${ni..

1️⃣ 디자인 패턴? 개발 과정에서 공통으로 발생하는 문제를 해결하기 위해 사용되는 패턴이다. 2️⃣ MVVM 디자인 패턴? 목적 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다. 이를 이용하게 되면 테스트, 유지보수, 재사용이 쉬워진다. 구성 요소 모델(Model) 비즈니스 로직과 데이터를 다룬다. 뷰(View) UI와 UI 로직을 다룬다. 뷰 모델(View Model) 프레젠테이션 로직과 뷰를 위한 상태를 다룬다. 3️⃣ MVVM 디자인 패턴의 장점과 단점 장점 모델과 뷰 모델을 독립적으로 개발할 수 있다. 개발자와 디자이너가 동시에 독립적으로 또는 병렬적으로 작업할 수 있다. 테스트에 용이하다. 단점 작은 프로젝트에서 사용시 오버헤드가 커진다. 프로젝트가 너무 커지면 데이터 바인딩 때..

1️⃣ CSS의 한계? CSS를 통해서 홈페이지를 꾸미던 중 한 가지 문제가 발생하였는데, 바로 CSS의 양이 한도 끝도 없이 많아지는 것이었다. 이 문제를 해결하기 위해서 열심히 찾아보던 중 CSS 전처리기(Pre-Processor)에 대해서 접하게 되었다. 💡 CSS 전처리기(Pre-Processor)란? CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해주는 도구이다. 2️⃣ CSS 전처리기 종류? CSS 전처리기에는 다양한 모듈이 존재하는데 가장 많이 사용되는 전처리기에는 Sass, Less, Stylus 3가지가 있다. 3️⃣ CSS 전처리기 사용을 하면 뭐가 좋을까? Sass를 사용하기에 앞서, 이 전처리기를 사용하게..

state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다. 생성자 (contructor)? 생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다. super(props)는 항상 최상단에 위치해야 한다. super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다. import React, { Component } from 'react'; class App extends Component{ constructor(props){ su..

1. 제목 : 제목을 정할 때는 '#'을 이용해서 강조해준다. #의 개수가 많을수록 더 작은 크기의 text를 반환한다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 2. 코드 블럭 : code block을 만들 때는 ` 를 사용하여 만들 수 있다. ``` ( ` 3개 )와 ```( ` 3개 ) 사이에 code block 시키고 싶은 text를 입력해주면 된다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 만약 문법이 있는 언어를 코드 블록에 넣고 싶다면 시작 부분 ``` 뒤에 해당하는 언어를 표시해주면 된다. 예를 들어, python 문법을 사용하고 싶다고 가정해보자. 그 경우는 아래와 같다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 3. blockquote(인용문) : 인용문을 사..

1. DOM 요소에 접근 및 선택하기 document property DOM의 최상위 객체인 document 객체는 DOM을 정의하는 속성을 가진다. get method

1. CSS3 Grid의 등장 CSS Grid는 2차원의 레이아웃을 제공한다. CSS Grid는 예전부터 핵(Hack)으로 불렸던 다양한 레이아웃 대체 방식들을 해결 하기 위해 만들어진 CSS 모듈이다. CSS Grid를 사용하게 되면서 격자 구조의 레이아웃을 쉽게 구현할 수 있게 되었다. 또한 이 레이아웃 안에 배치하는 item들을 좀 더 쉽게 이동시킬 수 있는 자유로움이 생겼다. 2. CSS3 Grid의 사용 Grid Properties Grid는 2개의 개념으로 나뉘게 된다. 첫 번째는 Container, 두 번째는 Items이다. 이 두 가지에 적용하는 속성이 구분되어 있다는 것을 잘 알고 있어야 한다. Grid Containers properties 속성 의미 display 그리드 컨테이너(Co..

1. CSS3 Flexible Box의 등장 대부분의 웹 사이트는 전체 레이아웃이 수직 구성으로 ‘위-아래’로 스크롤하여 사용하게 된다. 레이아웃을 구성할 때 가장 많이 사용되는 요소들은 보통 블록(block) 개념으로 표시되고, 이는 수직으로 쌓이기 때문에 상대적으로 쉽게 구성할 수 있다. 하지만 수평 구조를 만들 때는 어떨까? 수평 구조를 만드는 속성이 명확하지 않았기 때문에 보통은 float 혹은 inline-block 등을 통해서 구성하곤 했다. 이 문제를 해결할 수 있는 명확한 속성의 등장이 바로 Flex(Flexible Box)이다. 우리는 이 Flex를 통해서 수평 구조를 자유롭게 구성할 수 있게된다. 2. CSS3 Flexible Box의 사용 Flex는 2개의 개념으로 나뉘게 된다. 첫 ..