분류 전체보기
-
[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..
-
[TS] 배열과 튜플codeStates front-end/Typescript 2023. 3. 12. 20:49
HTML 삽입 미리보기할 수 없는 소스 📌 배열 개별 자바스크립트 배열은 하나의 특정 타입의 값만 가진다. 타입 스크립트는 초기 배열의 어떤 데이터 타입이 있는지 기억하고 배열이 해당 데이터 타입에서만 작동하도록 제한한다. 📍배열 타입 변수에 타입 에너테이션을 제공해 배열이 포함해야하는 값의 타입을 알려주어야 한다. // 선언과 할당을 동시에 let car:string[] = ['BMW','AUDI','BEN'] // 선언과 할당을 분리 let fruits: string[] = []; fruits.push("apple"); fruits.push("banana"); // 제네릭 사용 let fruits:Array= new Array(); fruits.push(1); fruits.push(2); 배열과 함수..
-
[TS] 함수codeStates front-end/Typescript 2023. 3. 12. 19:46
HTML 삽입 미리보기할 수 없는 소스 📌 함수 📍함수 매개변수 💁매개변수란? 함수를 정의할 때 사용되는 변수를 의미 타입 스크립트에서 함수는 자바스크립트처럼 생성할 수 있으나, 매개변수의 타입과 반환 타입을 설정해야 한다. // 타입을 선언하지 않으면 any로 간주한다 function sing(song : string){ console.log('Singing : ${song}!'); } 🔗 필수 매게변수와 선택적 매게변수 필수 매게변수 타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정한다. function sendGreeting (message : string, userName: string):void { console.log (`${message}, ${userName}`); } s..
-
[인증/보안] OAuthcodeStates front-end/node(server) 2023. 3. 9. 16:18
HTML 삽입 미리보기할 수 없는 소스 📌 OAuth 📍OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 OAuth의 예시 - 소셜 로그인 OAuth의 주체 Resource Owner : 소셜로그인을 하고싶어하는 사용자 Resource Server : 사용자의 정보를 저장하고 있는 서버 Authorization Server : 인증을 담당하는 서버 Application : 소셜 로그인을 활용해 이용하고자하는 새로운 서비스 🔗 OAuth의 인증 방식의 종류와 흐름 Grant Type : Authorization Server에서 Access Token을 받아오는 방식 🔑 Implicit Grant Type 사이트에 사용자가 접속..