기타 공부
[CSS] HTML table element 행렬 pivot하기
2x4의 형태의 HTML table을 CSS를 간결하게 사용해서 4x2 행렬로 바꿀 수 없을까 연구해봤다. H1 H2 H3 H4 R1 R2 R3 R4 css script를 추가한 결과는 아래와 같다. 이제 pivot을 위해서 존재하는 복잡한 데이터 계산 로직을 제거할 수 있다. 다만 flex를 통해 table element의 예외 경우를 만든 것이기 때문에, 화면 개발 측면에서 유지보수는 필요하다.
ESLint, Prettier 적용하기
ESLint, Prettier란 무엇이고 어떻게 사용할 수 있을까? 개발자들은 각자의 개발 스타일을 갖고 있다. (들여쓰기의 정도, async/await 사용 여부 등...) 많은 코드 스타일들이 프로젝트 한곳에서 모이면 코드가 제각각이 되어 어플리케이션 품질이 저하될 수 있다. 이를 해결하기 위해서 Linter/Formatter를 사용하여 코드 컨벤션 통일을 강제화한다. 대표적인 Linter인 ESLint의 공식 문서에는 아래와 같이 정의한다. ESLint is an open source project that helps you find and fix problems with your JavaScript code. It doesn't matter if you're writing JavaScript in..
[Git] 실무에서 자주 사용되는 commands
git branch // 현재 브랜치를 기준으로 "feature"란 브랜치 명으로 생성함 $ git branch feature // "feature2" 브랜치의 내용을 "feature1"이란 브랜치 명으로 생성함 $ git branch feature1 feature2 // "feature" 이름을 가진 로컬 브랜치를 삭제함 $ git branch -d feature // "feature1", "feature2", "feature3" 이름을 가진 브랜치를 삭제함 $ git branch -d feature1 feature2 feature3 // 브랜치 이름에 "feature" 단어를 포함한 브랜치들을 삭제함 $ git branch | grep feature | xargs git branch -d // "fe..
MSA 한번에 이해하기
MSA의 등장 배경 MSA의 등장은 모놀리식 아키텍처(Monolithic Architecture)에서 부터 시작됩니다. Monolithic이라는 단어는 "하나의 암석으로 된", "한 덩어리의"라는 뜻을 가지고 있습니다. 그동안 대부분의 소프트웨어들은 모놀리식 아키텍처로 개발되었습니다. 이들은 단단한 암석이지만, 하나의 저장소에 모든 코드가 담겨있어 획일화 된 구조를 갖고 있었습니다. 모놀리식 아키텍처의 장점은 다음과 같습니다. 프로그램 전체의 개발 스택이 동일하여 복잡하지 않습니다. 고가용성 서버 환경을 쉽게 만들 수 있습니다. End-to-End 테스트가 용이합니다. 전통적인 소프트웨어 아키텍처로 개발자들에게 익숙합니다. 작은 규모의 서비스에서부터 개발하기가 쉽습니다. 단점은 다음과 같습니다. 프로그램..
나중에 보려고 스크랩 해둔 CORS 문제
stackoverflow.com/questions/55693992/react-import-leads-to-failed-to-resolve-module-specifier-react React import leads to Failed to resolve module specifier "react" Call me stupid (and I will not take it personally), but I have not used REACT for over 3 years, and my brain cells must have died. I am getting the error: localhost/:1 Uncaught TypeError: Failed to stackoverflow.com www.youtube.com/w..
babel, webpack
- .jsx 파일을 .js 파일로 바꿔줌 (트랜스 파일) - babel-cli, babel-preset-react 패키지 설치 필요 - babel-cli babel을 실행 시킬 수 있게 해줌 - babel-preset-react react 트랜스 파일링에 사용되는 플러그인(패키지 번들) 참고: babel-preset-env는 무엇이고 왜 필요한가? https://velog.io/@pop8682/%EB%B2%88%EC%97%AD-%EC%99%9C-babel-preset%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80-yhk03drm7q - pakage.json { "name": "test"..