cho-light

나는 마이크로 프론트앱을 직접 구현해보려고 한다. 간단하게 설명하면 Cesium을 이용하여 여러가지 분석기능을 작동할 수 있는 서비스를 구현하고 싶다. 메인 서비스에 세슘을 작동시킨 상태에서 구현해 놓은 다른 세슘 기능들을 불러와 사용하고 싶다. 아래 이미지는 지금까지 간단하게 작업한 내용이다.메인 서비스에서 우측사이드바에 간단한 저작도구(거리구하기, 클릭한 위치의 위경도 표출 등)를 만들어 놓았고,좌측사이드바에서는 메인 기능이 들어가는 부분을 만들어기본 CRA로 만든 다른 프로젝트를 불러오는 기능까지 해놓은 상태이다. 다른 앱을 불러오는 방식은 iframe을 사용해보았다iframe을 사용하니 정말 간단하게 src부분에 주소를 연결해 놓으면 CRA로 만들어놓은 프로젝트를 불러올 수 있었다.하지만 다른 각..

리팩토링에도 좋고 나쁜게 있을까?프로젝트를 마무리하고 다음 프로젝트를 맡아 진행하다 보니 리팩토링을 할 수 있는 시간이 없다.개인적으로 직원들과 함께 리팩토링을 하면 많은 도움이 될 것 같지만 특성상 어려움이있어 그러지는 못한다. 시간을 쪼개 혼자서라도 해야겠다.https://www.builder.io/blog/good-vs-bad-refactoring 리팩터링의 좋은 점, 나쁜 점, 추악한 점추상화는 좋을 수 있고 나쁠 수 있다. 핵심은 언제 어떻게 적용해야 하는지 아는 것이다.몇가지 일반적인 함정과 이를 피하는 방법을 알아보자.  1. 코딩 스타일을 크게 변경한다가장 흔한 실수 중 하나는 개발자가 리팩터리 중에 코딩 스타일을 완전히 바꾸는 것이다.종종 누군가가 다른 배경을 가지고 있거나 특정 프로그래..

