스나이퍼팩토리 사전직무교육 (Day 1)

프로젝트 개요

KT
-> 요금제 페이지 UI/UX 개선
-> 기존 사이트 분석 후 개선 방향 제시

똑똑한 개발자
-> 위치 기반 아트맵 서비스 개발 (전시 정보 제공)

토마토들
-> 대외활동 정보 수집 및 제공 서비스 개발

니토
-> 아마존 최저가 알림 서비스 개발

붐코커뮤니티
IN MY LINK: 소셜 링크 정리 웹 페이지 구현 프로젝트 고도화
발표
우수 수료생 3명
우수 프로젝트 팀: 5-6팀 발표 예정
기술적 내용

defer vs async

defer

• 스크립트 다운로드: HTML 파싱과 병렬로 진행
• 스크립트 실행: HTML 문서 완전 파싱 후 실행
• 특징: 여러 defer 스크립트는 작성된 순서대로 실행
• 사용 상황: DOM 준비 후 스크립트 실행이 문제가 없는 경우

async

• 스크립트 다운로드: HTML 파싱과 병렬로 진행
• 스크립트 실행: 다운로드 완료 즉시 실행 (HTML 파싱 중단 가능)
• 특징: 여러 async 스크립트는 다운로드 완료 순서대로 실행 (순서 보장 안 됨)
• 사용 상황: 다른 스크립트나 DOM 파싱과 독립적으로 실행되는 경우에 적합

요약

• defer: HTML 파싱 후 스크립트 실행, 순서 보장
• async: 스크립트 다운로드 즉시 실행, 순서 보장 안 됨

TypeScript

타입스크립트: 자바스크립트의 확장 언어로, 값에 타입을 부여함

기본 자료형
: string, number, boolean, undefined, null, symbol 등
참조 자료형
: 배열, 객체, 함수 등

const str: string = "A";
const str2: String = "A"; // String 객체
const str3: String = new String("A");

const num: number = 1;
const bol: boolean = true;
const nul: null = null;

const arr: number[] = [1, 2, 3, 4, 5];
const arr2: [number, string] = [1, "A"];
const obj: {} = {};
const obj2: { name: string; age: number } = { name: "이서연", age: 25 };
const fn: () => void = function () {};

함수 타입 지정

함수 선언문

function sum(n1: number, n2: number): number {
    return n1 + n2;
}
sum(10, 20);

함수 표현식

const sum2 = function (n1: number, n2: number): number {
    return n1 + n2;
};

Day 1 함수타입 연습문제

다음 함수들을 타입스크립트로 작성하고 타입을 정의해 보세요.

• 두 숫자를 더하고 결과를 반환하는 함수
• 문자열을 받아서 문자열을 반환하는 함수
• 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수 (void 반환)
• 문장에서 가장 긴 단어를 반환하는 함수 (string , 배열아님)
  • function longText(str) {} ; “Hello, World”

1 . 두 숫자를 더하고 결과를 반환하는 함수

const SumNum = (a : number,b : number) => {
	return a + b
}

2 . 문자열을 받아서 문자열을 반환하는 함수

const SumStr = (a : string,b : string) => {
	return a + b
}

3 . 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수

const returnNull = (a: boolean): void => {
	return;
}}

4 . 문장에서 가장 긴 단어를 반환하는 함수

const longText = (a: string): string => {
  const words = a.split(' '); 
  return words.reduce((longest, currentWord) => 
    currentWord.length > longest.length ? currentWord : longest
  , "");
}

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 3기 과정(B-log) 리뷰로 작성 되었습니다.
#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정