✨존재하지 않는 수 찾기 함수는 정수 배열 A가 주어졌을 때, A에 존재하지 않는 가장 작은 양의 정수(0보다 큰)를 반환하는 문제를 풀면서 고민한 내용입니다. 처음에는 단순히 배열을 정렬한 후, 반복문을 사용하여 A에 존재하지 않는 가장 작은 수를 찾도록 코드를 작성했습니다. 정확도는 100%였지만 성능 점수가 25%로 매우 낮아, 제 코드의 문...

포트폴리오를 만들면서 상세페이지 URL을 설정할 때, 프로젝트의 자세한 정보를 담은 상세페이지와 공부용 프로젝트의 간단한 정보를 담은 상세페이지를 효과적으로 관리하기 위해 두 가지 URL 방식에 대해 비교해보았습니다. URL 경로 기반 방식 (path variable) <Routes> <DetailPage path="/proje...

[번역] DRY - 잘못된 추상화의 일반적인 원인을 읽고 작성한 코드를 분석해본 글입니다. 위 포스트을 읽으며 DRY가 잘못되는 과정에 작성된 코드가 내가 작성한 코드와 비슷해서 생각해보게 되었습니다. 코드를 읽을 때 가장 좋은 코드는 아래의 그림 왼쪽처럼 위에서 아래로 쭉 읽어나가기만 하면 되는 코드입니다. 하지만 내 코드는 오른쪽 그림만큼...

내돈내산 프로젝트를 FSD 아키텍처로 리팩토링하면서 모달 컴포넌트도 리팩토링하며 느낀점을 기록한 글 입니다. 기존 모달 컴포넌트 특징 다양한 요소를 포함하여 재사용가능성이 높음 여러 개의 useState를 사용하여 모달 상태를 관리하며, 상태 관리가 복잡해질 수 있음 createPortal을 사용하여 모달을 document.body에...

리액트로 게시물 정렬 및 좋아요 기능 구현하기 요구사항 기능 최근 등록순(최신 게시물부터 오래된 게시물 순으로 정렬), 조회순으로 정렬시키기 좋아요 기능 (좋아요를 누르면 좋아요 수 변경 및 좋아요 UI 변경) 조건 mock data를 사용 구현 1. 최근 등록순, 조회순으로 정렬시키기 주어진 html 코드 <d...

24년 8월 프리온보딩 사전미션 위 영상과 동일한 기능의 화면을 만들기를 한 기록 구현 내용 Input 박스, 검색버튼 검색어를 입력했을 때 dummy data를 보여주기 검색어와 일치하는 dummy data text에 하이라이트하기 결과물 입력값이 없을 때 a를 입력했을 때 apple inc(특정 단어)를 입력했...

1월에 풀었던 문제를 다른 방법으로 다시 풀었고 작성한 코드를 비교한 글 https://school.programmers.co.kr/learn/courses/30/lessons/258712?language=javascript 1월에 푼 내용 정리 1월에 작성했던 코드 function solution(friends, gifts) { let a...

원티드 프리온보딩 아키텍처 강의를 들으며 많은 사람들이 사용하고 있는 FSD 구조에 대해 정리한 글입니다. Feature-Sliced ​​Design (FSD) 홈페이지: https://feature-sliced.design/ Feature-Sliced ​​Design (FSD)은 프론트엔드 프로젝트를 위한 아키텍처 방법론입니다. 간단히 말해서,...

