분류 전체보기 (16) 썸네일형 리스트형 베트남에서 2달 생활하기 - 0. 준비편 해외 자유 여행이라곤 일본밖에 안 가본 노잼 대학생을 2달동안 베트남에서 살게한다면? 학교에서 모집한 글로벌 인턴십 프로그램에 합격해서, 앞으로 두 달 간 베트남 생활을 하게되었다.3주간 그럭저럭 베트남 생활에 적응도 했고, 내가 인턴십을 준비하던 때 필요했던 정보를 까먹기 전에 직접 풀어보려 한다.(내용을 수정하는 동안 4주차5주차가 되었다) 다음 인턴십 기수 혹은 베트남 생활을 길게 하게 될 사람들을 위하여 내가 인턴십 생활을 위해 한국에서 어떤 걸 준비했고, 어떻게 활용하고 있는지에 대해 최대한 상세히 써 보려고 하니 언젠가 누군가에게 도움이 되기를. 24.11.26 추가) 너무 혼자 신나서 떠든 것 같아서 공개하지 않았었는데, 곧 다음 기수가 출발할 것이라는 소식을 들어서 공개로 변경했다. .. ICT 학점연계 프로젝트 인턴십 합격 후기 (UX/UI) 인턴 와서 인턴 준비하는 사람이 있다? 때는 학교에서 운영하는 글로벌 인턴십에 참여하여 베트남 생활에 적응해 가던 7월 초.ICT 학점연계 프로젝트 인턴십 공고가 올라온 것을 발견했다. 사실 처음에는 ICT 인턴십에 참여할 의욕이 별로 없었다. 하지만 나는 발등에 불이 떨어진 4학년이 아닌가. 마침 연계전공 때문에 수강신청 계획을 세우기도 머리 아팠는데, 다시 보니 15학점에 월급도 주고 학부생 신분으로 실무 경험까지 쌓을 수 있는 ICT 인턴십이 선녀 같았다.(학교에서 주는 지원금도 있다!)그렇게 주말여행을 포기하고 숙소와 카페만을 왕복하며 서류 준비를 시작했다. 1. 서류 준비 과정인턴십 지원을 예전부터 계획해 왔던 것이 아니고 갑작스레 결정했기 때문에, 정말 번갯불에 콩 볶아먹듯 준비해야 .. CORS Error와 프록시(Proxy) 설정하기 다른 도메인에서 API를 요청해 사용하기 위해서는 CORS 설정이 필수적이다. 개인적인 API 연습을 위해 localhost를 사용한다면 CORS 설정에서 모든 도메인을 허용해도 상관없지만, 실제로 프로젝트를 진행한다면 특정 도메인만을 허용하도록 구현해야 한다. 정석적인 방식으로는 프론트엔드에서 백엔드에게 개발 서버의 도메인을 허용하도록 요청을 보내고, 백엔드에서 요청받은 도메인만을 허용하도록 코드를 수정할 수 있겠지만 프록시(Proxy)를 사용하면 CORS 정책을 우회할 수 있다. 프록시를 사용하지 않는 경우, 프론트엔드-브라우저-백엔드 간의 흐름은 다음과 같다. 1. 프론트엔드에서 백엔드의 API를 사용하길 요청 2. 브라우저에서 백엔드에게 해당 앱에 대한 접근 권한이 있는지 확인 (같은 출처인지 확.. CI/CD 개념 및 Github Action 사용하기 CI 와 CD 일반적인 앱의 개발 및 유지보수 단계는 다음과 같다. Plan : 서비스 계획 Code : 개발자가 코드를 원격 코드 저장소(git repository 등)에 push함 Build : 원격 저장소로부터 코드를 가져와 유닛 테스트 후 빌드 Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 확인 Release : 배포 가능한 소프트웨어 패키지 작성 Deploy : 프로비저닝을 실행하고 서비스를 사용자에게 노출. (실질적 배포) Operate : 서비스 현황을 파악하고 생길 수 있는 문제 감지 ~1번부터 반복~ CI는 지속적인 통합(Continuous Integration)을 말한다. 간단히 말하자면 개발자를 위한 자동화 프로세스라고 볼 수 있으며, 코드~빌드~테스트 단계에서 적용.. TypeScript 타입 별칭(Type Aliases)과 인터페이스 타입 별칭 타입 별칭은 타입의 새로운 이름을 만드는 것이다. 즉, 새로운 이름으로 기존의 타입을 참조하는 것을 말한다. 타입 별칭은 기존의 타입을 선언하는 것과 같은 동작을 하지만, 복잡한 타입을 간략하게 표현하거나 타입 정의를 재사용하는 등 코드를 간결하고 가독성 좋게 만들 수 있다. type newString = string; let str1: string = 'hello'; let str2: newString = 'world'; - 타입 별칭 사용 예시 type Person = { id: number; name: string; isAdult: boolean; } // Person을 참조 interface Comment { id: number; content: string; user: Person; .. TypeScript Enum (열거형) 타입스크립트의 Enum은 특정 값의 집합을 정의할 때 사용되며, 숫자형과 문자열형 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로는 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가하지만 수동으로 기본값을 지정할 수 있다. 열거형은 일반적으로 상수값을 대신하여 사용된다. - 숫자형 Enum enum Grade { A: 100, B: 50, C } let a: Grade = Grade.A; let cValue : number = Grade.C; console.log(a); // 100 console.log(cValue); // 0 숫자형 열거형에선 열거형의 키로 값을 얻을 수 있고, 값으로 키를 얻을 수 있는 역 매핑(Reverse mappings)이 가능하다. 이는 문자형 열거형에는.. TypeScript 함수 작성하기 TypeScript에서는 JavaScript와 달리 함수의 매개변수와 리턴값의 데이터 타입을 명시해준다. 만일 console.log와 같이 리턴값이 없는 경우 리턴값의 데이터 타입에 void를 작성할 수 있다. function 선언식과 화살표 함수 모두 사용 가능하다. function add(x: number, y: number) : number { return x+y; } let add = (x: number, y: number) : number => { return x+y; } // 리턴값이 없는 경우 let hello = () : void => { console.log("hello world!"); } 또한 TypeScript에서는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해.. TypeScript란 / TypeScript의 데이터 타입 데이터 타입에 대하여 자바스크립트는 동적 타입이 결정되어 유연하게 사용할 수 있다는 장점이 있지만 반대로 타입이 명시성이 부족하다는 단점이 되기도 한다. 타입의 명시성이 부족하면 코드가 의도대로 작동하지 않을 수 있다. 타입스크립트는 이 단점을 보완한 언어다. 타입스크립트는 정적타입 검사 기능을 제공하며, 인터페이스를 사용해 코드의 가독성을 높인다. 또한 자료의 타입을 미리 명시함으로써 코드의 의도가 정확해므로 훗날 다른 개발자가 코드를 보더라도 코드를 이해하고 수정하기 쉬우며, 런타임 에러를 방지할 수 있다. interface Mandoo { name: string; amount: number; } function eatMandoo(mandoo: Mandoo) { console.log(`${mandoo.. TypeScript 프로젝트 환경 구성하기 1. 터미널에서 프로젝트 폴더 생성하기 mkdir (폴더명) cd (폴더명) 2. VScode로 프로젝트 폴더를 열고 터미널에서 다음 명령어를 실행해 프로젝트를 초기화한다. npm init -y 3. 프로젝트에 TypeScript를 설치한다. npm install typescript --save -dev 4. 프로젝트 루트 디렉토리에 tscofig.json 파일을 생성하고 아래 내용을 추가한다. //tsconfig.json //compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다. { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [.. 인증 및 보안 방법 - Cookie / Session / Token / OAuth (+실습) 1. Cookie 쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 영속성(persistence)이란, 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 말한다. 따라서 쿠키를 이용하면 브라우저를 종료하더라도 쿠키가 남아있는 이상 다시 브라우저를 켰을 때, 브라우저를 끄기 이전과 같은 데이터를 불러올 수 있다. 단, 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있으며 이 특정 조건들은 http 헤더를 사용해 쿠키 옵션(Cookie Option)으로 표현할 수 있다. const cookieOptions = { domain: 'localhost', path: '/', sameSite: 'strict', secure: true, expires: .. 이전 1 2 다음
