서른, 프로그래머 입문하다
- [JS Q.R] 8번째 온라인 모임 모임 일시 : 2024-05-09, 17시참여 인원 : 5명 1. 일반 객체와 일급 객체를 비교하여 설명해주세요.일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 함수는 객체 타입의 값이다. 즉, 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다. 자바스크립트의 함수는 일반 객체와 달리 값으로 사용될 수 있는 일급 객체로써 구별된다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다. 이때 함수 이름은 생략할 수 있는데, 이를 익명 함수라고 한다. 함수는 함수 이름이 아닌 식별자로 호출하므로, 익명함수 또한 호출할 수 있다... 2024.05.09
- Supabase 최종 수정 : 2024-05-13 (계속 작성 및 수정 중) 공부하기로 정한 이유프로젝트를 하면서 Swagger로 API를 연동하는데, 개인적으로 어려움을 겪었다. 우선적으로 API 연동하는 방법을 모른 탓도 있고, 기존에 주어진 데이터가 없는 상황에서 POST를 보낸 후에 GET하는 방식이라 귀찮았다. 솔직히 귀찮았다는 표현이 맞는 것 같다. 그러면서 개인적으로는 Supabase나 GraphQL에 대해 공부하고 싶은 열망이 있었는데, 이번 프로젝트를 겪으면서 그냥 하나 만드는 게 더 나을 것 같은데? 라는 생각이 들었다. 그래서 공부를 시작하고 있다. 어렴풋이 듣기만 했던 것을 직접 만져보고 싶었다. "하면 좋지"에서 "직접 만들고 싶다"라는 단계로 마음과 생각이 옮겨졌다. 함께 공부에 대한 열의가 있.. 2024.05.08
- [JS Q.R] 7번째 온라인 모임 질문 작성 : 2024-05-06 17시 온라인 모임(참여 인원 : 5명) 1. 객체의 특성을 설명해주시고, 객체 변경 방지 방법들의 차이점과 이들의 한계에 대한 해결방법을 함께 얘기해주세요.객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉 프로퍼티를 동적으로 추가하거나 삭제 및 갱신할 수 있다. 이런 객체의 특성으로 인해 프로퍼티 어트리뷰트 즉, 객체의 상태 역시 재정의할 수 있다. 그러나 객체의 값과 상태가 자주 변경되는 것은 안정성의 이유에서 좋지 않다. 그렇기에 객체의 변경을 방지하는 메서드(preventExtensions, seal, freeze)가 존재한다. Object.preventExtensions 메서드는 객체의 확장을 금지한다. 즉, 프로퍼티를 동적으로 추가하는 것이 .. 2024.05.06
- npm install [-option] 최종 수정 : 2024-05-04 NPMNode Package Manager의 줄인 표현으로, 자바스크립트 패키지 매니저이다. node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. dependencies에 등록되는 것과 devDependencies에 등록되는 것의 차이는 무엇인가? --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미이며, npm@5 부터는 --save 옵션을 기본 옵션으로 저장한다.-P (--save-prod)dependencies에 패키지를 등록한다. 프로젝트가 배포 시 사용될 의존성 모듈을 정의하고 설치한다.(default) -D (--save-dev)devDependen.. 2024.05.04
- [JS Q.R] RegExp 최종 수정 : 2024-05-0331장. RegExp1. 정규 표현식이란?정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(*formal language)다. 자바스크립트의 고유 문법은 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 의미한다.const tel1 = '010-1234-5678';const tel2 = '010-1234-567팔';// 리터럴로 휴대폰 전화번호의 숫자 (3)-(4)-(4) 패턴을 정의const regEx[ = /^\d{3}-\d{4}-\d{4}$/;reg.. 2024.05.03
- useId() 최종 수정 : 2024-05-03useId()접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하기 위한 React Hook입니다.어떤 매개변수도 받지 않는다.주의할 점useId()를 리스트의 key를 생성하기 위해 사용해서는 안 된다. Key는 데이터로부터 생성해야 한다. 페이지에서 컴포넌트는 몇 번이고 렌더링 될 수 있지만 ID는 고유해야 한다. ID를 직접 입력하는 대신 useId를 활용해서 고유한 ID를 생성할 수 있다.import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); return ( Password: Th.. 2024.05.03
- 나 사용 설명서 최종 수정 : 2024-05-031. 나는 자율성 높은 상태에서 일하는 것을 좋아한다.- 하나하나 체크하는 것보다 신뢰받는 가운데 일을 하는 것 2. 내가 좋아하는 혹은 자신있는 일은?- 모임의 방향을 분명히 하는 데 탁월하다.- 언어유희- 사람에 대한 기억력이 좋은 편입니다.- 관찰력과 질문을 통해 재정의하고 재구조화하는 것을 잘 합니다.- 사고의 구조화(지식 전달)- 언어 세분화- 진지한 분위기 조 3. 나와 커뮤니케이션 하기 좋은 방법- 스무고개 하는 것을 안 좋아합니다. 분명하게 질문을 해주는 것이 효율적이고 효과적이라고 생각합니다.- 생각의 경우의 수를 많이 따져서, 구체적으로 질문해주시면 더 효과적입니다.- 언어유희- 질문- 혜자 리액션 4. 선호하는 피드백 방식- 근거 없는 칭찬은 안 좋아합.. 2024.05.03
- [JS Q.R 모임] 4번째 온라인 모임 일시 : 2024-05-02, 17시참여 : 5명 [질문 1] Number.EPSILON을 사용하는 이유와 등장배경을 설명해주세요.자바스크립트의 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한소수가 되어 미세한 오차라 발생할 수밖에 없는 구조적 한계가 존재한다. 이는 자바스크립트가 부동소수점 방식으로 산술 연산을 진행하기에 나타나는 현상이다. 이를 해결하기 위해, Number.EPSILON을 사용한다. 부동소수점부동소수점 또는 떠돌이 소수점 방식은 실수를 컴퓨터상에서 근사하여 표현할 때 소수점의 위치를 고정하지 않고 그 위치를 나타내는 수를 따로 적는 것으로, 유효숫자를 나타내는 가수와 소수점의 위치를 풀이하는.. 2024.05.02
- 컴폰넌트 설계 - 관심사의 분리 최종 수정 : 2024-05-01관심사의 분리컴퓨터 프로그램을 관심사 별로 구별해서 분리하는 설계 원칙을 말한다. 단순히 시스템을 분리되지 않는 파트들로 조각내는 것이 아니라 시스템을 반복하지 않고 각각의 책임을 가진 요소들로 구성하는 것을 목표로 한다. 여기서 말하는 책임은 특정 코드가 수행해야 하는 동작이라고 생각하면 된다. 분리를 위해서는 기준이 필요한다. 그 기준은 주어진 책임을 설명하는 논리적이거나 물리적인 제한을 의미한다. 소스 구성에 대한 프로젝트, 폴더 구조를 포함하기도 한다.효과컴포넌트의 불필요한 반복이 없어지고, 책임이 단일화되기에 전체 시스템을 유지보수하기 쉬워진다.시스템 전체의 유지보수성이 향상되므로 더 안정적이게 된다.각각의 컴포넌트가 단일 책임으로 자신의 관심사만 집중해서 확장 .. 2024.05.01
- 스토리지(Storage) 최종 수정 : 2024-05-01세션 스토리지와 로컬 스토리지사이트마다 클라이언트에서만 사용하고 싶은 데이터를 저장해 놓고 싶을 때 사용한다. 세션 스토리지(Session Storage)현재 탭에서만 유요한 저장소이다.탭을 닫으면 데이터가 사라진다.다른 탭과 데이터는 공유되지 않는다.// 값을 저장const data = inputElement.value;sessionStorage.setItem('draft', data);// 값을 참조하여 사용const draftData = sessionStorage.getItem('draft');// 값 지우기sessionStorage.removeItem('draft');로컬 스토리지(Local Storage)해당 사이트에서 유요한 저장소이다.탭을 닫거나 브라우저를 닫.. 2024.05.01