일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Jeremy Winchester
- 맨투맨
- 생각정리
- 티셔츠
- 책 후기
- 옷
- jeremy
- 개발자패션
- 제레미윈체스터
- 개발 책 리뷰
- brand
- Winchester
- 북 토크
- react
- 프론트엔드
- frontend
- 후드
- 개발자
- 프론트앤드
- 브랜드
- 개발자후드
- JavaScript
- 타입스크립트
- 지속 가능한 개발
- clean code
- HTML
- typescript
- 개발자옷
- 후드티
- 티셔츠디자인
- Today
- Total
목록Jeremy Winchester (16)
Electronic Jeremy Record
주말이 왔다. 오랜만에 여유로운 주말이다. 요즘 확진자도 많아서 참 나가기도 힘든 상황에 집에서 아이와 즐거운 시간을 보낼 콘텐츠가 필요했던 와중 아내가 준비한 것이 있었다. 바로 피자 만들기다. 우리집엔 오븐도 없고 에어프라이어도 없고 당연히 화덕도 없는데 무슨 피자? 라는 생각이 들었지만 그 아이디어는 기발했다. 바로 만두피를 이용해서 피자 만들기였다. 서둘러 재료를 준비했다. 집에 있는 것들에 필 수 재료 몇 가지 장을 봐왔다. 준비물 1. 도우로 쓸 만두피 2. 피자에 빠질 수 없는 피자치즈 3. 남으면 스파게티라도 해 먹을 수 있는 토마토소스 4. 각종 취향에 맞는 토핑들 - 스위트콘 - 양파 - 단호박 - 슬라이스 햄 - 크래미 - 브로콜리 - 파프리카 제조법 4살 아이도 만들 수 있는 매우 ..
웹 개발, 특히 프론트앤드 개발을 하다 보면 Form Control을 할 일이 자주 있다. 로그인, 회원 가입, 게시물 작성 등 꽤 자주 활용하게 된다. 보통 Form에 입력된 값들은 DB에 넣거나 조회하는 등 할 때 사용되는데 Submit 하기 전에 입력을 제대로 했는지, 빠진 값들은 없는지 하는 Validation 과정을 거친다. 이런 일련의 과정들을 매우 쉽게 구현할 수 있는 것이 있어 소개하고자 한다. "React Hook Form" 이다. React Hook Form 의 장점은 1. 코드 량이 적다. 2. Validation이 강력하다. 3. Error 잡기 좋다. 4. Input Control 유용하다 5. 이벤트를 신경쓰지 않아도 된다. 6. Input 처리가 간편하다 그럼 React Hoo..
TypeScript를 설치를 하고 사용할 준비를 하는 시작 과정이다. 순서는 간단하다. 1. 프로젝트 폴더에 tsconfig.json 파일 생성하기 2. 작성하기 3. TypeScript로 개발해보기 이 순서 중 1번은 뭐 설명이 별로 필요 없을 것 같고, 2번에 대한 내용을 포스팅해보려고 한다. TypeScript는 *.ts 파일을 컴파일하면 JavaScript 파일로 떨어진다(*. js) tsconfig.json 이 파일의 설정은 컴파일 시 Javascript에 어떤 식으로 떨어지는지 사전에 설정하는 파일이다. 잘 모르겠고 컴파일 별로 원하는 형태가 없다하면 그냥 tsconfig.json 파일에 이대로 배껴 쓰면 된다. { "compilerOptions": { "target": "es5", "mod..
아코디언 메뉴 기능은 우리가 웹상에서 꽤나 자주 볼 수 있는 방법이다. 대개 Q&A나 FAQ 등 에서 많이 쓰는 방법인데 질문과 그 질문에 대한 대답 소제목과 그 소제목의 상세 내용 등을 보여줄 때 공간을 최소화하며, 사용자가 본인이 필요한 정보만 선택해서 볼 수 있게 하는 부분이다. 여태까진 css active modifier 를 이용하거나 javascript 에서 구현을 해왔지만 단순히 HTML만으로 구현할 수 있는 것이 있다. 바로 details 이 Details로 어떻게 구현하는지 보겠다. 열려라 참깨 열렸다 들깨 details의 태그 안에 2가지 요소를 넣을 수 있다. summary 는 Q&A로 보면 Question 에 해당 되는 내용 그리고 아래 Answer로 들어갈 Contents 여기서는 ..