전체 글

[옥소폴리틱스 인턴십] Laws Cloud 프로젝트 회고 (1)

완성 배포 페이지 http://lawscolud.top 새로운 인턴십 9월 말부터 감사하게도 옥소폴리틱스 사의 인턴십 프로그램에 다시 참여하게 되었다. 4주과정이 끝나고 마지막 발표만을 앞둔 상태라 그동안의 프로젝트를 회고해보려 한다. 팀 컨벤션 정하기 우선 프로젝트에 앞서 팀 컨벤션과 소소한 규칙들을 정하였다. 별거 아닌듯 하지만 컨벤션과 규칙은 미리 구체화 시켜놓는 것이 나중에 훨씬 편하다는 것을 이전 프로젝트에서 경험했기 때문에 주제 선정 이전에 팀 컨벤션을 미리 정하였다. 더보기 미팅 룰 시간 엄수 사정 있을 시 (불참, 지각 등) 1시간 전에는 알리기 디스코드 미팅 매일 오전 10시 미팅 디스코드 항상 온라인 상태 유지 떠오르는 생각은 바로 디스코드에 정리 의견 교환 부정적 피드백 기분 나빠하지..

[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스

타입스크립트 심화 JSDoc https://jsdoc.app 타입스크립트를 쓰지 않고도 타입을 선언할 수 있다! 타입스크립트에 없는 기능들도 구현 가능 문서화 및 배포도 가능! 유틸리티 타입 전역적으로 사용이 가능한 타입 변환 도구 이해하고 사용한다면 생산성을 증가시킬 수 있다 직접 만들고 직접 사용하면 이해도를 높일 수 있다! 모듈 타입스크립트도 자바스크립트 ES2015+처럼 모듈을 선언하여 사용이 가능하다.(ex. import & export) 모듈 선언이 없는 경우 전역 범위에서 사용 가능하도록 처리됨 3.8 버전부터는 타입 전용 선언 가능(import type & export type) 설정 혹은 CLI 지원 -> tsconfig / module -> tsc -module commonjs Some..

[TypeScript] 타입스크립트 입문(5) - 타입 시스템

타입 시스템 동적 타입과 정적 타입 타입 체커가 컴파일 타임에 수행되는지, 런타임에 수행되는지에 따라 동적 타입과 정적 타입으로 나뉜다. 정적 타입 - 컴파일 타임에 수행 개발자가 타입을 명시적으로 타이핑해야하는 언어 -> Java, C#, C++ 등 타입 체커와 타입 추론을 통해 일부 타이핑을 생략할 수 있는 언어 -> TypeScript, Scala, Haskell 등 컴파일 타임에 타입 검사를 수행하기 때문에 보다 빠르게 오류를 잡아낼 수 있다 -> 런타임 에러 방지 가능! !!자동 완성!!을 통해 데이터 타입 혹은 속성에 대한 확신을 가질 수 있다!!! 동적 타입 - 런타임에 수행 동적 타입 시스템은 런타임 상황에도 타입이 동등한지 확인한다. -> JavaScript, Python, Ruby, P..

[React] 리액트 심화 - SPA, React Router, 비동기 프로그래밍

SPA와 React-Router SPA란? 전통적인 웹 어플리케이션의 경우 각 페이지마다 고유한 HTML 페이지를 만들어 페이지를 이동할 때마다 HTML을 로드해야 했다. 때문에 페이지를 이동할 때마다 깜빡임(새로고침)이 발생했고 이는 사용자 경험을 헤친다고 판단되었다. SPA는 Single-page application의 약자로 하나의 HTML 페이지에 앱 실행에 필요한 자바스크립트와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. App에서 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않기 때문에, 페이지를 이동하더라도 새로고침이 되지 않는다! -> Client Side Rendering Routing URL에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능. JavaSc..

[TypeScript] 타입스크립트 입문 (4) - 제네릭, 고급 타입 다루기

타입스크립트 심화 기능 제네릭 유니온 타입 등을 남발하다보면 결국 any와 다름없어지는 상황이 발생한다. C# 및 Java와 같은 언어에서 널리 사용되는 문법 대규모 소프트웨어를 구축할 수 있는 가장 유연한 기능을 제공 와 같은 꺽쇠 괄호를 사용한다. 다형성을 구현 가능하게 한다! /** * 제네릭 */ //이럴 바엔 any가 낫겠어... //function getInfo(msg: string | number | number[] | string[] ) { function getInfo(msg: any ) { return msg } console.log(getInfo('Word')) console.log(getInfo(123)) console.log(getInfo([1, 2])) console.log(ge..

부트캠프 Part1 과제 회고 - HTML/CSS

내가 수강중인 부트캠프의 첫번째 과제의 결과가 모두 PASS로 나왔다! 강사님께서 자세한 피드백을 해주셔서 정리해보려고 한다. 학원 규칙 상 과제 보안 관련한 문제가 있어 자세한 언급은 피하였다. Part1의 HTML/CSS 과제는 미션 페이지를 Figma 파일로 받으면 해당 페이지를 HTML과 CSS만을 이용하여 클론 코딩 하는 것이다. 페이지 이미지는 일부만 이용하였다. 코드 블럭의 코드는 대부분 내가 작성한 코드이다. 과제 1 - 쿠팡 오늘의 발견 피드백 h1 태그의 경우 이미지를 설명하는 alt 역할 보단 h1 자체의 역할이 더 강조되어야 하기 때문에 '쿠팡' 또는 'Coupang'이 들어가는 것이 적절하다. 텍스트가 필요없는 경우에는 viewhidden 등을 적용해주어야한다. /* CSS */ ..

[TypeScript] 타입스크립트 입문(3) - 인터페이스, 타입 가드, 열거형, 유니온 타입

타입스크립트의 고유 기능들 인터페이스 JavaScript에서는 존재하지 않는다. 객체의 타입을 정의하고 생김새를 가지도록 할 수 있다. TypeScript에서의 클래스 기능은 C#에서 유래된 것이 많다. 일부 기능은 TS에서만 존재하는 고유 문법으로 컴파일 후에 사라진다. extends가 아닌 implements 키워드로 구현한다. /** * 인터페이스 * * interface * - 정의 * - 설계 * * implements * - 구현 */ interface Person { name: string age: number } const jang: Person = { name: 'Jang', age: 99 } implements interface의 설계를 구현한다 /** * interface implem..

[TypeScript] 타입스크립트 입문 (2) - 기본 타입, 클래스

타입 기본 기본 타입 훑어보기 원시 타입 불변하는 타입 객체가 아닌 값들 원시 타입은 타입스크립트가 자동으로 타입 추론을 하기 때문에 생략해도 무방하다! const str: string = 'STRING' const num: number = 123 const bool: boolean = true 객체 타입 객체 전체의 타입을 지정 가능 객체 자체의 타입을 지정하면 any와 다를게 없다 /** * Object Type */ // object는 any와 다른게 없는 상황 const obj: object = { str: "str", num: 123, child: { str: "str", num: 123, }, }; // obj.num - object literal const obj2: { str: string..