티스토리

A better version of me

검색하기

블로그 홈

A better version of me

e2e2e2.tistory.com/m

프론트엔드 개발자의 끄적끄적 아카이빙

구독자: 0

방명록 방문하기

주요 글 목록

[React] VAC Pattern을 적용해 관심사 분리하기 VAC(View Asset Component) Pattern View Logic과 렌더링을 분리하여 개발하는 설계 방식 const SpinBox = () => { const [value, setValue] = useState(0); return ( setValue(value - 1)}>- {value} setValue(value + 1)}>+ ); }; VAC props를 통해서만 제어 되고 스스로 상태를 관리 하지 않는 Stateless component // VAC const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( - {value} + ); // View Component const SpinBox = () => { const [value, s.. 공감수 0 댓글수 0 2023. 12. 5.
npm에서 yarn berry로 Migration to yarn berry 최근에 팀원이 yarn berry를 도입하자고 해서 마이그레이션을 시작했습니다. 빌드 시간을 단축할 수 있고 다른 회사들도 사용한다하여 좋나보다 하고 지나갔습니다. 그러한 무지 상태에서 작업을 하니 도중에 문제가 발생했습니다. 프로젝트 코드에서 의존성 명시 없이 라이브러리를 사용하고 있었는데 yarn berry로 마이그레이션을 하고 빌드를 하니 의존하지 않는 패키지에 접근하고 있다는 오류가 뜬 것 입니다. 아래에서 정리하겠지만 기존 npm 프로젝트에서는 유령 의존성에 의해 특정 패키지가 접근이 가능합니다. yarn berry로 넘어오니 접근이 안되는 게 불편하게 느껴졌습니다. 또한 마이그레이션 작업을 할 때 명시 하지 않은 패키지를 자동으로 추가해주는 방법이 없.. 공감수 1 댓글수 0 2022. 11. 9.
[정규식/RegExp] 실수 입력 시 정수부, 소수부 자리 제한(소수점 이하 자리 제한)/ input element에서 사용하기/ 음수를 포함 하는 경우 실수 정규식 /^([1-9]{1}\d{0,1}|0{1})(\.{1}\d{0,2})?$/g 정수는 2자리, 소수점 이하 2자리 까지 가능 정수부가 0으로 시작하면 1보다 커야한다 -> 023 불가능 0.34 가능 소수부 없어도 가능. input 엘리먼트에서 입력이 발생할 때 마다 반영하기 위해 작성한 정규식이므로 0. or 0.0 or 0.40 이와 같은 케이스는 통과시킨다 필요에 따라 수정할 수 있게 하나 하나 분석해보자 식 해석 [1-9] 1에서 9까지에 해당하는 숫자가 [1-9]{1} 1번 대응되고 [1-9]{1}\d 숫자(0-9)가 [1-9]{1}\d{0,1} 0~1번 대응된다 [1-9]{1}\d{0,1}| 또는 [1-9]{1}\d{0,1}|0 0이 [1-9]{1}\d{0,1}|0{1} 1번 대응된.. 공감수 1 댓글수 0 2022. 3. 3.
[Vue] vue-fragment 사용 시 발생하는 DOM Exception 해결 vue component는 하나의 root element를 가져야 한다. 따라서 다중 element가 있는 경우 하나로 감싸주기 위해서 태그를 사용하거나 vue-fragment 패키지를 사용할 수 있다. 태그로 감싸서 신나게 작업을 하다보면 다음과 같은 오류를 만날 수 있다. [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.” DOMException: Failed to execute 'insertBefore' on 'Node': The node be.. 공감수 1 댓글수 0 2022. 2. 28.
[mybatis/mysql] mysql procedure 사용 시 OUT parameter 오류 해결 방법 mybatis에서 mysql procedure를 사용하기 위해 다음과 같이 mapper 파일에 작성했다. {call myProcedure( #{inputParam1, mode=IN, jdbcType=INTEGER} , #{inputParam2, mode=IN, jdbcType=VARCHAR} , #{outputParam1, mode=OUT, jdbcType=VARCHAR} )} ERROR 1. CallableStatement.registerOutParameter(18, 12) java.sql.SQLException: Parameter number 18 is not an OUT parameter 쿼리를 호출하니 input 파라미터는 잘 들어가는데 out 파라미터를 제대로 인식하지 못하는 오류가 발생했다. .. 공감수 2 댓글수 2 2021. 11. 2.
[VScode] eslint 와 prettier 들여쓰기 충돌 오류 eslint가 들여쓰기 fix 하라고해서 고치고 저장하면 들여쓰기가 다시 달라지는 오류.. 아 어쩌란말이냐 트위스트 추면서~ settings.json 에서 포맷터를 변경하면 됩니다. "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, 에디터의 포맷터와 eslint가 서로 판단하는게 달라서 생기는 문제같은데 뭐 정확하게는 안찾아봤습니다. 바쁘다 바쁘다 현대사회 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 이렇게 변경해주면 해결됩니다 공감수 1 댓글수 1 2021. 10. 18.
[React/함수형 컴포넌트] props가 undefined인 경우 default value로 인한 useEffect 무한 루프 (state update와 rendering) Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 일단 제목과 같은 문제가 발생하게 된 경위부터 이야기해보겠습니다. Parent component에서 비동기적으로 서버에서 데이터를 조회하고 child component에 props로 전달합니다. child component 최초 렌더링 시에 에러를 방지하기 위해 props에 default value를 할당합니다. 그리고 props가.. 공감수 2 댓글수 0 2021. 9. 16.
빌드(build), 메이븐과 라이프 사이클 컴파일이란? 소스코드를 컴퓨터가 이해하는 기계어(바이너리코드)로 변환하는 과정 자바의 경우는 jvm에서 실행할 수 있는 바이트코드의 클래스 파일이 생성됨 빌드란? 소스코드를 실행할 수 있는 소프트웨어 형태로 변환하는 과정 → 소스코드(java)나 프로젝트 리소스(.xml, .jpg, ...)를 jvm이나 was(톰캣)이 인식할 수 있는 구조로 패키징 하는 과정 소프트웨어가 응집력 있는 하나의 단위로써 작동하게 하는 과정 (테스트, 검사, 배포 기능등을 포함하는 단위로 생각하기도 함) 빌드 툴 프로젝트 생성, 테스트 빌드, 배포 등 전체적인 라이프 사이클을 관리하기 위한 전용 프로그램 엔터프라이즈 개발시 일어나는 빈번한 라이브러리 추가 및 버전 동기화의 어려움을 해소 코드 컴파일, 컴포넌트 패키징, 개발 .. 공감수 0 댓글수 0 2021. 7. 8.
[mysql] 암호화 & 복호화, 인코딩&디코딩 고객의 개인정보처럼 중요한 정보의 보안을 위해서 DB에 저장되는 값을 암호화해야 하는 경우가 있다. 암호화한 값을 쿼리의 입력 값으로 전달해도 되지만 mysql에서 제공하는 함수를 이용해서 암호화 작업을 할 수도 있다. 암호화 & 인코딩 #암호화 AES_ENCRYPT({암호화 할 값},{암호화 키}) #인코딩 TO_BASE64(AES_ENCRYPT({암호화 할 값},{암호화 키})) #BASE64로 인코딩 HEX(AES_ENCRYPT({암호화 할 값},{암호화 키})) #hexadecimal string으로 인코딩 #EXAMPLE UPDATE MEMBER SET MEM_NAME_ENC = TO_BASE64(AES_ENCRYPT(MEM_NAME,'testkey123')); 복호화 & 디코딩 #디코딩 FRO.. 공감수 1 댓글수 0 2021. 7. 1.
[Spring] java.lang.IllegalStateException: Ambiguous mapping. Cannot map '***' method / requestMapping이 충돌하는 경우 Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'webMvcRequestHandlerProvider' defined in URL [jar:file:/C:/Users/user/.gradle/caches/modules-2/files-2.1/io.springfox/springfox-spring-web/2.9.2/ed2ed714a6cba8804d00f80f0534901e4c7a3211/springfox-spring-web-2.9.2.jar!/springfox/documentation/spring/web/plugins/WebMvcRequestHandlerProvider... 공감수 0 댓글수 0 2021. 6. 29.
[React] SPA, Routing, React-router, History, Hooks SPA(Single Page Application) SPA는 단어 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. SPA 이전의 애플리케이션은 페이지 전환이 발생할 때마다 서버에 해당 페이지를 요청하는 SSR(Server-side Rendering)방식을 사용했습니다. 이러한 방식은 페이지가 다시 렌더링 될 때까지 사용자가 빈 화면을 보며 대기해야 하므로 사용자 경험에도 좋지 않을 뿐더러 변하지 않는 Header나 Footer도 다시 렌더링하기 때문에 비효율적입니다. SPA는 페이지 전환이 일어날 때마다 서버에 요청을 보내지 않습니다. 대신, 최초로 애플리케이션을 로드하는 시점에 모든 정적 리소스를 받습니다. 이후 사용자 요청에 따라 필요한 데이터만 서버에 요청하고 동적으로 페이지를 변경합니.. 공감수 0 댓글수 0 2021. 6. 16.
[Spring] UnrecognizedPropertyException / 컨트롤러에서 JSON 요청 받을 때 매핑되는 프로퍼티가 없는 경우 JSON 요청에 필요없는 데이터가 같이 들어오는 경우 JSON을 JAVA 오브젝트로 매핑할 때 UnrecognizedPropertyException이 발생한다. { "id": "1234", "name": "fien", "phone": "010-1234-5678" } public class ReqeustDto { private String Id; private String name; } @PostMapping(value = "/{id}") public ResponseEntity createUser(@PathVariable String id, @RequestBody RequestDto reqDto){ // phone이 매핑되지 않아 UnrecognizedPropertyException 발생 } 물론 요청 시.. 공감수 0 댓글수 0 2021. 6. 14.
티스토리 코드블럭에 Jetbrains Mono(인텔리제이) 폰트 적용하기 티스토리에서 제공하는 코드블럭 플러그인을 쓰다가 너무 가독성이 별로여서 highlight.js로 변경했다. 그런데 2퍼센트 부족한 느낌이 들어서 폰트도 건드려봤다. 원래 구글 웹 폰트를 봤는데 어떤게 보기좋은지 모르겠어서 직접 적용해보다가 이럴거면 그냥 인텔리제이 폰트를 쓰는게 쉽겠다 생각이 들었다. jetbrains IDE은 기본적으로 자체 폰트인 jetbrains mono를 사용하고 있다. 아래 링크에 들어가서 다운로드 받으면 된다. www.jetbrains.com/ko-kr/lp/mono/ JetBrains Mono: A free and open source typeface for developers Try JetBrains Mono in your IDE. Its simple forms and at.. 공감수 1 댓글수 0 2021. 4. 29.
[mysql] windows 'mysql'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. /mysql 환경 변수 설정하기 [mysql] windows 'mysql'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. / mysql 환경 변수 설정하기 mysql server 설치 후 cmd 창에서 mysql에 접근하려고 했을 때 위와 같은 오류가 발생한다면 환경변수가 제대로 설정되지 않은 것이다. mysql이 위치한 디렉토리를 PATH에 추가 해주면 간단하게 해결할 수 있다, installer를 통해 설치한 경우는 위 처럼 설치 경로를 확인할 수 있다. 디렉토리를 다르게 지정하지 않았다면 보통 C:\Program Files\MySQL\MySQL Server 8.0 위치에 설치된다. 시스템속성 - 고급 - PATH - 편집에 들어가서 C:\Program Files\MySQL\MySQL Serv.. 공감수 7 댓글수 7 2021. 4. 8.
[React/Ant design] Ant design form validation - 회원 가입, 로그인 폼 검증하기 (Form instance/ validator) Ant design validator와 form instance로 form validation하기 : 회원 가입, 로그인 폼 만들고 값 검증하기. Ant Design은 버전 4를 사용해야 합니다. Ant design은 Form 컴포넌트의 Item에 대하여 validation 기능을 제공하고 있습니다. Antd가 제공하는 Rule 필드를 통해 기본적으로 type, required, min length, max length, 정규식 검증이 가능합니다. 필요하다면 custom validation도 가능합니다. 각 필드에 대한 유효성 검증을 위해 pattern을 사용했습니다. 그런데 검증 결과에 대한 부정을 할 수 가 없어서 공백 검증이 안됐습니다. 정규식.test(값) 이렇게 해서 false 면 메세지를 보여.. 공감수 5 댓글수 0 2021. 3. 19.
[springboot/jpa] QueryDSL(spring-data-jpa) QueryDSL 목차 - 특징 - QueryDSL 설정 - QueryDSL 사용 - Spring Data JPA + QueryDSL - QueryDslPredicateExecutor - QueryDslReposiotrySupport - 동적쿼리 QueryDSL 특징 Querydsl의 핵심 원칙은 타입 안정성(Type safety)이다. 도메인 타입의 프로퍼티를 반영해서 생성한 쿼리 타입을 이용해서 쿼리를 작성하게 된다. 또한, 완전히 타입에 안전한 방법으로 함수/메서드 호출이 이루어진다. 또 다른 중요한 원칙은 일관성(consistency)이다. 기반 기술에 상관없이 쿼리 경로와 오퍼레이션은 모두 동일하며, Query 인터페이스는 공통의 상위 인터페이스를 갖는다. 모든 쿼리 인스턴스는 여러 차례 재사용 .. 공감수 0 댓글수 0 2021. 3. 3.
[javascript]모던 자바스크립트 - 객체(가비지 컬렉션, this, new, 생성자, 심볼, 형 변환) 객체: 기본 ko.javascript.info 위 사이트를 정리한 내용입니다. 목차 입니다 객체 객체 프로퍼티 단축 property value shorthand 프로퍼티 존재 여부 확인 : in 연산자 for ... in 반복문 객체의 복사 참조에 의한 비교 객체 복사와 병합 : Object.assign 중첩 객체 복사 가비지 컬렉션 가비지 컬렉션 기준 mark-and-sweep 알고리즘 메서드와 this 메서드 생성 & this this의 결정 화살표 함수의 this new 연산자와 생성자 함수 생성자 함수 생성자 내 메서드 옵셔널 체이닝 ?. 심볼형 (ES6) 심볼 심볼의 등장배경 전역 심볼 객체의 형 변환 ToPrimitive : 형 변환 hint Symbol.toPrimitive toString과.. 공감수 0 댓글수 0 2021. 1. 27.
[javascript]모던 자바스크립트 - 기본 (변수와 상수, 자료형, 함수, 함수표현식, 화살표 함수) 모던 JavaScript 튜토리얼 ko.javascript.info 위 사이트를 읽고 정리한 내용입니다. 자바스크립트 기본 자바스크립트 실행 자바스크립트는 자바스크립트 엔진을 통해 실행한다. 엔진이 스크립트를 읽음 (파싱) 스크립트를 기계어로 변환 (컴파일) 기계어 코드를 실행 세미콜론 자바스크립트는 문장의 종결을 나타내기 위해 ; 세미콜론을 붙입니다. 세미콜론이 없어도 자바스크립트 엔진이 자동으로 붙여주지만 모든 상황에서 매끄럽게 처리해주지는 않습니다. 다음 코드는 예외적 상황을 보여줍니다. // 작성 코드 return 1; // 실제 해석 return; 1; return, break, continue 는 줄바꿈 하지 않고 세미콜론을 써야 합니다. 다른 예외 상황도 존재합니다. // 작성 코드 aler.. 공감수 0 댓글수 0 2021. 1. 25.
[javascript] 모던 자바스크립트 입문 9.객체(프로토타입) 모던 자바스크립트 입문 9장 객체 부분을 읽고 정리한 내용입니다. 1. 객체의 생성 // 1. 객체 리터럴로 생성 const fruit = { name = 'apple', season = 'fall'}; // 2. 생성자로 생성 function Fruit(name, season) { this.name = name; this.season = season; } const fruit = new Fruit('apple', 'fall'); // 3. Object.create로 생성 const fruit = Object.create(Object.prototype, { name: { value: 'apple', writable: true, enumerable: true, configuragle: true }, sea.. 공감수 0 댓글수 0 2021. 1. 21.
[mysql] 행 번호 rownum 출력하기(역순, join table) 게시판의 글들을 최신순으로 출력하는데 글번호나 순서를 매기고 싶을 때 즉, 쿼리를 실행하고 정렬한 결과에 순서를 주는 경우 임의의 변수(ROWNUM)를 선언하여 이를 수행할 수 있다. 1. 행번호 출력하기 SELECT @ROWNUM:=@ROWNUM+1 AS ROWNUM , * FROM ( SELECT @ROWNUM := 0) R , POST P WHERE P.CONTENT LIKE CONCAT('%','내용무','%') ORDER BY REG_DATE DESC; mysql 에서 @는 변수를 의미한다. 쿼리에서 행 번호를 출력하기 위해 FROM 절에서 ROWNUM이라는 변수를 선언하고 SELECT 절에서 변수를 1씩 증가시켜서 출력한다. 2. 행번호 역순으로 출력하기 SELECT * FROM ( SELEC.. 공감수 1 댓글수 0 2020. 12. 24.
[springboot] RestTemplate (RestTemplate 기초, RestTemplate으로 카카오 API 호출하기) 목차 RestTemplate RestTemplate 동작 RestTemplate 설정 Connection Pool Message Converter RestTemplate Method GET POST PUT DELETE Exchange 컬렉션 객체를 결과로 받기 Contenty Type과 Message Converter 카카오 번역 API 호출하기 TranslationService 구현 Controller 구현 카카오 번역 API를 사용하기 위해 Spring RestTemplate을 공부한 내용입니다. 개발 환경 os : window10 ide : intellij IDEA Ultimate 2020.2 java : jdk 11 build tool : maven spring boot 2.3 RestTempla.. 공감수 15 댓글수 0 2020. 11. 26.
[WEB] WEB과 HTTP, URI와 URL 개념 목차 WEB 인터넷과 웹 웹의 구성요소 HTTP HTTP 특징 HTTP Method HTTP Status Code HTTP Message Format URI URL 구조 WEB 인터넷 전세계 컴퓨터를 하나로 연결하는 거대한 네트워크를 의미한다. 이러한 인터넷을 활용한 서비스로 WWW, E-Mail, FTP, Telnet 등이 있다. Web (World Wide Web) 인터넷을 활용해 HTML로 만들어진 페이지를 컴퓨터가 주고 받을 수 있도록 고안된 서비스이다. 웹은 텍스트, 이미지, 음성, 영상 등 다양한 미디어를 HyperText 방식으로 연결하여 제공한다. ** Hyper Text 초월적 텍스트. 정보에 대한 순차적 접근이 아닌 비순차적인 접근을 뜻한다. 같은 페이지 내의 위치 이동이나 다른 페이지.. 공감수 0 댓글수 0 2020. 11. 24.
[springboot] REST API 만들기 (REST의 개념/ controller unit test / @AutoConfigureMybatis ) REST Representational State Transfer REST란 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 자원을 나타내는 이름으로 구분하고 해당 자원의 상태(Representation of Resource)를 주고 받는 것을 의미한다. HTTP URI + HTTP Method HTTP URI를 통해 제어할 자원을 명시하고 HTTP Method(GET, POST, PUT, DELETE ~CRUD Operation)를 통해 해당 자원을 제어하는 명령을 내리는 방식의 아키텍처 자원의 상태(실제 데이터)는 request body에 json이나 xml 형식으로 전달하는 것이 일반적이다. 특징 서버와 클라이언트의 역할을 명확하게 분리한다 Server - 자원을 가진.. 공감수 3 댓글수 2 2020. 11. 20.
[springboot] mybatis 사용하기(+mybatis unit test) Springboot에서 Mybatis 사용하기 DB 연결 사용하려는 DB에 대한 의존성을 추가하고 db 관련 프로퍼티를 설정하면 쉽게 연동할 수 있다. dependency 추가 연결하는 것이 목적이기 때문에 가벼운 h2 데이터베이스를 사용했다. com.h2database h2 runtime DataSource 설정 어플리케이션 프로퍼티 파일(application.yml or application.properties)에 DataSource를 설정한다. springboot는 connection pool로써 hikariCP를 디폴트로 사용하지만 TomcatCP, Commons DBCP2도 지원한다. ** datasource는 db connection을 관리하는 객체이고 이를 위해 자체적으로 CP기능을 구현하고.. 공감수 4 댓글수 2 2020. 11. 20.
[springboot] springboot 특징(의존성 관리, Auto Configuration) Created: Nov 4, 2020 5:23 PM springboot 특징 단독 실행(stand-alone) 가능한 스프링 애플리케이션을 생성한다. 내장 서버(web container)를 포함하고 있다. 의존성 관리 빌드 구성을 단순화하는 starter 제공하여 인코딩,플러그인,버전 등 의존성을 관리해준다 Auto Configuration xml이나 java 설정이 필요 없이 의존성과 환경 변수만 설정하면 된다. ↔ 기존 스프링에서 겪었던 설정의 어려움을 해소 → initializer를 통해 빠르고 쉽게 프로젝트 구성 가능하다. spring initializr 를 통해 프로젝트 생성 빌드 툴, 언어, 스프링 부트 버전, 프로젝트 메타데이터 설정 사용할 depedencies 등록 spring boot 의.. 공감수 1 댓글수 0 2020. 11. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.