일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바
- redux
- 그럼에도불구하고
- HTML
- react-router-dom
- 그럼에도 불구하고
- webpack
- frontend
- cleancode
- 자바문제풀이
- CSS
- node.js
- react
- 코딩테스트
- node
- coding
- java
- TypeScript
- Servlet
- github
- JavaScript
- git
- 변수
- 반응형 페이지
- @media
- JS
- max-width
- 프론트엔드
- 코드업
- media query
- Today
- Total
목록cleancode (6)
그럼에도 불구하고

목차 [ 유효성 검사 ] 💡 사용자의 입력 값이 유효한지 검증하는 것 💡 유효성 검사는 할 수 있는 모든 곳에서 다 처리하는 게 좋다. 사용자의 입력 => 클라이언트 (HTML, JavaScript) => 백엔드에서 처리 사용자와 상호작용 => 사용자의 입력을 받거나 그것을 통해서 무언가 하게 된다. 📌 이메일인 경우 - 사용자의 입력이 이메일 포맷에 맞는지 검증한다. - 이메일 포맷이 맞는 경우 **그때서야 서버와 통신을 한다.** ※ 어떻게 할까? - 정규식 - JavaScript 문법 (문자열 검사) - 웹 표준 API (Browser API) [ try - catch ] try-catch를 사용할 때 가장 많이 실수하는 경우 중 하나가 예상하지 못한 에러가 발생할 수 있는 부분을 try {} 안에..

목차 [ Magic Number ] 숫자를 직접 기입하는 것보다는 변경 후와 같이 상수를 만들어서 쓰는 것이 유지보수하는데 훨씬 용이합니다. HTML 삽입 미리보기할 수 없는 소스 // 변경 전 const PRICE = { MIN: 1000000, // 1백만원 MAX: 100000000, // 1억원 }; // 변경 후 const PRICE = { MIN: 1_000_000, // 1백만원 MAX: 100_000_000, // 1억원 }; 변경 전의 수치를 보면 0의 개수가 많아질수록 실수할 확률이 높아집니다. 이럴 때는 _를 이용하면 숫자를 보기 편하게 입력하여 사용할 수 있습니다. [ 네이밍 컨벤션 ] 💡 저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커밋 등 * 프로그래밍 전반적으로 이..

목차 [ 함수, 메서드, 생성자 ] HTML 삽입 미리보기할 수 없는 소스 [ argument & parameter ] 매개변수: 함수 정의에 나열된 이름을 말한다. 인수: 함수에 전달된 실제 값을 의미한다. 매개변수는 제공된 인수 값으로 초기화된다. HTML 삽입 미리보기할 수 없는 소스 [ 복잡한 인자 관리하기 ] 매개변수의 개수는 몇 개가 적당한가? 보통 2개까지를 적절하다고 보지만, 명시적으로 그 쓰임의 용도가 명확하다면 그 이상도 상관없습니다. 맥락과 흐름을 파악할 수 있다면, 많다고 무조건 나쁜 건 아닙니다. HTML 삽입 미리보기할 수 없는 소스 [ Default Value ] HTML 삽입 미리보기할 수 없는 소스 [ Rest Parameters ] HTML 삽입 미리보기할 수 없는 소스 ..

오늘은 객체를 다루는 여러 가지 방법에 대해 알아보겠습니다. 목차 [ Shortan Properties Name ] 객체를 사용하여 key : value를 지정할 때 변경 전과 같이 지정하는 경우를 종종 볼 수 있는데요. ( 저만 그런가요..? ㅎㅎ ) 변경 후와 같이 더 깔끔하게 지정해 줄 수 있습니다. 그리고 ES2015 이후부터는 key와 value의 이름이 같다면 한 번만 써도 된다는 거 잊지 말아 주세요!! 📌 예시 HTML 삽입 미리보기할 수 없는 소스 [ Computed Property Name ] HTML 삽입 미리보기할 수 없는 소스 react에서 자주 사용하는 구문의 예시를 가져와봤습니다. handleChange 메서드의 setState안에 지정하는 객체의 값을 보면 key를 [e.ta..

오늘은 분기 다루는 법에 대해 알아보겠습니다. 목차 [ 값식문 ] 1. () : 함수와 관련되어 있습니다. 주로 함수를 호출할 때 사용합니다. 2. {}: 중괄호 내부에는 값과 식만 넣어야 합니다. 3. 값과 식을 이용하면 if문을 대체할 수 있습니다. 4. 함수의 인자 안에는 값과 식만 넣을 수 있습니다. 다음 예시를 보겠습니다. 📌 예시 1 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드를 보면 중괄호 안에서 for문을 이용해 rows라는 객체에 값을 초기화시키고 있습니다. 이는 변경 후의 코드와 같이 map 함수를 이용하면 리팩토링 할 수 있습니다. 📌 예시 2 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드에서는 조건문을 이용하여 conditionOne, conditionTwo의 여..

CleanCode를 작성하기 위한 과정 중 변수에 대해 알아보겠습니다. 목차 [ var를 지양하자 ] 📌 var : 함수 단위 스코프 📌 let & const : 블록 단위 스코프 let과 const의 경우 블록 단위 스코프와 + TDZ (Temperal Dead Zone)으로 안전한 코드 작성이 가능합니다. https://despiteallthat.tistory.com/46 [JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당 오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공 despiteallthat.tistory.com..