분류 전체보기 25

처음 써 본 리액트 훅(Hook) 후기..

3년 전 취준 시절에 프론트엔드 개발자를 준비하면서 리액트를 아주 잠깐 공부한 적이 있다. 그 당시에도 리액트가 대세였는데 아직도 대세인 듯 하다. 지금 다니는 회사에서는 다른 프레임워크를 쓰느라 리액트를 다뤄보지 않았는데 며칠 전, 3년 만에 리액트를 써 볼 기회가 있었다. 그동안 정말 많은 게 달라져 있었다. 3년 전에 노마드 코더에서 리액트 강의를 수강했었는데 그 당시엔 클래스형 컴포넌트로 구현하는 실습을 하며 공부했던 기억이 있다. 요즘은 클래스형보단 함수형과 리액트 훅이 추세인 것 같았다. (취준 때 리액트 관련 책도 샀었는데 프레임워크는 빨리 변한다는 소문에 취업하고 바로 팔았는데 정말 다행이다.) 함수형 컴포넌트를 사용하면 클래스형에서 사용하는 생명주기 메소드는 사용할 필요가 없고, 대신에 ..

1장) 도메인 주도 설계란?

도메인 주도 설계 "이용자의 세계와 소프트웨어 구현을 연결 짓는 것" 유용한 소프트웨어를 만들려면 이용자의 문제가 무엇인지 파악하고, 이를 해결할 수 있는 최선의 수단을 생각해야 한다. 도메인 지식에 초점을 맞춘 설계 기법 도메인은 영역이라는 뜻이며, 도메인이 무엇인지보다는 도메인에 포함되는 것이 무엇인가 하는 것이 더 중요하다. 예를 들어, 회계 시스템에선 금전, 장부 등이 도메인에 속하는 개념이다. 물류 시스템에선 화물, 창고, 고객사, 주문, 운송방법, 재고 등이 도메인에 속하는 개념이다. "지식에 초점을 맞춘다" ?? : 도메인에 속하는 개념과 사건을 이해하고, 그 중에서 문제 해결에 유용한 것을 뽑아낸 지식을 소프트웨어에 반영하는 과정 이용자들의 문제를 정확히 이해하지 않고 최신 기술을 중시하는..

[HTML/CSS] 웹 페이지 구조 잡기

평소 일할 때 컴포넌트에 대해서 스타일 수정하고 적용하는 작업은 많이 하는데 빈 페이지에 처음부터 스타일을 잡고 적용시킨 건 아주 오래 전 개인 프로젝트할 때 말곤 없어서 막상 구현하려니 헷갈리고 좀 어려웠다. 간단해보이는 웹 페이지인데도 스타일을 적용하고 지우고 또 적용하고 또 지우고를 반복했다. 뭐든 처음에 구조를 탄탄하게 잡아둬야 무너지지 않는다. 다음에 또 구현할 때 헷갈려서 구글 검색을 하게 될 게 뻔하기 때문에 웹 페이지 구조를 잡는 비법(?)에 대해 미리 정리를 해보았다. 프로그래머스 "만들면서 배우는 실전 퍼블리싱" 스터디에서 강의를 들으면서 + 과제를 해나가면서 + 구글 검색으로 이루어진 내용이다. Header, Main, Footer로 구성된 보통의 웹 사이트 구조를 예시로 구현해봤다...

자바스크립트(node.js)로 백준 알고리즘 문제 풀기

백준 알고리즘 사이트에서 자바스크립트로 문제를 풀어보고 싶어서 node.js로 푸는 방법을 찾아서 정리해 보았다. 백준에서 자바스크립트로 문제를 풀기 어려웠던 이유는 입력 값을 직접 받아야 했기때문이다. 이번엔 맘 먹고 해보자!는 생각으로 해봤다. 프로그래머스에선 console.log로 디버깅 비슷하게 값을 확인하며 풀 수 있어서 IDE가 필요 없었는데 백준에선 그렇지 못해서 VScode에서 코드를 짜고 복사/붙여넣기하며 풀어야 했다. VSCode에서 백준 알고리즘 풀기 1. node.js 설치하기 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 우선 node가 설치되어 있어야 한다. 그런..

Lit와 Web Component

Lit 란? Lit 📣 Check out our brand-new Tutorials page and Lit YouTube Channel!Simple. Fast. Web Components.Skip the boilerplateBuilding on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates lit.dev Lit는 가볍고 빠르게 웹 컴포넌트를 만들 수 있는 라이브러리이다. Lit 공식 사이트 코드를 참고하여 웹 컴포넌트 사용법과 클래스에 대해 공부한 내용을 정리해 보았다. 더보기 웹 컴포넌트 : 충돌 걱정 없는 캡슐화 기능을 갖..

Hoisting (호이스팅) - JavaScript

Hoisting이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 Hoisting 요약 - 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것이다. - var로 선언한 변수의 경우 호이스팅이 일어나면 undefined로 변수를 초기화한다. - 실제로 코드가 상단으로 옮겨지는 것은 아니며 내부적으로 끌어올려 처리하는 것이다. - 함수의 경우 함수 선언식 대신 함수 표현식을 사용하면 호이스팅되지 않는다. - 변수 선언은 가급적 var 대신 let과 const를 사용하도록 한다. 함수 선언식 Hoisting JavaScript가 코드를 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것이다. f..

Destructuring (구조 분해 할당) - JavaScript

Destructuring "구조 분해 할당" 배열과 객체는 자바스크립트에서 많이 쓰이는 자료구조이며, 많이 쓰이는 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 ECMAScript(ES6)에서 이러한 Destructuring 문법을 제공한다. 다음은 Destructuring을 사용하는 방법이다. 배열 분해하기 let arr = [1,2,3] let [first, second] = arr console.log(first) // 1 console.log(second) //2 아래의 코드는 위의 코드와 같은 결과를 출력하는 코드 let first = arr[0] let second = arr[1] destructuring은 분해 대상이 수정되거나 없어지는 것은 아..

[ElasticSearch 검색 엔진] 핵심 개념 정리 (1)

[ ElasticSearch 기본 개념 ] "ElasticSearch" : Elastic Stack의 중심이며 검색 엔진으로 Elastic Stack에서 가장 중요한 역할을 하고 있다. 모든 데이터를 색인하여 저장하고 검색, 집계 등을 수행하며 결과를 클라이언트나 다른 프로그램으로 전달하여 동작하게 한다. Elastic Stack이란..? : 아파치의 검색 라이브러리인 루씬의 한계를 보완하기 위하 만든 오픈소스 검색엔진이다. ElasticSearch가 Logstash, Kibana와 함께 사용되면서 ELK Stack이라는 이름으로 알려졌다가 Elastic Stack이라고 정식 명명함. ElasticSearch 특징 자바로 개발된 오픈 소스 (https://github.com/elastic) Elastic..

자바스크립트(Javascript) 란?

자바스크립트란? : '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어 스크립트(Script)란 ?? 스크립트란 다른 프로그램에 의해 번역되거나 수행되는 프로그램이나 명령어들의 나열을 말한다. 스크립트는 HTML안에 작성할 수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다. 웹 페이지 내에 포함되어 있는 자바스크립트는 웹 브라우저(클라이언트) 측에서 수행된다. 스크립트는 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행할 수 있다. 그러나, 컴파일된 프로그램보다 실행시간이 오래 걸리는데, 모든 명령어가 기본 명령어 처리기에 의해 직접 처리되지 못하고, 우선 다른 프로그램에 의해 전처리가 필요하기 때문이다. 자바스크립트는 브라우저에서만 사용이 가능한가 ?? 자바스크립트는 브라..