반응형 분류 전체보기50 [회고록] 2022년 웹퍼블리셔 회고록 [회고록] 2022년 웹퍼블리셔 회고록 회고록이란 걸 써본 적이 없어 매우 부끄럽고 늦었지만👀.. 이번에 한 번 써보려고 합니다..! 2022년🐯 이번연도는 제 자신을 많이 돌아보게 된 한 해였어요. 퇴사를 하게 되면서 반성도 많이 하고. 스스로를 채찍질도 하고 비난까지도 했는데, 많은 좋은 분들의 도움도 받고 욕심을 버리고 차근차근하다 보니 제 생각보다 많은 것을 얻었더라고요. 올해는 조급병을 조금은 고치고 욕심을 내려놓는 법을 많이 배운 것 같아요. 지금 당장 부족한 부분을 가능성으로 전환할 수 있도록 스스로를 단단하게 만든 한 해였던 것 같습니다. 개발에 대한 것도 무척이나 고민을 많이 했어요 ㅋ큐ㅠ.. 사실 제 스스로가 프론트엔드가 되고 싶어! 라며 욕심만 내는 것 같고 노력도 하지 않는 바보라고.. 2023. 1. 2. [TypeScript] 타입스크립트 기본 유니온타입 인터섹션타입 (TS basic Union Type & Intersection Type) [TypeScript] 타입스크립트 기본 유니온 타입 인터섹션 타입 (TS basic Union Type & Intersection Type) 🌱 들어가기 전 유니온 타입이란? 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. 1. 유니온타입 정의 //변수에 유니온타입 선언 var foo: string | number | boolean; // string과 number, boolean 타입을 허용한다. //함수 인자에 유니온타입 선언 function unionFunc(value: string | number) { // string과 number 타입만 인자로 받을 수 있다. console.log(value); } unionFunc('he.. 2022. 12. 14. [TypeScript] 타입스크립트 기본 인터페이스(interface) [TypeScript] 타입스크립트 기본 인터페이스(interface) 🌱들어가기 전 타입스크립트 인터페이스(interface)란? 타입스크립트 인터페이스(interface)란 상호 간의 정의한 약속 혹은 규칙을 의미하는데, 쉽게 말하면 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것. 1. 인터페이스 선언 interface User { age: number; name: string; } //변수에 활용한 인터페이스 const heeming: User = { //인터페이스 User의 구조와 같은 객체 구조를 만들지 않으면 문법 오류가 뜸 age: 100, name: '히밍', } 1. 인터페이스 생성 시 interface 키워드를 이용하여 생성 2. inte.. 2022. 12. 13. [TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type) [TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type) 타입스크립트 기본 타입 설정 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. 1. 문자형(String) const str: string = 'hello'; //문자형 선언 2. 숫자형(Number) const num: number = 10; //숫자형 선언 3. 배열(Array) let arr1: Array = ['일','이','삼'] //문자 자료형 배열 선언(제네릭 방식) let arr2: Array = [1,2,4] //숫자 자료형 배열 선언(제네릭 방식) let numbers: number[] = [1,2,3] //숫자 자료형 배열 (리터럴 방.. 2022. 12. 10. [TypeScript] 타입스크립트 설치 명령어와 컴파일 명령어 [TypeScript] 타입스크립트 설치 명령어와 컴파일 명령어 타입스크립트 사용 이유? 타입스크립트는 자바스크립트 기반으로 한 번 컴파일해주는 언어이다. 공식문서에 따르면 타입스크립트는 Type을 추가함으로서 코드가 올바르게 작동하는지 확인할 수 있다. 라고 말하듯이 타입스크립트를 사용하므로서 에러를 사전에 방지하고 VScode 편집기 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 친화적이기 때문이다. 1. 타입스크립트 설치 방법 1-1. 노드 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드.js 공식 홈페이지로 이동하여 안정적.. 2022. 12. 9. [React] 클래스형 vs 함수형 컴포넌트 차이 (class vs function component) [React] 클래스형 vs 함수형 컴포넌트 차이 (class vs function component) 🌱 들어가기 전 리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다. 1. 클래스형 컴포넌트(class component) 2. 함수형 컴포넌트(function component) 요즘에는 주로 함수형 컴포넌트를 많이 사용하지만, 기존 코드의 유지보수 차원에서 어떻게 선언되고 각 선언 방식에 따라 어떤 차이가 있는지 정리하려 한다. 1. 선언 방식 클래스형(class component) 1. class 키워드가 반드시 필요하다. 2. Component로 상속 받아야 한다. 3. render() 메소드가 반드시 필요하다. 함수형(function component) 1. 함수형 컴포넌트 선언이 매우 간편.. 2022. 12. 8. [JS ES6] 자바스크립트 new 연산자와 생성자 함수 (Javascript new operator & constructor function) [JS ES6] 자바스크립트 new 연산자와 생성자 함수 (Javascript new operator & constructor function) 자바스크립트로 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 그럴 때 사용할 수 있는 방법 중 하나가 new 연산자와 생성자 함수이다. 함수를 호출할 때 new 연산자를 함께 사용하면, return문 없이도 객체를 반환시킨다. 호출된 생성자 함수 내에서 this를 사용해 반환되는 객체의 초기 값과 행위를 정의할 수 있다. 1. 생성자 함수(constructor operator) 생성자 함수와 일반 함수에 기술적인 차이는 없다. 하지만 생성자 함수는 두 개의 관례를 따른다. 1. 생성자 함수의 이름 첫글자는 대문자로 시작해야 한다. 2... 2022. 11. 28. [GSAP] GSAP 기본 문법 (Green Sock basic) - to(), from(), fromTo() [GSAP] GSAP 기본 문법 (Green Sock basic) - to(), from(), fromTo() 들어가기 전 🧐 GSAP(Green Sock Animation Platform)이란? 인터랙티브 웹을 위한 필수 요소를 따지자면 화려한 애니메이션과 스크롤 이벤트를 빼놓을 수 없을 것이다. 하지만 순수 CSS와 바닐라 자바스크립트로 구현하기엔 많은 어려움이 있기 때문에, 인터랙티브 한 웹을 좀 더 수월하게 구현할 수 있도록 도와주는 것이 바로 GSAP이다. GSAP는 자바스크립트 애니메이션 라이브러리로, 디자이너나 개발자들이 손쉽게 타임라인 기반의 애니메이션을 만들 수 있도록 도와주는 강력한 라이브러리이다. 타깃 오브젝트의 가속성, 형태 변화, 위치 변경, 연속성 등 다양한 효과를 쉽게 줄 수 .. 2022. 11. 24. [Portfolio] 웹퍼블리셔의 리액트(React.js) 기반 포트폴리오 (VScode Style) 만들기 ✍️ Intro. 리액트로 토이트로젝트를 끝마친 뒤, gsap와 three.js를 공부하던 와중에 기존 포트폴리오 사이트의 호스팅이 만료되면서 리액트를 기반으로 만든 포트폴리오를 제작하게 되었습니다. (사실 회사 퇴사하고 백수의 몸인지라, 포폴을 빨리 만들어야 하는 것도 한몫했습니다..ㅠㅠ) VScode 스타일로 만들게 된 계기는 제가 디자인에 자신이 없기도 하지만 디자인을 구상하는데 많은 시간을 소요할 수가 없어서 웹퍼블리셔나 개발자라면 가장 친숙한 편집기인 VScode 스타일로 포트폴리오를 만들어서 인상적인 이미지를 남기고 싶기도 했고. 일반적인 포트폴리오 스타일이 스크롤 디자인인 것이 조금 진부하다고 느껴지고, 앞으로 개발에 관한 다양한 콘텐츠를 포트폴리오에 지속적으로 담고 싶어서 게시판 느낌으로 .. 2022. 11. 21. 이전 1 2 3 4 5 6 다음 반응형
