개요 https://school.programmers.co.kr/learn/courses/30/lessons/17682 지난 주 스터디 문제로 프로그래머스 Level1의 [1차] 다트 게임을 풀었다. 나는 계산기 문제를 switch문제로 풀던 기억이 나서 이를 응용했고, 다른 스터디원분들은 주로 if문을 이용하셨다. 리뷰과정에서 switch문의 성능에 대한 리뷰를 주셔서, 이를 계기로 if문과 switch문의 성능에 대해 찾아보게 되었다. 아래는 나의 풀이이다. function solution(dartResult) { let num = 0; let sign = ""; let scores = []; for (let i = 0; i < dartResult.length; i++) { // 정규표현식으로 let..

실제로 프로젝트를 진행하며 도움되었던 git 명령어와 제가 사용한 상황에 대해 정리해보려고 합니다. Git 영역 Working Directory : 로컬 폴더 Staging 영역 : 수정된 코드 올리기 Repository : 원격 저장소 리포지토리 복제하기 git clone 🔔 필요한 상황 원격 리포지토리에 로컬 커밋을 올리기 위해 연결해야 할 때 git clone [url] 리포지토리와 로컬 폴더 연결하기 git remote 🔔 필요한 상황 원격 리포지토리에 로컬 커밋을 올리기 위해 연결해야 할 때 Github 리포지토리 를 이름으로 원격 저장소로 등록한다. git remote add [name] [url] // 깃허브 주소를 origin이라는 이름으로 다루겠다는 뜻 git add origin http..

Lighthouse란? 사이트를 검사하여 성능 측정 할 수 있는 도구이다. 크롬에서 접근하는 방법은 F12 > Lighthouse 탭에 들어가면 간단하게 볼 수 있다. 성능 First Contentful Paint는 사용자가 화면에 어떤 일이 있는지 인지할 수 있는 시간인 텍스트와 이미지 요소가 화면에 렌더링 되는 시간이다. Time to Interactive 상호작용이 가능해지는 시점이다. Speed Index는 뷰포트 내의 콘텐츠가 채워지는 속도이다. Total Bloking Time은 상호작용하지 못하는 시간의 총합을 의미한다. Largest Contentful Paint는 가장 넓은 영역을 차지하는 이미지나 텍스트 요소가 처음 로딩되는 시점이다. Comulative Layout Shift는 예상치..

CSS에서 색상값을 변수로 지정하여 사용해보았다. 티웨이 홈페이지를 리액트로 클론하는 프로젝트를 진행하며, 색상값을 공통적으로 사용할 수 있으면 좋을 것 같아 알아보게 되었다. CSS에서 색상값을 변수로 사용하는 법 :root { --main-bg-color : brown; } 이후에 .one { background-color: var(--main-bg-color); } 와 같이 사용할 수 있었다. 반복 코드를 줄일 수 있고 가독성을 높일 수 있다. 리액트에서 색상값을 변수로 사용하는 법 theme와 createGlobalStyle을 사용하는 법이 있다. 그 중에서 theme를 이용해보도록 하겠다. 사용할 변수들을 다음과 같이 저장한다. 따로 파일로 저장하지 않고 같은 파일 내에 변수로 선언해줘도 괜찮다..

상태 관리 라이브러리인 Redux를 배웠다. 아직은 익숙하지 않지만 확실한 것은 Redux에서 Reducer의 함수의 경우 Redux의 state 업데이트는 불변하는(immutable) 방식으로 변경해야 한다. 그 중 Object.assign을 소개한다. mdn Object.assign()에서는 객체 2개를 합치기도 하고 {}에 합치기도 한다. Reducer함수를 작성할 때 immutable하게 하려면 어떻게 써야 할까? 답은 이 사이트에서 확인할 수 있다. 이 사이트에는 다음과 같이 나와있다. 실험을 해보자. 사용할 객체는 다음과 같다. newData는 state의 cartItems에서 0번째 index의 quantity만 수정해준 값이다.! const state = { "items": [ { "id"..

오늘은 Redux를 배웠다. Action 객체를 생성하며 한가지 의아한 점을 발견했다. 객체 형태인데 왜 키-값 쌍이 아니라 키만 있는걸까? 다른 값과의 차이는 무엇일까? 답은 shorthand properties였다! key가 곧 value를 의미하는 경우에 value를 생략할 수 있다! 아래 사진들에서 itemId의 value는 itemId이었다. 참고 자료 : https://pro-self-studier.tistory.com/33