JayGo 개발 연습장

리액트 17 버전까진 프로젝트를 빌드하면 아래와 같이 ReactDom의 render 메서드에 최상단 컴포넌트인 과 최상단 DOM 요소인 가 아래와 같은 방식으로 기본 추가되어 있었다.import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';ReactDOM.render( , document.getElementById('root') );하지만, 리액트 18 버전부터 createRoot라는 메서드와, createRoot가 리턴하는 객체의 메서드인 render 메서드가 새롭게 추가되었다. npm create vite@latest 명령어로 ..

Udemy 함수명은 동사로 시작하도록 짓자.input 태그의 required를 설정해주면 필수로 값을 요구할 수 있고, minlength 어트리뷰트에 값을 넣어주면 최소 글자수를 검증할 수 있다.input 창 입력 시 유효성 검증에서 문제가 발생하면 문제가 생긴 곳에 자동으로 포커스되게 해주거나, 유효성 검증에서 문제가 생긴 이유를 명확하게 보여준다거나, 이와 같이 User Friendly하게 개발을 하도록 항상 노력해야 한다. 에러 메시지를 alert 해준다거나 안내 문구를 띄워줄 땐 누구나 이해할 수 있도록 쉽고 직관적이게, 그리고 이후 유저의 동작이 유도되도록 포커스-하이라이트 하는 등의 UX를 클라이언트 개발자로서 신경쓰자.React로 TODO APP 만들기onChange 이벤트 핸들러의 이벤트 ..

태그label 태그는 form의 다양한 요소들에 대한 부가적인 정보를 제공해주는 태그이다. 본래의 목적은 웹 접근성 향상으로, 예를 들어 이라는 인풋 요소가 하나 있을때 해당 요소를 해당 인풋 요소를 설명해주는 텍스트와 함께 label 태그로 감싸주면 스크린 리더기가 해당 input 창이 어떤 역할을 해주는 창인지를 좀 더 잘 인식하고 설명해줄 수 있다. 이메일을 입력해 주세요!시각 장애가 있는 분들이나, 화면을 눈으로 보고 사용하기 어려운 분들은 웹 사용을 위해 스크린 리더기와 같은 도구들에 의존하게 된다. 그런데, 스크린 리더기 입장에서는 input창의 위치만으로 해당 인터랙션 요소가 어떤 의미를 갖는지 파악하는 데 한계가 있을 것이다. 그렇기 때문에, 웹 접근성 측면에서 사용자와의 상호작용을 ..

Udemy 컴포넌트의 주목적은 UI를 렌더링 하는 거다. 그러니 상태를 변경하는 로직이 컴포넌트 내부에 비대해지는 것은 원래 목적과는 조금 다른 방향이 될 수 있다.useState 훅으로 만든 상태와 상태 변경 함수는 컴포넌트 내부에서만 사용 가능하다. 때문에, 상태 변경 로직을 컴포넌트 외부로 떼는 게 어려우며, 이런 문제를 해결하기 위해 등장한 것이 useReducer이다.useReducer를 이용하면 컴포넌트 외부에서 상태를 변경하는 로직을 사용할 수 있다.[state, dispatch] = useReducer(reducerFunc, initState) 형태로 사용하고, useReducer의 첫 번째 인자로 전달한 reducerFunc를 컴포넌트 밖에 선언하는 식으로 활용한다. reducerFunc..

Udemy Git 스태스(Stash) 사용 관련 내용하나의 브랜치에서 작업을 하다 다른 브랜치로 옮기고, 다시 기존 브랜치로 돌아가서 파일을 수정해서 커밋하고, 생성했던 브랜치로 돌아가보자. 그 상황에서 갈라져 나온 브랜치에서 작업을 하면 두 개 브랜치는 따로 갈라진 상황이 된다.그 상황에서 갈라진 브랜치의 작업을 하던 도중 커밋을 하지 않고 갈라져 나오기 전 브랜치의 커밋 위치로 이동하려고 하면 에러가 발생한다. 보통 이런 상황에선 갈라진 브랜치에서 생긴 변경 사항을 기존 커밋의 코드에 덮어씌우는 형태로 이동하는데, 그 과정에서 충돌이 발생할 수 있어 Git이 먼저 에러를 발생시킨 거다.이런 상황에서 git stash(git stash save의 축약형) 명령어를 사용할 수 있다. stash는 임시 저..

