my dev diary

조건문 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있음. 조건 분기 코드가 실행되는 흐름을 변경하는 것. if 조건문 자바스크립트에서 가장 일반적인 조건문. 조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용. 조건 : 불 자료형. 비교 연산자와 논리 연산자를 활용해 조건을 만들고, 이 조건을 사용해 조건 분기를 함. if (조건) {조건이 참일 때 실행할 문장} if else 조건문 서로 반대되는 상황을 표현하는 조건문. else 구문을 if 조건문 바로 뒤에 붙여 사용함. if (조건) { 조건이 참일 때 실행할 문장 } else { 조건이 거짓일 때 실행할 문장 } 중첩 조건문 조건문 안에 조건문을 중첩하여 사용함. if (조건1) { if (조건2) { // 조건1이 참일 때 실..

TIL 2023. 9. 28.

이미지 로딩 속도 개선하기 문제 로그인 페이지 배경이미지의 렌더링 시간이 길다는 사용자 피드백 확인 원인 이미지를 호스팅하여 url로 불러오는데, 배경이미지같이 사이즈가 클 경우 렌더링 속도가 길어짐 해결과정 해결방법 1 이미지를 내부 src > asset > img 폴더 안에 넣고 import 하여 불러옴 해결방법 2-1 최적화를 위해 이미지 파일 형식 변환(PNG ➔ WEBP/JPG) 파일 형식 파일 크기 용량 변화 PNG 1.88 MB 0% WEBP 523 KB -72% JPG 760 KB -60% 해결방법 2-2 태그를 이용하여 브라우저에서 webp 형식이 지원되지 않을 경우 jpg 이미지가 사용되도록 함.

TIL 2023. 9. 21.

문자열 입력 문자열 자료형을 입력할 때 사용하는 함수 : prompt() prompt(‘메시지 문자열’, ‘기본 입력 문자열’) ➔ input과 함께 사용하면 인풋칸에 입력한 글자가 return 됨. 불 입력 불 자료형을 입력할 때 사용하는 함수 : confirm() confirm(‘메시지 문자열’) ➔ 확인창에서 [확인]을 선택하면 true를 return 하고, [취소]를 선택하면 false를 return 함. 숫자 자료형으로 변환하기 다른 자료형에서 숫자 자료형으로 변환할 때, - 함수로 변환하기 : Number() - 숫자 연산자로 변환하기 : -0, *1, /1 문자열 자료형으로 변환하기 다른 자료형에서 문자 자료형으로 변환할 때, - 함수로 변환하기 : String() - 문자열 연결 연산자로 ..

TIL 2023. 9. 8.

문제 댓글 등록 후 댓글 삭제 버튼 클릭 시 새로고침을 해야 정상적으로 삭제됨 원인 제일 처음 화면이 렌더링 될 때 댓글 정보를 한 번만 가져옴. 댓글 등록 버튼 클릭 시 : setCommentsData로 댓글 UI만 먼저 렌더링 된 후에 addDoc으로 db에 댓글 내용이 저장됨 그 후에 저장된 댓글 정보를 db에서 가져오지 않아 화면에 그려진 댓글 콘텐츠들이 사실상 내용 없이 비어있었음 눈에 보이기만 하고 비어있는 요소의 삭제버튼을 눌러봤자 db에서 삭제되지 않음 따라서 새로고침 전까지는 삭제버튼이 작동하지 않다가 새로고침 후(=렌더링 되며 db에서 댓글 정보를 가져온 후)에야 삭제됨 해결책 댓글을 db에서 가져오는 함수를 별도로 분리함 분리한 함수를 처음 렌더링 시, 댓글 등록 버튼 클릭 시 각각 ..

TIL 2023. 9. 4.

Javascript 알림창을 대체하는 alert 라이브러리. 알림창을 띄울 때 간편하게 커스터마이징을 할 수 있다. sweetalert 공식 사이트에서 사용법과 각종 alert 예시들을 볼 수 있다. sweetalert2 버전 2 역시 공식 사이트에서 사용법과 다양한 예시들을 참고하기 좋다. 설치하기 # sweetalert npm install sweetalert yarn add sweetalert # sweetalert2 npm install sweetalert2 yarn add sweetalert2 import 하기 // sweetalert import swal from 'sweetalert'; // sweetalert2 import Swal from 'sweetalert2' // ES6 Module..

TIL 2023. 8. 29.

유효성 검사(유효성 체크) 유효성 검사(유효성 체크)는 데이터가 올바른지 확인하는 과정이다. 로그인, 회원가입 등을 할 때 사용자가 유효한 데이터를 입력했는지 체크해 준다. formik vs react hook form React에서 가장 많이 사용하는 library는 formik과 react hook form이다. formik 가장 많이 사용되는 라이브러리이며 사용하기 쉽다. react hook form 타입스크립트가 기본적으로 내장되어 있다. 종속성이 없는 작은 라이브러리이다. 불필요한 리렌더링을 최소화하여 작성해야 하는 코드의 양을 줄여준다. ➔ 타입스크립트 프로젝트에서 필요하므로 react hook form을 사용하기로 결정. React Hook Form react hook form 설치 // n..

TIL 2023. 8. 25.

선언 : 상수, 변수를 생성하는 과정 할당 : 상수, 변수에 값을 넣는 것 상수 : 항상 같은 수 : 저장 효율(성능)이 좋음 상수 선언 : const 이름 = 값 const pi = 3.141592 pi // 3.141592 - 구문오류 identifier has already been declared : 상수는 한 파일에서 한 번만 선언할 수 있다. : 같은 이름으로 상수를 선언하면 발생하는 오류 ➔ 해결방법 : 다른 이름의 식별자를 사용하여 상수를 선언한다. - 구문오류 identifier has already been declared : 상수는 한 파일에서 한 번만 선언할 수 있다. : 같은 이름으로 상수를 한 번 더 선언하면 오류가 발생함 ➔ 해결방법 : 다른 이름의 식별자를 사용하여 상수를 선..

TIL 2023. 8. 23.

TypeScript로 리액트 프로젝트 세팅하기 1. 프로젝트 경로로 이동하여 프로젝트 생성(설치) ➔ 터미널에 아래 코드 입력 # npx npx create-react-app 프로젝트명 --template typescript # yarn yarn create react-app 프로젝트명 --template typescript 2. 프로젝트(폴더) 경로로 이동하여 프로젝트 실행 cd 프로젝트경로 yarn start 3. 프로젝트의 폴더 구조 확인하고 필요 없는 파일 정리하기 : tsconfig.json, App.tsx, index.tsx 등 타입스크립트로 세팅된 리액트 프로젝트 구조가 보이는지 확인 : 로고이미지, App.test.js, setupTests.js, reportWebVitals.js 등등 삭..

TIL 2023. 8. 22.