전체 글
-
[TS] 클래스codeStates front-end/Typescript 2023. 3. 20. 21:26
HTML 삽입 미리보기할 수 없는 소스 📌 클래스 📍클래스 타입스크립트는 자바스크립트와 동일하게 클래스를 선언하고 사용할 수 있다. 클래스란? 여러 객체들을 생성하기 위한 탬플릿 (EX) 클래스 : 붕어빵 기계, 객체 : 붕어빵) 클래스의 핵심 기능은 상속!!!! 👉🏼👉🏼 효율적이고 유지보수가 편함 빈 클래스를 생성해서 새로운 프로퍼티를 선언 class Site { no: number = 0; } 🔗 클래스 메서드 클래스는 기본적으로 속성과 메서드를 갖는다. 클래스에서 매게변수 타입에 타입이나 기본값을 지정하지 않으면 any 메서드를 호출하려면 허용 가능한 수의 인수가 필요하고, 재귀함수가 아니라면 대부분 반환타입 유추 가능 빈 프로퍼티 아래에 메소드를 추가 class Site { no: number; ..
-
[React] 번들링과 웹팩codeStates front-end/React 2023. 3. 20. 17:20
HTML 삽입 미리보기할 수 없는 소스 📌 번들링과 웹팩 📍번들링 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받고, 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공 🔗 번들링의 필요성 변수 간의 충돌 인터넷 속도가 느린 국가의 모바일 환경에서 사용자의 불편 호소 떨어지는 가독성 배포 코드의 쉬움으로 인한 보안 문제 📍Webpack "프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러" 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 웹팩은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능하다. 빌드와 번들링 💁♂️ 빌드..
-
[css] css 애니메이션codeStates front-end/Css 2023. 3. 17. 13:19
HTML 삽입 미리보기할 수 없는 소스 📌 css 애니메이션 css 애니메이션은 여러 개의 css 스타일을 부드럽게 전화시켜준다. @keyfremes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 📍 @keyframes @keyframes를 지정하는 방법 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값..
-
[css] 반응형 웹codeStates front-end/Css 2023. 3. 16. 20:08
HTML 삽입 미리보기할 수 없는 소스 📌 반응형 웹 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 📍 리플로우(Reflow)와 리페인트(Repaint 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 있던 요소들의 크기가 바뀌게 되는데, 화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려야 한다. 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복 수행하는 것을 리페인트라 한다. 🔗 리플로우와 리페인트의 최적화 말 그대로 다시 필하고 다시 플로우를 정해야하는데, 이런 과정은 최소..
-
[자료구조] Tree, GraphcodeStates front-end/Algorithm 2023. 3. 15. 20:19
HTML 삽입 미리보기할 수 없는 소스 📌 자료구조 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 데이터란? 문자, 숫자, 그림, 영상 등 실생활을 구설하고 있는 모든 값 데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있다. 📍Tree (거꾸로 뒤집어 놓은)나무의 형태 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태 컴퓨터의 디렉토리 구조가 가장 큰 예이다. 🔗 Tree의 특징 아래 그림과 같이 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조 하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 비선형 구조이다. 🤷♂️싸이클(cycle)이란? 시작 노드에서 출발해 다른 노드를 거쳐 시작 노드로 돌아올 수 있다면 사..
-
[자료구조] Stack, QueuecodeStates front-end/Algorithm 2023. 3. 14. 15:53
HTML 삽입 미리보기할 수 없는 소스 📌 자료구조 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 데이터란? 문자, 숫자, 그림, 영상 등 실생활을 구설하고 있는 모든 값 데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있다. 📍Stack 쌓다, 쌓이다, 포개지다 데이터를 순서대로 쌓는 자료구조(프링글스 구조) 예를 들어 스마트폰 "뒤로가기" 버튼 처럼 현재 수행되는 앱이 종료되고 바로 직전에 수행되는 앱이 다시 나타나는 구조 또한 스택 구조이다. 🔗 Stack의 특징 1. LIFO(Last In First Out) 후입선출의 구조(가장 최근에 들어온 데이터가 가장 먼저 나간다.) 최상단의 데이터를 저장하고 꺼내는 특징 최상단에서 행위가 이루어지며 데이터를 저장하고 검색하는 ..
-
[job preparation] 기술 면접4 - 재귀,UI/UX, ...codeStates front-end/Job Preparation 2023. 3. 13. 12:54
HTML 삽입 미리보기할 수 없는 소스 📌기술 면접 tip! 결론은 간단하게, 설명은 구체적으로 자신의 언어로 설명할 수 있어야 함 간명한 정리와 풍부한 설명을 위해서는 지속적인 모의 면접을 통해 기술 설명을 연습하고, 어려운 개념에 대해서 깊게 고민하고 블로그에 기록하는 연습이 필요 기술 면접 준비 재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 우선 재귀적 호출이란 자기 자신을 호출하는 것입니다. 이를 구현하는 것을 재귀 함수라고 합니다. 재귀적인 표현이 자연스러운 경우 재귀 함수를 쓰는데, 예를 들어 피보나치 수열이라던지, 알고리즘을 기술한 그대로 코드를 표현할 수 있게 됩니다. 또한 점화식 스타일이나 분할정복같은 경우도 있습니다. 또한 중첩된 반복문이 많거나 반복문의 중첩 횟..
-
[TS] 인터페이스codeStates front-end/Typescript 2023. 3. 12. 21:39
HTML 삽입 미리보기할 수 없는 소스 📌 인터페이스 JAVA에서는 인터페이스를 추상 메소드와 상수만을 정의한 클래스 위주로 다루지만, 타입스크립트에서는 인터페이스를 객체 위주로 다룬다. 📍타입 별칭 vs 인터페이스 객체 구조 타입을 선언해서 사용한다고 가정할 때, 인터페이스로도 구현 가능하고, 타입 별칭으로도 구현이 가능하다. 인터페이스는 확장이 가능하기 때문에 인터페이스로 구현하는 것을 권장하다. // 리터럴 객체 타입 const a1: { name: string; age: number; talk: () => void; } = { name: '홍길동', age: 12, talk() {}, }; // type alias 객체 타입 type Ty = { name: string; age: number; t..