Date 객체란자바스크립트는 날짜 형식의 데이터를 처리하기 위한 Date 객체를 별도로 제공한다. Date는 자바스크립트에서 기본 제공하는 빌트인 객체로, Object, Array, String, Number 처럼 생성자(new Date())로 사용된다. Date 생성자로 생성한 값의 타입은 객체다.const date = new Date();console.log(date, typeof date) // Fri Nov 15 2024 17:20:49 GMT+0900 (한국 표준시) 'object'new Date()를 사용하면 Date 객체가 생성되는 시점의 시간을 기준으로 값이 할당된다(사용자 컴퓨터의 기본 로컬 타임존이 그대로 적용된다). 이 값은 정적이며, 시간의 흐름에 따라 값이 계속 변하진 않는다(생..

TODO APP 만들기TODO Item 토글했을 때 토글 여부가 서버에 post 요청으로 보내지도록 수정했다.덕분에 Goal 탭이 바뀔 때마다 todo 완료 여부 표시가 변경되는 문제를 해결할 수 있었다.API 명세를 잘 보니 done 여부를 표시하는 필드, 전체 할 일의 progress를 표시하는 API 엔드포인트가 전부 있었다. 항상 API 명세를 사전에 잘 보고 개발에 들어가자.Udemy 함수 인자의 개수 몇 개가 적당한지에 대한 정답은 없다. 맥락에 잘 어울리면 된다.그렇더라도, 인자가 너무 많아져서 고나리가 어려울 경우 객체를 인자로 넘기고 객체 구조 분해 할당을 활용하자.객체 구조 분해 할당을 사용하더라도, 필수로 넣어줘야 하는 인자가 별도로 있다면 객체에서 빼주는 것도 좋다. (name, {..

토이 프로젝트element.classList.toggle을 해주면 클래스 명이 있으면 없애고, 없으면 추가해 준다. class 이름을 바꿔주고 CSS에서 선택자로 디자인을 다르게 먹여서 토글 이벤트를 만들어낼 때 유용하다.input 창의 type="checkbox"는 이벤트 발생 시 자동으로 checked라는 속성을 추가한다. 만약에 여기서 수동으로 토글 처리를 해주면 아무 이벤트도 일어나지 않는 것처럼 보일 수 있다.React 공식 문서React에서 use로 시작하는 모든 것은 훅(Hook)이다. 훅은 React가 렌더링 중일 때에만 사용할 수 있는 특별한 함수다.훅은 컴포넌트의 최상위 수준 또는 커스텀 훅에서만 호출할 수 있다. 조건문, 반복문 또는 기타 중첩 함수 내부에서는 훅을 호출할 수 없다.훅..

객체 지향과 프로토타입객체 지향 프로그래밍(OOP; Objection Oriented Programming)은 프로그램을 속성(프로퍼티)과 동작(메서드)으로 이루어진 '객체'를 통해 구성하려는 패러다임이다. 하나의 서비스를 객체 간의 관계로 구조화하는 것을 목표로 하며, 아래의 네 가지 원칙을 통해 이러한 컨셉을 구현한다.추상화: 불필요한 세부사항을 숨기고 중요한 특징만을 드러내어 복잡성을 줄인다.캡슐화: 객체의 내부 상태를 숨기고, 외부에서는 정해진 방법(메서드)을 통해서만 접근할 수 있게 한다.상속: 기존 클래스(프로토타입)의 속성과 메서드를 다른 클래스(프로토타입)에서 물려받아 재사용할 수 있게 한다.다형성: 같은 이름의 메서드가 객체에 따라 다르게 동작할 수 있게 하여 유연성을 높인다.객체 지향을..

Todo 앱을 다시 만들었다. 경험이 없다 보니 좋은 구조에 대한 여러 시행착오가 있었는데, 반복해서 할수록 어떠한 판단을 할 때 '이건 이런 문제가 생길 수 있어서 덜 좋다'라는 걸 생각하는 힘이 생기는 것 같아서 뿌듯했다. 물론 아직 부끄러울 정도로 부족한 실력이라, 앞으로 좀 더 많은 노력을 해야겠다.유데미 클린코드 자바스크립트 강의를 들었다.객체 구조 분해 할당을 최대한 많이 활용하자. 특히, 함수의 파라미터를 전달할 때 순서를 신경 쓰지 않아도 되도록 하거나, 필수이 파라미터와 옵셔널 한 파라미터를 구분할 수 있게 해 준다.Object.freeze를 쓰면 객체를 동결할 수 있다(Read Only로 만들어준다). 단, Object.freeze는 참조 타입 복제처럼 얕은 동결로 실행된다. 재귀적으로..