TIL

\`\`변수는 변하는 수이며 어떤 값이 들어갈 지 예측할 수 없음우리가 사용할 메모리 공간에 이름을 부여한 것이 변수정수는 0을 포함한 부호가 있는 수char : 1byteshort : 2byteint : 4bytelong : 4byte실수는 소수점 이하를 가지는 수f

if : 조건이 참인 경우 명령문을 실행else if : 다중조건을 사용하여 참인 경우 명령문을 실행else : 조건이 거짓인 경우 명령문을 실행초기식, 조건식, 증감식을 모두 생략하면 무한 루프break나 return을 사용해 빠져나옴조건문이 참일때 실행되는 반복문,

표준 함수 : 언어에서 기본적인 라이브러리로 제공해주는 함수사용자 정의 함수 : 사용자가 자신이 원하는 기능을 직접 만드는 함수return type : 함수가 반환하는 데이터의 타입함수 이름 : 함수를 호출하기 위한 이름parameters : 함수 호출 시에 전달되는

하나 이상의 서로 다른 종류의 연관된 변수들을 묶어서 새로운 데이터 타입을 정의하는 것사용 예시가장 큰 변수 크기만큼 메모리 공간이 할당되고, 나머지 변수들은 앞에서부터 메모리를 공유열거형은 데이터들을 열거한 집합 enumeration의 약자(enum)컴파일러는 열거형

타입스크립트는 자바스크립트에 타입 시스템을 적용해 에러를 체크할 수 있음JavaScriptTypeScriptnode 설치 후tsc \[file name] : 컴파일 실행tsc --init : tsconfig file 생성tsc -w \[file name] : 파일을 계

리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 함제한된 타입을 동시에 지정하고 싶은 경우anyVal 변수는 number나 string 타입 중 아무 타입의 값이 올 수 있음길이가 고정적이며 각 요소의 타입이 정해져 있음멤버변수 == 속성 ==

React.js는 자바스크립트 라이브러리싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능초기 랜더링 → 가상 DOM 변경 → 재조정 → 실제 DOM 업데이트웹 페이지의 구조화된 내용을 표현하고 상호작용할 수 있는 방법을 제공하는 인터페이스자바스크립트의 확장 문

ClassCom.tsxApp.tsx최근에는 함수 컴포넌트 + Hooks 사용 권장FuncCom.tsxApp.tsxstate는 컴포넌트 내부에서 바뀔 수 있는 값함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state\[msg, setMsg] = useSta

🔎 NPM(Node Package Manager)npm은 노드 패키지 관리자로, npm registry에서 패키지들을 가져와서 설치🔎 NPX(Node Package eXecute)npx는 패키지를 설치하지 않고, npm registry에서 원하는 패키지를 실행vit

btn

Hooks는 React 버전 16.8부터 도입된 기능으로, 클래스 컴포넌트로 사용하던 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 함수useState

<DragDropContext /> : drag and drop 기능을 사용하고 싶은 부분을 감싸줌<Droppable /> : drag 해서 drop 할 부분 지정<Draggable /> : drop 할 하나하나의 item

누구나 접근할 수 있도록 공개되어 있는 코드오픈 소스로 배포/준비/공개된 소스 코드를 사용할 때 지켜야 하는 규칙 등을 명시하는 것

프로젝트에 LICENSE.md(LICENSE.txt) 파일을 추가해줌Add file → Create new file파일이름 필드에 LICENSE or LICENSE.md를 입력파일이름 아래에서 라이선스 템플릿 선택을 클릭GitHub는 커뮤니티 프로필 권장 체크리스트를

저작자 : 오픈소스 프로젝트를 만든 사람 또는 조직Maintainer : 프로젝트의 방향을 설정하고, 프로젝트를 관리하는 컨트리뷰터Committer : 컨트리뷰션을 하면 리뷰를 하고 프로젝트에 반영할지 결정할 권한을 가지고 있는 컨트리뷰터Contributor : 오픈

사용 중인 오픈 소스 프로젝트에 기능을 수정하고 추가해서 컨트리뷰트 PR해도 우선순위에 따라 반려 가능→ 오픈 소스 프로젝트를 fork 해서 별도의 프로젝트로 직접 운영⚠️ 기존 프로젝트의 라이선스를 잘 지켜야 함Readme프로젝트 만든 이유, 목적, 사용 용도 추천코

pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트utils : 유틸리티hooks : 리액트 훅model : 모델(타입)api : api 연동을 위한 fetcher 등start : 개발 모드로

@testing-library/reactcreate-react-app을 이용하여 프로젝트를 생성할 때 함께 설치describe : 관련된 테스트들을 그룹화하는 함수첫번째 인자 : 해당 코드 설명이후 : it 을 사용하여 테스트 코드 작성it : 하나의 테스트를 정의하는

create 함수를 이용해 store 생성상태 변수와 해당 상태를 업데이트하는 함수로 구성쿼리 스트링은 문자열의 형태를 띄며 key=value로 표현react-router-dom에서 쿼리 스트링 값을 가져올 수 있는 hookuseLocationuseSearchParam

리액트에서 라우터를 사용할 때 파라미터 정보를 가져와 활용하는 HooksURL : localhost:3000/books/:bookId날짜와 시간을 편리하게 관리할 수 있는 라이브러리keyof는 객체 형태의 타입을 유니온 타입으로 만들어주는 연산자

axios

kakao 우편번호 서비스는 우편번호 검색, 도로명 주소 입력 기능을 제공URL : https://postcode.map.daum.net/guideoncomplete우편번호 검색 결과에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수 정의zo

Extensions에서 Snippet generator 설치원하는 코드 작성 후 우클릭 → Generate snippet언어 선택snippet name 작성snippet trigger 작성snippet description 작성$1 : snippet 사용 시 자동으로

React-Query는 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리@keyframes는 CSS 애니메이션 구간을 정하고, 각 구간별 적용할 스타일을 지정

MSW는 Service Worker가 네트워크 호출을 가로채는 API 모킹 라이브러리URL : https://mswjs.io/faker는 가짜 데이터를 생성해주는 라이브러리URL : https://fakerjs.dev/한국어로 가짜 데이터 생성

react-query : Infinite Queries

dots : 슬라이드 위치를 이동하는 버튼infinite : 마지막 슬라이드에서 처음 슬라이드로 반복speed : 슬라이드가 넘어가는 속도slidesToShow : 한번에 보여지는 슬라이드 개수slidesToScroll : 한번에 넘어가는 슬라이드 개수

코드의 통합, 테스트, 배포의 단계를 유지하며 자동화코드 변경 → 지속적 통합 → 자동 인수 테스트 → 구성 관리코드가 올바르게 빌드 및 통합되는지를 자동으로 확인리포지토리에서 코드를 체크아웃빌드를 수행하고 단위테스트를 수행코드 품질을 검증제품이 릴리스할 준비가 되었는

자바로 작성된 오픈 소스 자동화 서버지속적 인도 프로세스를 구축하는 데 이용응용 소프트웨어를 자동으로 빌드, 통합테스트를 통하여 배포할 수 있는 상태임을 확인응용 소프트웨어를 컨테이너 이미지로 만들어냄포드, 디플로이먼트, 서비스 등 다양한 오브젝트 조건에 맞추어 배포m

GitHub의 private repo에 접근할 때는 주로 SSH 프로토콜을 이용ssh-keygen을 이용해서 public-private keypair를 생성GitHub 로그인(Account) Setings > SSH and GPG keysNew SSH Keypublic

요구사항대로 기능이 구현되었는지 확인하는 과정버전 관리, 접근 제어 등의 기능을 가지는 소프트웨어 개발 산출물을 발행하거나 인출할 수 있는 저장소 및 관리 기법이 필요컨테이너화된 소프트웨어의 산출물인 도커 이미지를 관리할 수 있는 리포지토리레지스트리 서비스 : Dock

구성(형상; configuration)은 의존성 때문에 소프트웨어 시스템에 큰 영향을 미치기 때문에 구성 관리(형상 관리)는 CI/CD에 중요한 측면이를 체계적으로 관리하고 자동화할 수 있는 여러 종류의 도구가 만들어지고 이용되어 왔음Infrastructure(소프트웨

오픈소스는 누구나 자유롭게 접근하여 수정하고 배포할 수 있는 소스코드ex. Linux, mongoDB, Chrome Engine, BootstrapMarkdown은 텍스트 형식 구문의 가벼운 마크업 언어로 문서 작업에 주로 사용ex. README.mdgit은 소스코드

프로젝트의 기획, 작업, 개선 사항, 버그 수정, 기능 추가 등의 이슈들을 위한 게시판→ 담당자, 라벨 등을 이용해 분류 가능https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-

react-icons: https://github.com/react-icons/react-iconsreact-datepicker: https://github.com/Hacker0x01/react-datepickerreact-storybook: http

https://www.npmjs.com

React와 Express를 이용한 통합 프로젝트데이터베이스와 사용자 인터페이스를 포함하여 개발개발 및 통합(빌드, 테스트) 과정을 자동화 파이프라인으로 구축요구사항 분석과 구조 설계백엔드 상세 설계와 개발환경 셋업단위테스트와 컨테이너화Selenium을 이용한 E2E(

소프트웨어의 구조 설계를 기술하고 정의하는 문서소프트웨어 개발 과정에서 중요한 기준프로젝트 디렉토리 생성기본 패키지 설치프로젝트 기본 설정환경 설정응용 기본 구조 구현인증 정보 (credentials)를 제출하도록 하여 유효한 사용자인지를 확인하는 절차특정 자원에 접근

개요패키지 구조Page Components(Smaller) ComponentsAPI 함수React Query HooksUtilityIndex.tsx경로 : “/”내용 : 메인 랜딩 페이지Login.tsx경로 : “/login”내용 : 로그인 페이지Error.tsx경로

독립적으로 테스트할 수 있는 함수/메서드들은 모두 테스트몇 개의 모듈이 조합하여 결과를 만들어야 하는 경우발생할 수 있는 요청 각각에 대한 테스트 케이스들을 마련dependenciescookie-parserjsonwebtokendevDependenciesjestts-j

Selenium은 웹 테스트 자동화 도구https://selenium.dev브라우저 자동화 드라이버시중에서 많이 이용되는 여러 가지 브라우저들에 대한 라이브러리 제공웹-사용자 상호작용을 기록(녹화) 하고 재생하여 테스트 자동화에 활용Chrome 및 Firefo

여러가지 응용의 실현에 필요한 infrastructure를 on-demand로 서비스웹/모바일 서비스 응용빅데이터/인공지능 응용Production(staging) 환경을 AWS 위에 구축EC2(Miniukube cluster, web server, DB, SSL)이미지

Code checkout > Unit test > Code coverageProduction build > Packaging > Image pushStaging > Acceptance testRelease > Smoke testSCM CheckoutJenkins에서 g

파이프라인 모니터링빌드 및 배포가 일어나는 것을 운영자가 인지할수 있도록 알림 설정코드 리포지토리에 릴리스 브랜치를 별도로 구성하여 빌드 및 배포 제어클러스터 모니터링시스템 자원의 이용 상태와 응용 소프트웨어의 실행 상태를 점검클러스터 내에 메트릭 데이터 수집을 위한

주어진 이진수의 모든 비트에 대하여 0은 1로, 1은 0으로 바꿔줌주어진 수 x에 대한 1의 보수 = 2^n - x - 1주어진 이진수의 1의 보수를 취한 뒤, 거기에 1을 더함주어진 수 x에 대한 2의 보수 = 2 ^ n - x최상위 비트(MSB)로부터 부호를 알 수

중앙처리장치 : CPU(central processing unit)제어장치 : 명령어를 해석하여 그 실행에 필요한 제어 신호를 발생시킴ALU : 산술 및 논리 연산 등을 수행레지스터 : 연산의 대상 (operand) 및 연산 결과 등을 저장주기억장치 : Memory(R

Analog : 자연 상태에서 나타나는 연속적인 값을 정보로 표현Digital : 0과 1의 조합으로 부호화된 신호로 정보를 표현동기식 전송(Synchrounous Transmission)타이밍 제어 신호와 데이터 신호를 동기화비동기식 전송(Asynchronuous T

민첩성(Agility)탄력성(Elasticity)비용절감(Low Cost)가용성(Availability)사용자가 요금을 지불하고 이용할 수 있도록 서비스 제공AWS(Amazon), GCP(Google), Azure(Microsoft)IT 시스템 인프라 구축을 목적으로