Fall in IT.

안녕하세요. 오늘은 너튜브를 보다가 우연히 보게 된 클린코드 관련 영상을 보고 많은 공감을 했습니다. 가장 기본적인 이야기인데 현업에서 일을 하다보면 지켜지지 않는 경우가 꽤 많은것 같아서.. 쉽고 간단하게 정리해보았습니다. 깔끔한 코딩을 위한 기본적인 코딩 기법에 대해서 알아보도록 하겠습니다. 깔끔한 코드가 중요한 이유 코드를 작성하는 시간만큼 읽는 시간도 많다 코드를 잘 작성해뒀을 경우 이해가 쉽고 유지보수하기도 쉽다 동료들과 협업할때 커뮤니케이션 시간이 짧아진다 깔끔한 코드란? 잘 동작하고 부연설명이 필요없는 코드 기본적인 코딩 기법 1. 검색이 가능한 이름을 써라 2. 함수명은 반드시 동사로 쓰고, 액션중심의 이름을 짓는것이 좋다 3. 함수는 하나의 일만 동작하도록 하라 4. 인수(argument..

안녕하세요. 오늘은 AWS의 S3를 활용하여 간단하게 정적 웹사이트 호스팅하는방법에 대해서 알아보도록 하겠습니다. AWS의 S3를 활용하여 간단하게 정적 웹사이트 호스팅하는방법 (아래 설명은 AWS의 계정이 존재한다고 가정하고 설명합니다. 계정이 없으신 분들은 생성 후에 따라해주세요 :) ) 간단한 웹사이트 준비 AWS의 S3 버킷 만들기 S3 환경 설정하기 속성탭에서 정적 웹사이트 호스팅 활성화 권한탭 -> 퍼블릭 엑세스 차단에서 모든 퍼블릭 엑세스 차단 비활성화 권한탭 -> 버킷 정책 추가 권한탭 -> CORS 구성 완료 참조 https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors https://docs...

안녕하세요. 오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다. 아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : ) 왜 절대경로인가? 상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다. import Common from "../../../../utils/common"; 절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다. import Common from "src/utils/common"; 설정 방법 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다. NODE_PATH=src/ VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하..

안녕하세요. 오늘은 lodash의 debounce 메소드에 대해서 알아보도록 하겠습니다. debounce란? 특정 이벤트가 발생할때 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기위해 사용되는 함수이다. input box에서 검색어를 입력할때마다 서버에서 연관된 검색어 정보를 가져와 보여주는 기능을 구현할때 주로 사용한다. 마지막 이벤트가 호출된 이후에 일정시간이 지난 후에 함수를 지연호출 시키는 역할을 한다. Sample Code 샘플 코드는 여기에서 다운로드 받으실 수 있습니다. :) import React from "react"; import "./App.css"; import { debounce } from "lodash"; const somthingFunc = () => { consol..

CRA(create-react-app)을 사용한 프로젝트에서 Moment.js 모듈을 사용할때 Locale이 적용되지 않는 문제가 있습니다. 그 이유는, create-react-app에는 moment locale 설정이 추가되어 있지 않다고 합니다. 자세한 내용은 링크를 참조해주세요 : ) Moment.js의 locale 을 적용하기 위해서는 직접 import 해주면 됩니다. import moment from "moment"; import "moment/locale/ko"; moment.locale("ko"); 참조 https://stackoverflow.com/questions/49788259/moment-js-change-locale-not-working