FrontEnd :-)

옹알이 (1) (문제) 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다. 문자열은 알..

(Udemy) The Web Developer 부트캠프 2023 :: 섹션 34. 템플레이팅으로 동적 HTML 구성하기 (EJS 공식 사이트) https://ejs.co/ 341. 템플레이팅이란? 제목, 찬성, 반대 이미지, 댓글, 공유 정확히 같은 형식이며 한 번에 하나씩 수동으로 만든 게 아니고 템플릿을 사용한 거죠. 항상 같은, 정적인 HTML 코드를 쓰는 대신에 정보와 로직을 넣어서 루프로 여러 번에 걸쳐 템플릿의 일부를 반복할 수 있죠. 우리가 사용할 것은 EJS인데 Embedded JavaScript의 약자입니다. 많은 옵션이 있죠. 다른 인기 있는 것 중 Handlebars가 있습니다. Jade, Pug, Nunjucks 등 이름이 이상하죠 이들은 Express로 사용할 수 있는 JavaSc..

(Udemy) The Web Developer 부트캠프 2023 :: 섹션 33: Express로 서버 제작하기 (Express 공식 문서) https://expressjs.com/ko [334. 우리의 첫 번째 Express 앱] 폴더 생성, express 설치, index.js 생성 mkdir FirstApp cd FristApp npm init -y npm i express touch index.js //index.js const express = require("express"); const app = express(); // console.dir(app) app.listen(8080, () => { console.log("Listening on port 8080!") }) 작성 후, 터미널에서 ..

#5 Typescript Blockchain 5.0 Introduction 5.1 Targets mkdir typechain code typechain (vscode에서 폴더 열기 - 따로 설정해놔야 터미널에서 명령어 사용 가능) npm init -y npm install -D typescript src폴더 생성, 그 아래 index.ts 파일 생성 tsconfig.json 파일 생성 touch tsconfig.json (명령어 아니어도, 파일 이름 동일하게 만들어도 됨) include : 자바스크립트로 컴파일하고 싶은 모든 디렉터리 넣기. : 타입스크립트가 src의 모든 파일을 확인한다는 의미 //tsconfig.json { "include": [ "src" ] } // tsconfig.json "co..

React Navtive 스터디 4week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (3장 할일 목록 만들기 ①) 3.1 프로젝트 기반 다지기 3.2 TextInput으로 사용자 키보드 입력받기 3.3 정리 키보드 안 보이면, command + K 3.2.1 KeyboardAvoidingView로 키보드가 화면을 가리지 않게 하기 //App.tsx import React from 'react'; import {KeyboardAvoidingView, Platform, StyleSheet} from 'react-native'; import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context'; import AddTo..

React Navtive 스터디 4week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (3장 할일 목록 만들기 ①) 3.1 프로젝트 기반 다지기 3.2 TextInput으로 사용자 키보드 입력받기 3.3 정리 3.1.3.1 react-native-safe-area-context 서드 파티 라이브러리 사용하기 특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context 서드 파티 라이브러리* 사용. *서드 파티 라이브러리 ? 커뮤니티에서 오픈 소스로 공개한 라이브러리 yarn add react-native-safe-area-context cd ios pod install cd ../ yarn ios yarn android 안드로이드의 경우에는 yarn a..

4.2 Interfaces - readonly는 자바스크립트 코드에서 보이지 않아. 오브젝트의 모양을 알려주는 방법 1. 타입 설정 //string, number 로 정의하는 대신 특정 값만 갖도록 설정. type Team = "red" | "blue" | "yellow" type Health = 1 | 5 | 10 type Player = { nickname: string, team: Team, health: Health } const gwen : Player = { nickname: "Gwen", team: "yellow", health: 5 } 2. 인터페이스 (only 오브젝트 모양을 타입스크립트에게 설명해 주기 위해서만 사용) type Player = { nickname: string, team..

4.0 Classes //추상 클래스는 오직 다른 클래스가 상속받을 수 있는 클래스 //추상 클래스의 인스턴스를 만들 수 없음. new User 불가 //추상 메소드를 만들려면, 메소드를 클래스 안에서 구현해야 함. abstract class User { constructor( private firstName: string, protected lastName: string, public nickname: string ){} abstract getLastName(): void getFullName(){ return `${this.firstName} ${this.lastName}` } } class Player extends User { getLastName(){ console.log(this.lastNam..