모든 것의 기록

📌 NCP CI / CD 그거 어떻게 하는 건데···. 부디 다른 분들에게 도움이 되길 바라는 마음에 오늘 있었던 일을 적어본다···.일단 NCP에 Object Storage를 생성하고 프로젝트를 넣어두었다.그리고 테스트 하기 위해 수동으로 파일 업로드를 해 보았는데,폴더를 업로드 하면 되지 않아서, 직접 폴더를 생성하고 넣어줘야하는 번거로움이 있었다.그래서 일단 CI / CD 를 세팅하게 되는데···.    🧐 AWS는 그냥 aws s3로 하면 되는데, NCP는 굳이 s3cmd를 써야 함?  🧐  CLI라는 게 뭔데 꼭 써야 해? 이렇게 두가지 물음이 생겨서 해당 내용에 대해 먼저 이해하려고 한다.  🎯 CLI 란?CLI = Command Line Interface로 명령어로 조작하는 인터페이스..

📌 NCP 정적 웹사이트 배포··· 대체 무엇이길래 자료가 없는가···?정적 웹사이트는 Netlify, Vercel, GitHub Pages, Firebase Hosting, Cloudflare Pages 같은 전용 정적 호스팅 플랫폼을 많이 쓴다. 그에 반해 NCP Object Storage는 원래 파일 저장 목적이 주 용도라, 배포 용도로는 거의 안 쓰인다.게다가 퍼블릭 URL 설정이 일반적인 웹 호스팅처럼 간단하지 않아서 개발자들이 많이 기피 하기도 한다. 그리고 NCP Object Storage는 AWS S3와 API 호환이 되는데, S3는 정적 호스팅에 대한 자료가 넘치는데 비해, NCP는 아직 생태계가 좁아서 자료가 잘 안 퍼진다 고 한다(GPT가 알려줌) 개인적으로 자료들을 찾아봤을 때 옛..

1. 강의를 듣게 된 계기부트캠프에서 개발 관련해서 배우면서 타입스크립트를 배웠는데, 리액트를 배울 때 좀 부족하다는 생각이 들어서좋은 강의가 있다는 추천을 받고 " 한 입 크기로 잘라먹는 리액트 " 를 먼저 접하게 되었는데강의가 너무 좋아서 타입 스크립트도 듣게 되었습니다!또 동시에 타입스크립트 챌린지도 함께 진행 된다는 소식을 듣고 옳다구나! 하고 시작하게 되었네요아직 리액트를 완강하진 못 했지만, 타입 스크립트는 챌린지를 끝까지 완주했다는 사실에 뿌듯합니다  2. 어떤 점이 좋았나?강의를 들을 때 진짜 완전 초보자의 입장에서 하나하나 차근차근 순서를 밟아가며 알려주시는 게 제일 좋았습니다.부캠에서 제공되었던 강의는 좀 정리가 안 된 느낌이라 들으면 들을 수록 머리가 좀 복잡했는데···ㅎㅎ정환님 덕분..

AWS내가 여길 방문할 수 있게 될 줄이야! 생각도 못 했다. 인생 참 알 수 없음···!AWS 방문 후기입니다!    📌 1. AWS 🔅 AWS가 뭐야?AWS는 (Amazon Web Services)는 아마존에서 제공하는 클라우드 컴퓨팅 플랫폼으로 쉽게 말해서, 인터넷을 통해 서버, 데이터베이스, 스토리지, 네트워킹, AI, 분석 등의 IT 인프라를 빌려서 사용할 수 있는 서비스 라고 한다! 사실 나도 개발 쪽에 발을 들이기 전에는 AWS가 있는지도 몰랐는데···!AWS에 관해서 좀 들어보고 알아보는 계기가 되었다! 🔅 AWS 쓰면 좋은 점?서버를 직접 운영할 필요 없음 → 데이터 센터 구축 X필요한 만큼만 사용하고 비용 지불 → 사용한 만큼만 내는 과금 방식 (Pay-as-you-go)확장성이 ..

더보기Lexical Environment(렉시컬 환경)Lexical Environment(렉시컬 환경)변수와 함수가 선언된 시점의 문맥(환경)을 나타내는 객체자바스크립트는 코드를 실행할 때 각 함수와 블록에 대해 렉시컬 환경을 만든다.Lexical Environment(렉시컬 환경)의 구성Environment Record(환경 레코드)현재 실행중인 함수나 블록 내에 선언된 모든 변수와 함수 정보를 저장함.Outer Lexical Environment Reference(외부 렉시컬 환경 참조)현재 렉시컬 환경의 바로 바깥 환경을 참조, 이 참조를 통해 함수는 자신의 스코프 테인을 따라 외부 변수에 접근할 수 있음  더보기렉시컬 환경과 스코프는 같은 의미인가?스코프 (개념)변수가 어디까지 접근이 가능한지를 ..

