개발 일지

일반적으로 React에서 ref는 HTML 엘리먼트를 할당하는데 사용된다. DOM에 직접 접근하기 위해 ref를 사용하기도 한다. (Javascript에서 고유 id 부여하는 것처럼) 그런데, 함수형 컴포넌트에서 타입스크립트 사용시 무심코 useRef 훅을 사용하게 되면 typeError를 만나게 된다. 가장 좋은 방법은 ref를 null로 초기화하는 것이다. 또한 유형 인수를 사용하여 ref 속성으로 사용되는 요소에 대해 각각 HTMLInputElement 유형으로 ref를 캐스팅해야 합니다. import * as React from 'react'; const App = () => { const ref = React.useRef(null); React.useEffect(() => { if (ref.cu..

https://rachelslab.tistory.com/83 17장. 냄새와 휴리스틱 (1) # 휴리스틱(heuristics) 사전적 의미 : "경험적인, 스스로 발견하게 하는" 복잡한 문제는 복잡하게 생각하지말고, 단순하게 생각하는 것부터 시작하자. Bottom-Up 방식처럼 단순한 논리적 사고과정을 rachelslab.tistory.com 26. 정확하라 코드에서 무언가를 결정할 때는 항상 "확신"이 있어야한다. 이번에 한 번 성공했다고, 이제 됐어! 라고 생각하는 것은 금지해야할 행동이다 ❌ (매일 이런 충동을 느낀다...) 결정을 내리는 타당한 근거아 있어야 하며, 예외 처리를 할 방안도 가지고 있어야 한다. 코드에서의 모호함 또는 부정확함은 언제나 제거 대상이라는 사실을 명심하자 28. 조건을 ..

# 휴리스틱(heuristics) 사전적 의미 : "경험적인, 스스로 발견하게 하는" 복잡한 문제는 복잡하게 생각하지말고, 단순하게 생각하는 것부터 시작하자. Bottom-Up 방식처럼 단순한 논리적 사고과정을 거쳐서 의사결정을 하고, 경험치를 바탕으로 이를 점차 빌드업 시키는 방법이다. "제한된 합리성’이란 다양한 의사결정 상황에서 인간의 인지적인 한계로 인해 발생하는 의사결정 문제를 인지적 한계 안에서 다룰 수 있는 범위로 축소시키고, 간단해진 과업의 수행에 한해 규범적 규칙을 이용한다는 것을 의미한다." - 위키백과 - 본문에서 강조하고자 했던 내용들을 총정리하는 목적으로 작성해보고자 한다. ## 주석(Comment) 1. 부적절한정보 주석의 역할은 코드와 설계에 있어 기술적인 설명을 부연하는 수단..

[오류화면] 1. .zshrc 로 이동 vim .zshrc 2. 아래 명령어 입력 후 저장 export LC_ALL=ko_KR.UTF-8 3. "locale" 명령어를 입력하여 아래와 같이 잘 추가되었는지 확인한다. LANG="" LC_COLLATE="ko_KR.UTF-8" LC_CTYPE="ko_KR.UTF-8" LC_MESSAGES="ko_KR.UTF-8" LC_MONETARY="ko_KR.UTF-8" LC_NUMERIC="ko_KR.UTF-8" LC_TIME="ko_KR.UTF-8" LC_ALL="ko_KR.UTF-8" 이후 git log 입력 시 정상 노출됨

점진적인 개선(Progressive Improvement) 출발은 나쁘지 않았다. 그러나 소스가 방대해지면서, 확장성이 부족했던 모듈을 어떻게 개선해 나갈지에 대해 정리해보자. 처음에 코드를 작성할 때는 나름의 함수 그리고 변수명을 고려하여, 작성을 한다. 그러나 완성된 코드를 보면, 지저분하기 짝이 없었던 경험을 누구나 다 해봤으리라 짐작한다. # 프로그래밍은 과학보다는 “공예”에 가깝다. 처음 부터 완벽한 작품을 만들기란 어려운 것이다. 거듭한 리팩토링 끝에 그나마 깨끗한 코드를 만들 수 있다. 우선 수정 작업에 들어가기 전, 1차 초안을 보며 자신을 되돌아본다. 내가 대충 짜서 방치해둔 코드를 다른 사람이 보게 되면 어떨지 항상 생각하면서 작성하는 습관을 들이자 # 점진적으로 개선하다 개선 이라는 ..

동시성(Concurrency) 콜백지옥은 프론트엔드 개발자라면, 한 번쯤은 겪어봤을 것이다. 중첩의 중첩의 중첩을 만들어내는 콜백은 최대한 지양해야 한다. 콜백이 대체 무엇이길래? 다른 함수의 인자(argument)로 넘겨주는 함수이다. 함수와 함수를 연결해준다고 생각하면 이해하기 쉽다. [동기 vs 비동기] 자바스크립트는 단일(single) 스레드 프로그래밍 언어이다. 동기 = 싱글 스레드 = 순차적 실행 모두 동일한 의미이다. 싱글 스레드는 하나의 코드가 실행되어 끝난 시점에 다음 코드 시작 지점이 연결된 형태이다. 단일 스레드는 선행 작업이 완료될 때까지, 다른 일을 수행하지 못하고 기다린다. -> 블로킹 발생 (콜 스택 멈춤 상태) 한 번에 하나의 콜 스택을 가진다. // 동기적으로 3초 마다 배..

켄트 백이 제시한 4가지 규칙을 모두 시행하면 소프트웨어 설계 품질이 높아진다. (중요도 순) 1. 모든 테스트를 실행한다. 2. 중복을 없앤다. 3. 프로그래머의 의도를 표현한다. 4. 클래스와 메서드 수를 최소로 줄인다. 단계1. 모든 테스트를 실행하라 설계는 의도한 대로 돌아가는 시스템을 내놓아야 한다. 모든 테스트 케이스를 항상 통과하는 시스템을 '테스트가 가능한 시스템'이라고 부른다. 테스트 케이스를 만들고 반복해서 돌리면 저절로 낮은 결합도, 높은 응집력을 추구하는 객체 지향 방법론을 자기도 모르게 실천하고 있게 될 것이다. 단계2. 리팩토링 새롭게 추가하는 코드를 깔끔하게 정리 후, 테스트 케이스를 돌려본다. 테스트 케이스만 있다면, 우리는 결함도를 걱정하지 않아도 된다. 단계3. 중복 없애..

실제 코드를 치기 전부터 테스트 코드를 치라구? 대체 왜? Why 우리는 왜 테스트 코드를 작성해야 할까? 근본적인 이유에 대해 생각해 볼 필요가 있을 것이다. 그 이유는 '검증이 된 코드인가?'에 대한 명확한 답을 제시할 수 있기 때문이다. 테스트 코드가 없으면, 우리는 이 코드가 제대로 돌아가는 지 검증할 수 있는 방법이 없다. 시스템의 주요한 부분을 수정했을 때, 이 수정한 부분이 다른 소스에 영향이 있는지 없는지를 판단할 기준이 없는 것이다. 이는 결함률을 높이는 원인이 된다. 그래서 테스트 주도 개발(TDD) 개념이 오늘날 성립된 것이다. (많은 선배들의 경험 끝에...) TDD란 : Test Driven Development(테스트 주도 개발)의 약자로, 매우 짧은 개발 사이클을 반복하는 소프..

프론트엔드에서 클래스란 모던 자바스크립트, ES6부터 객체 지향 프로그래밍을 위해 고안된 개념으로 프로토타입을 기반으로 한다. 클래스에 대해 간단하게 정리 해보자면, - 클래스틑 class 키워드를 사용하여 정의한다. - 클래스에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드가 있다. - 클래스는 인스턴스를 생성하기 위한 생성자 함수이며, new 연산자와 함께 호출된다. - 인스턴스는 클래스로부터 생성되는 객체이다. - constructor : 인스턴스를 생성하고 초기화하는 메서드이다. (최초로 정의하는 곳이라고 이해하자) - 프로토타입 메서드 : 인스턴스의 프로토타입에 존재하는 메서드. 인스턴스에서 상속받아 사용할 수 있다. - 정적 메서드 : 인스턴스 생성..

프로젝트 환경 - JAVA 11 - IDE : IntelliJ 1. https://start.spring.io/ 에 접속하여 프로젝트 생성 *What is Gradle, Maven? : 프로젝트에 필요한 플러그인, 라이브러리들을 설치하고 빌드하기까지의 과정을 편리하게 해주는 tool 이라고 보면 된다. (참고로 요즘 추세는 Gradle 이라고 한다..우리 회사는 아직까지는 Maven을 사용하고 있다...ㅎㅎ) Dependencies는 웹 프로젝트이므로 Spring Web과, HTML을 웹 브라우저에 띄울수 있도록 해주는 템플릿 엔진, Thymeleaf를 설치해주었다. Generate 버튼을 누르면, 압축파일이 다운로드 받아진다. 압축을 풀고, IDE로 해당 프로젝트를 연다. 2. 프로젝트 구조 보기 ㄴs..