yh-jeon Full stack

Google Fonts 사이트에 들어가서 지정할 폰트를 고른 후에 Get embeded code를 입력하여 장바구니에 들어가고 나서장바구니에서 사용할 폰트를 적용시켜줍니다. 1. nanum pen script 와 black hans sans 글꼴을 지정해 줍니다. 이때 장바구니에서 web을 들어가서 코드를 복사하여 각각 붙여줍니다.css의 경우 css 파일을 디렉터리 내부에 지정하여 작성해 줍니다.  font.css@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap");.nanum-pen-script-regular { font-family: "Nanum Pen Scr..

리액트 컴포넌트리액트는 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있습니다. 아직까지 두 방식 모두 지원하고 있지만, 공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장합니다. 따라서 되도록 클래스 컴포넌트를 배우지 않아도 되지만, 레거시(Legacy) 유지 보수 차원에서 간단하게 살펴봅니다.함수형 컴포넌트와 클래스형 컴포넌트리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있습니다. 해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있습니다. 함수형 컴포넌트import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo f..

타입스크립트란?타입스크립트는 별도의 새로운 언어가 아니라, 자바스크립트에 타입(type)을 추가한 확장 언어입니다. 새로 배우는 언어가 아니기 때문에 학습 난이도는 높지 않은 편이며, 처음에는 복잡해보이지만, 나중에 가도 복잡합니다.. (쉽게 쉽게 할거면 자바스크립트 쓰자.. 😉)설치타입스크립트로 작성된 코드를 실행하려면 타입스크립트 코드를 자바스크립트 코드로 ‘변환’해주는 작업이 필요합니다. 이러한 변환 작업을 전문 용어로 ‘컴파일(compile)’이라고 합니다. 컴파일을 하기 위해서 여러가지 방법이 있지만, 저희는 Node.js를 이용하는 방법으로 합니다.Step 1실습에 사용할 폴더를 하나 생성하여 비주얼 스튜디오 코드로 열어줍니다.Step 2비주얼 스튜디오 코드의 가장 루트 폴더 경로 내에서 아..

NPM, NPX, YARN, → PNPM, BURN본격적으로 리액트를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어 형식은 npm(yarn) 또는 npx가 포함된 명령어를 입력하게 됩니다. 이때, npm, yarn, npx는 무엇일까요?NPM(Node Package Manager)NPM은 Node Package Manager의 약자로 Node.js의 기본 패키지 관리자입니다. NPM은 Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용됩니다.주요기능패키지 설치:dependency에 설치 : npm install —savedevDependency에 설치: npm install —save-dev패키지 제거: npm uninsta..

VSCode Extensions학습 과정에서 유용하게 사용할 수 있는 VSCode 익스텐션을 소개합니다. Material Icon Theme - Philipp KiefVSCode 익스플로러(Explorer) 트리의 아이콘을 아름답게 변경해주는 익스텐션. Material Theme - EquinusocioVSCode 화면 테마 익스텐션 Auto Close Tag - Jun HanHTML 태그의 종료 태그를 자동으로 추가해주는 익스텐션 Auto Rename Tag - Jun Han태그의 이름을 수정하면 종료 태그도 함께 수정하게 해주는 익스텐션 Code Runner - Jun Han자바스크립트 코드를 NodeJS로 실행하게 해주는 익스텐션  ES7+ React/Redux/React-Native snippet..

