728x90 더 알아보기166 코딩 잘하는 팁 3가지(DRY, KISS, YAGNI) 코드 리뷰 시 자주 등장하는 세가지 용어를 통해 더러운 코드를 깨끗하게 만드는 방법을 알아보자!! 1. DRY (Dont't Repeat Yourself) → "반복하지 마라"의 약자입니다. 상반대는 개념에는 WET이 있습니다. 1) Write Every Time → "매번 작성하고" 2) Write Everything Twice → "모든 걸 두번씩 작성하고" 3) Waste Everyone's time → "결국 모든 사람들의 시간을 낭비하는 방식"을 말합니다. DRY는 특정한 지식, 의도, 로직 등이 다양한 곳에서 다양한 방식으로 계속 반복 되어지는 것을 피하자 반복하지 마라!의 원칙입니다. 시스템 내에서 특정한 지식과 로직은 단 한 곳에서 명확하고 신뢰 할 수 있도록 존재 해야 합니다. 코드를 바.. 2022. 1. 9. PWA(Progressive Web App)란? + 적용하는 방법 Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고 해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다. PWA(Progressive Web App)란? : 인터넷 웹사이트의 파일들(html, javascript, css, images같은..)을 컴퓨터에 잘~ 저장(캐싱)해 놨다가 다시 요청이 올 때 저장(캐싱)된 파일들을 먼저 보여주고 필요할 떄 웹서버에 있는 데이터를 받아서 보여주는 기술과 홈스크린에 바로가기 아이콘을 설치 할 수 있게 하는 기술, 그리고 서버의 소식을 클라이언트에 전하는 Push 기술 입니다. PWA를 통해서 사용자는 모바일 앱과 같은 사용.. 2022. 1. 8. CI/CD (지속적인 통합/지속적인 제공/지속적인 배포) CI/CD란? DevOps 엔지니어의 핵심 업무라고들 합니다. CI (Continuous Intergration) : CI는 Continuous Integration 즉, 지속적인 통합이라는 의미를 내포하고 있습니다. 지속적인 통합이란, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 레포지토리(repo)에통합하는 것을 의미합니다. (가능하다면 하루에 여러번까지) CI가 필요한 환경에는 어떤 조건들이 있을까요?? 다수의 개발자가 형상관리 툴을 공유하고 사용하는 환경 : N년차 개발자 분들이시라면, 형상관리 툴(Git, SVN 등)을 사용하고 계시죠? 지속적으로 서비스해야 하는 어플리케이션이나 현재 개발 중인 어플리케이션은 기능 추가 시마다 commit 등을 날려 레포지토리(R.. 2022. 1. 8. 2022 웹개발 로드맵 총정리 (공부 순서) 출처 https://youtu.be/TTLHd3IyErM 2022. 1. 7. S3, ACM, CloudFront, Route53으로 https 배포하기 (with 가비아) 1단계 https://velog.io/@lunaticholic/S3-ACM-CloudFront-Route53%EC%9C%BC%EB%A1%9C-https-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-with-%EA%B0%80%EB%B9%84%EC%95%84-14 S3, ACM, CloudFront, Route53으로 https 배포하기 (with 가비아) [1/4] 아니 어쩌다 보니 개발초짜가 이런글을 쓰고 있는거 실화?하다 보니 이런 저런 실수할 자라나는 새싹개발자들을 위해 이런 글 안남기면 혼날거 같아 쓰는 평범하지만 따라하면 오오!!! 할만한 velog.io 2단계 https://velog.io/@lunaticholic/S3-ACM-CloudFront-Route53%EC%9C%B.. 2022. 1. 7. Figma 개발 플러그인 1) Figma to React Component Installed을 해서 플러그인 설치!! https://www.figma.com/community/plugin/959795830541939498/Figma-to-React-Component Figma - Figma to React Component | Simple generator for React Component. Select any node and run the plugin, it will generate R Figma Community plugin — Simple generator for React Component. Select any node and run the plugin, it will generate React code. To get .. 2022. 1. 3. Toggle Switch 기능 만들기 [2탄] - 패키지 설치 설치 할 패키지 없습니다 😊 - 기존 코드 https://www.geeksforgeeks.org/how-to-create-a-toggle-switch-in-react-as-a-reusable-component/ How to Create a Toggle Switch in React as a Reusable Component ? - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company.. 2022. 1. 3. 포스트맨(Postman) 사용법 Postman이란?? : API 개발을 보다 빠르고, 쉽게 구현 할 수 있도록 도와주며 개발된 API를 테스트하여 문서화 또는 공유 할 수 있도록 도와주는 플랫폼입니다. Postman 설치기 공식 홈페이지에서 다운 받아 설치 할 수 있으며, 이메일 계정으로 가입 또는 구글 연동을 기본적으로 제공합니다. (Sync 기능을 위해 연동을 하는 것을 추천합니다!) Postman 사용법 Query String이 포함된 GET 방식의 호출 URI에 query string을 포함한 GET 방식으로 호출하는 경우에는 위 그림의 URI에 입력한 키와 값이 URI 입력칸 밑에 [key]와 [value]로 추가되고, API 호출한 결과는 하단의 [body] 영역에 출력 됩니다. JSON이 사용된 POST 방식의 호출 JSO.. 2021. 12. 31. Toggle Switch 기능 만들기 [1탄] - 패키지 설치 yarn add @mui/material @emotion/react @emotion/styled - 기본 설정 : 공식 문서에는 여러 개의 예제 코드가 나와 있어서 기본적인 toggle 예제만 사용해서 구현했다. // src/pages/pushNoticationPop.js // 푸시 알림 팝업 페이지 import React from "react"; import Modal from "react-modal"; import Switch from "@mui/material/Switch"; // 😀 import { useHistory } from "react-router-dom"; import { useDispatch } from "react-redux"; import { actionCreator.. 2021. 12. 27. 이전 1 ··· 10 11 12 13 14 15 16 ··· 19 다음 728x90
