본문 바로가기

All202

[DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다.  Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다.  - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3.
[tailwind CSS] backgroundImage 설정 방법 - (config/style/custom) tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기! 목차0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?1. backgroundImage를 tailwind.config.js 파일에서 설정해보기2. style 속성에 backgroundImage를 설정해보기3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기 0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?public 폴더public.. 2024. 6. 2.
[Javascript] 직렬화(Serialize), 역직렬화(Deserialize) 직렬화(Serialize), 역직렬화(Deserialize)1. Javscript JSON 이란JSON(Javscript Object Notation)은자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.  자바스크립트 객체 리터럴과 유사하지만 객체가 아닌 문자열일 뿐이며, 이를 이용해 다른 도메인과 데이터를 주고 받을 수 있게 된다.  JSON은 XML 등 다른 데이터 포맷에 비해 간결하며, 손쉽게 자바스크립트 객체로 변환할 수 있어,웹 어플리케이션에서 Server-Client간의 데이터 교환에 주로 JSON을 사용한다.  2. JSON 표기법JSON은 자바스크립트 객체와 유사하지만 표기법이 조금 다르다.{ "name" : "Choi", "age" : "secret", "gender".. 2024. 3. 17.
[Fabric.js] The transformation matrix in fabric.js (fabric.js의 변환 행렬) 번역 및 예제 The transformation matrix in fabric.js 이 글은 faric.js을 공부하면서 마주했던 transmation matrix에 대해 정리한 글에 대한 (가벼운) 번역이자 추가 설명을 위한 글입니다. The transformation matrix in fabric.js Recently I’m using the excellent fabric.js library for a side project. I came across the transformation matrix. The purpose of this article… medium.com The purpose of this article is to detail how the transformation matrix works and e.. 2024. 2. 29.
[기록결산] 애쓴 것은 언젠가 정산된다. [기록결산] 애쓴 것은 언젠가 정산된다.생애 첫 연말정산을 끝내고, 1월도 막바지라는 생각에 '기록결산'이란걸 해보려고 한다. 딱 드는 생각은 뭐다? 월말결산을 월마다 해야한다는 뜻이지요 .. 바로 회고를 습관화해보고자 월마다 성찰과 반성과 반영을 동시에 하자! 라는 목표 하나로 24년을 기록해보려고 한다. 물론 더 꼼꼼하고 자세히 적는 것이 물론 독자나 미래의 나에게 더욱 좋을 것이다. 하지만 완벽주의의 탈피를 쓴 필자는 이 일을 1년 뒤로 미룰 것이기 때문에 완벽하지 않아도 기록하고자 한다.24년 1월 3일import get from "lodash/get"; / lodash 알아보기24년 1월 4 ~ 5일중단 배포와 관련 QA를 쳐내다 .... !24년 1월 8일ga gtmgym = google ta.. 2024. 1. 31.
[React] useEffect에서의 의존성(dependency)과 실행 흐름 useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD.. 2024. 1. 29.
[클린코드] 44~48일차 - 동시성2 톺아보기 [클린코드] 44~45일차 - 동시성2 톺아보기 클린코드 44일차 (p. 404 ~ 407 (17장) / 408 ~ 412 (18장) ) 클린코드 45일차 (p. 413 ~ 419 (18장) ) 클린코드 46일차 (p. 420 ~ 428 (18장) ) 클린코드 47일차 (p. 429 ~ 436 (18장) ) 클린코드 48일차 (p. 437 ~ 446 (18장) ) 18장 동시성2 225쪽에서 소개한 동시성을 좀 더 자세히 보완하기 위한 장이다. 클라이언트/서버 예제 예제를 살펴보면 서버와 클라이언트의 단순한 소켓 프로그래밍 코드를 보여주고 있다. 서버는 소켓을 열어놓고 클라이언트가 연결하기를 기다린다. 클라이언트는 소켓에 연결해 요청을 보낸다. 아래는 클라이언트/서버 테스트 코드이다. 해당 테스트는 10.. 2023. 12. 22.
[클린코드] 40~43일차 - 냄새와 휴리스틱 (주석/환경/함수/일반) [클린코드] 40일차 - 냄새와 휴리스틱 클린코드 40일차 (p. 370 ~ 378 (17장) ) 클린코드 41일차 (p. 379 ~ 387 (17장) ) 클린코드 42일차 (p. 388 ~ 395 (17장) ) 클린코드 43일차 (p. 396 ~ 403 (17장) ) 17장 냄새와 휴리스틱 좋지 못한 코드는 냄새가 난다... (ㅋ)(ㅠ) 그리하여 이 장에서는 다양한 코드 냄새와 코드를 짜면서 사용하는 기교, 휴리스틱을 소개한다. 주석 1. 부적절한 정보 다른 시스템에 저장할 정보는 주석으로 적절하지 못하다. 2. 쓸모 없는 주석 오래된 주석, 엉뚱한 주석, 잘못된 주석은 더 이상 쓸모가 없음 주석은 '낡는다.' 쓸모 없어진 주석은 제발 삭제하자. 3. 중복된 주석 코드만으로 충분한데 구구절절 설명하는 .. 2023. 12. 18.
[클린코드] 37일차/38일차/39일차 - SerialDate 리팩터링 [클린코드] 37일차/38일차 - SerialDate 리팩터링 클린코드 37일차 (p. 344 ~ 351 (16장) ) 클린코드 38일차 (p. 352 ~ 362 (16장) ) 클린코드 39일차 (p. 363 ~ 369 (16장) ) 16장 SerialDate 리팩터링 이 장에서는 JCommon 라이브러리에 있는 org.jfree.date 패키지의 SerialDate라는 클래스를 리팩터링을 진행한다. (* 책에서는 https://www.jfree.org/jcommon/index.php 라고 언급되어있지만 https://www.jfree.org/jcommon/ 로 들어가야한다. + https://www.jfree.org/jcommon/api/index.html) SerialDate는 날짜를 표현하는 자바 .. 2023. 12. 13.

티스토리툴바