yh-jeon Full stack

name과 age라는 속성을 가진 클래스 선언class Person1 { name: string age?: number}자바스크립트 & 타입스크립트의 기본 타입유형자바스크립트 타입타입스크립트 타입수 타입Numbernumber불리언 타입Booleanboolean문자열 타입Stringstring객체 타입Objectobject 타입 주석자바스크립트 변수 선언문을 확장하여 타입을 명시합니다. let 변수 이름: 타입 [=초깃값]const 변수 이름: 타입 = 초깃값let n: number = 1let b: boolean = true or falselet s: string = 'hello'let o: object = {} 📌TypeScript는 JavaScript와 다르게 let으로 선언한 변숫값은 타입 주..

📌 소스 코드를 여러 개의 모듈로 분할하면 각각의 모듈에 어떤 내용이 있는지를 서로 알려야 하므로export와 import라는 키워드를 사욯합니다.export는 기능을 제공하는 쪽에서 사용 / import는 다른 모듈의 기능을 이용하는 쪽에서 사용합니다. 심벌이란? ECMAScript 2015부터, symbol 은 number 와 string 과 같은 기본 데이터 타입입니다.symbol 값은 Symbol 생성자를 호출함으로써 생성됩니다.let sym1 = Symbol();let sym2 = Symbol("key"); // 선택적 문자열 키 심벌은 불변하고 유일합니다.let sym2 = Symbol("key");let sym3 = Symbol("key");sym2 === sym3; // false, 심벌..

타입스크립트 개발은 Node.js 프로젝트를 생성한 이후 개발 언어를 타입스크립트로 설정하는 방식으로 진행합니다.Node.js 프로젝튼는 디렉터리를 생성하고 생성한 디렉터리에 package.json 이름의 파일을 만드는 것으로 시작합니다. 아래와 같이 실습 디렉터리를 생성한 이후 npm init --y를 입력합니다. 📌 타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다. 앞서 이미 2개의 패키지를 -g 옵션을 주어 전역에 설치하였지만, 이 프로젝트를 전닯다아서 이용하는 다른 개발잘의 컴퓨터에는 2 패키지가 전역에 설치되어 있지 않을 수도 있기에 이를 고려하여 터미널에서 다음 명령으로 두 패키지를 -D 옵션으로 설치하여 package.json에 등록하는 것이 좋습니다.>..

📍 유닛명 유닛 코드 : PXO-202, 선택형[기획tool]리스틀리 : 내가 보고 있는 화면의 데이터는?STEP 01 .   리스틀리는 어떻게 활용하는  tool인가요? ⚒️ 리스틀리  를 설치할 수 있는 링크는 아래 안내된 바를 참고 바랍니다. ⚒️ 🔗 https://www.listly.io 리스틀리란 ? 🤔 웹 페이지의 콘텐츠 및 정보들을 목록 형태로 사용자의 컴퓨터에 저장하고 공유할 수 있는 소셜 북마킹 도구를 말합니다.주로 사용자들이 다양한 주제의 목록을 만들고, 이를 공유하여 협업할 수 있도록 도와주는 플랫폼입니다. [리스틀리의 주요 기능] 👀   📌 1.목록 생성 및 공유: 사용자는 다양한 주제에 대한 목록을 만들 수 있으며, 이를 다른 사용자들과 공유할 수 있습니다. 📌 2. 협..

본 기획에서는, 기획자(본인)이 직접 기획한 피그마의 협업 관리 시스템의 내용을 바탕으로 기획의 구조화를 다룹니다.  🙋🏽‍♂️ 안녕하세요!! 지난주 제가 작성한 " 🎨 피그마를 통한 협업관리시스템"에 대한 내용을 기획했습니다. 혹시, 안 보신 분들을 위해서 저의 지난주 기획안 링크를 아래에 걸어 두었습니다.https://view964.tistory.com/41 디자인을 넘어 개발, 협업의 패러다임을 바꾼 "피그마"[실무 기획] 레퍼런스 분석 : 이 세상에는 어떤 기획들이 있는가?커리큘럼 코드명 : PXE - 105혹시 이 로고를 한 번 보신적이 있으신가요?  IT업계  혹은 디자인 하시는 분들은 어디선가 한 번쯤 들view964.tistory.com 궁금하신 분들은 한 번씩 보고 오시면 이번 주차..

지인들과의 밥 약속, 식사 후 결제 각자 계산 or 1명의 💳 결제 후 계좌 이체 다들 이렇게 하고 계시지 않으신가요..?? 저는 이럴 때 보통 송금으로 계좌 이체 보다는 '카카오페이' 간편 송금으로 보내는 편인데요. 이번 기획에는 계좌 없이도 카카오톡으로 바로 간편 송금할 수 있는이 '카카오 페이'에 대해서 다뤄 보겠습니다! STEP 01. 기획의 현실성은, '범위'에 기준한다.대학교 생활을 하다 보면 "알바"는 자연스럽게 하는게 현실인 요즈음 🪡 식당에서 손님이 음식을 드시고 결제하실 때 자주 내미는 💥 "이것" 🔔 바로 ' 📲 모바일 결제' 인데요 🔔 저도 알바를 하면서 예전 보다는 확실히 💰 카드와 현금 💳 보다는 이 📍 ' 📲 모바일 결제'로 결제를 하시는 분들이 점점 늘어나..

폼 요소의 입력값 다루기사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다. 한 줄 입력 - input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼form name="frm">    input type="text" name="id">    input type="password" name="pw">  form> text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에 value 속성을 사용합니다.document.frm.id.value;document.frm.pw.value; 다음 코드처럼 value 속성에 값을 할당하여 원하는 값을 자바스크립트로 입력..

[실무 기획] 레퍼런스 분석 : 이 세상에는 어떤 기획들이 있는가?커리큘럼 코드명 : PXE - 105혹시 이 로고를 한 번 보신적이 있으신가요?  IT업계  혹은 디자인 하시는 분들은 어디선가 한 번쯤 들어보셨을 것 같은데요. 혹시, 처음 들어보신 분들을 위해 간단히 피그마란 어떤 건지 간략히 소개해 보겠습니다~ 📢 피그마란?피그마는 클라우드 기반의 디자인 도구로, 웹 브라우저를 통해 사용할 수 있는 협업 디자인 플랫폼을 말하며주로 UI/UX 디자인 작업에 사용되며 실시간 협업 기능 및 다양한 기능을 가진 디자인 툴입니다.오늘은 이 피그마에 대한 IT업계 점유율과 개발자 시장 속 입지를 살펴보려고 합니다! 💡 STEP 01.  어떤 기획 레퍼런스를 살펴보나요? 혹시... 다들 팀 프로젝트 해보신 적..

.style. = ;객체는 { } 를 이용하여 생성이 가능하며 이러한 방식을 리터럴 방식으로 객체를 생성했다고 표현합니다.만약, { } 내부에 아무런 속성이 없으면 빈 객체라고 부릅니다. 대괄호 연산자로 접근하기 = [ ]console.log(person["name"]); 마침표 연산자const person = { name:"Hong Gildong"};console.log(person.name); 객체 속성 동적으로 추가 - 객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고, 없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가합니다.const person = {};person.name = { firstName:"GilDong", lastName:"Hong"}; pers..

함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다. 함수 선언문 - function 키워드로 함수를 정의하는 방법function 식별자(){}function gugudan() { for(let i = 1; i  이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.gugudan(); 함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.const 변수명 = function(){}; // 익명 함수const 변수명 = function 식별자(){}; // 네이밍 함수const gugudan = function(){ for(let i=1; i  함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장..