분류 전체보기
HTML Canvas crop 기능 구현 시 Safari 에서의 문제점
HTML Canvas crop 기능 구현 시 Safari 에서의 문제점
2021.12.30https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html Creating Compatible Web Content Creating Compatible Web Content This chapter covers best practices in creating web content that is compatible with Safari on the desktop and Safari on iOS. Many of these guidelines simply impr..
React 에서 라이브러리 없이 이미지 슬라이드 구현하기
React 에서 라이브러리 없이 이미지 슬라이드 구현하기
2021.12.13다이나믹 한 이미지 배열 사이즈를 슬라이드로 만들기 서버에서 이미지 URL 이 담긴 배열을 data 로 받아 이미지 슬라이드로 만드는 예제 입니다. 슬라이드를 만들기 위해서는 3개의 div 태그가 필요합니다. container main 이 전체를 감싸는 wrapper 이고 이미지 전체의 길이를 담당합니다. wiper inner 태그는 하나의 이미지를 보여주는 구간 입니다. .swiper-container-main { // width: 300vw; 동적으로 구현할 것임 transition: transform 0.5s; } .swiper-inner { width: 100vw; display: flex; } .swiper-inner img { width: 100%; } .non-scroll { overflow..
Spring Bean 주입하기
Spring Bean 주입하기
2021.12.08Controller 와 Service 에서 Autowired 가 없는이유 @RequiredArgsConstructor @Service public class PostsService { private final PostsRepository postsRepository; @Transactional public Long save(PostsSaveRequestDto requestDto) { return postsRepository.save(requestDto.toEntitiy()).getId(); } } Bean 을 주입받는 방식들이 다음과 같습니다. @Autowired setter constructor 이 중 가장 권장되는 방식이 생성자(constructor) 로 주입받는 방식입니다. (@Autowired 는..
Typescript + Next.js 에서 Test 환경 설정하기
Typescript + Next.js 에서 Test 환경 설정하기
2021.12.04조금씩 덩치가 커져가는 프론트 엔드 환경에서 이제 테스트 코드는 선택이 아닌 필수가 되어 가고 있습니다. 그렇다 보니 end to end 테스트 unit 테스트 같은 많은 테스트 가 쏟아지고 있는데요 오늘 설정 할 환경 설정은 unit test 입니다. Jest + Enzyme 조합을 사용 해서 테스트를 해볼 예정입니다. Jest + React Test Lib 을 더 많이 사용 하시는 것 같지만 저는 공부 목적으로 Enzyme 을 선택 하였습니다. Enzyme 과 rtl 의 차이점이 궁금하신 분은 아래 블로그를 참고해주세요 https://medium.com/xebia-engineering/react-testing-library-rtl-vs-enzyme-14b12b4136ed React-Testing-Li..
Mysql 자료형
Mysql 자료형
2021.11.29문자 데이터 char : 최대 길이는 현재 255 바이트 varchar : 최대 65,535 바이트 까지 사용 가능 이메일이나 XML 문서와 같이 긴 문자열을 저장할 때 는 mediumtext & longtext 중 하나를 사용 할 수 있습니다. 캐릭터 셋 SHOW CHARACTER SET; 명령어로 서버에서 지원되는 캐릭터 셋을 볼 수 있습니다. 텍스트 데이터 tinytext: 최대 바이트 크기 255 text: 최대 바이트 크기 65,535 mediumtext: 최대 바이트 크기 16,777,215 longtext: 최대 바이트 크기 4,294,967,295 숫자 데이터 tinyint 부호 있는 정수 저장값의 범위 -128 ~ 125 부호 없는 정수 저장값의 범위 0 ~ 255 smallint -32..
Typescript Generic programing
Typescript Generic programing
2021.11.29제너릭 이란? 제네릭(Generic)은 클래스 내부에서 사용할 데이터 타입을 외부에서 지정하는 기법을 의미한다. const names = ["jongyun", "minsoo"]; typescript의 타입 추론은 names의 타입이 string []이라고 말해준다. string []이라는 타입은 사실 array 타입과 string 타입이 합쳐진 것이다. const names2: Array = []; names2[0].split(""); // Not error 꺽쇠를 사용하여 타입을 명시할 수 있는데 이게 바로 제너릭이다. Array 문자열 배열 타입이라고 명시하여 split 메서드를 사용하여도 에러가 발생하지 않는다. javascript 에도 존재하는 promise를 예로 보자. const promise..
Advanced Typescript 2
Advanced Typescript 2
2021.11.29Index Type 좀 더 유연한 설계를 위해서 interface를 만들 때 key 값을 런타임 환경에서만 알 수 있을 때 대처하기 위해서 index type을 사용 // { email: 'Not a valid email', username: 'Must start with a charcter!' } interface ErrorContainer { [prop: string]: string; } const errorBag: ErrorContainer = { error: "Not a valid email", username: "Must start with a charcter!", }; error tag 를 key로 가지고 error message를 value로 가지는 interface type을 만들고 싶다...
Advanced Typescript - 타입스크립트 좀더 깊게 알아보기
Advanced Typescript - 타입스크립트 좀더 깊게 알아보기
2021.11.28Intersection Type (교차 타입) type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: 'Max', privileges: ['create-server'], startDate: new Date() }; type Combinable = string | number; type Numeric = number | boolean; type Universal = Combinable & Numeric; const u: Universa..
Typescript Interface
Typescript Interface
2021.11.28Interface 가 필요한 이유 type과 interface의 차이점은 인터페이스는 개체의 구조를 설명하는데만 사용할 수 있다는 것 실제로 객체 유형을 정의 할때 인터페이스를 더 자주 보게 됩니다. interface Greetable{ name: string; greet(phrase: string): void; } class Person implements Greetable{ name: string; age: number = 27; constructor(name: string) { this.name = name; } greet(phrase: string) { console.log(phrase + ' ' + this.name); } } let user1: Greetable; user1 = new Pers..
Typescript Class
Typescript Class
2021.11.27stShorthand Initialization typescript에서 class의 생성자를 좀 더 짧게 생성하는 법을 알아보겠습니다. Origin class Department { private id: string; public name: string; constructor(id: string, name: string) { this.id = id; this.name = name; } } Short class Department { constructor(private id: string, public name: string) { } describe() { console.log(`Department (${this.id}): ${this.name}`); } } constructro 파라미터에 private ..
Callback & This with javascript
Callback & This with javascript
2021.11.22콜백 함수란? 콜백 함수callback function는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 것입니다. 콜백 함수는 제어권과 관련이 깊습니다. 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것입니다. function printHello() { console.log("Hello"); } function doIt(fn) { fn() } doIt(printHello); printHello 를 doIt 의 인자로 넘겨줌으로써 제어권이 넘어간 상태입니다. This 콜백 함수도 함수이..
Web IDE 에서 최신 JS 문법이 실행 되는 이유 with babel
Web IDE 에서 최신 JS 문법이 실행 되는 이유 with babel
2021.11.13https://codepen.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 자바스크립트 개발자들이라면 한번쯤은 보셨을 겁니다. 웹브라우저에서 자바스크립트 코드를 동작하게 미리보기가 가능하게끔 해주는 사이트 입니다. 사실 웹브라우저는 React 에서 사용하는 JSX 문법이나 최신 javascript 의 문법을 알아 듣지 못합니다. 그래서 Babel 이라는 것이 코드를 웹브라우저 가 이해 할수 있게 Convert 합니다...