프론트엔드 복습노트 프론트엔드 복습노트

frontend

• [자바스크립트 꿀팁] 숫자 세자리 콤마 ( 숫자 3자리 콤마 )

  frontend/꿀팁 2022. 3. 24. 17:25

  오늘은 숫자 3자리마다 콤마 넣는 방법에 대해서 알아보겠습니다. 숫자 3자리 쉼표처리는 금액의 표현에서 엄청 자주 사용됩니다. 사내 시스템에서도 대고객 서비스에서도 이용될 수 있습니다. 이런 콤마 처리를 어떻게 하면 가장 빠르게 적용할 수 있을지 알려드리겠습니다. 정규식 const number = 123124124.123123123; function formatComma(number){ const div = number.toString().split("."); return `${div[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")}.${div[1]}`; } console.log(formatComma(number)) //123,124,124.12312312 정규식을 이용해서는 위..

  Read More
• [자바스크립트 꿀팁] 진수 변환 (N 진수 > N진수)

  frontend/꿀팁 2022. 3. 23. 17:33

  오늘은 진수변환에 대해서 알아 보도록 하겠습니다. 진수변환 다들 하실 줄 아시겠지만 자바스크립트에서는 toString() 메소드와 parseInt()메소드를 통해 아주 손쉽게 할 수 있습니다. 10진수 -> 2진수( 3, 4, 5...N 진수) let decimal = 2022; //10진수 -> 2진수 console.log(decimal.toString(2)); //10진수 -> 3진수 console.log(decimal.toString(3)); //10진수 -> N진수 console.log(decimal.toString(N)); 간단합니다. 위와 같이 Number 프로토타입 안에 있는 toString메소드의 파라미터로 원하는 진수값을 넘겨주면 손쉽게 변경됩니다. 2진수 ( 3, 4, 5...N 진수 ..

  Read More
