본문 바로가기

전체 글

 (77)
절대경로로 import 하기 1. js를 이용해서 Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 원문이다 jsconfig나 tsconfig 파일에 아래와 같은걸 추가하면 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } baseUrl이 './src' 파일로 설정되고 src/components/Button.js에 잇는 Button을 import 한다고 했을 시 import Button from 'components/Button'; 처럼 좀 더 간단하게 import 할 수 있다. 1. Ts를 이용해서 TS..
리액트의 state와 보안 신용카드 예제에서 내 리뷰어님이 달아주신것은 아니지만 블링이라는 페어에게 로이정님이 달아주신 것을 읽어봤다. 그래서 formData를 찾아봤다. https://developer.mozilla.org/ko/docs/Web/API/FormData/FormData FormData() - Web API | MDN FormData() 생성자(Constructor)는 새로운 FormData객체를 만듭니다. developer.mozilla.org 아마 formData로 가지고 있다가 처리하면 될거라고 하셨는데,,, 결국에 그럼 비제어 component로 가는 방향이 될거라고 한다. 제어로는 어떻게 할까 생각해 봤는데, 블링도 내 생각과 똑같이 적어줬다. 간단하게 해시와 솔트를 해서 암호화 한 다음 state에 저장하..
간단한 예제.. 신용카드 예제 하면서 만료일 등록 로직에 month등록같은 경우에 1을 등록하면 01이 되고 11을 등록하면 11이 자동으로 되도록 하는 코드가 필요했다. 어떤식으로 해야할지 고민하다가 처음에는 정규식으로 했다가 실패했고 리뷰어님의 로직을 참고해서 그냥 결국에 js를 써서 해결했다.
pull을 통해서 페어가 작업한 내용 가져오기 1. 원본을 fork뜬 후 github에서 진행 2. 해당 레포를 clone해온다. git clone {repo url} {dir} 3. 그리고 페어랑 작업한 레포를 remote등록을 해주고 git remote add pair {페어의 브랜치 주소} 4. 거기서 작업했떤 branch를 가져온다 git pull pair {branch이름} //sourceTree가 가끔 안올라갔을때 origin이 없음// git remote add origin {내 레포 주소}
form 태그 활용 리액트에서 form 태그를 쓰면 내부에 존재하는 input을 추적가능하다 코드를 보면 onchange를 form에 달아줬는데도 안에 있는 input이 어떤 dom인지 추적해서 알수 있다. form 안에서의 focus이동등에 쓰면 좋을 듯 하다.
더 괜찮은 개발자가 되기 위한 리액트 스타일 가이드 들어가면서 프리코스와 Lv1의 Vanilla JS를 거쳐서 Lv2 에서는 리액트로 프로젝트를 하고 있다. 우테코에서는 '야생학습'을 강조하는데.. (궁금하면 함께자라기 라는 책을 찾아보시라) 나는 학교생활을 오래해서 그런지는 몰라도 좋은 레퍼런스가 없으면 공부가 잘 안되는 스타일인데다가, 목표가 없으면 멍때리고 있는 시간이 많아서 뭔가 미션이후 코드리뷰 수정하기 싫은날이면 책을 꼭 읽곤 한다. '더 괜찮은 개발자가 되기 위한 리액트 스타일 가이드' 는 잠실캠퍼스에 구비된 책인데 도서관에서 빌려보기 전에 여기서 오늘안에 다 읽고 정리해보자는 마음가짐으로 도전해보려고 한다. 이번 미션이 끝나기 전에 다 읽고 습득할 수 있기를 바라며... 시작한다!!
(잡담) 맥북을 쓰면서 신기했던 점 나는 원래 윈도우 유저이다.(20년째 윈도우 쓰는중) 페어가 맥북을 가지고 있어서 맥북을 써서 플젝을 하게됐는데 그때 생긴 에피소드. 프로젝트를 하면서 input창 관리를 하다가 숫자를 누르고 space 두 번을 빠르게 치면 갑자기 소숫점이 생기는 경우를 발견했다. 99 + space + space => 99. 이 됐다. 뭘까... 내가 정규표현식을 잘못짜서 에러핸들링이 잘못 된건가? 싶었다. 패닉에 빠진 우리는 해결책을 찾지 못하고 헤메었는데 결론은.. 애플 키보드 기본세팅으로 하면 소숫점이 생긴단다. 쓸모 없어보이는데.. 애플 이거 왜 만들었니?
useState와 useReducer의 인자에 대해서(about useState, useReducer arguments) useState와 reducer의 효율성에 대해서 공부하다가, 리렌더링 시마다 값을 호출하는 문제에 대한 글을 봤다. 만약 state값을 초기화할때 number, string같은 값이 아니라 함수를 이용해서 생성하고 싶을 땐 어떻게 할까? 1. useState import { useState } from 'react'; const initialMaker = () => { console.log('initialMaker Called'); const init = 0; return init; } const TestComponent = () => { console.log('testComponent called'); const [state, setState] = useState(initialMaker); const..

티스토리툴바