기존에 만들었던 프로젝트가 API KEY를 비롯해 숨겨져야하는 키들이 코드에 그대로 작성되어 있어, .env 파일을 사용하여 숨기도록 변경 vite를 사용한 프로젝트여서, 환경변수를 process.env가 아니라 import.meta.env.VITE_ 를 사용하여 불러왔다. const firebaseConfig = { apiKey: import...

아토믹 디자인에 관한 글을 읽고 내용을 요약한 글입니다. 포스트: https://atomicdesign.bradfrost.com/chapter-2/ 아토믹 디자인 패턴 (Atomic design pattern) 아토믹 디자인은 원자, 분자, 유기체, 템플릿 및 페이지가 동시에 함께 작동하여 효과적인 인터페이스 디자인 시스템을 만드는 것입니다. 아토...

Korean FE Article의 번역글을 읽고 린트와 포매터를 정리한 글 입니다. 포스트: [Korean FE Article] 포맷팅 규칙이 ESLint에서 사라집니다 Lint (린트) 코드를 분석하여 잠재적인 오류, 버그, 스타일 문제를 찾아내는 도구입니다. 코드 작성할 때 실수를 줄이고, 코드의 가독성과 유지보수성을 높입니다. Code Fo...

✅ 액션, 계산, 데이터 액션 실행 시점(순서)과 횟수(반복)에 의존 부수 효과, 부수 효과가 있는 함수, 순수하지 않 은 함수 함수형 프로그래밍에서 가장 중요 가능한 액션을 적게 사용하는 것이 좋음 이메일 보내기, 데이터베이스 읽기 계산 입력으로 출력을 계산 순수 함수, 수학 함수 최댓값 찾기, 이메일 주소가...

원문: https://www.perssondennis.com/articles/write-solid-react-hooks SOLID React Hooks 작성 SOLID는 가장 일반적으로 사용되는 디자인 패턴 중 하나입니다. 많은 언어와 프레임워크에서 일반적으로 사용되고 있으며 React에서 사용하는 방법에 대한 기사도 몇 개 있습니다. SOLID...

✨CS스터디 - margin, padding 이미지 출처: https://www.geeksforgeeks.org/css-padding-vs-margin/ ✅ padding 내부 공간의 여백을 지정할 때 사용합니다. 음수값은 허용되지 않으며, 패딩값은 자동으로 설정할 수 없습니다. 패딩은 배경색과 같은 요소 스타일의 영향을 받습니다. ✅ ma...

리액트 쿼리 - 서버 상태 정보 ✅ Fetching 초기 상태이며, 아웃소스(백엔드)에서 데이터를 가져올 때 발생 ✅ Fresh 양쪽 정보가 동일한 상태이며, 정보를 다시 가져올 필요가 없음을 의미 대부분의 경우 정보를 가져올 때 이 정보는 오래된 정보가 될 수 있으므로 Fresh 상태는 짧은 시간 지속됨 ✅ Stale 앱이 사용하고 있...

ErrorBoundary 오류를 핸들링할 수 있는 컴포넌트이다. 오류가 발생한 컴포넌트 대신, fallback을 보여준다. fallback “어떤 기능이 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말합니다.” 리액트 공식문서를 보면 클래스 컴포넌트로 작성해야한다고 나와있다. 기본 사용 방법 오류를 관리할 컴포넌트를 Error...

부트캠프 마지막 팀프로젝트를 진행하며 api는 snake_case로, 코드는 camelCase로 작성하기로 규칙을 정했습니다. 코드를 작성할 때 매번 camelCase로 변환해줘야하는 것이 불편하다는 생각이 들었고, 그래서 camelCase로 변경해주는 라이브러리 camelcase-keys를 사용하고자 했습니다. 패키지를 설치하고, 코드를 작성하기 ...

부트캠프 마지막 팀 프로젝트를 진행하며, 백엔드 코드를 타입오알엠(TypeORM)을 사용하여 작성하기로 했습니다. 타입오알엠 공식 문서를 참고하여 마리아디비(MariaDB)와 연동하였고, @Entity()를 사용하여 테이블을 생성하려고 했는데 다음과 같은 오류가 발생했습니다. TypeError: value.toUpperCase is not a fun...

클로저 함수와 함수가 선언된 어휘적 환경(렉시컬 스코프)의 조합입니다. 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정됩니다. 클로저는 함수가 속한 렉시컬 스코프를 기억하며 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능을 말합니다. 내부함수가 외부함수의 값을 변경할 수 있는 것 입...

한글로 번역된 사이트를 보고, 정리한 글입니다. https://orkhan.gitbook.io/typeorm/readme_ko 사용방법이 변경되어 타입오알엠 공식페이지도 꼭 확인해야합니다. https://typeorm.io/ typeorm 🧐 프로젝트 시작하기 1. 설치 명령어 npm install typeorm reflect-metadata...

알고리즘 DP 수많은 경우의 수를 전부 따져봐야하는데 경우의 수가 너무 많아서 속도가 느려지는 것을 개선하고자, 수행 시간을 줄이기 위한 알고리즘 목적 메모리를 사용해서 중복 연산을 줄이고 수행 속도를 개선한다. 메모리를 사용 = 배열 혹은 자료구조를 만듬 중복 연산을 줄이고 = 연산한 결과를 배열에 담는다.

호이스팅이란? 호이스팅이란 자바스크립트에서 변수 및 함수선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말한다. 선언문만 끌어올려지며, 대입문은 끌어올려지지 않는다. 예 - 변수 console.log(a); var a = 2; 컴파일러는 var a = 2; 코드를 2개의 구문으로 본다. var a a = 2 var a는 변...

주소창에 naver.com을 치면 일어나는 일 이미지출처: https://tcpschool.com/webbasic/works 사용자가 주소창에 naver.com을 입력한다. 브라우저는 사용자가 입력한 www.naver.com을 URL로 인식한다. DNS에 도메인 네임에 대한 IP 주소를 요청한다. DNS 서버는 도메인 네임부분을 ...

axios, camelcase-keys라이브러리를 사용해서 snakecase로 전달받은 속성 camelcase로 바꾸기 axios를 사용하여 응답(response)받은 데이터를 camelcase로 변경하고, 변경한 데이터를 return하는 방식으로 작성 import camelcaseKeys from "camelcase-keys"; axios.in...

1. 소프트웨어 개발 프로세스 소프트웨어를 개발하기 위한 필요한 절차나 과정 소프트웨어를 기획/설계/구현/테스트하고 유지보수하는 단계로 구성 ✅ 소프트웨어 개발 프로세스 중요성 품질향상 (요구사항 분석/테스트 단계에서 오류 발견) 일정 준수 (작업 정리 및 진행사항 추적하여 프로젝트 종료일 예측) 의사 소통 촉진 (팀 구성원...

1. 데이터베이스 여러 사용자와 응용 시스템들이 사용 목적은 다르지만, 공통의 데이터를 서로 공유하여 사용할 수 있도록 통합하여 저장/관리하는 모임 ✅ 데이터베이스 성질 통합 데이터 (연관성이 있는 데이터를 모음, 중복 최소화) 저장 데이터 (컴퓨터로 접근 가능한 매체에 기록, 영구적/반영구적) 운영 데이터 (존재 목적이나 기...

1. 컴퓨터 구조의 설계와 구현 ✅ 컴퓨터 하드웨어의 구성 중앙처리장치: CPU (central processing unit) 주기억장치: Memory (RAN/ROM) 보조기억장치: Storage (HDD,SDD, optical discs …) 입출력장치: I/O Devices (keyboard, mouse, display, pr...

1. 디지털 정보 표현 ✅컴퓨터에서 정보의 표현 단위 비트 (bit; binary digit) 컴퓨터에서 디지털회로의 조합으로 정보를 표현할 때 이용되는 가장 작은 단위 논리적으로 두 가지 중에 하나의 상태를 가지는 것 컴퓨터에서 표현하는 모든 정보는 비트를 사용하여 이루어져있음 (이진수) 바이트 (byte) 8개의 비트를...

docker에서 젠킨슨 받아와서 사용하기 1. 도커에서 이미지 받아오기 docker pull jenkins/jenkins 2. 컨테이너 실행하기 docker run -d -p 8080:8080 -p 50000:50000 jenkins/jenkins 3. 젠킨슨 초기 비밀번호 얻기 docker exec [컨테이너이름] cat /var/j...

스프린트4 CI-CD 파이프라인 설계 ✅ 파이프라인 순서 이번 실습에서는 스테이징 서버 배포까지만 진행 1. 코드가 잘 작동하는가 Code Checkout - unit test - code coverage 2. 배포 빌드, 이미지 푸시 -production build - packaging - image push 3. 스테이징 서버 배포 -s...

스프린트4 배포환경 테스트 1. 테스트용 데이터베이스 초기화 mysql -h [아이디].prgms-fullcycle.com -u prgms -p < init-test-db.sql 2. 데이터베이스 확인 mysql -h [아이디].prgms-fullcycle.com -u prgms -p 데이터베이스 선택 mysql> u...

스프린트4 AWS ✅AWS Amazon Web Services의 약자 다양한 IT 인프라와 관련 서비스를 제공하여 개발자와 기업이 자신의 응용 프로그램을 구축하고 실행할 수 있는 플랫폼을 제공 (웹/모바일, 빅데이터/인공지능 등) 클라우드 컴퓨팅 서비스 모델 IaaS, PaaS, SaaS 중 IaaS에 가까운 모델임 IaaS (In...

E2E 테스트 자동화 ✅실습 내용 Headless browser를 이용한 테스트 테스트는 빈번하게 일어나기 때문에 이 때마다 사용자 인터페이스 요소들을 렌더링하는 것은 불필요한 오버헤드가 큼 selenium gird를 이용한 테스트 환경 구축 개발 단계에서 종단간 테스트의 결과를 눈과 손으로 확인하는데 활용 ✅Headless browser?...

셀레니움과 종단간테스트 ✅시나리오 노트 목록 조회, 노트 선택하여 제목과 내용 확인 로그인 상태에서 행할 테스트가 많으므로 로그인/로그아웃 기능은 코드 공용화 사용자 상호작용이 벌어지는 HTML 요소의 선택을 명확히 Assertion을 삽입하여 올바른 동작을 확인/검증 실습 1. 로그인/로그아웃 테스트 라이브러리화 로그인/로그아...

부트캠프 스프린트 4 프로젝트에서 젠킨스를 이용하여 CI-CD 파이프라인을 구축하는 실습을 하다가 오류가 발생하였다. ssh을 github에 등록하였고, 로컬 cmd 창에서 다음 명령어를 입력하여 ssh 프로토콜을 이용할 수 있는지 확인하였다. ssh -T git@github.com Hi hyemin12! You've successfully au...

Selenium IDE 이용해서 테스트케이스 개발 로그인/로그아웃 시나리오 테스트케이스 개발 HTML element들을 선택하거나 코드를 손으로 작성하는 것은 효율이 떨어지므로 Selenium IDE의 도움을 얻어 자동화된 시나리오 기록할 예정 그리고 기록한 시나리오 활용할 예정 Selenium IDE에서 사용했던 파일을 불러서 다시 시나...

pip 명령어를 사용해서 셀레니움에 파이썬 라이브러리를 설치했고, 다음 단계인 셀레니움을 이용한 테스트를 실행하였는데 문제가 발생하였다.. python first_test.py 윈도우 cmd창에 위와 같은 명령어를 입력하였더니 강의와는 다르게 Python만 출력되고 테스트코드가 실행되지 않았다. 이것 저것 뭐가 문젠지 확인해보다가 셀레니움 화면...

부트캠프 스프린트 4 프로젝트에서 셀레니움 학습 실습을 진행하며, 파이썬 라이브러리를 설치해야했다. 나는 파이썬이 컴퓨터에 설치되어있지 않아 파이썬 공식문서 - windows에서 파이썬을 설치하였다. 그리고 나서 강의에서 알려준 pip install을 입력했는데 계속 오류 메세지가 출력되며 실행되지 않았다. 'pip'은(는) 내부 또는 외부 명령,...

셀레니움 (Selenium) https://selenium.dev selenium automates browsers. 브라우저 자동화 도구 ✅ 셀레니움 구성요소 Selenium Web Driver 브라우저 자동화 드라이버 크롬과 같은 브라우저들에 대한 라이브러리를 제공 이를 사용해서 사용자와 브라우저와 인터렉션하는 것을 ...

부트캠프 스프린트 4 프로젝트에서 백엔드, 프론트엔드 모두 로컬 클러스터를 실행시키는 실습을 진행하였다. 강의는 Makefile을 사용하여 간단하게 make 명령어를 통해 실행시켰지만, 나는 윈도우를 사용하고 있어서 각각의 명령어들을 실행하여 이미지를 만들고 도커 허브에 푸시하였다. 그리고 yaml 파일을 실행하여 클러스터를 실행하였다. 프론트...

로컬 클러스터에 시험 배포 강의에 생략된 부분이 많아서 내가 찾아가면서 진행한 내용을 정리해보았다. 1. configmaps 파일 만들기 apiVersion: v1 kind: ConfigMap metadata: name: notes-be-config namespace: prgms-notes data: DB_HOST: notes-db.d...

부트캠프 스프린트 4 프로젝트에서 도커를 이용하여 테스트용 컨테이너를 만들어보는 실습을 진행했다. 3월 28일에 DB 컨테이너를 만들었고, 백엔드 컨테이너를 만들며 DB와 연결해주었다. 3월 29일에 프론트엔드 컨테이너를 만들고, 백그라운드에서 실행했더니 db, 백엔드, 프론트엔드 모두 컨테이너가 잘 실행되는 것을 확인하였다. 프론트엔드 서버도...

백엔드 컨테이너 만들기 - 오류 해결…? 어제 백엔드 컨테이너를 만들었는데, unhealthy가 떳었다. 어떤 오류가 있는지 확인하기 위해 오늘 다시 docker compose up -d와 docker ps명령어를 입력해보았더니, 정상적으로 응답 받아왔다… 어제 docker compose up -d 명령어를 입력했을 때 컴퓨터가 부하 상태여서 네트...

낙관적 업데이트 vs 비관적 업데이트 ✅비관적 업데이트 API 호출이 완료되고 데이터 또는 상태가 확인되면 UI를 업데이트하는 방식이다. 즉, 사용자 수정 요청 → 서버에 수정 요청 → 성공하면 화면 갱신의 과정을 통해 업데이트한다. 사용자는 서버에 요청하고 응답을 받을 때까지 UI의 변경을 기다려야하기 때문에 사용자 경험보다 중요한 데이터를 처...

💬 3월에 나는 무엇을 했나 ■ 부트캠프 스프린트3 프로젝트 (북스토어 프론트엔드) 2월부터 진행했던 스프린트3 북스토어 프론트엔드 파트를 개발하는 프로젝트가 종료되었다. 이번 프로젝트를 진행하며 react-query를 처음 사용해봤는데, axios를 사용해서 서버에서 받아온 데이터를 useState() 훅을 사용해서 관리하는 방식보다 효율적...

브라우저 렌더링 과정 이미지 출처: https://web.dev/static/articles/howbrowserswork/image/webkit-main-flow-b779d50c0cf28_856.png?hl=ko 브라우저 렌더링 과정은 크게 5개의 단계로 나눠져있습니다. DOM TREE를 만드는 단계 CSSOM를 만드는 단계 렌더 ...

백엔드 컨테이너 만들기 Docker 구성 베이스 이미지: node 18v 백엔드 응용을 설치하고 실행할 위치 선정 /var/app 컨테이너 빌드 ${PROJECT_ROOT}/backend/package*.json을 이용하여 프로덕션 의존성 설치 RUN npm ci --omit=dev 타입스크립트...

✨리액트 선언형프로그래밍 프로그램은 크게 명령형 프로그래밍과 선언형 프로그램으로 나눌 수 있다. ✅명령형 프로그래밍 명령형 프로그래밍은 어떻게에 집중하여 프로그래밍하는 방법을 말한다. 명령형 프로그래밍 장점 직관성: 단계를 명확하게 정의하므로 개발자가 프로그래밍의 동작 방식을 쉽게 이해할 수 있음 유연성: 절차적인 방식으로 문제를 해...

✨리액트 hoc, 컴포넌트 래핑 HOC, 컴포넌트 래핑 방식 모두 코드를 재사용하고, 로직을 추상화할 때 사용합니다. ✅컴포넌트 래핑 방식 (Wrapper Component) 특정 컴포넌트를 공통 로직을 처리하는 Wrapper 컴포넌트로 감싸는 방식입니다. 장점 코드가 상대적으로 간결하고 직관적 여러 페이지에 동일한 로직을 쉽게 적용...

✨리액트 hoc 리액트 공식 문서 리액트 공식문서를 읽어도 내용이 잘 이해되지 않아 Valentine Gatwiri 가 작성한 How to Use Higher-Order Components in React 를 번역한 글이다. 리액트 라이브러리의 강력한 기능 중 하나인 고차 컴포넌트(Higher-order components,HOCs)는 여러 컴포...

부트캠프 스프린트 4 프로젝트에서 회원가입페이지를 생성하고, 회원가입 폼이 제대로 작동하는지 단위테스트를 실행하는 실습을 하였다. 프론트엔드 코드는 각자 설계서에 맞춰서 자유롭게 작성하면 되었기 때문에 나는 react-hook-form을 사용하여 회원가입, 로그인 폼을 작성하였다. 개발서버에서 실제로 잘 작동하는 것을 확인하였고, 테스트 코드를 작...

✨리액트 단방향 바인딩 ✅데이터 바인딩? 데이터 바인딩이란 UI와 UI가 표시하는 데이터를 연결하는 프로세스이다. 데이터가 변경되면 내부의 데이터가 자동으로 업데이트되어 변경 내용을 반영시킨다. 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시킬 때 사용하는 기법이다. ✅양방향 데이터 바인딩 양방향 데이터 바인딩은 사용자...

부트캠프 스프린트 4에서 프로젝트를 위해 Docker desktop 이 제공하는 로컬 클러스터에 데이터베이스 설치를 하려고 했다. 첫번째로 강의 자료로 받은 k8s manifest를 이용하여 데이터베이스 인스턴스를 실행하는 것 부터가 문제였다. volume 데이터 설정을 위한 notes-db-volume.yaml파일에서 hostPath:path를 ...

비공개 레포지토리를 사용하기 위해 ssh를 만들고 등록하였으나, 계속 오류: 권한이 거부됨(publickey) 오류 메세지가 출력되며 연결이 되지 않았다. 오류 내용을 검색해보니, 나같은 사람이 많았는지 github 문서에 내용이 잘 정리되어있어 이를 보고 해결하였다. 먼저, ssh -vT git@github.com를 입력하여 도메인에 올바르게 연...

CI 파이프라인 젠킨스를 통해 자동화한 빌드 단계와 그 절차 실습 내용 두 수가 주어지면 이에 대한 덧셈 연산을 행하는 것을 웹 응용으로 만들어서 사용 github에 code repository를 생성, 설정하고 초기 소스 코드를 등록 gradle을 이용한 빌드 환경을 설정 (JDK 필요) 응용에 알맞는 빌드 환경을 컨테이너 이미지...

젠킨슨 파이프라인 만들기 1. 새로운 아이템 만들기 name: simple-echo-2 pipeline 2. 아이템 기본 설정하기 Pipeline 스크립트 작성 pipeline{ environment { dockerImageName = "hyeem66/simple-echo" } agent any stages{ ...

젠킨슨 프로젝트 설정 실습 단계 프로젝트 소스가 담긴 github 레포지토리 준비 젠킨스의 빌드 환경 설정 Docker를 이용하여 이미지를 빌드하고 Docker Hub 레지스트리에 푸시 kubectl을 이용하여 레지스트리로부터 이미지를 가져다가 같은 클러스터에 배포 실습 1. github 레포지토리 준비 https://git...

젠킨슨으로 helloworld 찍어보기 1. 젠킨슨 실행 kubectl port-forward svc/jenkins 8080:8080 Forwarding from 127.0.0.1:8080 -> 8080 Forwarding from [::1]:8080 -> 8080 2. 로그인해서 젠킨스에 접속하기 비밀번호를 모른다면 kubec...

쿠버네티스 포드 업데이트와 복구 제공된 실습파일을 사용하여 서비스 운용해보기 1. 디렉토리 안에 해당 파일들 넣어두기 service.yaml rollout.yaml 2. 매니페스트 사용해서 delpoyment 만들기 kubectl apply -f rollout.yaml deployment.apps/dpy-nginx created ...

쿠버네티스를 이용한 서비스 운용 제공된 실습파일을 사용하여 서비스 운용해보기 1. 디렉토리 안에 해당 파일들 넣어두기 requirement.txt app.py deployment.yaml service.yaml Dockerfile site.conf start.sh 2. Flask 응용 실행에 필요한 패키지를 지정 ...

3월 22일 부트캠프 강의를 수강하며, 개발 환경과 프로덕션 환경에 따라 다른 환경변수를 사용하기 위해 window에 새로운 속성을 추가했더니 다음과 같은 타입 오류가 발생하였다. 코드 const { REACT_APP_API_BASE_URL: API_BASE_URL = "" } = window._ENV ?? process.env; export...

요구사항 명세서 요구사항 명세서는 요구사항 기술서, 요구사항 정의서라고도 불린다. 이는 고객의 요구사항(모든 기능)을 상세하게 정리한 내용을 의미한다. 요구사항은 여러가지 이유로 프로젝트 수행 도중에 변경될 수 있다. 워터풀(waterfall) 모델의 소프트웨어 개발 프로세스에서는 필수적으로 작성해야하지만, 애자일(agile) 방법론을 적용한다면 요...

✨다차원 배열? 다차원 배열이란 2차원 이상의 배열을 의미하며, 배열 요소로 또 다른 배열을 가지는 배열을 의미합니다.출처 자바스크립트에는 다차원 배열을 정의하는 문법이 존재하지 않는다. 그래서 배열에 배열을 중첩하여 다차원 배열과 유사한 기능을 구현할 수 있다. 형태 배열 안에 배열이 있는 형태 // 이차원 배열 [[a], [b], ...

#Github 문서 템플릿 github에서 제공해주는 템플릿 기능이며, issue template, pull request template이 있습니다. 문서 템플릿을 만들어두면 양식이 통일이 되어 소통에 효율적이며, 문서 파악이 쉬워지고, 유지보수가 편리하다는 이점이 있습니다. 1. 이슈 템플릿 만들기 이슈 템플릿을 만드는 방법에는 두 가지 방...

https://school.programmers.co.kr/learn/courses/15008/lessons/121683 📔 문제 설명 알파벳 소문자로만 이루어진 어떤 문자열에서, 2회 이상 나타난 알파벳이 2개 이상의 부분으로 나뉘어 있으면 외톨이 알파벳이라고 정의합니다. 문자열 “edeaaabbccd”를 예시로 들어보면, a는 2회 이...

✨접근성을 고려하여 HTML 작성하기 원글: https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412 원글자는 접근성은 단순히 웹사이트를 출시하기 전에 할 일 중에 하나가 아니라, 웹디자이너 및 개발자로서 반드시 지켜야한다고 얘기합니다. 원글자가 제시하는 ...

✨접근성을 고려하여 CSS 작성하기 원글: https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 CSS를 사용하여 웹사이트와 앱의 접근성을 향상시키는 데 도움이 되는 팁에 대한 소개입니다. 📖목차 가독성 있는 텍스트에서 읽기 쉬운 텍스트로 가상 요소...

✨접근성을 고려하여 javascript 작성하기 원글: https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9 📖목차 좋은 포커스 관리의 중요성 버튼을 만들 때는 button요소를 사용하라 동적으로 내용이 변경될 때 스크린 리더 사용자에...

✨여러 조건을 만족하는 데이터 구하기 프로젝트를 진행하다보면 여러 조건을 만족하는 데이터를 구해야하는 경우들이 있다. 이를 연습해보기 위해 다음과 같은 조건을 가진 필터링 기능을 만들어 보았다. 💡필터링 조건 1. 사용자가 입력한 도서관 이름 필터링 사용자가 전체 도서관이 아니라 특정 도서관을 선택했을 때 해당 도서관에 있는 도서들만 검색...

✨리액트에서 쿼리스트링 사용하기 1. useParams 공식문서 현재 URL의 동적 경로를 반환하는 react-router-dom의 hook입니다. Route에서 :id와 같이 동적으로 설정된 path를 찾을 때 사용한다. 여러 개의 동적 경로를 추출할 수도 있습니다. 💡예시 import { Routes, Route, useParams } f...

젠킨스 (Jenkins) https://www.jenkins.io/ 자바로 작성된 오픈 소스 자동화 서버이며, 지속적 인도 프로세스를 구축하는데 사용되고 있습니다. 장점으로는 유연성과 확장성이 있습니다. 📘젠킨스 특징 다양한 프로그래밍 언어 지원 플러그인을 통한 확장 (사용자가 직접 플러그인을 작성하여 젠킨스의 기능을 확장할 수도 있음...

3월 11일 부트캠프 강의를 수강하며, unbuntu apt을 사용하여 helm 패키지를 설치하는 과정에서 오류가 발생하였다. Helm을 받아오기 위한 apt repo 설정을 하면 다음과 같은 메시지가 출력되어야하는데, 줄바꿈되어 출력되었다. 성공 메세지 deb [arch=amd64 signed-by=/usr/share/keyrings/h...

쿠버네티스 기본 사용법 포드 생성 kubectl run <포드이름> --image=<이미지 지정> 예시 kubectl run nginx-pod --image=ngix 결과 pod/nginx-pod created 조회해보면, nginx-pod가 조회됨 kubectl get pods NAME ...

마이크로서비스 아키텍처(microservice architecture; MSA) 응용 시스템 개발 및 구성을 위한 아키텍처 스타일의 하나 이에 비교하여 전통적인 방식의 아티켙거를 모놀리식 아키텍처라고 부르기도 함 애플리케이션이 서비스 모음으로 개발되어 각 마이크로 서비스는 특정한 기능을 수용하고 개별 작업을 처리 #쿠버네티스 ...

✨컨테이너 안의 파일들에 접근하는 방법 1.실행하고 있는 컨테이너와 호스트 사이의 파일 복사하기 컨테이너 안의 파일의 파일을 호스트로 복사해올 수도 있고, 호스트에 있는 파일을 복사해서 컨테이너에 집어넣을 수도 있음 docker cp 실습 1. 도커 컨테이너, 이미지 만들기 docker run --rm -d -p 8080:80 --name...

✨도커 컨테이너에 환경변수 전달 (2가지) 프로젝트 기본 구성 ● 이미지 이름 hello:0.1 ● 폴더 구조 ├── Dockerfile └── hello.py ● Dockerfile 내용 # 베이스 이미지 설정 FROM ubuntu:22.04 # 패키지 설치 RUN apt-get update && apt-get inst...

도커 이미지 만들기 1. docker를 사용해서 httpd 이미지에서 쉘을 실행하기 $ docker run -it httpd /bin/bash 명령어 뜯어보기 docker run: docker 컨테이너 실행 -it: 컨테이너와 상호작용하기 위한 옵션 i: interactive(대화형)를 의미, 표준 입력을 유지하고...

컨테이너 가상화와 도커 📘가상화? (virtualization) 컴퓨팅 자원(리소스)의 추상화를 일컫는 광범위한 용어 물리적인 컴퓨팅 자원의 특징을 다른 시스템, 응용 프로그램, 최종 사용자들이 자원과 상호 작용하는 방식으로부터 감추는 기술입니다. 즉, 컴퓨터 안에 또 다른, 가상의 컴퓨터가 존재하도록 하는 기술 ■ 가상화 컴퓨텅의 장점 ...

24년 3월 7일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 1. 학습할 내용들 📘CI Pipeline 구성 (지속적 통합 파이프라인) 깃허브 레포지토리에 코드 커밋이 발생할 때마다 빌드, 단위 테스트, 정적 분석 등을 실행하도록 설정하는 단계입니다. 📘자동 인수 테스트 docker와 jenkins를 결합하여 인수 테스트 환경...

Book store 프로젝트에서 반응형 사이트로 만들기 위해 @media screen을 사용하고자 하였는데, 다음과 같은 오류가 발생하였다. ( expectedts-styled-plugin(9999) 문제가 되었던 코드 const HeaderStyle = styled.header` // 기존 스타일 코드 생략 @media scre...

intersection Observer https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API 1. 소개 요소가 뷰포트(화면)에 관찰되는지, 즉 관찰하는 요소가 지금 화면에 보이는지 아닌지를 구별하는 기능을 제공한다. 비동기적으로 실행되기때문에 메인 스레드에 영향을 주지 ...

✨useMutation https://tanstack.com/query/latest/docs/framework/react/reference/useMutation 1. 소개 useMutation 훅은 서버의 데이터를 변경하기 위해 사용되는 훅입니다. 이 훅은 HTTP의 PUT, POST, PATCH, DELETE 요청에서 사용됩니다. 서버의 데이터...

✨useInfiniteQuery https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery 1. 소개 useInfiniteQuery 훅은 useQuery처럼 서버 데이터를 가져오기 위해 사용되는 훅입니다. useQuery와 다른 점은 useInfiniteQue...

Book store 클라이언트 서버를 구축하던 도중, 서버에서 데이터를 가져오는 로직을 tanstack query를 사용하는 방식으로 변경하던 도중 발생한 오류이다. useQuery의 첫번째 인자에서 다음과 같은 오류가 발생했다. No overload matches this call. Overload 1 of 3, '(options: Undefin...

✨useQuery https://tanstack.com/query/latest/docs/framework/react/reference/useQuery 1. 소개 useQuery 훅은 서버 데이터를 가져오기 위해 사용되는 훅입니다. 별도의 상태나 이펙트를 작성하지 않아도 됩니다. 또한 데이터 요청에 대한 로직들을 한 곳에 작성할 수 있기 때문에 코...

✨useQueries https://tanstack.com/query/latest/docs/framework/react/reference/useQueries 1. 소개 useQueries은 useQuery처럼 서버 데이터를 가져오기 위해 사용되는 훅입니다. useQuery와 다른 점은 useQueries는 여러 데이터를 병렬로 가져올 때 사용한다...

✨tanstack Query(React Query) 공식 문서 TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching...

✨CRA 프로젝트에서 craco를 사용해서 절대경로 설정하기 💡절대 경로가 필요한 이유? 리액트에서 작성해둔 컴포넌트 혹은 유틸함수들을 가져올 때는 기본적으로 상대경로를 사용해서 가져온다. 폴더 안에 폴더가 많아져 (뎁스가 깊어지면) 코드가 복잡해지기 때문에, 상대 경로보다는 절대경로를 사용하는 경우가 많다. // 상대경로 import BookI...

💬 2월에 나는 무엇을 했나 ■ 부트캠프 스프린트3 프로젝트 (프론트엔드 프로젝트) 스프린트3 프로젝트가 시작되었다. 스프린트2 때 만들었던 백엔드 api를 . 클라이언트 서버(프론트엔드)를 개발하는 프로젝트이다. styled-components의 theme에 대해 깊게 생각해본적이 없었는데, 강의를 들으며 themeProvider를 사용하면...

JEST 페이스북에서 만든 자바스크립트 테스팅 라이브러리 공식 문서 [JEST Getting Started] 💻설치 방법 ※ create-react-app으로 설치한 경우에는 별도로 설치하지 않아도 됨 vite typescript 프로젝트에서 설치하기 1. 패키지 설치하기 npm install --save-dev -D jest @types/...

✨잘못된 경로로 진입했을 때 오류 처리하는 방식 route path="*"를 사용하는 방식과 errorElement를 사용하는 방식이 있다. 📘 1. route path=”*” 모든 경로에 대해 일반적인 경로를 정의할 때 사용 /*때문에 모든 경우와 일치 주로 경로가 잘못되었을 때 Notfound 오류를 처리하기 위해 사용 잘못된...

✨react router - errorElement 번역 react router 공식 문서 - error-element errorElement loaders, actions 또는 component 렌더링에서 예외가 발생할 때 일반적인 라우팅 렌더(Route element) 대신 오류 경로(Route errorElement)가 렌더링됩니다. ...

부트캠프 스프린트3 프로젝트를 진행하며, jest로 테스트 코드를 작성하는데 아래 사진처럼 jest 함수들에 밑줄이 쳐지면서 is not defined라는 eslint 오류가 발생하였다. 알고 보니, eslint가 jest의 함수들을 인식하지 못하는 상태였고, eslintrc 파일에 jest를 인식할 수 있도록 코드를 추가했더니 오류가 해결되었다...

✨웹 컴포넌트 스타일링 관리 CSS-in-JS, CSS-in-CSS 📘 CSS-in-CSS 기존의 CSS를 사용하여 스타일을 관리하는 방식 CSS의 전처리기를 사용하여 스타일을 구조화하고 관리 가장 대표적인 CSS 전처리기는 Sass(SCSS) CSS modules ■ CSS-in-CSS 특징 쉬운 사용방법: 기존 CSS를...

✨스타일드 컴포넌트에서의 GlobalStyle, theme 스타일드 컴포넌트는 CSS-in-JS의 대표적인 라이브러리이다. 📘 GlobalStyle GlobalStyle에는 주로 전역 스타일을 작성 브라우저별 기본 스타일을 재정의하는 reset css같은 코드들을 작성 전체 애플리케이션에 적용되는 스타일을 작성 (글꼴, 배경색, 폰트 ...

✨불변성? 값이나 상태를 변경되지 않는 것s 기존의 상태 값을 변경하지 않고, 새로운 상태값을 추가하는 것 🔍리액트에서 불변성을 지켜야하는 이유? 리액트는 컴포넌트가 가지고 있는 props와 state의 이전, 이후의 값을 확인하고, 업데이트를 처리하기때문이다. 기존의 상태 값과 새로운 상태값이 동일하다면 변경된 것을 감지하지 못해 업데...

✨리액트 state 컴포넌트의 데이터(상태) 함수형 컴포넌트에서는 useState를 사용하여 상태를 관리한다. 📘useState() import { useState } from "react"; const [state, setState] = useState(); state: 렌더링 간에 데이터를 유지하기 위한 state 변수 setS...

✨리액트 state 리액트는 UI 트리를 통해 각 state가 어떤 컴포넌트에 속해있는지 위치를 파악합니다. 위치를 파악하고, state를 보존할지 초기화할지 결정합니다. 📘같은 위치의 “같은” 컴포넌트는 state를 보존 JSX마크업에서의 위치가 아닌 UI트리에서의 위치가 같은 컴포넌트는 state를 보존 예시 See the Pen ...

✨코드 분할 (code splitting) React 공식 문서 - code-splitting 리액트는 webpack과 같은 번들러을 사용해서, 여러개의 파일을 하나로 병합한 파일을 웹 어플리케이션에 적용을 합니다. 번들은 여러개의 파일을 하나로 병합한다는 장점이 있지만, 파일의 용량이 커지면 번들도 커지기 때문에 처음 화면에 진입할 때 데이터를 ...

✨리액트에서의 key React 공식 문서 - React에서 Key가 필요한 때와 이유 리액트에서는 Key 프롭을 사용해서 컴포넌트의 동일성을 식별합니다. 따라 key는 고유해야하며, key는 변경되어서는 안됩니다. 또한 리렌더링을 최적화합니다. 고유한 key를 가지고 있다면, 리액트는 변경된 내역만 확인하고 다시 렌더링하여 성능을 향상시킵니다....

✨InterSection Observer API 특정 요소가 뷰포트 내에서 얼마나 보이는지를 비동기적으로 감지하는 기능을 수행합니다. 📘 사용방법 1. Observer 생성 new IntersectionObserver를 사용하여 Observer를 생성하고, 콜백함수와 옵션을 설정 const observer = new IntersectionOb...

✨React에서의 render와 paint render : DOM을 구성하기 위해 각 엘리먼트의 속성을 계산하는 과정 paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 ✨useEffect React 공식문서 - useEffect 📘useEffect 실행 단계 component → Render → Paint → ...

✨Mount 컴포넌트가 페이지에 처음 렌더되는 단계 1. Run lazy initializers useState와 useReducer의 lazy initializers는 초기 상태 계산을 하는데 사용이 된다. 또한 처음 렌더링될 때 한번만 사용이 되고(mount 단계에서만 실행), 초기값으로 할당된다. 2. Render 작성된 JSX를 가...

marign 여백을 설정하는 css 속성 📘margin 공식문서 [mdc] margin margin: 상단 우측 하단 좌측 여백 설정 margin-top: 상단 여백 설정 margin-right:우측 여백 설정 margin-bottom:하단 여백 설정 margin-left:좌측 여백 설정 ■모든 사이드 여백 동일하게 설정...

andy Bell이 작성한 modern css reset을 한국어로 번역한 글을 읽고 작성한 글 📘폰트 크기의 팽창을 방지 /* 폰트 크기의 팽창을 방지합니다. */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } ...

React Router의 Outlet vs React의 children 📘React Router의 Outlet An “Outlet” should be used in parent route elements to render their child route elements. This allows nested UI to show up when ch...

24년 2월 5일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 실습 - 커피샵 홈페이지 만들기 패키지 react typescript vite react-bootstrap styled-components 구현 커피아이템 커피 아이템 3개씩 보여주기 더보기 버튼 클릭 시 커피아이템 3개 추가 커피...

vite 프로젝트를 gh-pages로 배포하기 위해 basename을 process.env.PUBLIC_URL로 설정하였더니 Uncaught ReferenceError: process is not defined 오류가 발생하였다. 찾아보니 vite는 cra와 달리 process.env를 제공하지 않기 때문에 import.meta.env를 ...

24년 2월 2일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 실습 - 게시글 등록/삭제 전체코드 ✨App.tsx import { useState } from "react"; import "./App.css"; import Post from "./Post"; import AddPost from "./AddPost"; import ...

24년 2월 1일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. useState() 리액트에서 상태를 관리할 때 사용하는 hook 📘문법 import { useState } from "react"; function App() { const [state, setState] = useState(initialState); ...

24년 1월 31일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 리액트 📘SPA (single Page Application) 한개의 페이지로 이루어진 애플리케이션을 의미 필요한 부분만 재렌더링해서 가져오는 방식 ■ 단점 규모가 커지면 초기에 로딩해야하는 자바스크립트 파일, CSS 번들 파일의 용량이 증가 검색 엔진 최...

JSDoc 공식 문서 문서화를 위해 생겨난 문법 /** */형태로 작성 IDE나 문서 자동화 도구가 읽어 자바스크립트를 문서화하는 것이 목적이다. 하지만 주석으로 작성하여, 사람이 읽고 이해하는데 도움을 주기도 한다. 📘JSDoc을 주석으로 사용하면 좋은 점 제대로 작성하면 typescript처럼 사용할 수 있다 I...

https://school.programmers.co.kr/learn/courses/30/lessons/12949 📔 문제 설명 2차원 행렬 arr1과 arr2를 입력받아, arr1에 arr2를 곱한 결과를 반환하는 함수, solution을 완성해주세요. 💡 입출력 예 arr1 arr2 retur...

https://school.programmers.co.kr/learn/courses/30/lessons/12945 📔 문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 ...

24년 1월 30일 강의를 들은 내용을 기록한 글입니다. 타입스크립트 📘객체리터럴 해당 값의 집합 중에 하나로 타입을 제한하는 것 허용되는 타입이 정해져있기 때문에 코드 가독성이 좋음 잘못된 값이 들어오는 것을 방지할 수 있음 (엄격함) ■ 문자열 리터럴 let status: "success" | "error"; status =...

24년 1월 29일 강의를 들은 내용을 기록한 글입니다. 타입스크립트 자바스크립트 프로젝트가 커지면 코드 관리가 어렵고, 디버깅이 어려워진다는 단점이 있다. 이를 보완하기 위해 사용하는 것이 타입스크립트이다. => 자바스크립트 + 타입 체크 📘타입 체크? 자바스크립트에서는 변수의 데이터타입을 명확하게 알 수 없어서 안정성이 떨어진다...

vscode font 변경하기 강의를 듣다보면 코드 중에 =>이나 !== 기호들이 예쁘게 포맷팅되어 있는 것을 보았다. 예쁘기도 하고, 코드가 깔끔해보여서 나도 적용하였다. ■ 적용 전 ■ 적용 후 📘적용 방법 1. devfonts 홈페이지에서 원하는 폰트를 다운 받기 2. 컴퓨터 제어판-글꼴에 다운받은 폰트 설치하기 3. v...

VS Code 내장 기능 - bracket pair colorization 강사님이 VS Code extensions들 중 괄호의 열고 닫음을 보기 편하게 도와주는 bracket pair colorization을 추천하셨다. 그러나 밑줄이 쳐져있었고, 아래 설명을 읽어보니 VS Code에 기본 제공되기 때문에 사용되지 않는다고 적혀있었다. 📘...

https://school.programmers.co.kr/learn/courses/30/lessons/1845 📔 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종...

https://school.programmers.co.kr/learn/courses/30/lessons/12912 📔 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 💡 입...

https://school.programmers.co.kr/learn/courses/30/lessons/12906 📔 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때...

https://school.programmers.co.kr/learn/courses/30/lessons/12901 📔 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일...

https://school.programmers.co.kr/learn/courses/30/lessons/12930 📔 문제 설명 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을...

https://school.programmers.co.kr/learn/courses/30/lessons/12926 📔 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 “AB”는 1만큼 밀면 “BC”가 되고, 3만큼 밀면 “DE”가 됩니다. “z”는 1만큼 밀면 “a”...

💬 1월에 나는 무엇을 했나 ■ 부트캠프 스프린트2 프로젝트 (백엔드 API 설계) 이번 달은 node.js + expresss를 사용하여 API 설계하는 프로젝트를 진행하였다. 프론트엔드 프로젝트만 해보다가 처음으로 백엔드 프로젝트를 진행하게 되었다. 주로 리액트라는 프레임워크를 사용해서 nodejs는 단순히 패키지를 설치하거나, 개발 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12969 📔 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문...

https://school.programmers.co.kr/learn/courses/30/lessons/12969 📔 문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 💡 입출력 예 입력 5 3 출력 ***** *****...

https://school.programmers.co.kr/learn/courses/30/lessons/12935 📔 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]...

https://school.programmers.co.kr/learn/courses/30/lessons/12982 📔 문제 설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서...

https://school.programmers.co.kr/learn/courses/30/lessons/42840 📔 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4,...

https://school.programmers.co.kr/learn/courses/30/lessons/42748 📔 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 ...

24년 1월 26일 강의를 들은 내용을 기록한 글입니다. 클래스 사용자 정의 데이터타입 추상적인 데이터타입 구조체와 비슷 클래스 = 멤버변수 + 멤버 함수 📘클래스 구조 사물의 특성을 정리하여 필드와 메소드로 표현하는 과정 => 추상화 추상된 결과를 하나의 클래스에 포함시키고 스스로 보호하는 것이 캡슐화 ■ ...

24년 1월 25일 강의를 들은 내용을 기록한 글입니다. 구조체 서로 다른 종류의 변수들을 묶어서 새로운 데이터 타입을 정의하는 것 문자형 정수형 실수형 포인터 배열 📘구조체 사용하는 이유 연광된 변수들을 하나로 묶어서 관리하기 위해 데이터 관리에 유용함 =>데이터 양이 많아지면 구조체가 유리함 ■ 예...

24년 1월 24일 강의를 들은 내용을 기록한 글입니다. 반복문 📘break 반복문 내부에서 특정 조건이 되면 break;를 사용해서 반복문을 종료시킬 수 있음 ■ 예제 while (1) { if (i > 100) break; // while문 탈출 } console.log("a는 100보다 큽니다"); let a = 0; wh...

24년 1월 23일 강의를 들은 내용을 기록한 글입니다. 연산자 📘산술연산자 사칙 연산 종류 의미 + 왼쪽과 오른쪽 값 더하기 - 왼쪽에서 오른쪽 빼기 * 왼쪽과 오른쪽 곱하기 ...

https://school.programmers.co.kr/learn/courses/30/lessons/42577 📔 문제 설명 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 9...

https://school.programmers.co.kr/learn/courses/30/lessons/17681 📔 문제 설명 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도...

24년 1월 22일 강의를 들은 내용과 추가로 공부한 내용을 기록한 글입니다. 개발의 3단계 구상 (추상화) 설계 (추상화를 문서화) 구현 프로그래밍 언어란? 사람과 컴퓨터 간의 통신 수단 📘프로그래밍 언어 종류 기계 중심의 언어 (하드웨어적) 인간 중심의 언어 ...

https://school.programmers.co.kr/learn/courses/30/lessons/17682 📔 문제 설명 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정...

https://school.programmers.co.kr/learn/courses/30/lessons/12977 📔 문제 설명 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의...

서버는 stateless 하기때문에 사용자의 정보를 저장할 수 없다. 따라서 우리는 로그인을 유지하기 위해 token을 사용한다. 📖 Access token, refresh token의 개념 #Access token 클라이언트가 서버에게 유효한 사용자임을 검증받기 위해 사용하는 토큰이다. 해커가 토큰을 탈취하여 사용할 수 없도록 보통은 ...

https://school.programmers.co.kr/learn/courses/30/lessons/67256 📔 문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 ...

https://school.programmers.co.kr/learn/courses/30/lessons/42889 📔 문제 설명 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. ...

https://school.programmers.co.kr/learn/courses/30/lessons/68644 📔 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 💡...

node.js에서 가장 많이 사용되는 오류를 처리하는 방식 1. 객체를 활용 ■ 장점 오류 유형과 메세지를 빠르게 조회할 수 있음 중앙 집중식으로 오류 코드와 메세지를 관리할 수 있음 ■ 단점 오류 유형이 추가될 때마다 객체를 업데이트 해야함 ■ 사용 상황 오류 유형이 많지 않고, 특정한 오류 메세지나 코드에 대한 ...

MVC 아키텍처 MVC? 모델-뷰-컨트롤러 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다 -mdn 공식 문서- ■ 모델-뷰-컨트롤러란? 1. 모델: 데이터와 데이터를 처리하는 로직을 관리 처리되는 알고리즘,데이터베이스에 저장된 정보를 CRUD하는 작업, 비즈니스 ...

https://school.programmers.co.kr/learn/courses/30/lessons/64061 📔 문제 설명 게임개발자인 “죠르디”는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. “죠르디”는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 “1 x 1” 크...

https://school.programmers.co.kr/learn/courses/30/lessons/42576 📔 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 c...

https://school.programmers.co.kr/learn/courses/30/lessons/12921 📔 문제 설명 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 💡 입출력 예 ...

소수를 판별하는 알고리즘 소수란? 1과 자신 이외의 자연수로 나눌 수 없는 자연수 에라토스테네스의 체란? 수학에서 소수를 찾는 빠르고 쉬운 방법 알고리즘 2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. 2는 소수이므로 오른쪽에 2를 쓴다 자기자신을 제외한 2의 배수를 모두 지운다 남아있는 수 중 3은 소수이므로 오른...

for…in 과 for…of의 차이 for…of mdn 공식 문서 - for…of 반복가능한 객체에 대해 반복하는 반복문 반복가능한 객체 array map set string arguments 예제 const array1 = ["a", "b", "c"]; for (const element of array1) { ...

SELECT cartItems.id, book_id, title, summary, price, quantity FROM cartItems LEFT JOIN books ON cartItems.book_id = books.id WHERE user_id = ? AND cartItems.id IN (?) -- parameter [ 2, [ 2, 4 ] ]...

다른 테이블에서 FK를 등록하려고 했더니 발생한 오류 Operation failed: There was an error while applying the SQL script to the database. Executing: ALTER TABLE `bookstore`.`cartitems` ADD INDEX `user_id_idx` (`user_id` ...

https://school.programmers.co.kr/learn/courses/30/lessons/42862 📔 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게...

https://school.programmers.co.kr/learn/courses/30/lessons/258712?language=javascript 📔 문제 설명 선물을 직접 전하기 힘들 때 카카오톡 선물하기 기능을 이용해 축하 선물을 보낼 수 있습니다. 당신의 친구들이 이번 달까지 선물을 주고받은 기록을 바탕으로 다음 달에 누가 선물을 많이 ...

풀스택 부트캠프 스프린트2 프로젝트를 진행하던 도중, 도서 검색시 페이지를 나눠서 조회할 수 있도록 하는 API를 설계할 때 발생한 오류이다. values (바인딩 매개변수)도 숫자 타입으로 잘 들어가는데, Incorrect arguments to mysqld_stmt_execute 오류가 발생 오류 예1 request ...

타입스크립트로 프로젝트를 진행하던 도중 src 폴더 안에 있는 이미지를 불러올 때 이미지 경로 오류가 발생했다. TS2307: Cannot find module 'assets/img/todoListTip.png' or its corresponding type declarations. 타입스크립트가 .png 이미지 파일을 모듈로 읽을 수 없기 때문...

강의를 듣기 전에 비밀번호 암호화로 유명한 Bcrypt 라이브러리를 사용하여 회원가입한 유저의 비밀번호를 암호화하는 로직을 작성했었다. 오늘 부트캠프 강의를 들으며 강사님이 nodejs의 내장 모듈인 crypto를 사용해서 암호화하는 내용을 보고 차이점이 궁금해 추가로 학습하였다. 📕비밀번호 암호화 방식 #단방향 암호화 평문을 암호화시킬 수 있음...

https://school.programmers.co.kr/learn/courses/30/lessons/77484?language=javascript 📔 문제 설명 로또 6/45(이하 ‘로또’로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 ...

24년 1월 2일 강의를 들은 내용과 추가로 공부한 내용을 기록한 글입니다. 비밀번호 암호화 #단방향 암호화 평문을 암호화시킬 수 있음 단, 암호화를 평문으로 변환은 할 수 없음 #양방향 암호화 평문을 암호화 시킬 수 있으며, 암호화를 평문으로 변환할 수 있음 #node.js의 내장 모듈인 crypto를 사용하여 암호화 단순 Hash를 통...

https://school.programmers.co.kr/learn/courses/30/lessons/86491 📔 문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은...

https://school.programmers.co.kr/learn/courses/30/lessons/82612 📔 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2...

https://school.programmers.co.kr/learn/courses/30/lessons/92334 📔 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제...

23년 12월 29일 강의를 들은 내용을 기록한 글입니다. express-generator 프로젝트 구조 및 내용 #bin/www 포트번호 등과 같은 웹 서버를 구축하는데에 필요한 설정 데이터가 정의되어 있는 파일 .env 파일과 같이 설정 값을 가지고 에러 처리, 기타 추가 설정을 해주는 파일 #node_modules 프로젝트에 필요한 모듈...

https://school.programmers.co.kr/learn/courses/30/lessons/131128 📔 문제 설명 두 정수 X, Y의 임의의 자리에서 공통으로 나타나는 정수 k(0 ≤ k ≤ 9)들을 이용하여 만들 수 있는 가장 큰 정수를 두 수의 짝꿍이라 합니다(단, 공통으로 나타나는 정수 중 서로 짝지을 수 있는 숫자만 사용합니...

https://school.programmers.co.kr/learn/courses/30/lessons/131128 📔 문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호 ...

https://school.programmers.co.kr/learn/courses/30/lessons/131705 📔 문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2...

사이트를 이용해서 뱃지 만들기 https://shields.io/ 규칙 사용해서 뱃지 만들기 <img src="https://img.shields.io/badge/{스킬이름}-{배경색상코드}.svg?&style=for-the-badge&logo={로고이름}&logoColor={로고색상}" />; 예시 ...

타이틀을 변경하니 로컬에서는 오류가 발생하지 않아서… github에 업로드하였으나 다시 오류가 발생하였다. ------------------------------------------------ Jekyll 4.3.2 Please append `--trace` to the `build` command ...

25일까지는 배포가 잘 되던게 26일에 배포하려고 깃허브에 업로드 하니 오류가 발생하였다. ##[debug]Evaluating condition for step: 'Setup Ruby' ##[debug]Evaluating: success() ##[debug]Evaluating success: ##[debug]=> true ##[debug]Res...

💬 12월에 나는 무엇을 했나 ■ 백엔드API 학습 및 실습 이번달은 express를 사용하여 REST API를 설계하는 실습을 주로하였다. 올해 초에 express와 mysql를 이용하여 대시보드앱의 일정과 할일 API와 데이터베이스를 설계한 적이 있어 무리없이 잘 따라갈 수 있었다. 이번 실습을 진행하며 배웠던 내용들을 토대로 리팩토링을 ...

[실무 역량 과제]데이터 분석 및 조작 문제를 응시했을 때 나타난 오류 문제에서 제공한 파일 경로로 정답을 작성하였으나, 채점 시 해당 파일을 찾을 수 없다는 오류가 발생함 하단 링크를 통해 오류 내용을 확인하였음 https://asgmt-guide.oopy.io/14a34439-3874-4327-a9d5-5d7d98b10ac2 http...

📒인증, 인가 인증 (Authentication) 인증은 신원을 확인하는 프로세스입니다. 비밀번호, 하드웨어 토큰, 기타 여러 방법을 사용해야 합니다. 인가 (Authorization) 인가는 인증 이후의 프로세스입니다. 인증된 사용자가 어떠한 자원에 접근할 수 있는지를 확인하는 절차가 바로 인가이다. 비교 사이트에 가입된 사용자라는 ...

23년 12월 25일 강의를 들은 내용을 기록한 글입니다. 📒인증, 인가 인증 (Authentication) 인증은 신원을 확인하는 프로세스입니다. 비밀번호, 하드웨어 토큰, 기타 여러 방법을 사용해야 합니다. 인가 (Authorization) 인가는 인증 이후의 프로세스입니다. 인증된 사용자가 어떠한 자원에 접근할 수 있는지를 확인하는 절차...

https://school.programmers.co.kr/learn/courses/30/lessons/133499 📔 문제 설명 머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 “aya”, “ye”, “woo”, “ma” 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 ...

https://school.programmers.co.kr/learn/courses/30/lessons/133499 📔 문제 설명 과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다. 한 상자...

23년 12월 22일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 유효성 검사 사용자가 입력한 값에 대한 유효성(타당성)을 검사 express-validator express-validator npm 문서 설치 npm install express-validator 사용방법 const { body, param, valida...

정규표현식 정규표현식 플레이그라운드 정규표현식 문제 풀어보기 #Groups and ranges 구분 뜻 \| 또는 () 그룹 [] 문자셋, 대괄호 안에 어떤 문자든 ...

23년 12월 21일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. db 모듈화하기 mysql 모듈 가져오고, db연결하는 코드를 모듈화 시키기 const mysql = require("mysql2"); // create the connection to database const connection = mysql.create...

IsNever never인지 판단하는 타입 type IsNever<T> = [T] extends [never] ? true : false; IsAny any타입인지 판단하는 타입 type IsAny<T> = string extends number & T ? true : false; number &...

23년 12월 20일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. GUI로 데이터베이스 사용해보기 mysql 공식문서 - workbench 사용법 사용방법 쿼리문을 사용하려면, 사용할 데이터베이스 더블클릭해서 활성화 시키기 WORKBENCH로 테이블 생성하기 tables에 오른쪽 버튼을 클릭하고 create ta...

외래키 등록을 위해 CLI로 명령어을 입력했을 때 발생한 오류 mysql> alter table posts -> add foreign key (user_id) -> references users (id); ERROR 1452 (23000): Cannot add or update a child row: a foreig...

23년 12월 19일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 실습 - DB 테이블 생성해보기 (CLI) mysql docs 지난시간에 작성했던 게시글 DB 테이블 생성하기 1. “board” 스키마 생성 CREATE DATABASE board; USE board; 2. 사용자 테이블 생성 CREATE TABLE us...

https://school.programmers.co.kr/learn/courses/30/lessons/133502# 📔 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서...

https://school.programmers.co.kr/learn/courses/30/lessons/134240 📔 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼...

https://school.programmers.co.kr/learn/courses/30/lessons/134240 📔 문제 설명 오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다. 정답은 아무에게도 말하지 마세요. 콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 > 20개를 가져다주...

https://school.programmers.co.kr/learn/courses/30/lessons/138477 📔 문제 설명 “명예의 전당”이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가...

23년 12월 18일 강의를 들은 내용과 추가로 학습한 내용을 기록한 글입니다. 데이터베이스 (Database)? 데이터를 효율적으로 관리하기 위한 집합체 DBMS (DataBase Management System)? 데이터베이스를 운영하고 관리하기 위해 DBMS를 통해 데이터베이스를 사용함 운영회사는 다르지만, 연산을 요...

if else 조건문 리팩토링 하기 - 소셜 로그인 [Javascript 미세팁] if else 리팩토링 #1 (feat. 객체 + 함수)을 보고 정리한 내용입니다. 조건문 코드 개선해보기 네이버, 페이스북, 구글, 카카오 등 소셜 로그인 로직을 작성해보자. ■ if else문으로 작성해보자. const naverLogin = (i...

typeof 연산자 사용 function StrOrNum(param: string | number) { if (typeof param === "string") { param; // string } else if (typeof param === "number") { param; // number } else { para...

ENUM (열거형) 원래 자바스크립트에는 없는 타입이지만, 자바스크립트의 값으로 사용할 수 있는 특이한 타입 여러 상수를 나열하는 목적으로 사용함 enum Level{ NOVICE, INTERMEDIATE, ADVANCED, MASTER } enum에 존재하는 이름을 멤버라고 부른다. 위의 코드에서는 NOVICE, INTERMED...

함수 매개변수 function example(a: string, b?: number, c = false) {} example("hi", 123, true); example("hi", 123); example("hi"); a: 필수로 있어야하는 매개변수 b: ?, 있어도 되고 없어도 되고 c: 기본값으로 false 설정 나머지 매...

타입스크립트 합집합과 교집합 & : 교집합 | : 합집합 전체 집합은 unknown string 이면서 boolean인 것은 존재하지 않기때문에 교집합은 never type A = string | boolean; type B = boolean | number; type C = A & B; // type C = str...

Interface에서의 상속 extends를 사용하면 상속 받아서 사용할 수 있다. interface Animal { name: string; } interface Dog extends Animal { bark(): void; } interface Cat extends Animal { meow(): void; } 타입별칭에서의 상속 ...

객체 리터럴을 대입했는지, 변수를 대입했냐에 따라 타입 검사 방식이 달라짐 객체 리터럴? 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법 중괄호{} 안에 프로퍼티를 정의함 객체 리터럴로 대입했을 때? 잉여 속성 검사가 실행됨 타입 선언에서 선언하지 않은 속성을 사용할 때 에러를 표시하는 것을 의미 interface E...

컨디셔널 타입 조건에 따라 다른 타입이 되는 타입 특정 타입 extends 다른 타입 ? 참일 때 타입 : 거짓일 때 타입 type A1 = string; type B1 = A1 extends string ? number : boolean; // type B1 = number type A2 = number; type B2 = A2 ex...

제네릭 함수처럼 사용하기 자바스크립트에서는 중복이 있다면 함수를 이용해 중복을 제거한다. const person1 = { type: "human", race: "yellow", name: "zero", age: 28 }; const person2 = { type: "human", race: "yellow", name: "h...

any 특정 값으로 인해 유형 검사 오류가 발생하는 것을 원하지 않을 때마다 사용하는 특수 유형 JSON.parse, fetch()함수를 사용하면 타입스크립트는 any를 반환한다. fetch("url") .then((response) => { return response.json(); }) .then((result) =&g...

name spaces 라이브러리를 가져다 쓰다보면 남이 만든 인터페이스와 의도치 않게 병합되는 경우들이 생기는데, 이러한 병합을 방지하기 위해 사용하는 인터페이스 타입스크립트 공식 문서 - name spaces namespace Example { interface Inner { test: string; } type test = ...

구조적 타이핑 모든 속성이 동일하면 객체 타입의 이름이 다르더라도 동일한 타입으로 취급한다. interface Memory { amount: number; unit: string; } type Memory2 = { amount: number; unit: string; }; const liter: Memory = { amount: 1,...

객체의 키, value 타입 구하기 object의 key 타입 구하려면 keyof 객체타입 value 타입을 구하려면 typeof object명[Key의타입] const obj = { hello: "world", name: "hyemin", age: 28 }; // key의 타입 구하기 type Keys = keyof t...

! (not-null assertion) null과 undefined가 아님을 주장하는 연산자 param이 null이나 undefined일 수도 있으니 책임하에 사용해야한다. 타입스크립트 공식 문서 - non-null-assertion function a(param: string | null | undefined) { param.slice(3...

as const 값이 변하지 않는 것이 확실할 때 사용 (타입 고정) readonly 속성이 붙음 const obj = { name: "Hyemin" } as const; // const obj: { readonly name: "Hyemin"; } const arr = [1, 3, "five"] as const; // const arr: rea...

23년 12월 15일 강의를 들은 내용을 기록한 글입니다. 실습 1 - 채널, 회원 합치기 (Router) app.js를 만들어서 라우팅 관리하기 app.js : 하나의 서버에서 routes : 라우팅 # 디렉토리 구조 ├── node_modules ├── routes │ ├── channels.js │ └── members....

https://school.programmers.co.kr/learn/courses/30/lessons/147355 📔 문제 설명 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성...

https://school.programmers.co.kr/learn/courses/30/lessons/140108?language=javascript 📔 문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서...

https://school.programmers.co.kr/learn/courses/30/lessons/147355 📔 문제 설명 숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다. 각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니...

https://school.programmers.co.kr/learn/courses/30/lessons/142086 📔 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s=”banana”라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로...

23년 12월 14일 강의를 들은 내용을 기록한 글입니다. 로그인 로직 작성하기 db를 반복해서 돌면서 id와 pwd가 일치하는지 확인하기 //로그인 function isExist(obj) { return Object.keys(obj).length > 0 ? false : true; } function idMatch(db, id)...

약수? 어떤 수를 나누어떨어지게 하는 수 1.단순하게 약수 구하는 방법 1부터 약수의 크기까지 반복해서 돌면서 나누어 떨어지는 수 구하기 const getDivisors = (num) => { const divisors = []; for (let i = 1; i <= num; i++) { if (num % i === 0...

json parse를 위해 app.use(express.json())을 입력했는데도, body 값을 받아오지 못하는 오류 const express = require("express"); const app = express(); const db = new Map(); app.use(express.json()); // 회원가입 app.post(...

23년 12월 13일 강의를 들은 내용을 기록한 글입니다. 핸들러(handler) HTTP 요청이 날아오면 자동으로 호출되는 메소드 node.js 콜백 함수로 사용 // http Method로 path(url)이 날아오면 handler를 실행하겠다. app.httpMethod(path, handler); 자바스크립트에서의 == 과 ...

toReversed(),toSorted(),toSpliced() ECMA2023에 새롭게 추가된 배열관련 메소드 ■ toReversed() 반대로 뒤집은 새로운 배열을 반환 [toReversed - mdn 공식 문서] toReversed() reverse() 반대로 ...

Argument of type 'StateCreator<TodoState, [], [["zustand/devtools", never], ["zustand/persist", TodoState]]>' is not assignable to parameter of type 'StateCreator<TodoState, [], []>'. ...

23년 12월 12일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 실습 3 - 전체 조회 이어서 하기 app.get("/youtubers", (req, res) => { console.log(db.values()); res.json(db); }); 결과 { } values() 콘솔에 찍어보기 app.get(...

로그인/회원가입 클린 코드 비즈니스 로직 완전 정복

비즈니스 로직 액션을 일으키는 모든 함수들 주로 특정한 상황이나 조건에 따라 다르게 동작하도록 설계된, 말 그대로 어떠한 비즈니스에 맞춰진 작업 흐름 비즈니스 로직의 예시 가격 할인 로직 상황: “저희 책방에서는 매월 첫 구매 고객에게는 10% 할인을 제공할거에요. 또한, 특정 출판사와의 협약에 의해 해당 출판사의 책을 ...

https://school.programmers.co.kr/learn/courses/30/lessons/159994 📔 문제 설명 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로...

https://school.programmers.co.kr/learn/courses/30/lessons/150370 📔 문제 설명 고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤 약관으로 수집됐는지 알고...

23년 12월 11일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. POST 생성(등록)해주는 HTTP METHOD id, password, name, email, contact와 같은 개인정보는 숨겨서 보내는 것이 좋음 실습 - postman 사용해서 http method 사용해보기 GET const express = req...

https://school.programmers.co.kr/learn/courses/30/lessons/155652 📔 문제 설명 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. ...

23년 12월 8일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 객체 + map 실습 1 const db = new Map(); const notebook = { productName: "notebook", price: 2000000 }; const cup = { productName: "cup", price: ...

https://school.programmers.co.kr/learn/courses/30/lessons/161989 📔 문제 설명 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페...

https://school.programmers.co.kr/learn/courses/30/lessons/160586 📔 문제 설명 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어,...

https://school.programmers.co.kr/learn/courses/30/lessons/172928 📔 문제 설명 지나다니는 길을 ‘O’, 장애물을 ‘X’로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다. [“...

예전에 작업해두었던 todo list app에 새로운 기능을 추가하기 위해 서버를 실행시켰더니 발생한 오류이다 ERROR in ./src/style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/di...

23년 12월 7일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. req.params 연습 유튜브 채널 주소 활용해서 params 값 가져오기 https://www.youtube.com/@15ya.fullmoon https://www.youtube.com/@ddeunddeun https://www.youtube.com...

tailwind css https://tailwindcss.com/blog/automatic-class-sorting-with-prettier tailwind css는 이미 정의되어 있는 스타일 값을 가져와서 사용하는 것이기때문에 빠르게 개발할 수 있고, 일관된 디자인을 사용하기 때문에 협업하는데 좋다. 하지만 class에 모든 스타일 속성의 값이...

23년 12월 6일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. Express const express = require("express"); const app = express(); // GET 메소드로 '/'이 날아오면 // 매개변수로 전달받은 콜백 함수를 호출 => 서버에 세팅 app.get("/", function ...

https://school.programmers.co.kr/learn/courses/30/lessons/161990 📔 문제 설명 코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 ...

23년 12월 5일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. HTTP Method HTTP에 담아보내는 나의 목적 생성(=등록): POST 조회: GET 수정: PUT(덮어쓰기), PATCH(일부 변경) 삭제: DELETE HEAD, OPTIONS, CONNECT, TRACE ※ PATCH는 마이페이지...

https://school.programmers.co.kr/learn/courses/30/lessons/178871 📔 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 [“may”, “...

https://school.programmers.co.kr/learn/courses/30/lessons/178871 📔 문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 “mumu”, “soe”, “poe” 선수들이 순서대로 달리고 있...

https://school.programmers.co.kr/learn/courses/30/lessons/250137?language=javascript 📔 문제 설명 어떤 게임에는 붕대 감기라는 기술이 있습니다. 붕대 감기는 t초 동안 붕대를 감으면서 1초마다 x만큼의 체력을 회복합니다. t초 연속으로 붕대를 감는 데 성공한다면 y만큼의 체력을 ...

23년 12월 4일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. API? (application programming interface) 사전적 정의 컴퓨터나 컴퓨터 프로그램 사이의 연결 ※ interface: 중간에서 양쪽에 있는 친구들을 중재/매개체가 되어주는 역할 예를 들어, 지하철 도착 어플에서 지하철 데이터...

절차적 프로그래밍 언어 절차적 프로그래밍 (Procedural Programming Language) 절차적 프로그래밍 언어는 프로시저 호출의 개념을 바탕으로 하고 있는 프로그래밍 언어 명령형 프로그래밍이라고도 불림 ※ 프로시저 = 함수 특징 유지보수나 코드의 수정이 어렵다 복사해서 붙이지 않고도 같은 코드를 다른 곳에서 ...

상태 관리에 대한 3가지 접근 방식 Flux 저장소, 액션, 리듀서 등을 이용해서 상태를 업데이트하는 방식 Redux, zustand Proxy 컴포넌트에 사용되는 일부 상태를 자동으로 감지해서 업데이트 하는 방식 Mobx, Valtio ...

1. 11월에 나는 무엇을 했나 14일부터 부트캠프 시작!!! 오티날 앞으로 만나게 될 강사님들과 함께할 수강생들을 만났다. 풀스택 슬랙-자기소개를 보고 전공자, 경력자가 꽤 많아서 내가 따라가기 어려운 수업은 아닐까? 하고 고민을 많이했다. git & github CLI로만 커밋...

개발자 포트폴리오란? 블로그 오류 로그: 오류를 어떻게 해결했는지 작성하는 것이 매우 좋음!!! TIL: 잘한점, 어떤 것을 했는지, 아쉬운 점은 무엇인지 작성 공부: ...

스프린트1 프로젝트 만들기 1. HTML/CSS만 이용해서 나만의 포트폴리오 페이지를 만들기 배포 사이트 깃허브 코드 자바스크립트를 사용할 수 없기때문에 최대한 심플하게 만드려고 하였다. 내가 반응형 홈페이지 마크업하는 것을 홈페이지들을 넣었다. 마우스를 호버하면 프로젝트의 타이틀과 어떤 카테고리의 프로젝트인지 나타나도록 하였다....

JSX의 return <></> vs return null vs return undefined 1. return <></> JSX는 하나의 태그만을 반환하기 때문에 여러 엘리먼트를 그룹화할 때 사용한다. const App = () => { return ( <> &lt...

오류2 docker Error invoking remote method 'docker-start-container': Error: (HTTP code 500) server error - Ports are not available: exposing port TCP 0.0.0.0:3306 -> 0.0.0.0:0: listen tcp 0.0.0.0:...

오류1 docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.22.0 docker: error during connect: In the default daemon configuration on Windows, the docker client mu...

23년 11월 24일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 데이터베이스 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스라고 한다. 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 해준다. DBMS (DataBase Management System)...

23년 11월 23일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. node.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. https://nodejs.org/en ※ 런타임: 프로그램들을 실행할 수 있는 환경 자바스크립트를 스크립트 언어 이상으로 프로그래...

23년 11월 22일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. CSS (Cascading Style Sheets) HTML 태그를 꾸며주는 언어 ※ 방법 인라인 (inline) HTML 태그 안에 같이 작성 가장 우선순위가 높음 <!DOCTYPE html> <html lang="ko"> ...

프로그래밍 언어-기본문법2 명령문? 프로그램을 구성하는 문장, 지시사항을 처리하는 단위 조건문 - IF문 조건의 참,거짓 여부에 따라 실행 경로를 다르게 함 ● JAVA, C언어 if (조건문) { // 명령문; }else if(조건문){ // 명령문 } else{ // 명령문 } ● 파이썬 if 조건식: # 명령문 el...

프로그래밍 언어-기본문법 데이터 타입의 유형 구분 C언어 자바 논리형 Boolean 미지원 boolean 문자형 Character char char 문자열 str...

23년 11월 21일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 웹 이해 인터넷 (Internet) 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자 웹이란? (Web; World Wide Web) 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 ...

보안 취약성 식별 보안 취약성 (Vulnerability) 정보시스템에 불법적인 사용자의 접근, 정상적인 서비스 방해, 정보시스템에서 관리하는 중요 데이터의 유출/변조/삭제에 대한 위협 위협이 발생하기 위한 사전 조건으로 응용 프로그램의 보안 취약점, 위협 요소, 허점을 탐지하는데 도움을 줌 침투 테스트 (Penetration Test) 시스...

23년 11월 20일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 브랜치 이름 규칙 메인 브랜치 : 사용자들이 사용하는 버전 메인 브랜치는 사용자들이 사용하는 버전이기때문에, 브랜치를 이용해 프로젝트를 복제한 뒤에 기능을 개발하거나 오류를 수정해야함! 메인 브랜치에 바로 개발/오류 수정 등을 하면 큰일남!!! ■ 브랜치 5종...

개발환경 구축 개발 편의성, 개발 성능 향상을 위해 하드웨어 및 소프트웨어 개발환경을 구축하는 과정 개발환경 구축 도구 ■ 빌드 도구 작성한 코드의 빌드 및 배포를 수행하는 도구 Ant, Maven, Gradle ■ 구현 도구 프로그램 개발할 때 가장 많이 사용되는 도구 Eclipse,IntelliJ,Spring Tool...

호출 시그니처 생성 객체 인덱스 시그니처 함수를 다시 사용하기 위해 별도로 타입을 관리할 때 사용 interface Post { id: number; title: string; getLikeNumber: (like: number) => number; } const post1: Post = { id: 1, title: "po...

제네릭 예시1 매개변수에 직접 타입을 지정하기 function getArrayLength(arr: number[] | string[] | boolean[]): number { return arr.length; } getArrayLength([1, 2, 3]); getArrayLength(["a", "b", "c"]); getArrayLeng...

// Error! // Operator '+' cannot be applied to types 'string | number' and 'string | number'.(2365) function add(x: string | number, y: string | number): string | number { return x + y; } 위와 같은...

타입스크립트 자바스크립트에 타입을 부여한 언어 동적인 자바스크립트는 런타임동작에 타입 오류를 확인하지만, 정적인 타입스크립트는 컴파일(자바스크립트로 변환)단계에서 오류를 확인함 자바스크립트 코드를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 도와줌 코드를 더 쉽게 읽고 이해할 수 있음 코드 유형 검사를 통해 자바스크립트를 작성할 때 ...

타입별칭, 인터페이스는 타입의 이름을 지정하는 방법 매우 유사하며, 자유롭게 선택 가능 차이점 1 - 확장 interface: extends 키워드를 이용하여 확장 type: intersection Operator를 이용하여 확장 // interface interface Animal { name: string; } interfa...

타입 단언 (type assetion) 타입스크립트가 추론 및 분석한 타입을 우리가 원하는 대로 얼마든지 바꿀 때 사용 (프로그래머가 타입스크립트보다 변수 유형에 더 잘 이해하고 있을 때 사용함) const bodyEle = document.querySelector("body"); bodyEle.innerText = "Hello World~"; ...

타입 ● boolean let boolean: boolean; let falseBoolean: boolean = false; ● number let number: number; let integer: number = 6; let float: number = 1.2345; ● string let string: string; let firs...

유틸리티 타입 partial 특정 타입의 부분 집합을 만족하는 타입을 정의 interface Address { email: string; address: string; } const me = {}; const you: Partial<Address> = { email: "abc@dcfg.com" }; const all: Add...

https://school.programmers.co.kr/learn/courses/30/lessons/120815 📔 문제 설명 머쓱이네 피자가게는 피자를 여섯 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 매개변수로 주어질 때, n명이 주문한 피자를 남기지 않고 모두 같은 수의 피자 조각을 먹어야 한다면 최소 몇 판을 시켜야 하는지를 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120812 📔 문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니...

23년 11월 17일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 깃허브 레포지토리 받아오기 (깃허브 → 로컬) git clone URL 명령어로 에디터에서 프로젝트 받아오기 git clone https://github.com/hyemin12/react-pokemon-app 특정 브랜치...

#DB 물리 속성 설계 파티셔닝 파티션보다 작은 논리적인 단위 나눔 성능 저하 방지 및 관리를 상대적으로 보다 용이하게 하고자 하는 기법 ■ 특징 전체 데이터 훼손 가능성이 줄고, 데이터 가용성이 향상됨 작은 단위로 관리하여 편리함 부하를 각각 파티션들로 분산시켜 성능을 향상시킴 수평분할에 활용되는 분할 기법 ■ 범위 유형 ...

원티드 프리온보딩 - 클린 코드 4강 null vs undefined null과 undefined 어떤 것을 사용하는 것이 좋은가? null 객체값이 의도적으로 없음을 나타내는 원시값 개발자가 임의로 사용 undefined 변수에 값이 할당되지 않았을 때 사용하는 원시값 javascrip...

23년 11월 16일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 깃에서 자주 쓰이는 명령어 ■ git add 작업 디렉토리의 변경 내용을 스테이징 영역에 넘길 때 사용하는 명령어 git add 파일명/디렉토리경로: 변경 내용의 특정 파일이나 디렉토리 경로만 스테이징 영역에 넘길 때 git ad...

#물리 데이터베이스 설계 스토리지 데이터를 보존하고 간편하게 액세스할 수 있도록 개발된 기술을 사용하여 정보를 보존하는 저장장치 ■ DAS (Direct Attached Storage) 데이터 서버와 외장형 저장 장치를 전용 케이블로 직접 접속하는 방법 성능이 보장되며, 안정성도 뛰어남 접속방법이 상이하여 저장장치 공유에 문제가 있음...

23년 11월 15일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다. 버전 관리 시스템의 종류 1. 로컬 버전 관리 시스템 단순하게 내 컴퓨터 안에서만 버전 관리를 하는 방식 내 컴퓨터 안에만 버전을 관리하기 때문에 협업할 수 없음 2. 중앙 집중식 관리 시스템 클라이언트 서버 방식이라고도 함 중엉 시스템(서...

#데이터 모델 (Data Model) 현실 세계의 정보를 인간과 컴퓨터가 이해할 수 있도록 추상화하여 표현한 모델 ■ 데이터 모델에 표시해야할 요소 구조 (Structure) 연산 (Operation) 제약조건 (Constraint) 데이터베이스 설계 단계 요구조건 분석, 개념적 설계, 논리적 설계, 물리적 설계가 있음 1. ...

프로젝트란? 프로젝트(영어: project)는 일정한 기간 안에 일정한 목적을 달성하기 위해 수행하는 업무의 묶음을 말한다. 하나의 프로그램(시스템)을 만들기 위한 일련의 프로세스이자 업무의 단위, 업무의 묶음 기획, 설계, 테스트, 배포 등과 같은 모든 과정을 포함함 README 프로젝트에 대한 정보를 포함하고 있는 파일 ■ 완성된...

원티드 프리온보딩 - 클린 코드 3강 자바스크립트의 배열 자바스크립트의 배열은 객체다! 배열인지 아닌지 확인 Array.isArray() typof array → object 구조분해 할당해서 가져오는 것이 더 좋음 const liList = document.querySelectorAll(".item"); const firsetEle =...

#관계 데이터모델 데이터를 행과 열로 구성된 테이블 형태로 구성된 데이터 모델 관계 데이터 모델 구성 ■ 릴레이션(Relation) 행과 열로 구성된 테이블 ■ 튜플 (Tuple) 행에 해당하는 요소 ■ 속성 (Attribute) 열에 해당하는 요소 ■ 카디널리티 (Cardinality) 튜플(행) 개수 ■ 차수 (Degree) ...

#고급 SQL View 논리테이블 물리 테이블로부터 생성 가능하며, 다수의 테이블 도는 다른 뷰를 이용해 만들 수 있음 ■ 장점: 논리적 독립성 제공 데이터 조작 연산 간소화 보안 기능(접근제어) 제공 ■ 단점: 뷰 자체 인덱스 불가 뷰 변경 불가 데이터 변경 제약 존재 ■ 뷰 생성 CREATE VIEW 뷰...

원티드 프리온보딩 - 클린 코드 2강 다른 사람들이 생각하는 클린코드는? 빠르게 이해할 수 있는 코드 확장성 가독성 명확한 목적성과 역할 기능에 충실한 코드 일관성이 중요한 이유 나쁜 코드라도 일관성만 잘 지킨다면 자동화도 할 수 있기 때문에! 일관성이 명확하다면 편집기, 정규식 조합으로 한번에 고칠 수 있다. ...

#SQL 데이터 정의어 (DDL) DDL 대상 ■ 도메인: 하나의 속성이 가질 수 있는 원자들의 집합 ■ 스키마: 데이터베이스 구조, 제약조건 등의 정보를 담고 있는 기본적인 구조 ■ 테이블: 데이터를 저장하는 항목인 필드들로 구성된 데이터의 집합체 ■ 뷰: 하나 이상의 물리 테이블에서 유도되는 가상의 테이블 ■ 인덱스: 검색을 빠르게 하기 위한...

#절차형 SQL 절차 지향적인 프로그램이 가능한 SQL 종류: 트리거, 사용자 정의 함수, 프로시저 #SQL SQL 문법 분류 ■ 데이터 정의어 (DDL) 테이블이나 관계의 구조를 생성하는데 사용 CREATE, ALTER, DROP, TRUNCATE ■ 데이터 조작어 (DML) 데이터베이스에 저장된 자료들을 입력, 수정, 삭제, 조회하는...

Day 8 오늘 읽은 범위 15장 프론트엔드 테스트 부록1 렌더링 방식과 프론트엔드 프레임워크 부록2 타입스크립트 부록3 코드 리뷰하기 책에서 기억하고 싶은 내용을 써보세요. 애플리케이션의 규모가 커지며 페이지의 로딩 속도, 반응 속도, 메모리 사용률 등 다양한 요소들의 성능 최적화가 중요해지기 시작 개발자 도구 - Perf...

#인터페이스 구현 인터페이스 기능 이기종 시스템 또는 컴포넌트 간 데이터 교환 및 처리를 위한 기능 각 시스템의 교환 데이터 및 업무, 송수신 주체 등이 정의되어 있는 인터페이스 설계서를 보고 인터페이스 기능을 확인할 수 있음 인터페이스 정의서를 통하여 외부 및 내부 모듈의 기능을 확인할 수 있음 인터페이스 데이터 표준 확인 ...

원티드 프리온보딩 - 클린 코드 1강 강사님 깃헙 https://github.com/pocojang/clean-code-js 클린 코드란? 누구나 이해하기 쉬운, 직관적인 코드 시간이 지나도 언제나 깨끗하게 유지해야함 But, 클린 코드에 너무 집착하지만고 일단 기능을 구현한 다음 리팩토링을 통해 클린코드를 만들어도 됨! (기능을 구현하는 것...

Day 7 오늘 읽은 범위 13장 프론트엔드 테스트 14장 스냅숏 테스트와 시각적 테스트 책에서 기억하고 싶은 내용을 써보세요. 프론트엔드 테스트 내부 코드의 다양한 연산뿐만 아니라 클라이언트 영역에 대한 사용자의 인터랙션도 고려하여 올바른 결과가 나오는지 검증해야 함 사용자 관점에서 최대한 사용자가 직접 사용하는 것처럼 시나리오...

#애플리케이션 성능 - 알고리즘 문제를 해결하기 위한 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 기법 ■ 알고리즘 특성 입력 출력 명확성 유한성 유효성 알고리즘 기법 분할과 정복 (Divide and Conquer) 동적계획법 (Dynamic Programming) 탐욕법 (Greedy) 백트...

절대경로와 상대경로 ✨상대 경로 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 의미 ■ 장점: 주소나 프로젝트 디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정 없이 그대로 사용할 수 있음 ■ 단점: 코드를 import 해올 때 폴더가 깊어지면 복잡해지고 가독성이 떨어짐 #사용 방법 같은 폴더 내에 위치한다면 ....

Day 6 오늘 읽은 범위 11장 프론트엔드 개발 도구 12장 디버깅 책에서 기억하고 싶은 내용을 써보세요. npm : Node.js의 패키지를 관리하는 도구, npm CLI를 사용하여 간편하게 설치할 수 있음 npm install <package>: 패키지 설치 npm install <package&g...

#애플리케이션 통합 테스트 결합 관리 도구 단계별 테스트 수행 후 발생한 결함의 재발 방지를 위해 결함을 추적하고 관리하는 도구 유사 결함 발견 시 처리 시간 단축을 위해 결함을 추적하고 관리하는 도구 ■ 결함 관리 프로세스 에러 발견 → 에러 등록 → 에러 분석 → 결함 확정 → 결함 할당 → 결함 조치 → 결한 조치 검토 및 승인 ■...

#서버에 push한 commit 삭제하기 - git reset (레포지토리를 혼자 사용할 때) 1. git commit 내역을 확인하고, 삭제할 commit 확인하기 git log 2. reset 명령어를 이용하여 commit 삭제하기 ■ 가장 최근 명령어를 지우고 싶다면 git reset HEAD^ ■ 여러개의 commit 이전으로 돌리...

Day 5 오늘 읽은 범위 9장 네트워크 통신 10장 프론트엔드 뉴스 게시판 만들기 책에서 기억하고 싶은 내용을 써보세요. HTTP (HyperText Transfet Protocol) : 하이퍼미디어 문서를 전송하기 위한 프로토콜 클라이언트 → 서버 : 요청 (request) 서버 → 클라이언트 : 응답 ...

#애플리케이션 테스트 케이스 설계 테스트 케이스 (Test Case) 특정 요구사항에 준수하는 지를 확인하기 위해 개발된 입력값, 실행 조건, 예상된 결과의 집합 정확성, 재사용성, 간경성 보장 ■ 테스트 케이스 작성 절차 테스트 계획 검토 및 자료 확보 → 위험 평가 및 우선순위 결정 → 테스트 요구사항 정의 → 테스트 구조 설계 및 테...

Day 4 오늘 읽은 범위 7장 BOM과 DOM 8장 브라우저 렌더링 과정 책에서 기억하고 싶은 내용을 써보세요. 문서 객체 모델(Document Object Model; DOM) 일종의 인터페이스로 해당 요소를 나타내는 노드, 노드의 속성을 나타내는 프로퍼티와 이를 조작할 수 있는 여러 메서드를 담아 구조화한 객체로 표현 노드 ...

#제품 소프트웨어 버전 관리 도구 형상 관리 지침을 활용하여 제품 소프트웨어의 신규 개발, 변경, 개선과 관련된 수정 사항을 관리하는 도구 소프트웨어 개발과 관련하여 코드와 라이브러리, 관련 문서 등 시간 변화에 따른 변경을 관리하는 전체 활동을 의미 제품 소프트웨어 버전 관리 도구 유형 ■ 공유 폴더 방식 개발 완료 파일을 약속된 위치의...

Day 3 오늘 읽은 범위 5장 자바스크립트 심화 - 프로토타입과 스코프 6장 자바스크립트 심화 - 실행 컨텍스트 책에서 기억하고 싶은 내용을 써보세요. 자바스크립트에서는 프로토타입을 기반으로 객체 지향의 상속 개념을 구현 자신의 부모 역할을 하는 프로토타입 객체의 참조 링크를 가지고 있으며, 이 링크...

#제품 소프트웨어 매뉴얼 작성 제품 소프트웨어 매뉴얼? 제품 소프트웨어 개발 단계부터 적용한 기준이나 패키징 이후 설치 및 사용자 측면의 주요 내용 등을 문서로 기록한 것 사용자 중심의 기능 및 방법을 나탄낸 설명서와 안내서를 의미 제품 소프트웨어 설치 매뉴얼? 사용자가 제품을 구매한 후 최초 설치 시 참조하는 매뉴얼 ...

vite vite를 사용하는 이유? vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 피드백 속도가 엄청나게 개선되기 때문입니다. 브라우저에서 ES Module 사용할 수 있기 전에는 모듈화 된 방식으로 자바스크립트를 작성하는 native 메커니즘이 없었다. 그래서 번들링이 필요했고, Weppack, R...

Day 2 오늘 읽은 범위 3장 자바스크립트 기초 - 타입과 구문 4장 자바스크립트 기초 - 타입변환과 함수 책에서 기억하고 싶은 내용을 써보세요. 변수 선언 var : 값 덮어쓰기 가능, 함수 스코프를 기준으로 동작 let : 재선언 불가, 블록 스코프를 기준으로 동작 const : 재선언 불가, 블록 스코프를 기준으...

#제품 소프트웨어 패키징 #애플리케이션 패키징 개발 완료된 제품 소프트웨어를 배포하고 설치할 수 있도록 고객에게 전달하기 위한 형태로 제작, 설치와 사용에 필요한 제반 내용을 포함하는 매뉴얼을 작성하는 활동 ■ 특징 사용자 중심으로 진행 신규 및 변경 개발 소스를 식별 모듈화하여 상용 제품으로 패키징 신규/변경 이력을 확인 ...

Day 1 오늘 읽은 범위 1장 프런트엔드 개발이란? 2장 HTML과 CSS 책에서 기억하고 싶은 내용을 써보세요. 클라이언트: 서비스를 이용하는 사용자 또는 사용자의 디바이스를 의미 클라이언트 영역: 사용자의 PC와 스마트폰에서 사용자가 서비스를 접하는 영역 프런트엔드 개발: 클라이언트 영역에서 서비스 사용자와...

#통합 구현 관리 IDE 도구 코딩, 디버그, 컴파일, 배포 등 프로그램 개발과 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어 IDE 도구의 기능 개발 환경 지원 컴파일 디버깅 외부 연계 DB 연동 IDE 도구의 대표적 종류 이클립스 (Eclipse) 비주얼 스튜디오 (Vis...

#모듈 구현 # 단위 모듈 구현 소프트웨어 개발에 있어 기능을 단위 모듈별로 분할하고 추상화하여 성능을 향상시키고, 유지보수를 효과적으로 하기 위한 구현 기법 ■ 모듈? 다른 것들과 구별될 수 있는 독립적인 기능을 갖는 단위 소프트웨어 구조 정적인 구조 ※컴포넌트: 런타임에 독립적으로 배포되고 실행되는 단위 ■ 단위 모듈 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12973?language=javascript 📔 문제 설명 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이...

https://school.programmers.co.kr/learn/courses/30/lessons/12981 📔 문제 설명 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 ...

개발자의 글쓰기라는 책을 읽으며 기록하고 싶은 내용이 생겨 이 글을 쓰게 되었다. 이 글에서는 변수명을 잘 짓는 방법에 대해서만 정리할 예정이다. 이 책에는 변수명을 잘 짓는 방법 외에도 개발자가 네이밍을 할 때 도움을 주는 내용들이 많이 담겨있다. 변수명 짓는데 어려움을 느끼거나 주니어 개발자들이 읽어보면 좋을 것 같다. 2장 개발 시간을 줄여주...

기초부터 완성까지, 프런트엔드 책 챌린지 시작! 하루에 2장씩 읽으며 내용을 학습하고 기록할 예정

#커밋 수정하기 커밋 수정 방법 1 ■ git commit --amend 명령어 실행하기 git commit --amend 명령어 실행하면 아래와 같은 내용이 에디터에 출력됩니다. 이제 기존의 커밋 메세지인 Add .gitignore file를 Add only .gitignore file로 수정하여 커밋 내용을 수정합니다. chapter2-ba...

#좋은 커밋 메세지 작성 netlify로 배포된 박스 오피스의 API_KEY를 숨길 수 있는 방법에 대해 찾아보다가 netlify serverless function을 이용하면 해결할 수 있다는 사실을 알게되었다. 관련 깃허브 레포지토리를 찾았고, 이를 fork하려고 방문했을 때 커밋 메시지가 잘 정리되어있는 것을 보았다. 내가 작성했던 커밋 메시지...

#버전 관리 빈번한 업데이트를 체계적으로 관리하려면 소스 코드에 언제, 어떤 변화가 있었는지 기록하고 추적하는 버전 관리가 필요합니다. 한 프로젝트에서 여러 개발자가 동시에 많은 기능을 추가하고 코들 변경합니다. 그러다 보면 소스 코드 파일을 둘 이상이 수정하여 의도하지 않게 코드가 덮어써지는 충돌이 발생하기도 합니다. 이러한 복잡한 상황을 체계적...

#자료 구조 컴퓨터상 자료를 효율적으로 저장하기 위해 만들어진 논리적인 구조 자료 구조의 분류 ■ 선형구조 (연속적 연결) 리스트, 스택, 큐, 데크 ＠리스트 1. 선형 리스트 배열과 같이 연속되는 기억장소에 저장되는 리스트 가장 간편한 자료 구조 접근 구조가 빠름 자료의 삽입, 삭제 시 이동이 필요 2. 비선형 리...

#일반 함수와 화살표 함수의 차이 1 - 문법 화살표 함수를 사용하면 일반 함수보다 간결하게 코드 작성이 가능함 ■ 일반 함수 함수 선언식 함수 선언식으로 작성된 함수는 호이스팅되어 함수를 선언하기 전에 실행시킬 수 있음 익명 함수를 작성할 수 없음 // 선언 function main() { console.log("hello")...

var와 let의 차이 1. 스코프 (Scope) ■ 스코프란? 코드가 변수에 접근할 수 있는 범위 ■ Function scope (함수 범위) 함수 내부에서만 접근이 가능 block 밖에서 접근하더라도 변수가 선언된 함수 내부에서는 어디에서든지 접근이 가능 var 키워드 @예시 - 함수 내부에서만 접근이 가능! main()...

this 객체를 가르키는 키워드 상황에 따라 달라짐 “this는 함수를 호출한 객체이다.” ■ 전역적인 문맥 (함수 외부) 전역적인 문맥에서 this에 접근하면 this는 window가 됨 엄격모드와는 상관없이 this는 window가 된다! console.log(this); // window {...} "use strict";...

#내/외부 송·수신 연계 방식과 연계 기술, 통신 유형의 선택은 성능을 위한 가장 중요한 요소 ■ 내/외부 송·수신 연결 방식 직접 연계 방식 중계 서버나 솔루션을 사용하지 않고 직접 인터페이스 하는 방식 중간 매개체가 없어 처리속도가 빠르고 구현이 단순 개발 비용과 기간이 짧음 송/수신 시스템간 결합도가 높아서 시스템 변경...

#시스템 아키텍처 ■ 시스템 하나의 공통적인 목적을 수행하기 위해 조직화된 요소들의 집합체 ■ 시스템 구성요소 @입출처제피 입력 (Input) 출력 (Output) 처리 (Process) 제어 (Control) 피드백 (feedback) ■ 시스템 아키텍처 시스템 목적을 달성하기 위해서 시스템 각 컴포넌트가 무엇이...

#throtting과 debouncing 과한 이벤트를 막아 서버에 부담을 줄이기 위해 사용하는 테크닉 ■ debouncing (디바운싱) 빈번하게 발생하는 이벤트를 ‘특정 시간 이후에 한번만’ 실행 시키는 최적화 기법 먼저 발생한 이벤트가 처리를 대기하며, 대기하는 도중 새 이벤트가 발생하면 이전 이벤트의 대기를 취소하고 해당 이벤트를 기...

#인터페이스 요구사항 확인 시스템들이 상호 접속을 통하여 특정 기능을 수행하기 위한 접속 방법이나 규칙에 대한 필수적 요구사항 인터페이스 요구사항 구성 구성요소들을 대상 시스템 및 기관과 서전에 연동 방안에 대한 협의가 필요 인터페이스 이름, 연계 대상 시스템, 연계 범위 및 내용, 연계 방식, 송신 데이터, 인터페이스 주기, 기타 ...

#디자인패턴 ★★★★★ 공통으로 발생하는 문제에 대해 자주 쓰이는 설계 방법을 정리한 패턴 ■ 디자인패턴 장점 요구 변경에 따른 소스 코드 변경을 최소화할 수 있게 해줌 소프트웨어 코드의 품질 향상 범용적인 코딩 스타일 적용 가능 개발자 간의 원활한 의사소통 가능 설계 변경 요청에 대한 유연한 대처가 가능 소프트웨어 구...

#객체지향설계 ★★★★★ #객체 지향 (Object Oriented) 속성과 메서드가 결합한 형태의 객체로 표현하는 기법 #객체 지향 구성요소 @클객 메 메인속 ■ 클래스 변수와 메서드를 정의하는 일종의 틀 데이터를 추상화하는 단위 하나 이상의 유사한 객체들을 묶어서 하나의 공통된 특성 표현 ■ 객체 물리적,추상적...

#애플리케이션 설계 - 공통 모듈 설계 ★★★ 재사용(Reuse) 개발 시간 및 비용 절감을 위하여 검증된 기능을 파악하고 재구성하여 시스템에 응용하기 위한 최적화 작업 기존 소프트웨어 또는 소프트웨어 지식을 활용하여 새로운 소프트웨어를 구축하는 작업 재사용의 유형 함수/객체 재사용 컴포넌트 재사용 애플리케이션 재사용 ...

#UI 설계 프로세스 UI 설계 프로세스 @문사 작컴 인디 문제 정의 사용자 모델 정의 작업분석 컴퓨터 오브젝트 및 기능 정의 사용자 인터페이스 정의 디자인 평가 UI 흐름 설계 @기입유양 화면에 표현되어야 할 기능 작성 화면의 입력 요소 확인 UI 요구사항을 기반으로 유스케이스 설계 기능 및 양식 ...

원티드 프리온보딩 - 클린코드 챌린지 과제 https://gist.github.com/pocojang/e9ccaa847d7f23bc43c25f273400b585 챌린지 과제 Q1. 내가 생각하는 클린 코드란? 다른 사람들이나 작성한 사람이 나중에 코드를 읽었을 때 쉽게 이해할 수 있는 코드를 작성하는 것 Q2. 내가 생각하는 (프론트엔드에서의...

#UI 요구사항 확인 ■ UI (사용자 인터페이스; User Interface) 넓은의미: 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체 좁은의미: 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면 UX (사용자 경험; User eXperience) 사용자가 직·간접적으로 경험하면서 느끼고 ...

#분석 모델 확인 ■ 모델링기법 모델(Model) 객체, 시스템, 또는 개념에 대한 구조나 작업을 보여주기 위한 패턴 개발 대상을 추상화하고 기호나 그림 등으로 시각적으로 표현함 소프트웨어에 대한 이해도를 향상할 수 있음 이해 당사자 간의 의사소통이 향상됨 문제가 발생하는 상황에 대한 이해를 높이고 해결책을 설명 향후 개발...

#요구사항 확인 2 - 애자일 방법론 ■ 애자일 방법론 (Agile) 개발과 함께 즉시 피드백을 받아 유동적으로 개발하는 방법 빠른 비즈니스 시장에 기민하게 대응할 수 있음 아래 단계를 반복하여 수행 ① discover ② design ③ develop ④ test 프로젝트 요구사항은 기능 중심으로 정의 절차와 도구보다는 개인과...

#요구사항 확인 1 - 요구분석 기법 ■ 요구분석(Requirements Analysis) 사용자의 요구를 추출하여 목표를 정하고 어떤 방식으로 해결할 것인지 결정하는 단계 개발 대상에 대한 사용자의 요구사항 중 명확하지 않거나 모호하여 이해가 되지 않는 부분을 발견하고 이를 걸러내기 위한 과정 실제적인 첫단계로 사용자의 요구에 대해 ...

원티드 프리온보딩 - 로그인 기능 구현하기 4강 실습 실습 코드 유저 권한에 따라 접근이 제어되는 웹 만들기 1. 어드민 페이지 추가하기 isAdminPage: 어드민 페이지 여부 const routerData = [ { id: 0, path: "/", label: "Home", element: <Home...

https://school.programmers.co.kr/learn/courses/30/lessons/181857 📔 문제 설명 정수 배열 arr이 매개변수로 주어집니다. arr의 길이가 2의 정수 거듭제곱이 되도록 arr 뒤에 정수 0을 추가하려고 합니다. arr에 최소한의 개수로 0을 추가한 배열을 return 하는 solution 함수를 작...

#Map() 다양한 자료형의 key를 허용하고, key-value 형태의 자료형으로 이루어진 콜렉션 Object와 비교해 다양한 key 사용이 가능함 키-쌍과 키의 원래 삽입 순서(index)를 기억 의도를 명확히 드러낸 메소드를 사용해서 접근, 수정, 삭제 등을 할 수 있음 Object(객체)는 keys()나 values() 등...

#배열의 중복값 제거하기 1. set()을 사용하여 배열에서 중복 제거하기 set() ES6부터 새롭게 도입된 자바스크립트 객체 순서를 가지는 값들의 집합들 중복된 값을 허용하지 않음 예제) 중복된 배열을 set으로 변환 (set은 중복요소를 제거) set을 다시 배열로 변환 const chars = ["A", "B...

#현행 시스템 분석 2 - 네트워크/DBMS/비지니스융합 네트워크 분석 네트워크 개념 컴퓨터 장치들이 노드 간 연결을 사용하여 서로에게 데이터를 교환하는 기술 연결(데이터링크)들은 광케이블과 같은 유선 매체 또는 와이파이와 같은 무선 매체를 통해 성립 네트워크 현행 시스템 분석 구성된 네트워크 구조를 네트워크 구성도를 통해 분...

#현행 시스템 분석 1 - 플랫폼,운영체제 #플랫폼의 개념 애플리케이션을 구동시키는데 필요한 소프트웨어 환경 동일 플랫폼 내에서는 상호 호환이 가능하도록 만들어진 결합체 공급자, 수요자 등 복수 그룹이 참여하여 얻고자 하는 가치를 공정한 거래를 통해 교환할 수 있도록 구축된 환경 #플랫폼의 기능 소프트웨어 개발과 운영비용이 ...

원티드 프리온보딩 - 로그인 기능 구현하기 3강 실습 실습 코드 세션-쿠키를 통해 로그인 기능 구현하기 1. 로그인 실패시 함수 종료. 로그인 성공시 ‘/page-a’로 이동 // pages/Login.js const Login = () => { const { routeTo } = useRouter(); const loginSu...

원티드 프리온보딩 - 로그인 기능 구현하기 3강 내용 실습 코드 세션이란? 사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간 연결 그 자체 신분증 같은 느낌(임시출입증) 세션 방식 로그인 : 사용자 로그인이 유효한 시간동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식...

프로젝트 디렉토리 구조 프로젝트의 디렉토리 구조를 설계하는 가장 좋은 방법 혹은 정해진 틀은 없다. 어떻게 하면 생산성을 높일 수 있는지, 필요한 파일을 빨리 찾을 수 있는지에 고민하며 디렉토리를 구성하면 됨! CRA 초기 폴더 구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├─...

원티드 프리온보딩 - 로그인 기능 구현하기 2강 실습 실습 코드 로그인 기능 연결하기 1 실습 코드 1. 1일차에서 구성한 화면에 제공된 로그인 API 붙이기 2. 로그인 API의 응답을 바로 사용해 유저 정보를 받아와 화면에 보여주기 // login api import { BASE_URL } from "./const.js"; import...

원티드 프리온보딩 - 로그인 기능 구현하기 2강 복습 실습 코드 토큰(Token)이란? 사용자 신원을 알 수 있는 인증키, a piece of data that is used to represent and replace another one, in order to prevent private information being seen by som...

원티드 프리온보딩 - 로그인 기능 구현하기 1강 복습 실습 코드 로그인이란? 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차 로그인이 필요한 이유와 구현을 위해 해야하는 것 1. 사용자 식별 해당 페이지에 접근하는 사용자가 누구인지 구분하기 위해 2. 접근 및 동작 제어 2-1. 권한이 ...

1. 반복문을 이용해서 빈 배열에 속성을 push()하기 Object의 key값만 배열에 넣기 const obj = { a: "apple", b: "banana", c: "coconut" }; const arr = []; for (let element in obj) { arr.push(element); } console.log(...

자바스크립트로 제작했던 포케몬 앱을 타입스크립트로 바꾸는 작업 중에 발생한 오류 svg 컴포넌트들의 className의 타입을 정의한 파일명을 classNameTypes 에서 ClassNameTypes로 파일 변경했더니 Already included file name '../types/classNameTypes' differs from file n...

유튜브를 따라 만드는 사이드 프로젝트를 진행하던 중 keyword를 누르면, keyword의 index 값은 변경된 값이 적용되지만 변경된 keyword의 값으로 데이터를 받아오지 못하는 오류가 발생 @원인 state를 변경하는 함수인 setState는 전부 비동기적으로 처리가 되기때문에, setState 함수가 오래걸리면 다음줄...

Module not found: Error: Can't resolve '../SkeletionUI' in '/opt/build/repo/src/pages' 제대로 작동하던 프로젝트를 리팩토링하며 발생한 오류 로컬에서 서버를 실행하면 잘 작동하고, 로컬에서 build하면 잘 실행되지만, netlify에서는 배포가 계속 실패됨… @원인 코드 리팩...

https://school.programmers.co.kr/learn/courses/30/lessons/181872 📔 문제 설명 문자열 myString과 pat가 주어집니다. myString의 부분 문자열중 pat로 끝나는 가장 긴 부분 문자열을 찾아서 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181830 📔 문제 설명 이차원 정수 배열 arr이 매개변수로 주어집니다. arr의 행의 수가 더 많다면 열의 수가 행의 수와 같아지도록 각 행의 끝에 0을 추가하고, 열의 수가 더 많다면 행의 수가 열의 수와 같아지도록 각 열의 끝에 0을 추...

https://school.programmers.co.kr/learn/courses/30/lessons/181836 📔 문제 설명 직사각형 형태의 그림 파일이 있고, 이 그림 파일은 1 × 1 크기의 정사각형 크기의 픽셀로 이루어져 있습니다. 이 그림 파일을 나타낸 문자열 배열 picture과 정수 k가 매개변수로 주어질 때, 이 그림 파일을 가로...

map() 과 forEach()는 모두 반복문을 사용할 때 많이 사용되는 메소드이다. map() 새로운 배열을 반환 배열 내 모든 요소 각각에 대해 주어진 함수(콜백)을 호출한 결과를 모아 새로운 배열을 반환 mozilla - map() const array1 = [1, 4, 9, 16]; // array1의 각 요소에 콜...

https://school.programmers.co.kr/learn/courses/30/lessons/181881 📔 문제 설명 정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱하고 다시 1을 더합니다. 이러한 작업을 x번 반복한 결과인 배열을 arr(x)...

https://school.programmers.co.kr/learn/courses/30/lessons/181857 📔 문제 설명 정수 배열 arr이 매개변수로 주어집니다. arr의 길이가 2의 정수 거듭제곱이 되도록 arr 뒤에 정수 0을 추가하려고 합니다. arr에 최소한의 개수로 0을 추가한 배열을 return 하는 solution 함수를 작...

https://school.programmers.co.kr/learn/courses/30/lessons/181859 📔 문제 설명 0과 1로만 이루어진 정수 배열 arr가 주어집니다. arr를 이용해 새로운 배열 stk을 만드려고 합니다. i의 초기값을 0으로 설정하고 i가 arr의 길이보다 작으면 다음을 반복합니다. 만약 stk이 빈 배...

https://school.programmers.co.kr/learn/courses/30/lessons/181901 📔 문제 설명 정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 n k...

https://school.programmers.co.kr/learn/courses/30/lessons/181832 📔 문제 설명 양의 정수 n이 매개변수로 주어집니다. n × n 배열에 1부터 n2 까지 정수를 인덱스 [0][0]부터 시계방향 나선형으로 배치한 이차원 배열을 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예...

https://school.programmers.co.kr/learn/courses/30/lessons/181851 📔 문제 설명 0번부터 n - 1번까지 n명의 학생 중 3명을 선발하는 전국 대회 선발 고사를 보았습니다. 등수가 높은 3명을 선발해야 하지만, 개인 사정으로 전국 대회에 참여하지 못하는 학생들이 있어 참여가 가능한 학생 중 등수가 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181871 📔 문제 설명 문자열 myString과 pat이 주어집니다. myString에서 pat이 등장하는 횟수를 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 myString ...

https://school.programmers.co.kr/learn/courses/30/lessons/181880 📔 문제 설명 정수가 있을 때, 짝수라면 반으로 나누고, 홀수라면 1을 뺀 뒤 반으로 나누면, 마지막엔 1이 됩니다. 예를 들어 10이 있다면 다음과 같은 과정으로 1이 됩니다. 10 / 2 = 5 (5 - 1) / 2 =...

https://school.programmers.co.kr/learn/courses/30/lessons/181890 📔 문제 설명 문자열 리스트 str_list에는 “u”, “d”, “l”, “r” 네 개의 문자열이 여러 개 저장되어 있습니다. str_list에서 “l”과 “r” 중 먼저 나오는 문자열이 “l”이라면 해당 문자열을 기준으로 왼쪽에 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181862 📔 문제 설명 임의의 문자열이 주어졌을 때 문자 “a”, “b”, “c”를 구분자로 사용해 문자열을 나누고자 합니다. 예를 들어 주어진 문자열이 “baconlettucetomato”라면 나눠진 문자열 목록은 [“onlettu”, “...

https://school.programmers.co.kr/learn/courses/30/lessons/181860 📔 문제 설명 아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 길이가 같은 정수 배열 arr과 boolean 배열 flag가 매개변수로 주어질 때, flag를 차례대로 순회하며 flag[i]가 true라면 X의 뒤에 arr[i]를...

https://school.programmers.co.kr/learn/courses/30/lessons/181893 📔 문제 설명 정수 배열 arr와 query가 주어집니다. query를 순회하면서 다음 작업을 반복합니다. 짝수 인덱스에서는 arr에서 query[i]번 인덱스를 제외하고 배열의 query[i]번 인덱스 뒷부분을 잘라서 버립...

https://school.programmers.co.kr/learn/courses/30/lessons/181902 📔 문제 설명 알파벳 대소문자로만 이루어진 문자열 my_string이 주어질 때, my_string에서 ‘A’의 개수, my_string에서 ‘B’의 개수, …, my_string에서 ‘Z’의 개수, my_str...

https://school.programmers.co.kr/learn/courses/30/lessons/181838 📔 문제 설명 정수 배열 date1과 date2가 주어집니다. 두 배열은 각각 날짜를 나타내며 [year, month, day] 꼴로 주어집니다. 각 배열에서 year는 연도를, month는 월을, day는 날짜를 나타냅니다. 만약...

https://school.programmers.co.kr/learn/courses/30/lessons/181887 📔 문제 설명 정수 리스트 num_list가 주어집니다. 가장 첫 번째 원소를 1번 원소라고 할 때, 홀수 번째 원소들의 합과 짝수 번째 원소들의 합 중 큰 값을 return 하도록 solution 함수를 완성해주세요. 두 값이 같을...

https://school.programmers.co.kr/learn/courses/30/lessons/181885 📔 문제 설명 오늘 해야 할 일이 담긴 문자열 배열 todo_list와 각각의 일을 지금 마쳤는지를 나타내는 boolean 배열 finished가 매개변수로 주어질 때, todo_list에서 아직 마치지 못한 일들을 순서대로 담은 문...

https://school.programmers.co.kr/learn/courses/30/lessons/181831 📔 문제 설명 n × n 크기의 이차원 배열 arr이 매개변수로 주어질 때, arr이 다음을 만족하면 1을 아니라면 0을 return 하는 solution 함수를 작성해 주세요. 0 ≤ i, j < n인 정수 i, j에 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181833 📔 문제 설명 정수 n이 매개변수로 주어질 때, 다음과 같은 n × n 크기의 이차원 배열 arr를 return 하는 solution 함수를 작성해 주세요. arr[i][j] (0 ≤ i, j < n)의 값은 i = j라...

https://school.programmers.co.kr/learn/courses/30/lessons/181837 📔 문제 설명 팀의 막내인 철수는 아메리카노와 카페 라테만 판매하는 카페에서 팀원들의 커피를 사려고 합니다. 아메리카노와 카페 라테의 가격은 차가운 것과 뜨거운 것 상관없이 각각 4500, 5000원입니다. 각 팀원에게 마실 메뉴를 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181916 📔 문제 설명 1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다. 네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다. 세 주사...

https://school.programmers.co.kr/learn/courses/30/lessons/181829 📔 문제 설명 2차원 정수 배열 board와 정수 k가 주어집니다. i + j <= k를 만족하는 모든 (i, j)에 대한 board[i][j]의 합을 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181904 📔 문제 설명 문자열 my_string과 두 정수 m, c가 주어집니다. my_string을 한 줄에 m 글자씩 가로로 적었을 때 왼쪽부터 세로로 c번째 열에 적힌 글자들을 문자열로 return 하는 solution 함수를 작성해 주...

https://school.programmers.co.kr/learn/courses/30/lessons/181844 📔 문제 설명 정수 배열 arr과 delete_list가 있습니다. arr의 원소 중 delete_list의 원소를 모두 삭제하고 남은 원소들은 기존의 arr에 있던 순서를 유지한 배열을 return 하는 solution 함수를 작성...

https://school.programmers.co.kr/learn/courses/30/lessons/181861 📔 문제 설명 아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 양의 정수 배열 arr가 매개변수로 주어질 때, arr의 앞에서부터 차례대로 원소를 보면서 원소가 a라면 X의 맨 뒤에 a를 a번 추가하는 일을 반복한 뒤의 배열 X를...

https://school.programmers.co.kr/learn/courses/30/lessons/181895 📔 문제 설명 정수 배열 arr와 2개의 구간이 담긴 배열 intervals가 주어집니다. intervals는 항상 [[a1, b1], [a2, b2]]의 꼴로 주어지며 각 구간은 닫힌 구간입니다. 닫힌 구간은 양 끝값과 그 사이의...

https://school.programmers.co.kr/learn/courses/30/lessons/181855 📔 문제 설명 문자열 배열 strArr이 주어집니다. strArr의 원소들을 길이가 같은 문자열들끼리 그룹으로 묶었을 때 가장 개수가 많은 그룹의 크기를 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181905 📔 문제 설명 문자열 my_string과 정수 s, e가 매개변수로 주어질 때, my_string에서 인덱스 s부터 인덱스 e까지를 뒤집은 문자열을 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181897 📔 문제 설명 정수 n과 정수 3개가 담긴 리스트 slicer 그리고 정수 여러 개가 담긴 리스트 num_list가 주어집니다. slicer에 담긴 정수를 차례대로 a, b, c라고 할 때, n에 따라 다음과 같이 num_list를 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181853 📔 문제 설명 정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181846 📔 문제 설명 0 이상의 두 정수가 문자열 a, b로 주어질 때, a + b의 값을 문자열로 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 a b resul...

https://school.programmers.co.kr/learn/courses/30/lessons/181841 📔 문제 설명 문자열들이 담긴 리스트가 주어졌을 때, 모든 문자열들을 순서대로 합친 문자열을 꼬리 문자열이라고 합니다. 꼬리 문자열을 만들 때 특정 문자열을 포함한 문자열은 제외시키려고 합니다. 예를 들어 문자열 리스트 [“abc”,...

https://school.programmers.co.kr/learn/courses/30/lessons/181900 📔 문제 설명 문자열 my_string과 정수 배열 indices가 주어질 때, my_string에서 indices의 원소에 해당하는 인덱스의 글자를 지우고 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요....

https://school.programmers.co.kr/learn/courses/30/lessons/181868 📔 문제 설명 단어가 공백 한 개 이상으로 구분되어 있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요...

https://school.programmers.co.kr/learn/courses/30/lessons/181865 📔 문제 설명 문자열 binomial이 매개변수로 주어집니다. binomial은 “a op b” 형태의 이항식이고 a와 b는 음이 아닌 정수, op는 ‘+’, ‘-‘, ‘*’ 중 하나입니다. 주어진 식을 계산한 정수를 return 하...

https://school.programmers.co.kr/learn/courses/30/lessons/181898 📔 문제 설명 정수 배열 arr가 주어집니다. 이때 arr의 원소는 1 또는 0입니다. 정수 idx가 주어졌을 때, idx보다 크면서 배열의 값이 1인 가장 작은 인덱스를 찾아서 반환하는 solution 함수를 완성해 주세요. 단,...

https://school.programmers.co.kr/learn/courses/30/lessons/181867 📔 문제 설명 문자열 myString이 주어집니다. myString을 문자 “x”를 기준으로 나눴을 때 나눠진 문자열 각각의 길이를 순서대로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181903 📔 문제 설명 두 정수 q, r과 문자열 code가 주어질 때, code의 각 인덱스를 q로 나누었을 때 나머지가 r인 위치의 문자를 앞에서부터 순서대로 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요. ...

https://school.programmers.co.kr/learn/courses/30/lessons/181870 📔 문제 설명 문자열 배열 strArr가 주어집니다. 배열 내의 문자열 중 “ad”라는 부분 문자열을 포함하고 있는 모든 문자열을 제거하고 남은 문자열을 순서를 유지하여 배열로 return 하는 solution 함수를 완성해 주세요....

https://school.programmers.co.kr/learn/courses/30/lessons/181894# 📔 문제 설명 정수 배열 arr가 주어집니다. 배열 안의 2가 모두 포함된 가장 작은 연속된 부분 배열을 return 하는 solution 함수를 완성해 주세요. 단, arr에 2가 없는 경우 [-1]을 return 합니다. 💡...

https://school.programmers.co.kr/learn/courses/30/lessons/181919 📔 문제 설명 모든 자연수 x에 대해서 현재 값이 x이면 x가 짝수일 때는 2로 나누고, x가 홀수일 때는 3 * x + 1로 바꾸는 계산을 계속해서 반복하면 언젠가는 반드시 x가 1이 되는지 묻는 문제를 콜라츠 문제라고 부릅니다. ...

https://school.programmers.co.kr/learn/courses/30/lessons/181839 📔 문제 설명 1부터 6까지 숫자가 적힌 주사위가 두 개 있습니다. 두 주사위를 굴렸을 때 나온 숫자를 각각 a, b라고 했을 때 얻는 점수는 다음과 같습니다. a와 b가 모두 홀수라면 a2 + b2 점을 얻습니다. a와...

https://school.programmers.co.kr/learn/courses/30/lessons/181909 📔 문제 설명 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, “banana”의 모든 접미사는 “banana”, “anana”, “nana”, “ana”, “na”, “a”입니다. 문자열 my...

https://school.programmers.co.kr/learn/courses/30/lessons/181909 📔 문제 설명 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, “banana”의 모든 접미사는 “banana”, “anana”, “nana”, “ana”, “na”, “a”입니다. 문자열 my...

https://school.programmers.co.kr/learn/courses/30/lessons/181878 📔 문제 설명 알파벳으로 이루어진 문자열 myString과 pat이 주어집니다. myString의 연속된 부분 문자열 중 pat이 존재하면 1을 그렇지 않으면 0을 return 하는 solution 함수를 완성해 주세요. 단, 알파...

https://school.programmers.co.kr/learn/courses/30/lessons/181891 📔 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, num_list를 n 번째 원소 이후의 원소들과 n 번째까지의 원소들로 나눠 n 번째 원소 이후의 원소들을 n 번째까지의 원소들 앞에 붙인 리스트를 return하도록...

https://school.programmers.co.kr/learn/courses/30/lessons/181922 📔 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181854 📔 문제 설명 정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 retur...

https://school.programmers.co.kr/learn/courses/30/lessons/181875 📔 문제 설명 문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 soluti...

https://school.programmers.co.kr/learn/courses/30/lessons/181856 📔 문제 설명 이 문제에서 두 정수 배열의 대소관계를 다음과 같이 정의합니다. 두 배열의 길이가 다르다면, 배열의 길이가 긴 쪽이 더 큽니다. 배열의 길이가 같다면 각 배열에 있는 모든 원소의 합을 비교하여 다르다면 더 큰...

https://school.programmers.co.kr/learn/courses/30/lessons/181912 📔 문제 설명 문자열 배열 intStrs와 정수 k, s, l가 주어집니다. intStrs의 원소는 숫자로 이루어져 있습니다. 배열 intStrs의 각 원소마다 s번 인덱스에서 시작하는 길이 l짜리 부분 문자열을 잘라내 정수로 변환...

https://school.programmers.co.kr/learn/courses/30/lessons/181918 📔 문제 설명 정수 배열 arr가 주어집니다. arr를 이용해 새로운 배열 stk를 만드려고 합니다. 변수 i를 만들어 초기값을 0으로 설정한 후 i가 arr의 길이보다 작으면 다음 작업을 반복합니다. 만약 stk가 빈 배열...

https://school.programmers.co.kr/learn/courses/30/lessons/181921 📔 문제 설명 정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 “0”과 “5”로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 만약 그러한 정수가 없다면...

https://school.programmers.co.kr/learn/courses/30/lessons/181901 📔 문제 설명 정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 n k...

https://school.programmers.co.kr/learn/courses/30/lessons/181913 📔 문제 설명 문자열 my_string과 이차원 정수 배열 queries가 매개변수로 주어집니다. queries의 원소는 [s, e] 형태로, my_string의 인덱스 s부터 인덱스 e까지를 뒤집으라는 의미입니다. my_string...

https://school.programmers.co.kr/learn/courses/30/lessons/181917 📔 문제 설명 boolean 변수 x1, x2, x3, x4가 매개변수로 주어질 때, 다음의 식의 true/false를 return 하는 solution 함수를 작성해 주세요. (x1 ∨ x2) ∧ (x3 ∨ x4) 💡 입...

https://school.programmers.co.kr/learn/courses/30/lessons/181863 📔 문제 설명 ‘m’과 “rn”이 모양이 비슷하게 생긴 점을 활용해 문자열에 장난을 하려고 합니다. 문자열 rny_string이 주어질 때, rny_string의 모든 ‘m’을 “rn”으로 바꾼 문자열을 return 하는 soluti...

https://school.programmers.co.kr/learn/courses/30/lessons/181834 📔 문제 설명 알파벳 소문자로 이루어진 문자열 myString이 주어집니다. 알파벳 순서에서 “l”보다 앞서는 모든 문자를 “l”로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181874 📔 문제 설명 문자열 myString이 주어집니다. myString에서 알파벳 “a”가 등장하면 전부 “A”로 변환하고, “A”가 아닌 모든 대문자 알파벳은 소문자 알파벳으로 변환하여 return 하는 solution 함수를 완성하...

https://school.programmers.co.kr/learn/courses/30/lessons/181914 📔 문제 설명 음이 아닌 정수를 9로 나눈 나머지는 그 정수의 각 자리 숫자의 합을 9로 나눈 나머지와 같은 것이 알려져 있습니다. 이 사실을 이용하여 음이 아닌 정수가 문자열 number로 주어질 때, 이 정수를 9로 나눈 나머지를...

https://school.programmers.co.kr/learn/courses/30/lessons/181886 📔 문제 설명 최대 5명씩 탑승가능한 놀이기구를 타기 위해 줄을 서있는 사람들의 이름이 담긴 문자열 리스트 names가 주어질 때, 앞에서 부터 5명씩 묶은 그룹의 가장 앞에 서있는 사람들의 이름을 담은 리스트를 return하도록 s...

https://school.programmers.co.kr/learn/courses/30/lessons/181847 📔 문제 설명 정수로 이루어진 문자열 n_str이 주어질 때, n_str의 가장 왼쪽에 처음으로 등장하는 0들을 뗀 문자열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n_st...

https://school.programmers.co.kr/learn/courses/30/lessons/181873 📔 문제 설명 영소문자로 이루어진 문자열 my_string과 영소문자 1글자로 이루어진 문자열 alp가 매개변수로 주어질 때, my_string에서 alp에 해당하는 모든 글자를 대문자로 바꾼 문자열을 return 하는 solutio...

https://school.programmers.co.kr/learn/courses/30/lessons/181932 📔 문제 설명 문자열 code가 주어집니다. code를 앞에서부터 읽으면서 만약 문자가 “1”이면 mode를 바꿉니다. mode에 따라 code를 읽어가면서 문자열 ret을 만들어냅니다. mode는 0과 1이 있으며, idx를 0 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181930 📔 문제 설명 1부터 6까지 숫자가 적힌 주사위가 세 개 있습니다. 세 주사위를 굴렸을 때 나온 숫자를 각각 a, b, c라고 했을 때 얻는 점수는 다음과 같습니다. 세 숫자가 모두 다르다면 a + b + c 점을 얻습니다. ...

https://school.programmers.co.kr/learn/courses/30/lessons/181928 📔 문제 설명 정수가 담긴 리스트 num_list가 주어집니다. num_list의 홀수만 순서대로 이어 붙인 수와 짝수만 순서대로 이어 붙인 수의 합을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181929 📔 문제 설명 한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 각 자리수의 합을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 num_list result ...

https://school.programmers.co.kr/learn/courses/30/lessons/181925 📔 문제 설명 정수 배열 numLog가 주어집니다. 처음에 numLog[0]에서 부터 시작해 “w”, “a”, “s”, “d”로 이루어진 문자열을 입력으로 받아 순서대로 다음과 같은 조작을 했다고 합시다. “w” : 수에 1을...

https://school.programmers.co.kr/learn/courses/30/lessons/181924 📔 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [i, j] 꼴입니다. 각 query마다 순서대로 arr[i]의 값과 arr[j]의 값을 서...

https://school.programmers.co.kr/learn/courses/30/lessons/181923 📔 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181876 📔 문제 설명 알파벳으로 이루어진 문자열 myString이 주어집니다. 모든 알파벳을 소문자로 변환하여 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 myString ...

https://school.programmers.co.kr/learn/courses/30/lessons/181911 📔 문제 설명 길이가 같은 문자열 배열 my_strings와 이차원 정수 배열 parts가 매개변수로 주어집니다. parts[i]는 [s, e] 형태로, my_string[i]의 인덱스 s부터 인덱스 e까지의 부분 문자열을 의미합니다...

https://school.programmers.co.kr/learn/courses/30/lessons/181892 📔 문제 설명 한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 각 자리수의 합을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 num_str result ...

https://school.programmers.co.kr/learn/courses/30/lessons/181910 📔 문제 설명 문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string의 뒤의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 my...

https://school.programmers.co.kr/learn/courses/30/lessons/181864 📔 문제 설명 문자 “A”와 “B”로 이루어진 문자열 myString과 pat가 주어집니다. myString의 “A”를 “B”로, “B”를 “A”로 바꾼 문자열의 연속하는 부분 문자열 중 pat이 있으면 1을 아니면 0을 return...

https://school.programmers.co.kr/learn/courses/30/lessons/181927 📔 문제 설명 정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solu...

https://school.programmers.co.kr/learn/courses/30/lessons/181931 📔 문제 설명 두 정수 a, d와 길이가 n인 boolean 배열 included가 주어집니다. 첫째항이 a, 공차가 d인 등차수열에서 included[i]가 i + 1항을 의미할 때, 이 등차수열의 1항부터 n항까지 included...

https://school.programmers.co.kr/learn/courses/30/lessons/181852 📔 문제 설명 정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 제외한 수들을 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181869 📔 문제 설명 단어가 공백 한 개로 구분되어 있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 💡...

https://school.programmers.co.kr/learn/courses/30/lessons/181884 📔 문제 설명 정수 배열 numbers와 정수 n이 매개변수로 주어집니다. numbers의 원소를 앞에서부터 하나씩 더하다가 그 합이 n보다 커지는 순간 이때까지 더했던 원소들의 합을 return 하는 solution 함수를 작성해 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181892 📔 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, n 번째 원소부터 마지막 원소까지의 모든 원소를 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n...

https://school.programmers.co.kr/learn/courses/30/lessons/181888 📔 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 마지막 원소까지 n개 간격으로 저장되어있는 원소들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. ...

https://school.programmers.co.kr/learn/courses/30/lessons/181935 📔 문제 설명 양의 정수 n이 매개변수로 주어질 때, n이 홀수라면 n 이하의 홀수인 모든 양의 정수의 합을 return 하고 n이 짝수라면 n 이하의 짝수인 모든 양의 정수의 제곱의 합을 return 하는 solution 함수를 작...

https://school.programmers.co.kr/learn/courses/30/lessons/181920 📔 문제 설명 정수 start_num와 end_num가 주어질 때, start_num부터 end_num까지의 숫자를 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181899 📔 문제 설명 정수 start_num와 end_num가 주어질 때, start_num에서 end_num까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181896 📔 문제 설명 정수 리스트 num_list가 주어질 때, 첫 번째로 나오는 음수의 인덱스를 return하도록 solution 함수를 완성해주세요. 음수가 없다면 -1을 return합니다. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181835 📔 문제 설명 정수 배열 arr와 자연수 k가 주어집니다. 만약 k가 홀수라면 arr의 모든 원소에 k를 곱하고, k가 짝수라면 arr의 모든 원소에 k를 더합니다. 이러한 변환을 마친 후의 arr를 return 하는 solution...

https://school.programmers.co.kr/learn/courses/30/lessons/181882 📔 문제 설명 정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱합니다. 그 결과인 정수 배열을 return 하는 solution 함수를 완성해 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181934 📔 문제 설명 문자열에 따라 다음과 같이 두 수의 크기를 비교하려고 합니다. 두 수가 n과 m이라면 ”>”, “=” : n >= m ”<”, “=” : n <= m ”>”, “!” : n &...

https://school.programmers.co.kr/learn/courses/30/lessons/181840 📔 문제 설명 정수 리스트 num_list와 찾으려는 정수 n이 주어질 때, num_list안에 n이 있으면 1을 없으면 0을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 num...

https://school.programmers.co.kr/learn/courses/30/lessons/181906 📔 문제 설명 어떤 문자열에 대해서 접두사는 특정 인덱스까지의 문자열을 의미합니다. 예를 들어, “banana”의 모든 접두사는 “b”, “ba”, “ban”, “bana”, “banan”, “banana”입니다. 문자열 my_str...

https://school.programmers.co.kr/learn/courses/30/lessons/181920 📔 문제 설명 정수 n과 문자열 control이 주어집니다. control은 “w”, “a”, “s”, “d”의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다. “w” : ...

https://school.programmers.co.kr/learn/courses/30/lessons/181843 📔 문제 설명 부분 문자열이란 문자열에서 연속된 일부분에 해당하는 문자열을 의미합니다. 예를 들어, 문자열 “ana”, “ban”, “anana”, “banana”, “n”는 모두 문자열 “banana”의 부분 문자열이지만, “aaa...

https://school.programmers.co.kr/learn/courses/30/lessons/181920 📔 문제 설명 길이가 같은 두 문자열 str1과 str2가 주어집니다. 두 문자열의 각 문자가 앞에서부터 서로 번갈아가면서 한 번씩 등장하는 문자열을 만들어 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181845 📔 문제 설명 정수 n이 주어질 때, n을 문자열로 변환하여 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n result 123...

https://school.programmers.co.kr/learn/courses/30/lessons/181941 📔 문제 설명 문자들이 담겨있는 배열 arr가 주어집니다. arr의 원소들을 순서대로 이어 붙인 문자열을 return 하는 solution함수를 작성해 주세요. 💡 입출력 예 arr resul...

https://school.programmers.co.kr/learn/courses/30/lessons/181938 📔 문제 설명 연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다. 12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 2 * a * b ...

https://school.programmers.co.kr/learn/courses/30/lessons/181936 📔 문제 설명 정수 number와 n, m이 주어집니다. number가 n의 배수이면서 m의 배수이면 1을 아니라면 0을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 number...

https://school.programmers.co.kr/learn/courses/30/lessons/181939 📔 문제 설명 연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다. 12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 b ⊕...

https://school.programmers.co.kr/learn/courses/30/lessons/181877 📔 문제 설명 알파벳으로 이루어진 문자열 myString이 주어집니다. 모든 알파벳을 대문자로 변환하여 return 하는 solution 함수를 완성해 주세요. 💡 입출력 예 myString ...

https://school.programmers.co.kr/learn/courses/30/lessons/181879 📔 문제 설명 정수가 담긴 리스트 num_list가 주어질 때, 리스트의 길이가 11 이상이면 리스트에 있는 모든 원소의 합을 10 이하이면 모든 원소의 곱을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181937 📔 문제 설명 정수 num과 n이 매개 변수로 주어질 때, num이 n의 배수이면 1을 return n의 배수가 아니라면 0을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 num...

https://school.programmers.co.kr/learn/courses/30/lessons/181944 📔 문제 설명 자연수 n이 입력으로 주어졌을 때 만약 n이 짝수이면 “n is even”을, 홀수이면 “n is odd”를 출력하는 코드를 작성해 보세요. 💡 입출력 예 // 홀수 1 is odd // 짝수 100 is even...

https://school.programmers.co.kr/learn/courses/30/lessons/181948 📔 문제 설명 다음과 같이 출력하도록 코드를 작성해 주세요. 💡 입출력 예 !@#$%^&*(\'"<>?:; 💻내가 작성한 코드 const readline = require("readline"); const r...

https://school.programmers.co.kr/learn/courses/30/lessons/181850 📔 문제 설명 실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 flo result ...

https://school.programmers.co.kr/learn/courses/30/lessons/181952 📔 문제 설명 문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요. 💡 입출력 예 HelloWorld 💻내가 작성한 코드 const readline = require("readline"); const rl = ...

https://school.programmers.co.kr/learn/courses/30/lessons/181907 📔 문제 설명 문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string의 앞의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 my...

https://school.programmers.co.kr/learn/courses/30/lessons/181848 📔 문제 설명 숫자로만 이루어진 문자열 n_str이 주어질 때, n_str을 정수로 변환하여 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n_str result ...

https://school.programmers.co.kr/learn/courses/30/lessons/181946 📔 문제 설명 두 개의 문자열 str1, str2가 공백으로 구분되어 입력으로 주어집니다. 입출력 예와 같이 str1 과 str2을 이어서 출력하는 코드를 작성해 보세요 💡 입출력 예 applepen 💻내가 작성한 코드 con...

https://school.programmers.co.kr/learn/courses/30/lessons/181950 📔 문제 설명 문자열 str과 정수 n이 주어집니다. str이 n번 반복된 문자열을 만들어 출력하는 💡 입출력 예 stringstringstringstringstring 💻내가 작성한 코드 repeat을 사용해서 반복해서 출력...

https://school.programmers.co.kr/learn/courses/30/lessons/181945 📔 문제 설명 문자열 str이 주어집니다. 문자열을 시계방향으로 90도 돌려서 아래 입출력 예와 같이 출력하는 코드를 작성해 보세요. 💡 입출력 예 a b c d e 💻내가 작성한 코드 for문 사용해서 console.log...

https://school.programmers.co.kr/learn/courses/30/lessons/181940 📔 문제 설명 문자열 my_string과 정수 k가 주어질 때, my_string을 k번 반복한 문자열을 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 my_string ...

https://school.programmers.co.kr/learn/courses/30/lessons/181943 📔 문제 설명 문자열 my_string, overwrite_string과 정수 s가 주어집니다. 문자열 my_string의 인덱스 s부터 overwrite_string의 길이만큼을 문자열 overwrite_string으로 바꾼 문자열...

https://school.programmers.co.kr/learn/courses/30/lessons/181947 📔 문제 설명 두 정수 a, b가 주어질 때 다음과 같은 형태의 계산식을 출력하는 코드를 작성해 보세요. a + b = c 💡 입출력 예 4 + 5 = 9 💻내가 작성한 코드 const readline = require("r...

https://school.programmers.co.kr/learn/courses/30/lessons/181949 📔 문제 설명 영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요. 💡 입출력 예 입력 출력 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181915 📔 문제 설명 문자열 my_string과 정수 배열 index_list가 매개변수로 주어집니다. my_string의 index_list의 원소들에 해당하는 인덱스의 글자들을 순서대로 이어 붙인 문자열을 return 하는 solutio...

https://school.programmers.co.kr/learn/courses/30/lessons/181889 📔 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 n 번째 원소까지의 모든 원소를 담은 리스트를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181933 📔 문제 설명 두 정수 a, b와 boolean 변수 flag가 매개변수로 주어질 때, flag가 true면 a + b를 false면 a - b를 return 하는 solution 함수를 작성해 주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/181951 📔 문제 설명 정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요. 💡 입출력 예 a = 4 b = 5 💻내가 작성한 코드 const readline = require("r...

진행하고 있는 프로젝트에서 NAVER 검색API를 사용하기 위해 setupProxy 파일에 코드를 추가하였으나 404 오류가 계속 발생하였다. 네이버 개발자 페이지도 꼼꼼히 찾아보고, 구글링도 해보았지만 해결할 수 없었다… 그러던 와중 target: "https://openapi.naver.com/"가 눈에 들어왔고, base url 뒤에 있는 슬래...

우아한 타입스크립트 도서의 일부 내용을 정리한 포스트입니다. 리액트 요소 타입 ReactNode, ReactElement, JSXElement // JSXElement const jsxElement = <div>Hello, World!</div>; // ReactElement const reactElement = Rea...

우아한 타입스크립트 도서의 일부 내용을 정리한 포스트입니다. 타입 확장 쇼핑몰 어플을 사용하다보면 카테고리 메뉴는 카테고리 이미지와 카테고리 이름으로 이루어져있다. 이것을 `ICategoryMenu`라는 이름을 가지는 인터페이스로 작성해보면 다음과 같다. 여기서 `I`는 interface로 작성된 타입이라고 명시해줄 때 사용하는 방법이다. ...

쉽게 시작하는 타입스크립트와 타입스크립트 공식문서에 내용을 정리한 포스트입니다. 타입스크립트 - 유틸리티 타입 유틸리티 타입은 이미 정의되어 있는 타입 구조를 변경하여 재사용하고 싶을 때 사용하는 타입입니다. 타입스크립트 공식문서 1. Pick 타입 특정 타입의 속성을 뽑아서 새로운 타입을 만들어낼 때 사용합니다. ✅문법 Pick<대상...

쉽게 시작하는 타입스크립트와 타입스크립트 공식문서에 내용을 정리한 포스트입니다. 타입스크립트 - 유틸리티 타입 유틸리티 타입은 이미 정의되어 있는 타입 구조를 변경하여 재사용하고 싶을 때 사용하는 타입입니다. 타입스크립트 공식문서 1. Pick 타입 특정 타입의 속성을 뽑아서 새로운 타입을 만들어낼 때 사용합니다. ✅문법 Pick<대상...

Day 14 마지막 미션! 2023년 개발 공부 계획 세우기 Object (목표) 영어 공부 꾸준히 하기 책 꾸준히 읽기 Activities(구체적인 활동) 책 “네이티브는 쉬운 영어로 말한다 1000문장” - 하루에 5문장씩 공부하기 1년에 책 6권 이상 읽기 (개발관련 서적 아니여도 괜찮음) Time Schedule...

Day 13 오늘 읽은 범위 에피소드 39 ~ 에피소드 45 책에서 기억하고 싶은 내용을 써보세요 머신 러닝, 딥러닝은 대체 뭘까? 그건 바로 이런 인공지능이 학습하는 방식 또는 인공지능을 학습시키는 방식을 말해 (p.228) 머신 러닝 인간이 기계에게 준 라벨을 토대로 학습 => 지도...

Day 12 오늘 읽은 범위 에피소드 36 ~ 에피소드 38 책에서 기억하고 싶은 내용을 써보세요 프로그래밍 패러다임 : 프로그래머가 프로그래밍을 할 때의 관점, 방식 (프로그래밍을 하는 사고의 틀) 대표적인 예: 절차 지향 프로그래밍, 객체 지향 프로그래밍, 함수형 프로그래밍 객체 지향 프로그래밍...

Day 10 오늘 읽은 범위 에피소드 31 ~ 에피소드 35 책에서 기억하고 싶은 내용을 써보세요 에피소드 31 - 데이터와 단짝 친구, SQL SQL : 데이터베이스에 어떤 질문 또는 문의를 하기 위해 어떤 구조를 가진 언어 , 데이터베이스를 다루는 언어 DBMS : 데이터베이스를 관리해 줌, MySQL, P...

Day 9 오늘 읽은 범위 에피소드 26 ~ 에피소드 30 책에서 기억하고 싶은 내용을 써보세요 에피소드 26 - 정렬 알고리즘이 뭐죠? 버블 정렬 왼쪽과 오른쪽 2개를 비교하면서 정렬 사건 복잡도 O(N²) Eg. 1 4 5 3 2 6 (오름차순 정렬) 1과 4를 ...

Day 6 오늘 읽은 범위 에피소드 21 ~ 에피소드 25 책에서 기억하고 싶은 내용을 써보세요 에피소드 21 - 서버리스는 서버가 없다는 뜻? 서버리스는 서버 없음이 아니라 우리가 직접 관리 하지 않는 서버를 의미해 (p.123) 서버리스에선 함수들이 잠을 자고 있어. 그리고 그 함수가 필요할 때 깨워서 요청...

Day 5 오늘 읽은 범위 에피소드 16 ~ 에피소드 20 책에서 기억하고 싶은 내용을 써보세요 에피소드 16 - 인터넷 익스플로러가 사라진 이유와 브라우저 엔진 에이젝스(Ajax), 웹사이트에서 어떤 내용을 업데이트하면 새로고침으로 확인해야 하는데 그 과정 없이 업데이트한 내용을 볼 수 있게 해주는 기술이야 (p.97) ...

Day 4 오늘 읽은 범위 에피소드 11 ~ 에피소드 15 책에서 기억하고 싶은 내용을 써보세요 라이브러리와 프레임워크의 차이 (p.72-74) 구분 라이브러리 프레임워크 제어권 나에게 있다 나에게 없다 ...

Day 3 오늘 읽은 범위 에피소드 6 ~ 에피소드 10 책에서 기억하고 싶은 내용을 써보세요 오류를 통해 훌륭한 개발자가 되는 방법 (p.40~41) 문제가 생겼을 때 나 자신을 문제에서 빼지 말 것 오류부터 고치려고 무작정 달려들지 말 것 오류를 고치기 전에 오류가 왜 ...

Day 2 오늘 읽은 범위 에피소드 1 ~ 에피소드 5 책에서 기억하고 싶은 내용을 써보세요 좋은 개발자는 암기력이 아니라 개발 과정을 잘 이애할 수 있어야 한다는 것! (p.17) 개발에서는 재능이 아니라 포기하지 않음이 더 중요하다는 것 (p.19) 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세...

노마드코더 노개북 챌린지 시작!! 2주 동안 IT 관련 책을 읽고, 그 날 무슨 내용을 배웠는지 정리하는 챌린지!

https://school.programmers.co.kr/learn/courses/30/lessons/120816 📔 문제 설명 머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇...

https://school.programmers.co.kr/learn/courses/30/lessons/120814 📔 문제 설명 머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요....

https://school.programmers.co.kr/learn/courses/30/lessons/120898 📔 문제 설명 머쓱이는 할머니께 생신 축하 편지를 쓰려고 합니다. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소...

https://school.programmers.co.kr/learn/courses/30/lessons/120847 📔 문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 num...

https://school.programmers.co.kr/learn/courses/30/lessons/120813 📔 문제 설명 정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n result ...

https://school.programmers.co.kr/learn/courses/30/lessons/120811 📔 문제 설명 중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 ret...

https://school.programmers.co.kr/learn/courses/30/lessons/120583 📔 문제 설명 정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 💡 입출력 예 array ...

https://school.programmers.co.kr/learn/courses/30/lessons/120909 📔 문제 설명 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12931 📔 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120818 📔 문제 설명 머쓱이네 옷가게는 10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20%를 할인해줍니다. 구매한 옷의 가격 price가 주어질 때, 지불해야 할 금액을 return 하도록 solution...

https://school.programmers.co.kr/learn/courses/30/lessons/120830 📔 문제 설명 머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총...

https://school.programmers.co.kr/learn/courses/30/lessons/120897 📔 문제 설명 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 n result ...

https://school.programmers.co.kr/learn/courses/30/lessons/120910 📔 문제 설명 어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120889 📔 문제 설명 선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집...

https://school.programmers.co.kr/learn/courses/30/lessons/120833 📔 문제 설명 정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번 째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해보세요. ...

https://school.programmers.co.kr/learn/courses/30/lessons/120903 📔 문제 설명 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 s1 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120821 📔 문제 설명 정수가 들어 있는 배열 num_list가 매개변수로 주어집니다. num_list의 원소의 순서를 거꾸로 뒤집은 배열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120809 📔 문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 numbers ...

https://school.programmers.co.kr/learn/courses/30/lessons/120911 📔 문제 설명 영어 대소문자로 이루어진 문자열 my_string이 매개변수로 주어질 때, my_string을 모두 소문자로 바꾸고 알파벳 순서대로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 💡 입출력 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120850 📔 문제 설명 문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하도록 solution 함수를 작성해보세요. 💡 입출력 예 | my_string | re...

https://school.programmers.co.kr/learn/courses/30/lessons/120908 📔 문제 설명 문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 str1 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120822 📔 문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 my_string ...

https://school.programmers.co.kr/learn/courses/30/lessons/120825 📔 문제 설명 문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 return 하도록 solution 함수를 완성해보세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120585 📔 문제 설명 머쓱이는 학교에서 키 순으로 줄을 설 때 몇 번째로 서야 하는지 궁금해졌습니다. 머쓱이네 반 친구들의 키가 담긴 정수 배열 array와 머쓱이의 키 height가 매개변수로 주어질 때, 머쓱이보다 키 큰 사람 수를 re...

https://school.programmers.co.kr/learn/courses/30/lessons/120829 📔 문제 설명 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120905?language=go 📔 문제 설명 정수 n과 정수 배열 numlist가 매개변수로 주어질 때, numlist에서 n의 배수가 아닌 수들을 제거한 배열을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 ...

Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'. Please make sure all processes are terminated then try again. If it still fails, a git process may...

! [rejected] master -> master (non-fast-forward) error: failed to push some refs to hint: Updates were rejected because the tip of your current branch is behind hint: its remote counter...

https://school.programmers.co.kr/learn/courses/30/lessons/120831 📔 문제 설명 정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요. 💡 입출력 예 n result ...

https://school.programmers.co.kr/learn/courses/30/lessons/120817 📔 문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 💡 입출력 예 numbers result...

https://school.programmers.co.kr/learn/courses/30/lessons/120806 📔 문제 설명 정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120820 📔 문제 설명 머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12940 📔 문제 설명 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3,...

https://school.programmers.co.kr/learn/courses/30/lessons/76501 📔 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 ...

https://school.programmers.co.kr/learn/courses/30/lessons/86051 📔 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세...

https://school.programmers.co.kr/learn/courses/30/lessons/77884 📔 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완...

https://school.programmers.co.kr/learn/courses/30/lessons/12922 📔 문제 설명 길이가 n이고, “수박수박수박수….”와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 “수박수박”을 리턴하고 3이라면 “수박수”를 리턴하면 됩니다. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12915 📔 문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 [“sun”, “bed”, “car”]이고 n이 1이면 각...

https://school.programmers.co.kr/learn/courses/30/lessons/70128 📔 문제 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... ...

https://school.programmers.co.kr/learn/courses/30/lessons/120863 📔 문제 설명 한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120852 📔 문제 설명 소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소...

https://school.programmers.co.kr/learn/courses/30/lessons/120840 📔 문제 설명 머쓱이는 구슬을 친구들에게 나누어주려고 합니다. 구슬은 모두 다르게 생겼습니다. 머쓱이가 갖고 있는 구슬의 개수 balls와 친구들에게 나누어 줄 구슬 개수 share이 매개변수로 주어질 때, balls개의 구슬 중 s...

light-dark 라이트-다크모드 코드 작성을 보다 편리하게 사용할 수 있도록 해주는 유틸리티 함수 기존의 방식 기존에는 media query를 사용해 유저 디바이스에 다크모드가 있는지부터 확인한 후 라이트-다크모드 적용 반복해서 같은 작업을 실행해야한다는 단점이 있음 ◆ prefers-color-sch...

animation-timeline() CSS만으로 스크롤 애니메이션을 즉시 구현할 수 있게 해주는 기능 메인 스레드에서 실행되지 않으므로 웹사이트가 느려지지 않는다는 장점을 가짐 mdn_공식문서_animation-timeline ■ 기존 방식의 CSS 스크롤을 하지 않아도, 애니메이션이 실...

https://school.programmers.co.kr/learn/courses/30/lessons/120868 📔 문제 설명 선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 두 변의 길이가 담긴 배열 sides이 매개변수로 주어집...

https://school.programmers.co.kr/learn/courses/30/lessons/120924 📔 문제 설명 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 💡 입출력 예 common ...

https://school.programmers.co.kr/learn/courses/30/lessons/120880 📔 문제 설명 정수 n을 기준으로 n과 가까운 수부터 정렬하려고 합니다. 이때 n으로부터의 거리가 같다면 더 큰 수를 앞에 오도록 배치합니다. 정수가 담긴 배열 numlist와 정수 n이 주어질 때 numlist의 원소를 n으로부터 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120853 📔 문제 설명 숫자와 “Z”가 공백으로 구분되어 담긴 문자열이 주어집니다. 문자열에 있는 숫자를 차례대로 더하려고 합니다. 이 때 “Z”가 나오면 바로 전에 더했던 숫자를 뺀다는 뜻입니다. 숫자와 “Z”로 이루어진 문자열 s가 주어질...

https://school.programmers.co.kr/learn/courses/30/lessons/120861 📔 문제 설명 머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의...

https://school.programmers.co.kr/learn/courses/30/lessons/120808 📔 문제 설명 첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순...

https://school.programmers.co.kr/learn/courses/30/lessons/120883 📔 문제 설명 머쓱이는 프로그래머스에 로그인하려고 합니다. 머쓱이가 입력한 아이디와 패스워드가 담긴 배열 id_pw와 회원들의 정보가 담긴 2차원 배열 db가 주어질 때, 다음과 같이 로그인 성공, 실패에 따른 메시지를 return하...

linear-gradient? 선형 그라데이션 효과를 만듬 linear-gradient 문법 linear-gradient( direction , color1, color2, …, color3 ) div { background: linear-gradient(direction, color1, color2, …, color3); } dire...

https://school.programmers.co.kr/learn/courses/30/lessons/120824 📔 문제 설명 정수가 담긴 리스트 num_list가 주어질 때, num_list의 원소 중 짝수와 홀수의 개수를 담은 배열을 return 하도록 solution 함수를 완성해보세요. 💡 입출력 예 num...

https://school.programmers.co.kr/learn/courses/30/lessons/120819 📔 문제 설명 머쓱이는 추운 날에도 아이스 아메리카노만 마십니다. 아이스 아메리카노는 한잔에 5,500원입니다. 머쓱이가 가지고 있는 돈 money가 매개변수로 주어질 때, 머쓱이가 최대로 마실 수 있는 아메리카노의 잔 수와 남는 돈...

https://school.programmers.co.kr/learn/courses/30/lessons/120854 📔 문제 설명 문자열 배열 strlist가 매개변수로 주어집니다. strlist 각 원소의 길이를 담은 배열을 retrun하도록 solution 함수를 완성해주세요. 💡 입출력 예 strlist ...

https://school.programmers.co.kr/learn/courses/30/lessons/12947 📔 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지...

https://school.programmers.co.kr/learn/courses/30/lessons/12943 📔 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나...

https://school.programmers.co.kr/learn/courses/30/lessons/12934 📔 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요...

https://school.programmers.co.kr/learn/courses/30/lessons/12933 📔 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12932 📔 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 💡 입출력 예 n result ...

https://school.programmers.co.kr/learn/courses/30/lessons/12931 📔 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 💡 입출력 예 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12928 📔 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 💡 입출력 예 n result 12 ...

https://school.programmers.co.kr/learn/courses/30/lessons/120807 📔 문제 설명 정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. 💡 입출력 예 num1 num2 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12925 📔 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 💻내가 작성한 코드 function solution(s) { return Number(s); }

https://school.programmers.co.kr/learn/courses/30/lessons/12916 📔 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. ‘p’, ‘y’ 모두 하나도 없는 경우...

1.두 수의 합 https://school.programmers.co.kr/learn/courses/30/lessons/120802 📔 문제 설명 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. 💡 입출력 예 num1 num2 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12910 📔 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1...

https://school.programmers.co.kr/learn/courses/30/lessons/12919 📔 문제 설명 String형 배열 seoul의 element중 “Kim”의 위치 x를 찾아, “김서방은 x에 있다”는 String을 반환하는 함수, solution을 완성하세요. seoul에 “Kim”은 오직 한 번만 나타나며 잘못된 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12903 📔 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 💡 입출력 예 s result ...

https://school.programmers.co.kr/learn/courses/30/lessons/12954 📔 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 💡 ...

사이트 Css Grid 부모 요소에 display:grid 적용시 자식 요소들은 grid cell로 변함 @Grid (부모요소 / container) 구분 명령어 가로 사이즈 설정 grid-template-columns 세로 사이...

사이트 [컨테이너] @container Flex의 영향을 받는 전체 공간 노란색 배경의 컨테이너 .container { display: flex; } 배치 방향 flex-direction .container { flex-direction: row; flex-direction: row-reverse; flex-directi...

https://school.programmers.co.kr/learn/courses/30/lessons/12918 📔 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 “a234”이면 False를 리턴하고 “1234”라면 True를 리턴하면 됩니다. 💡 입출력 예...

useMemo() 리액트에서 컴포넌트가 리렌더링 될 때 변화가 없는 부분도 리렌더링 된다면 자원이 낭비되고 성능에도 문제가 생기게 됨 이러한 상황에서 useMemo를 사용하면 의존성 배열의 값에 아무런 변화가 없다면 이전에 연산된 값인 memorized value를 리턴하고 불필요한 연산을 없애 성능을 최적화할 수 있음 동일한 입력이 들어오면 재...

useCallback() 함수를 메모이제이션하기위해 사용하는 훅 useMemo()와 useCallback()의 차이점 useMemo() useCallback() 특정 결괏값을 재 사용할 때 사용 특정 함수를 재사용할 때 사용 ■ 문법 con...

https://school.programmers.co.kr/learn/courses/30/lessons/12950 📔 문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 💡 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12948 📔 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문...

https://school.programmers.co.kr/learn/courses/30/lessons/12944 📔 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 💡 입출력 예 arr result [1,2,...

https://school.programmers.co.kr/learn/courses/30/lessons/12937 📔 문제 설명 정수 num이 짝수일 경우 “Even”을 반환하고 홀수인 경우 “Odd”를 반환하는 함수, solution을 완성해주세요. 💡 입출력 예 num result ...

https://school.programmers.co.kr/learn/courses/30/lessons/12912 📔 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]...

https://school.programmers.co.kr/learn/courses/30/lessons/81301 📔 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 💡 입출력 예 arr1 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12917 📔 문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 💡 입출력 ...

https://school.programmers.co.kr/learn/courses/30/lessons/12912 📔 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 💡 입...

https://school.programmers.co.kr/learn/courses/30/lessons/87389 📔 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 💡 입출력 예 ...

체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 내에 깊숙이 위치한 속성값을 읽을 수 있음 참조나 기능이 undefined 또는 null 일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공 && 연산자 let nestedProp = obj.first && obj.fir...

#Git 정보 등록하기 Git & Github 아이디,이메일과 같게 설정 $git config --global user.name 'Your_Name' $git config --global user.name 'Your_Email' @Git config 구성 확인 (리스트 확인) $git config --global --list @Gi...

리드미에 작성해야 하는 내용 ❓ 가이드 질문 왜 이 프로젝트를 기획했나요? (동기) 이 프로젝트는 어떤 문제를 해결하나요? 이 프로젝트를 통해 무엇을 배우셨나요? 이 프로젝트의 특징은 무엇인가요? 만약 프로젝트의 특징이 너무 많다면, ‘특징’ 섹션을 추가해서 이곳에 나열 ✏️ 작성해야하는 내용 ...

목차 제목 글씨 강조 인용문 목록 (List) 링크 이미지 코드블럭 표 (table) 수평선 #마크다운 제목 (header) <h1>부터 <h6> 까지 표현 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6 # 제목 1 ## 제목 2 ### 제목 3 #### 제목 4 ...

@interface 오브젝트의 모양을 특정할 때만 사용가능 React에서 많이 사용 type보다 객체지향형 프로그래밍과 유사 // Type type Player = { nickname: string, team: Team, health: Health }; // interface interface Player { nic...

@function call signature 함수 위에 마우스를 올렸을 때 보게 되는 것 함수의 인자 타입/ 반환타입을 알려줌 type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; @오버로딩 overloading 함수가 서로 ...

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' 문제 프로젝트 만드는 과정에서 history hook을 사용하려고 했더니, 오류가 발생 이유 버전에 따라 명령어가 변경됨 해결방법 6버전 미만 버전으로 다운그레이드하기 useNavig...

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\JS-project\react-movie-app\movie\node_modules\dotenv\lib' @ ./src/routes/Ho...

npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\user\Desktop\react-Blog/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\user\De...

PS C:\Users\user\desktop\reactCode> npx create-react-app blog TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> (C:\Users\user\AppData\Roaming\nvm...

──────────────────────────────────────────────────────────────── 10:16:19 AM: "build.command" failed 10:16:19 AM: ──────────────────────────────────────────────────────────────── 10:16:19 AM: ​ 1...

warning: LF will be replaced by CRLF in README.md. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/App.js. The file will have its ...

Reinitialized existing Git repository in C:/Users/user/Desktop/react-Blog/blog/.git/ 문제 git을 사용하기 위해 git init 명령어를 입력했을 때 에러 발생 해결방법 git remote -v 입력하여, 원격 remote 주소 확인 다를 경우는 git remote...

시맨틱 태그란? 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것 콘텐츠를 논리적 섹션으로 구성하고, 각 부분이 역할과 기능을 전달하는데 도움을 줌 <header> <nav> <article> <secti...