이전 스토리는 아래 링크를 참고해주세요.

벌써 2년

어느새 [개발자 트렌트를 버리다] 라는 글을 적은 후 2년의 세월이 흘렀습니다. 이 번글은 [1년후 소감]에 이어 또 다시 1년 동안 어떤 일이 일어났는지에 대한 이야기와 그 동안 에디터를 만들면서 알게된 나름의 팁들을 같이 정리해볼까 합니다.

이지로직 스튜디오 : https://editor.easylogic.studio

코드

1년전 코드와 다시 한번 비교해보겠습니다.

추가 라인 165,685 — 삭제 라인 160,263


Ruby on Rails(이하 줄여서 RoR) 에서 프론트엔드 개발을 위해서 webpacker 를 많이 사용합니다.

하지만 webpacker 를 사용해서 프론트엔드 개발을 하게 되면 백엔드와 연관된 설정들로 인해서 체크해야하는 비용이 계속 늘어나게 됩니다.

webpacker 내부에서 webpack 빌드를 분리함으로써 좀 더 유연하게 프론트엔드 개발할 수 있는 방법을 제시해 보려고 합니다.

왜 분리를 시작하게 되었나요?

webpacker 는 RoR 환경에서 webpack으로 빌드한 프론트엔드 application 을 적용할 수 있게 해주는 라이브러리입니다.

webpacker 에서 webpack 을 분리하다니 약간 말이 안 되는 상태인데요. 말 그대로입니다.

로컬 …


이 글은 https://medium.com/@easylogic/%EA%B0%9C%EB%B0%9C%EC%9E%90-%ED%8A%B8%EB%A0%8C%EB%93%9C%EB%A5%BC-%EB%B2%84%EB%A6%AC%EB%8B%A4-b5cbbf9ba958

이후로 1년이 지난 지금, 어떻게 변화했는지에 대한 글입니다.

처음 Gradient 에디터를 만들때는 이렇게 오래 하게 될 줄은 몰랐습니다. 왜냐하면 1년이라는 시간 동안 세상은 또 많이 변하고 있는 중이었거든요.

Typescript 가 완전히 대세가 되었고 , React Hooks 로 UI 를 다시 개발하고 , 곧 Vue3 로 나오고, 그 외에 알 수 없는 UI 프레임워크 …


에디터를 만들게 되면서 가장 심혈을 기울인 기능은 DOM 이벤트 시스템이다.

우리는 DOM 이벤트 정의 하는 것을 언제나 어려워 하고 있다. 왜냐하며 기존의 Class 시스템이랑 맞지 않기 때문이다.

이벤트 정의는 불편하다

간단히 DOM 이벤트를 정의 하는 방식을 보자.

jQuery 형태로 가면 조금 더 심플하게 바뀐다.

일반적인 형태로 관리할 때는 이렇게 해도 별 문제 없을 것 같은데 Component 시스템으로 들어오면 scope 를 매번 바꿔줘야 하는 이슈가 생긴다.

이러한 문제 때문에 보통은 아래 처럼 scope 를 주는 방식으로 재작성한다.

이렇게 DOM 자체를 다루는 방식으로 정의를 하게 되면 DOM 에 의존하는 형태가 되서 같은 작업을 계속 반복해 …


처음 글에 이어 css gradient editor 를 만들면서 생각했던 것들을 이야기 해보자.

처음부터 생각하다.

이 전의 나는 프로그램을 시작하면 항상 라이브러리 기준으로 생각을 했다. 예를 들어 jquery 를 사용할 때는 jquery 의 플러그인을 만드는 것에 집중을 했고 vuejs 나 react 를 사용할 때는 그 들이 만들어놓은 나름의 규칙 안에서 생각을 했다. 생각하지 않았던 라이프 사이클에 대해서 고민하게 됐고 이벤트 감지와 변경 시점에 대한 변화 등 데이타 기준으로 고민하게 되었다.

하지만 이런 것들이 나의 프로그램들이 안전하다거나 더욱 잘 만들수 있게 해준다던가 하는 기준보다는 항상 하는 프로그램을 조금 다르게 만든다는 느 …


이 이야기는 css gradient editor 를 만들기까지의 과정에 대한 이야기이다. (이 글은 깁니다. ^^;;;;;;; 스크롤이 힘들면 안 읽으셔도 됩니다.)

나는 왜 트렌드를 버렸는가?

트렌드를 버렸다기 보다는 트렌드를 신경쓰지 않게 됐다가 맞을 것 같다.

나는 현재 프런트엔드 프로그래머로 일하고 있고 몇가지 프로젝트에 참여하고 있다. 그 중에 하나가 summernote 인데 지금은 업데이트를 많이 못하고 있지만 summernote 를 통해서 개발자체에 대한 공부를 많이 할 수 있었다.

플러그인 시스템을 만들고 멀티 UI 를 구성하고 Bootstrap 의 의존성을 없애고자 자체 UI 시스템을 만드는 등 기존의 트렌드와는 어쩌면 반대되는 형태로 작 …


css gradient is defined by default in the background-image property.

the gradient is an image.

You will be able to create a pattern using the css background property.

Let’s take a moment to look at the ui, where you can control the background property.

There are several properties for controlling background-image.

  • Blend : Specifies blend mode.
  • size : Specifies how background-image is populated.
  • x,y : Determines the position of the background-image.
  • width, height: Determines the size of the background-image.
  • repeat: background-Specifies the repeating pattern of the image.

Now let’s make some simple patterns.


What is Conic Gradient? Let’s take a look at the text below.

The conic-gradient() CSS function creates an image consisting of a radial gradient with color transitions around a center point rather than radiating from the center. — MDN

It is drawn roughly this way.

The conic gradient also supports repeating.


Now let’s see how to create Radial Gradient.

Basically, radial has two shapes. radial-gradient, repeating-radial-gradient

CSS has been used to make good use of repeating patterns.

Let’s just add Radial Gradient first. Please press Radial.


Now let's make CSS Gradient a little easier.

First, try to add a Gradient of the desired type in the Gradient tab.

Let’s try to choose Linear here.

Then the gradient bar appears in this form.

easylogic

걸작을 만드는 사람.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store