transform-origin 변환이 적용되는 지점을 바꿀 수 있다. transform : rotate(45deg); transform-origin: center; transform-origin: top; transform-origin: bottom; px로 특정 위치를 지정할 수 있음. 예시로 transform-origin : 10px 10px 이렇게 텍스트에 그라데이션과 애니메이션 효과를 적용하고싶다. special animation div { background-clip: text; // 백그라운드 이미지를 텍스트에 적용 -webkit-background-clip: text; color: transparent; // 글자색상 투명하게 적용 // 백그라운드 이미지 그라데이션 색상 적용 backgrou..

'webpack.config.js' 파일은 웹팩 설정 파일로, 웹팩 빌드 프로세스를 제어하는데 사용된다. 이 파일을 사용하여 웹앱의 번들링 및 빌드 설정을 구성할 수 있다. 웹팩은 여러 모듈을 하나의 번들로 결합하고 필요한 자원을 생성하기 위해 사용된다. JS또는 TS파일로 작성되며 다음과 같은 중요한구성 옵션들이 포함된다. Entry: 어플리케이션의 시작점을 정의한다. 웹팩은 이 시작점에서 모듈 로딩을 시작한다. Output : 번들링된 자원의 출력 경로 및 파일 이름을 설정한다. Loaders : 다양한 파일 형식을 웹팩에서 이해할 수 있는 모듈로 변환하는 규칙을 설정한다. 예를 들어, JS파일 뿐만 아니라 CSS파일, 이미지 파일 등을 처리할 수 있다. Plugins: 웹팩 빌드 프로세스에 추가적인..

마이크로 서비스(마이크로 서비스 아키텍쳐) 단일 애플리케이션이 다수의 느슨하게 결합되고 독립적으로 배치 가능한 더 작은 구성요소 또는 서비스로 구성되는 클라우드 네이티브 아키텍처 접근 방식이다. 일반적으로 복잡한 문제에 부딪혔을 때 문제를 작게 나누고 작은 문제를 해결하는 방법이 효율적이다. 코드를 더 쉽게 업데이트할 수 있다. 애플리케이션 전체를 건드리지 안고도 새 기능을 추가할 수 있다. 팀들은 서로 다른 컴포넌트에 대해 서로 다른 스택과 서로 다른 프로그래밍 언어를 사용할 수 있다. 컴포넌트를 서로 간에 독립적으로 스케일링할 수 있으므로, 단일 기능에 너무 많은로그가 부과되어 초래되는 전체 애플리케이션의 스케일링과 연관된 낭비와 비용을 줄일 수 있다. 데이터 단위로 작게 나누어 작은 문제를 하나씩 ..

JSP : Java Server Pages 의 약자로 HTML 코드에 Java 코드를 넣어 동적으로 컨텐츠를 생성할 수 있는 웹 페이지를 만들기 위한 도구 JSP 특징 일반적인 HTML 문서 안에 Java 코드를 삽입하는 방식으로 작성된다. JSP페이지에서 Java 코드를 사용하여 데이터베이스 쿼리 실행, 계산, 조건부 렌더링 및 사용자 입력 처리와 같은 다양한 서버 측 로직을 수행할 수 있다. Servlet 기술을 기반으로 JSP페이지는 서블릿으로 변환되어 실행되며, 이 과정에서 Java 코드로 변환된다. 사용자 정의 태그를 사용하여, 보다 효율적으로 웹 사이트를 구성할 수 있다. * JSTL(JSP Standard Tag Library, JSP 표준 태그 라이브러리)사용 더보기 JSTL(JSP Sta..

이 앱이, 코드들이 제대로 동작을 하고 있는 것인가? 대부분 들어가는 비용 대비 돌아오는 효과가 적다고 생각하여 테스트를 작성하지 않는다. 예시로 어떠한 간단한 컴포넌트가 제대로 렌더링이 되어 동작한다는 것을 브라우저에서 확인해야 한다면, 그러한 것들을테스트 코드로 작성했을 때, 브라우저에서 확인하지 않고도 확신을 얻을 수 있을까? // 테스트 TDD란? TDD(Test Driven Development)의 약자로 '테스트 주도 개발' 이라고 한다.TDD와 일반적인 개발방식의 가장 큰 차이점은 테스트 코드를 작성한 뒤에 실제 코드를 작성한다는 것이다.디자인(설계) 단계에서 프로그래밍 목적을 반드시 미리 정의해야만 하고, 무엇보다 테스트해야 할지 미리 정의 해야한다. 테스트 코드를 작성하는 도중 발생하는 ..

TMDB API로 영화정보를 불러와봤다. 포스터 이미지를 불러오는 과정에서 조금헤맸다. 데이터를 가져오면 포스터 이미지가 아래와 같이 담겨온다. 가이드에서 이미지URL을 구축하는 방법이라고 별도로 나와있어서 참고하였다. 역시 사용설명서는 잘 읽어봐야 한다. 영화 개요가 상당히 긴 영화들이 있었다. 개요가 짧은 영화는 여백이 많이 보여 글자수가 100이 넘어갈 경우 그 뒤에는 ...으로 생략해주었다. 구조적 가상클래스 CSS에서 변수 선언을 하여 공통으로 사용할 속성을 미리 만들어 보았다. //CSS :root { --primary: #021d49; --primary-alpha: rgba(2, 29, 73, 0.5); --secondary: rgb(255, 102, 97); --gray: #f6f6f6; ..

SPA(싱글페이지어플리케이션)은 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다. 페이지 간 이동시, 페이지 갱신에 필요한 데이터만을 전달받아 갱신하여 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 렌더링하지 않고 변경되는 부분만을 갱신하여 새로고침이 발생하지 않아 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다. SSR은 먼저 서버에서 응답 값을 만들어서 내려주고, 그 이후에 static file(정적파일) 을 내려준다. 정적파일을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA(싱글페이지어플리케이션)처럼 동작하게 됨. 통신에 대해알아보자꾸나. React에서 많이 사용하는 Axios와 fetch..

프로젝트의 파일 구조를 가장 깔끔하고 보기좋게 만드는 방법은 무엇일까 고민이 된다. 컴포넌트 단위로 폴더 구조를 생성, 컴포넌트의 이름은 규칙적으로 생성, API호출이나 데이터 처리와 같은 서비스 로직은 별도의 폴더나 파일로 분리 등등 많은 방법들이 있는 것 같다. 여러가지 방법들이 있지만 내가 직접 만들어보고 경험하는게 장단점을 찾아 상황에 맞게 적용할 수 있을 것이다. 앞에서 만들어본 프로젝트를 꾸며보자. Tailwindcss를 사용해볼것인데 TailwindCSS의 장점을 찾아봤다. 1. 개별적인 클래스로 스타일을 지정하므로 커스터마이즈가 용이하며, 개발자가직접 스타일을 정의할 필요가 없다. 2. 필요한 유틸리티 클래스만 포함하여 번들 크기를 작게 유지할 수 있다. 3. 단순하고 직관적인 유틸리티 클..