성연커밋 : )

TDD가 무엇일까? Test Driven Development 테스트 주도 개발로, 테스트가 개발을 이끌어 나가는 것이다. 기존의 개발 프로세스와 다르게 테스트케이스를 먼저 작성 후, 실제 코드를 개발하여 리팩토링 하는 절차이다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현 짧은 개발 주기의 반복에 의존하는 개발 프로세스이며 애자일 방뻐론 중 하나인 eXtream Programming(XP)의 ‘Texst-First’ 개념에 기반을 둔 단순한 설계를 중요시한다. 테스트 종류 프론트엔드 테스트 종류는 Unit테스트, Integration 테스트, E2E테스트로 크게 3가지로 나뉜다고 생각한다. Unit 컴포넌트 별 기..

Credentials란? (인증서) 쿠키, 인증헤더, TLS client certificates(증명서) Credentials이 있는 CORS요청은 Client와 Server 둘 다 Credentials를 사용하겠다는 속서을 설정해주어야 통신이 가능하다. CORS 요청시 Client에서 XML HttpRequest.withCredentials 속성을 true로 설정을 해야한다! 요청하기 전에 withCredentials가 true로 설정되어 있지 않으면 다른 XML HTttpRequest가 자신의 도메인에 대한 쿠키 값을 설정할 수 없다. withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일한 출처 정책을 준수하므로 document.cookie 또는 응답 헤더를 통해 요청하는 ..

현재 나는 맥에서 stylelint를 세팅하여, 맥에서 stylelint가 잘 작동이 하였다. 하지만 같이 개발하는 윈도우 사용자의 개발자가 스타일린트에 대해서 에러가 난다며 질문이 왔다. 처음 package.json에서의 스타일린트 스크립트는 다음과 같았다. { ... "stylelint": "stylelint './src/**/*.{ts,tsx}'" ... } 이 코드에서의 문제점은 script를 작성할 때, key값을 이미 있는 명령어로 사용하면 안되는 것이다. 그래서, lint:style로 수정을 한 후, 다시 실행을 해보았지만, 스타일린트 스크립트 명령이 잘 먹지 않았다. 하지만, 직접 코드로 스타일린트 명령어를 치면서 테스트를 해보니까, 잘 작동하는 것을 봤다. 즉! 윈도우는 스크립트 내의 ‘..

1. 아래 페이지 클론 코딩 Thinking in React 이번 챌린지에선 마크업보다 데이터 흐름, 컴포넌트 구분에 집중해주세요! 상세 스펙은 다음과 같아요 Math.pow(Math.round((stage + 0.5) / 2) + 1, 2)개의 사각형이 표시되며, 그 중 하나만 색깔이 다릅니다. 한 stage의 제한 시간은 15초입니다. 색이 다른 사각형(정답)을 클릭한 경우 아래 변경사항이 적용됩니다. 다음 스테이지로 넘어갑니다. Math.pow(stage, 3) * 남은시간 만큼의 score가 누적됩니다 오답을 클릭한 경우 아래 변경사항이 적용됩니다. 현재 stage의 남은 시간이 3초 줄어듭니다. 남은 시간이 0초 이하가 되면 게임이 종료됩니다. 최종 stage와 누적 score를 출력하고, 새로..

SOP란? same-origin policy(동일출처 정책)으로 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 악성 url로 접속하는 상황등을 막기위해 하나의 웹은 하나의 서버의 연결만을 허용하는 정책이다. CORS란? 간단히 말해서, 교차 출처 리소스 공유이다. 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 브라우저에서 보안적인 이유로 cross-origin HTTP 요청을 제한한다. cross-origin 요청을 하려면 서버의 동의가 필요! 동의한 브라우저만 요청을 허락하고, 아니라면 브라우저에서 거절한다. ⇒ ..

LionTown을 개발하면서, LionQueen의 sign-up 부분을 맡았다. 나는, 각각의 input마다 조건에 맞지않으면 에러를 내뱉게 해주었다. 하지만 이렇게 사용할 경우! 불 필요한 코드가 중복되고 있어서, 함수로 리팩토링을 하였다. field의 타입지정해주는데 약간 애를 먹었다. InitialValues는 type InitialValues = { email: string; password: string; passwordConfirm: string; nickname: string; phone: string; code: string; privacyCheck: string[]; }; 위와 같이 지정해주었다. 하지만, 나는 field의 값이 key만 필요하므로 타입을 지정해줄 때 key만 가지고 오겠..

CSR(Client-Side-Rendering) 클라이언트 측에서 렌더링 준비 구동 방식 user가 website 방문 브라우저가 서버로 콘텐츠 요청 서버는 빈 뼈대만 있는 HTML을 응답으로 보낸다. 동적 DOM이 생성되고, 브라우저에 띄운다. CSR장점 초기 로딩 이후, 구동속도가 빠르다. 서버 부하가 적다. 화면 깜빡임이 없다. TTI와 TTV의 간격이 작다. CSR단점 초기 로딩 속도가 느리다. SEO(검색엔진최적화)에 불리하다. SSR(Server-Side-Rednering) 서버 측에서 렌더링 준비 쉽게 말하자면? 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식! 구동 방식 user가 website 방문 브라우저가 서버로 콘텐츠 요청 서버는, 즉시 렌더링 가능한 html파일을..

font-family가 body에서 선언이 되어있었다. * { box-sizing: border-box; color: #2e2e2e; } html, body { padding: 0; margin: 0; font-family: Maplestory, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } } a { color: inherit; text-decoration: none; } button { outline: none; border: none; background: transparent; } @font-face { fo..

formik를 공부해보면서 yup 라이브러리를 설치해서 유효성을 검사하길래 찾아보았다. yup가 무엇일까? yup은 유효성 검사를 보다 쉽게 도와주는 라이브러리이다. 설치해보자! yarn add yup yup은 다양한 기능을 제공한다. 최소 길이, 최대 길이, 필수 여부에 따라 그에 맞도록 에러메시지를 뱉을 수 있다. email: Yup.string() .matches(/^[^@\s]+@[^@\s]+\.[^@\s]+$/, '이메일 형식에 맞지 않습니다.') .required('이메일을 입력해주세요.'), 여기서 email을 할 때 주의할 점이 있다. email의 조건을 줄 때 주의할 점 ! yup은 email 조건을 .email로 표현할 수 있다 하지만, yup의 email을 사용한다면 한국에서와 외국에..

회원가입 부분을 개발하기 위해 여러개의 input을 가지고 있는 form 을 핸들링하기 위해, 여러개의 state가 필요했다. input의 갯수만큼의 state와 error가 필요했다. 즉, 나는 6개의 input이므로 최소 12개의 state를 사용해야했는데, 이것은 너무 귀찮으므로! 알아본 라이브러리는 formik 이다! 비슷한 라이브러리로 react-hook-form이 있다. 이것은 노마드코더에서 조금 다루어보았기 때문에, formik를 이용하여 해보기로 하였다. formik가 무엇일까? form의 핸들링을 쉽게 해주기 위한 라이브러리! 장점이 무엇일까? state를 각각 만들어주지 않아도 된다. 이벤트함수 (onChange)같은 함수를 직접 만들지 않아도 된다. formik랑 비슷한데 왜 Redu..