📍 유닛명 유닛 코드 : PXE-101, 필수형[실무 기획]니즈의 파악 : 누구에게 어떤 기획이 필요한가?STEP 01 .   나의 기획은 ‘ 누구 ’ 에게 필요한가요 ? 지난번, 친구랑 같이 홍대 주변을 돌아다니다가 😎 '무신사 스탠다드 in 홍대점'을 들어가서 옷을 고르는 도중친구가 사이즈를 잘 모르겠다고 해서 평소 옷에 관심이 많고 옷을 많이 사는 제가 대충 사이즈를 추천해주었더니친구 사이즈랑 딱 맞더라고요. 😲  그러다 문득,  개인별 체형을 입력하여 비슷하게 어울리는 맞춤 시스템을 도입하면 좋을 것 같다는 생각이 들더라고요 ㅎㅎ 그래서, 평소 자주 이용하는 온라인 패션 플랫폼 '무신사'에 이 기능을 접목시키면 아주 좋을 것 같다는 생각이 들었습니다. 💢 (저도 이 기능이 무신사에 있었으면..

ConstarintLayout 설정 -> layout 폴더에 add_resource_xml을 클릭하여 Root element 작성란에androidx.constraintlayout.widget.ConstraintLayout 아래와 같이 작성하면 됩니다! timer(period=[주기]) {} 함수는 일정한 주기로 반복하는 동작을 수행할 때 유용하게 쓰입니다.만약, 주기 부분을 100으로 작성하게 되면 100밀리초마다 실행됩니다.안드로이드 실제 기기로 실행하기휴대폰(실제 기기)에서 실행하려면 PC와 휴대폰을 USB로 연결해야 합니다.하지만, 연결하기 전에 기기의 개발자 모드를 활성화시켜야 합니다. 1. 모바일 기기의 [설정]을 열고 "검색창"에 "빌드 번호"를 검색 후 [빌드 번호]를 클릭하여 이동합니다. ..

📍 유닛명 유닛 코드 : PXE-102, 필수형[실무 기획]내용의 구조화 : 이 기획의 내용은 어떻게 구성되는가?   🙋‍♂️ 안녕하세요 ㅎㅎ 오늘은 앞서 기획한 카카오페이의 모바일 결제 시스템에서 '단일 인터페이스' 시스템에 대한 내용을 보완하려고 합니다.  🎯 혹시 앞서 기획한 카카오페이 모바일 결제 시스템 기획안을 보지 못하신 분들은 아래의 링크를 참고해주세요~~!!https://view964.tistory.com/44 💰계좌 없이 간편 송금 결제, 모임 필수 어플 '카카오 페이'지인들과의 밥 약속, 식사 후 결제 각자 계산 or 1명의 💳 결제 후 계좌 이체 다들 이렇게 하고 계시지 않으신가요..?? 저는 이럴 때 보통 송금으로 계좌 이체 보다는 '카카오페이' 간편 송금으로view964...

CJ 올리브영, 미국 젠지에 K 뷰티 알렸다https://magazine.hankyung.com/business/article/202407308051b#_enliple CJ올리브영, '미국 젠지'에 K뷰티 알렸다CJ올리브영, '미국 젠지'에 K뷰티 알렸다, 최수진 기자, 올리브영magazine.hankyung.com 위 기사와 관련하여,아래 Topic 중 하나를 골라, 자신의 생각과 아이디어를 나타내봅시다! Sub topic 3 . 기획자로서, 올리브영이 글로벌 시장에서 성장하기 위해 필요한 전략을 생각해보자!기획자로서, KCON LA 2024에서 진행된 올리브영 부스의 구성(내용), 장단점, 영향력 등을 평가해보고 올리브영이 글로벌 시장에서 입지를 굳히기 위해 필요한 전략을 기획해보자!​ 올리브영 KC..

TypeScript 함수 선언문function 함수 이름(매개변수1: 타입1, 매개변수2: 타입2, ...) : 반환값 타입 { 함수 몸통} 타입스크립트 함수 선언문 예function add(a: number, b: number): number { return a + b} void 타입값을 반환하지 않는 함수는 반환 타입이 void입니다. void타입은 함수 반환 타입으로만 사용합니다.void 타입 예function printMe(name: string, age: number): void { console.log(`name: ${name}, age: ${age}`)} 함수 시그니처함수의 타입을 말합니다.(매개변수1 타입, 매개변수2 타입, ...) => 반환값 타입함수 시그니처 사용 예let pri..