주요 기능메모 추가텍스트를 입력한 후 "추가" 버튼을 누르면 새로운 메모가 리스트에 추가됩니다.메모 삭제메모마다 삭제 버튼이 있어 원하는 메모를 클릭하여 제거할 수 있습니다.데이터 저장모든 메모는 **로컬 스토리지(Local Storage)**에 저장되며, 새로고침 후에도 메모가 유지됩니다.예상 화면 흐름1. 입력 창과 버튼화면 상단에 텍스트를 입력하는 인풋 필드와 "추가" 버튼이 있습니다.2. 메모 리스트입력된 메모는 리스트 형태로 아래에 나타나며, 각각의 메모에는 삭제 버튼이 표시됩니다.삭제 버튼을 클릭하면 해당 메모가 제거됩니다.UI 디자인 아이디어심플한 디자인흰 배경에 카드 스타일로 메모를 표시합니다.테마 선택다크 모드 또는 컬러풀한 테마 옵션을 제공합니다.애니메이션메모 추가 및 삭제 시 페이드 ..

1. value 속성html 요소에서 주로 입력값을 관리하거나 조작할 때 사용한다. 주로 form 요소와 함께 쓰이며,사용자가 입력한 값을 읽어들일 때 요소의 value 속성에 접근한다.form 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근할 수 있다. textContent : 요소에 쓰여져 있는 텍스트에 접근하고 싶다.value : 사용자가 직접 요소에 입력한 값에 접근하고 싶다.    2. value 하는 일 value 속성에 접근하면, 크게 읽기와 쓰기를 할 수 있다.사용자가 입력한 값을 읽거나 직접 value 값에 입력하거나 하는 경우이다.//사용자가 작성한 값을 콘솔창에 출력 요청console.log(target.value)//사용자가 작성 ..

이벤트 핸들링은 사용자가 웹페이지와 상호작용할 때 발생하는 이벤트를 처리하는 방법으로,버튼 클릭, 마우스 움직임, 키보드 입력 등 다양한 이벤트가 발생할 수 있다.이 때 이벤트가 발생하면 이를 처리하기 위해 이벤트 핸들러를 설정하여 원하는 동작을 실행한다. 1. 이벤트 처리 방식자바 스크립트에서는 이벤트를 처리하는 두 가지 주요 방법이 있다. 1) 속성에 직접 할당하는 방법element.onclick = function() { console.log('버튼 클릭!');};해당 방법은 element가 클릭 되었을 때 바로 실행할 코드를 지정한다.간단하고 직관적이나, 여러 개의 이벤트 핸들러를 같은 요소에 추가할 수 없다. 2) addEventListener() 메서드를 사용하는 방법element.addEv..

1. 인수(Argument)란?인수(Argument)는 함수를 호출할 때 전달하는 값이다. 함수는 인수를 받아서 무언가 작업을 수행하게 된다.그리고 숫자, 문자열, 배열, 객체 등 다양한 타입을 인수로 전달할 수 있다.function greet(name) { // name은 파라미터 = 매개변수 console.log("Hello, " + name);}greet("코마"); // "코마"는 아규먼트// 출력: Hello, 코마    2.  반환(Return)이란? 함수가 결과값을 반환하는 것으로 함수를 호출한 쪽에 값을 돌려주는 것이다.반환값이 있으면, 그 값을 다른 변수에 저장하거나 다른 함수의 입력으로 사용할 수 있다. function 함수이름(파라미터) { return 반환값;}function ..

1. 파라미터(매개변수) 함수를 정의할 때 함수가 받을 값을 미리 지정해 놓은 변수다함수가 호출될 때 **인수(Argument)**가 이 **매개변수(Parameter)**에 할당된다.name은 매개변수이며, 함수가 호출될 때 이 name에 값이 전달될 준비를 하고 있다.function greet(name) { // name은 매개변수 console.log("Hello, " + name);}      2.  아규먼트(인수)함수를 호출할 때 함수에 전달하는 실제 값이다."코마"는 인수이며, greet 함수의 매개변수인 name에 전달 되게 된다.greet("코마"); // "코마"는 인수    3. 파라미터(매개변수)와 아규먼트(인수)의 차이파라미터(Parameter) : 함수를 선언할 때 인자(값)..