본문 바로가기

FrontEnd71

Front end 면접에서 예상되는 코딩 과제와 해결법 소개 프론트엔드 개발은 웹 개발의 중요한 부분이며, 프론트엔드 개발자로서 면접에 잘 준비하는 것이 중요합니다. 프론트엔드 면접에서 코딩 과제는 문제 해결 능력, 코딩 능력 및 프론트엔드 기술에 대한 이해력을 평가하는 중요한 요소입니다. 1. HTML 과제 HTML은 웹 페이지의 기초입니다. 프론트엔드 면접에서는 HTML 태그, 속성 및 의미 있는 마크업에 대한 지식을 평가하는 HTML 과제를 만날 수 있습니다. 일반적인 HTML 과제에는 다음과 같은 것들이 있습니다: vs : 차이점과 각각을 언제 사용해야 하는지 설명하십시오. HTML과 CSS를 사용하여 반응형 네비게이션 메뉴를 만드십시오. HTML5 속성을 사용하여 적절한 유효성 검사가 구현된 양식을 만드십시오. 2. CSS 과제 CSS는 웹 페이지의.. 2023. 6. 27.
JavaScript의 탄생부터 현재까지 역사 알아보기 소개 JavaScript는 현재 웹 개발에서 가장 중요한 언어 중 하나입니다. 이 언어는 웹 페이지를 동적으로 만들고 상호작용을 가능하게 하는 데 사용됩니다. JavaScript의 역사를 이해하는 것은 이 언어를 효과적으로 사용하는 데 도움이 될 것입니다. 이 글에서는 JavaScript의 탄생부터 현재까지의 역사를 알아보겠습니다. 1. 탄생 JavaScript는 1995년에 브렌던 아이크(Brendan Eich)에 의해 개발되었습니다. 당시에는 웹 페이지에 동적인 기능을 추가하기 위해 사용되는 스크립트 언어로서 LiveScript라는 이름으로 알려져 있었습니다. 그러나 당시에는 웹 브라우저에서만 사용되는 언어로서 큰 인기를 얻지 못했습니다. 2. 넷스케이프와 자바스크립트 1996년, 넷스케이프 커뮤니케.. 2023. 6. 23.
아직도 이거 모르니? Typescript 조건부 타입정의 Infer 예시와 함께 알아보기! 소개 Typescript는 자바스크립트에 정적 타입을 추가하는 강력한 슈퍼셋입니다. 이는 개발자들이 타입을 정의하고 강제할 수 있어서 오류를 조기에 발견하고 코드 품질을 향상시킬 수 있습니다. Typescript의 주요 기능 중 하나는 조건부 타입정의를 지원하는 것인데, 이를 통해 특정 조건에 따라 타입을 생성할 수 있습니다. 1. 조건부 타입이란? Typescript의 조건부 타입은 조건에 따라 타입을 정의할 수 있는 기능입니다. 이는 infer 키워드를 사용하여 제네릭 파라미터의 타입을 추론할 수 있습니다. 2. 기본 문법 Typescript에서 조건부 타입을 정의하는 기본 문법은 다음과 같습니다: type MyConditionalType = T extends U ? X : Y; 이 문법에서 T는 제.. 2023. 6. 23.
아직도 이거 모르니? React의 힘 useState 동작원리! 소개 React는 사용자 인터페이스를 구축하기 위해 사용되는 인기있는 JavaScript 라이브러리입니다. React의 주요 기능 중 하나는 useState 훅을 사용하여 상태를 관리할 수 있는 능력입니다. 이 블로그 포스트에서는 useState의 작동 방식에 대해 자세히 알아보고 React 개발에서의 힘을 탐구해보겠습니다. 1. useState란? useState는 React의 내장 훅으로, 함수형 컴포넌트에서 상태를 가질 수 있게 해줍니다. 이는 클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 합니다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있습니다. 2. useState 사용 방법 useState를 사용하기 위해서는 react 패키지에서 .. 2023. 6. 23.
Typescript와 함께 알아보는 Context API 사용방법 소개 Context API는 React 애플리케이션에서 상태를 전역적으로 관리하기 위한 도구입니다. 이 기능은 컴포넌트 간에 데이터를 공유하고 전달하는 데 사용됩니다. 이번 블로그 포스트에서는 Typescript와 함께 Context API를 사용하는 방법에 대해 자세히 알아보겠습니다. 본문 1. Context API란? Context API는 React의 공식 상태 관리 도구로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이를 통해 중첩된 컴포넌트 간에 데이터를 전달하는 것이 간편해집니다. 2. Context API의 주요 개념 Context API를 사용하기 위해 알아야 할 주요 개념은 다음과 같습니다: Context: 데이터를 공유하기 위한 컨테이너 역할을 하는 객체입니다. Prov.. 2023. 6. 23.
아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript React Hook 소개 Typescript와 React를 함께 사용하는 개발자라면, React Hook에 대해 들어보셨을 것입니다. 이번 블로그 포스트에서는 Typescript와 React Hook에 대해 자세히 알아보겠습니다. 예시 코드와 함께 React Hook의 사용법과 장점을 알아보면서, 이 기술을 더욱 효과적으로 활용할 수 있을 것입니다. 본문 1. React Hook이란? React Hook은 React v16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 생명주기 메서드를 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. 2. Hook의 장점 Hook을 사용하면 코드를 더 간결하고 읽기 쉽게 .. 2023. 6. 23.
아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript 타입 정의방법 소개 Typescript는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 하지만 Typescript의 타입 정의 방법은 처음 접하는 사람들에게는 낯설 수 있습니다. 이 블로그 포스트에서는 Typescript의 타입 정의 방법을 예시 코드와 함께 자세히 알아보겠습니다. 본문 1. 기본 타입 정의 Typescript에서 변수의 타입을 정의하는 가장 기본적인 방법은 콜론(:)을 사용하는 것입니다. 예를 들어, 다음과 같이 변수의 타입을 명시할 수 있습니다. let name: string = 'John'; let age: number = 25; let isStudent: boolean = true; 2. 배열 타입 정의 배열의 타입을 정의할 .. 2023. 6. 23.
아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript 키워드 TOP 10! 소개 Typescript는 Microsoft에서 개발한 정적 타입을 지원하는 JavaScript의 상위 집합 언어입니다. Typescript는 JavaScript의 기능을 확장하고 개선하여 개발자들이 더욱 안정적이고 확장 가능한 애플리케이션을 만들 수 있도록 도와줍니다. 이번 블로그 포스트에서는 Typescript의 주요 키워드 중 상위 10개를 예시 코드와 함께 자세히 알아보겠습니다. 1. any any 키워드는 변수의 타입을 명시적으로 지정하지 않고, 어떤 타입이든 할당할 수 있도록 합니다. 이는 동적 타입 언어인 JavaScript와의 호환성을 유지하기 위해 사용됩니다. 예시 코드를 살펴보겠습니다. let variable: any = 10; variable = 'Hello World'; consol.. 2023. 6. 23.
아직도 이거 모르니? JS 키워드 TOP 10! 소개 자바스크립트(JS)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 언어를 잘 이해하고 활용하는 것은 웹 개발자에게 매우 중요합니다. 이 블로그 포스트에서는 아직 자바스크립트의 중요한 키워드를 모르는 분들을 위해 JS 키워드 TOP 10을 소개하겠습니다. 1. 변수 (Variable) 변수는 값을 저장하는 데 사용되는 메모리 공간입니다. 자바스크립트에서 변수를 선언할 때는 'var', 'let', 'const' 키워드를 사용합니다. 예를 들어: var x = 5; let y = 'Hello'; const z = true; 2. 함수 (Function) 함수는 코드의 재사용성을 높이기 위해 사용됩니다. 자바스크립트에서 함수를 정의할 때는 'function' 키워드를 사용합니다. .. 2023. 6. 23.
반응형

티스토리툴바