• [ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료)

  frontend/react&next 2022. 3. 22. 17:45

  [2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않고 직접 프로젝트 초기 설정 하는 방법에 대해서 알아보겠습니다. 정말 간단한 사이드 프로젝트를 진행할 때에는 REACT CRA나 VUE CLI 등을 사용해서 진행할 수도 있지만, 내가 원하는 방향으로 정확히 설정하여 진행하기 위해서는 이러한 초기 설정을 보다 정확하게 알 필요가 있다고 생각합니다. 글 마지막에 boilerplate가 첨부되어있습니다. 1. 모듈 설치 가장 먼저 필요한 모듈을 설치해보겠습니다. 저는 주로 사용하는 yarn으로 설치를 진행해보겠습니다. npm install을 이용해 동일 작업..

  Read More
• [JSP] JSP 실무 프로젝트 셋팅과 활용

  frontend/고전 2022. 3. 21. 15:29

  오늘은 JSP의 실무 프로젝트에서 활용에 대해서 적어 보겠습니다. JSP라고 하면 프론트엔드에서는 클래식이라고 볼 수 있을 것 같습니다. React, Vue, Angular, Svelte, Solid 등이 프론트엔드 춘추전국시대를 만들기 전에 아주 많이 사용했었습니다. 물론, 중소 SI쪽에서는 아직도 사용하는 곳이 많은 걸로 알고 있습니다. 혹시나 아직 수요가 있을가 하는 마음에 JSP의 효율적인 실무 셋팅에 대해서 글을 써보겠습니다. 글 마지막에 소스코드 템플릿 만들어서 공유 해두었습니다. 1. 스프링 설정 // application.yml spring: mvc: view: prefix: /WEB-INF/views/ suffix: .jsp // application.properties spring.mv..

  Read More
• [VueJS] Vue의 새로운 상태 관리 : Pinia (피니아 간단 사용법)

  frontend/vue&nuxt 2022. 3. 17. 17:20

  오늘은 Vue3에서 추천하는 상태관리 라이브러리인 Pinia에 대해서 얘기해볼까 합니다. 이때까지 Vue의 상태관리하면 당연하게도 Vuex를 떠올리곤 했는데 작년에 컨퍼런스에서 류에반씨가 직접 Pinia를 추천했었습니다. 메인테이너가 직접 추천하는 상태관리 툴은 알고 있으면 좋을 거라고 생각하며 글을 써봅니다. 우선 Pinia를 쓰기전에 그럼 Vuex는 이제 끝인가요? 라고 물으신다면 그건 또 아닙니다. Vuex의 다음버전인 Vuex5와 Pinia사이의 전환이 매우 쉬울 것이라고 말했으니 그냥 피니아라는 선택지가 하나정도 더 늘었다고 생각하면 될 것 같습니다. React처럼 이제 Redux, Mobx, Recoil 골라 잡듯이.. 이제 Vue도 상태관리 고르는 재미...?가 있을 것 같습니다. 1. Pi..

  Read More
• [ReactJS] VUE개발자 REACT(함수형)에 빠르게 적응하기 ( 비교 개발 ) - 스크롤 압박 내용 매우 많음, 매우 유용

  frontend/react&next 2022. 3. 4. 13:26

  오늘은 Vue 개발만 하던 저가 React를 배울 때 어떻게 최대한 빠르게 적응했는지에 대해서 동작에 대해서 비교하면서 설명드리려고 합니다. 이 방식은 저가 겪었던 방식으로 여타 프레임워크를 사용하지 않았던 분들에겐 부적합 할 수 있으니 그냥 이사람은 이렇게 넘어갔구나하고 생각해주시면 감사하겠습니다. 물론 저는 vue( 이젠 3 CompositionAPI )와 react 두개를 병행 하고 있습니다. cli와 cra를 기반으로 설명드리겠습니다. 1. 앱 기동시 첫 진입 - vue-cli ( main.js ) import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') - create-react-app ( in..

  Read More
• [ReactJS] Styled Components (CSS IN JS) 적용 및 사용법 ( 부록 : NextJS + TypesScript 환경 적용 및 사용법 )

  frontend/react&next 2022. 3. 3. 16:30

  웹 프론트엔드 개발 시에 CSS를 적용하는 방식으로는 CSS IN CSS , CSS MODULE, CSS IN JS 등 다양한 방식이 있습니다. 프로젝트의 성격에 따라 구현하는 방식은 다르겠지만, 오늘은 Styled Components ( CSS IN JS )에 대해서 알아보겠습니다. 우선 Styled Components 를 사용하기 위해서는 가장먼저 스타일 컴포넌트 모듈부터 설치해야 됩니다. 0. Code Snippet 설치 필수는 아니지만 스타일 컴포넌트가 문자열 처럼 그냥 쭉쭉 나오면 매우 불쾌지수가 올라갑니다. 익스텐션 제가 쓰는 걸 알려드리자면 vscode-styled-components 입니다. 해당 스니펫이 아니더라도 꼭 깔고 작업하시는걸 추천..또 추천드립니다. 1. styled-compo..

  Read More
• [NextJS] Tiptap(WSIWYG Editor) - NextJS 문서 편집기(Rich Editor) 구축기

  frontend/react&next 2022. 3. 2. 16:32

  매일 개인 개발을 할 때 글 쓰기를 만들 때 내 입맛대로 만들고 싶을 때 어떤 에디터를 사용할까라는 고민을 정말 많이 해왔던 것 같습니다. 저 또한 Quill, CK, TUI, Editor, TinyMCE 등 많은 에디터 들이 있지만 그 중에서 가장 제가 원하는대로 깔끔하게 커스텀 가능했던 에디터를 소개해드릴려고 합니다. Vue이용자들은 Tiptap에디터를 꽤 많이들 사용하는 것으로 알고 있습니다. Tiptap의 가장 큰 장점은 다양한 프레임워크 지원이 아닐까 싶습니다. Vue, React 뿐만 아니라 Nuxt, Next 등의 SSR에서의 환경을 제공한다는 것은 매우 만족 스러웠습니다. quill을 이용했을 때는 매번 dynamic을 써서 어거지로 넣었던 기억이 있습니다. 이 에디터는 매우 강력하고 스타..

  Read More