StudyLog 처음 시작 → typeScript 공부해보기!typescipt를 공부하고, 실제 프로젝트에 적용해보고 싶어서 처음 시작한 프로젝트다.🔍 왜 ? StudyLog ?우선 만들고 싶은 어플리케이션의 조건은 다음과 같았다.내가 기술적으로 성장할 수 있는 기능이 들어간 어플리케이션내가 많이 사용할 것 같은 사이트예쁜 UI 중요도 5 (예쁜게 최고!)지루해지지 않게 빠르게 만들 수 있는 간단한 사이트✏️ TodoList 기능원래 todoList는 모바일로 Todomate를 사용하기도 하고 최근에는 노션으로만 사용했다. 노션으로 관리 했었는데 화요일 이후면 다시 접속하지 않다.왜 들어가지 않을까?동기부여가 되지 않는다. 나는 무언가 할때 당근이 있어야지 잘 하는 타입인데 할일을 완료하면 뱃지를 주지..

왜 데이터의 불변성에 대해서 학습하는가? Redux 미션을 하던 도중. 불변성에 대한 질문을 받았다.그러면 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 무엇인가..?modern JS에 따르면, 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경” 하기 때문이다….. → 의도하지 않은 객체의 변경의 본질적 원인을 파악하기 위해서 이 글을 쓴다.그리고 이 글의 마지막에는 이 결론도 알 것이다. 참조형에서 왜 기존 데이터를 복사해와서 새로운 데이터를 생성하는 것인지 const updatedStudyLogWeek = [ ...studyLogWeeks.slice(0, dayIndex), { ...sele..

Form Tag Elements → 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고, 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.value attribute 통해 값에 접근신뢰 가능한 단일 출처 (single source of truth)💡 하나의 상태는 한 곳에만 있어야 한다. useState로 상태를 정의하는 것은 하나의 상태가 한 곳에 있는 것입니다. React에서는 state에 의해 input의 value가 결정되는데 이것을 “신뢰 가능한 단일 출처”라고 합니다.우리가 React에서 State를 정의하고 여러 컴포넌트에서 해당 State를 사용해야 한다면 ..

3주차 회고3주차 피드백을 읽고 3주차를 진행 하면서 아쉬웠던 부분이 많이 보였습니다..,, 그리고 지금은 4주차가 끝난 시점입니다!한 달 동안 프리코스를 진행하면서 스스로 많이 성장함을 느꼈습니다. 사실 첫주차에는 생각보다 익숙해지는데 금방 걸리는가? 싶었지만 마지막까지 방심하면 안됨을 느꼈습니다. 힘든만큼 값진 경험이라고 생각하기 때문에 끝까지 해낸 것에 의의를 두려고 합니다.다시 3주차로 돌아가서 회고를 진행해보겠습니다..!3주차에는 로또 발매기를 만드는 미션이 진행되었습니다!Lotto 미션로또 프로그램은 간단한 로또 발매기입니다. 로또 구입 금액을 입력하면 로또가 자동으로 발행됩니다. 로또는 1에서 45까지의 6개의 숫자이고, 사용자가 로또 당첨 번호와 보너스 번호를 입력하면, 사용자가 구매한 로..

2주차 회고지난주가 너무 정신없이 흘러가서  3주차 미션이 어제 마무리 된 시점에서야 2주차 회고를 작성합니다.. 이제라도 다시 2주차 미션으로 돌아가서 회고를 진행해보겠습니다..!2주차에는 자동차 경주 미션이 진행되었습니다! ☺️ 🚗 자동차 경주 미션2주차 미션은 자동차 경주 미션으로 경주할 자동차 이름과 시도 횟수를 입력받고 경주가 시작되면 매 라운드 마다 차들은 랜덤 값을 부여 받고 만약 랜덤 값이 4라면 전진합니다.그리고 시도 횟수 만큼 게임이 진행되면 최종 우승자를 가려 출력하는 미션이었습니다 ! 2주차의 목표여러 역할을 수행하는 큰 함수를 단일 역할을 수행하는 작은 함수로 분리한다.테스트 도구를 사용하는 방법을 배우고 프로그램이 제대로 작동하는지 테스트한다.1주차 공통 피드백을 최대한 반영한..

우테코 프리코스 1주차를 하면서 클래스를 사용해서 코드를 구현하는데, 애매하게 알고 있는 상태에서 쓴다는 느낌이 들어, 확실하게 알아가고자 한다! 아래 내용들은 모던 js 딥다이브를 보고 정리하였다.중간 중간 개념들을 추가로 정리해놓고 반복적으로 볼것이다. 💡 자바스크립트는 강력한 객체 지향 프로그래밍 능력을 지니고 있다. 클래스와 생성자 함수의 차이클래스를 new 연산자 없이 호출하면 에러가 발생한다.클래스는 상속을 지원하는 extends 와 super 키워드를 제공한다.클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.1. 클래스 정의클래스는 class 키워드를 사용하여 정의한다. 파스칼 케이스를 사용하는 것이 일반적이다.class Person {}클래스는 표현식으로도 정의할 수 있다.const P..

우아한 테크코스 프리코스우아한 테크코스 프리코스에 대해서 간단하게 설명해드리자면,우아한 테크코스 프리코스란 우아한 테크코스를 지원한 사람들이 모두 참여할 수 있으며, 이 과정은 본 과정에 들어가지 전 지원자들을 대상으로 기본적인 프로그래밍 능력을 키우고, 본 과정을 맛보는? 과정입니다. 매주 미션이 주어지고 일주일 동안 주어진 요구 사항을 충족하는 프로그램을 작성하는 방식입니다.목표 세우기세부적인 목표 세우기매주 미션 테스트를 통과하고 제출한다.클린코드, 좋은 코드를 위해 노력한다.매주 미션 후 다음 미션 시작 전까지 회고 블로그를 작성한다.생성형 AI를 사용하지 않는다. 끝까지 최선을 다한다. 끝나도 계속 클린코드를 위해 리팩터링한다.얼마나 성장하는지에 집중한다.제가 세운 세부적인 프리코스 목표입니다...

구현에 필요한 부분만 다음 기술 블로그를 참고하여 작성 한다. https://tech.kakaoenterprise.com/149 실전 Infinite Scroll with React시작하며 안녕하세요. 카카오엔터프라이즈 워크코어개발셀에서 프론트엔드 개발을 담당하고 있는 Denis(배형진) 입니다. 약 1년 전, 저는 프레임워크의 선택, React vs Angular 이라는 포스팅을 통해tech.kakaoenterprise.com Intersection Observer API스크롤 이벤트로 무한 스크롤을 구현하면 리플로우(레이 아웃 계산을 다시 한다 HTML 요소들의 위치, 크기를 재계산한다.)에 좋지 않은 렌더링 성능과 상황에 따라 기대한 대로 동작하지 않을 수 있다는 문제점이 있다. (자세한 사항은 위..

1.  문제 발생프로젝트를 배포하는 과정에서 ESLint 경고가 많이 떴는데대부분의 경고는 쉽게 해결이 가능했지만 해당 경고는 해결하는데 몇시간이 걸렸다.     경고 메시지는 다음과 같았다. naver 지도에서 마커를 추가하는 기능을 구현하면서 생긴 오류였다. useEffect 훅을 사용할 때 발생할 수 있는 대표적인 문제 중 하나는 의존성 배열(dependency array)과 관련된 경고이며 이 문제는 리액트 훅이 컴포넌트의 상태나 prop이 변경될 때 올바르게 동작하도록 보장하는 데서 비롯된다.  즉, 이 경고는 useEffect 내에서 사용된 변수나 함수가 의존성 배열에 포함되지 않으면 생기는 경고 이다.   useEffect의 기본 형태 `useEffect`의 기본 형태는 `useEffect(..

문제 팀프로젝트를 하면서 프론트엔드 배포를 해야하는데 빌드에서 prettier오류가 계속 떴다. 지난번 팀프로젝트에서도 prettier를 잘못 설정했는지 계속 오류가 떠서 이틀동안 고생했던 적이 있다. 그 때는 잘 이해를 못한 상태에서 그냥 넘어갔던 거 같아서 제대로 짚고 넘어가려고 한다.  이런식으로 space 오류가 났었다.이외에도 tab과 줄바꿈 등에서 오류가 날 수 있다. 찾아봐도 제대로 된 해결법이 나오지 않아 정리해보려고 한다. ESLint 란 ?ESLint는 코드 퀄리티를 보장하도록 도와주는 도구이다. ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성 있는 방식으로 구현할 수 있도록 도와준다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in ru..