[TypeScript] Interface: 타입 지정하기
·
웹개발/TypeScript
타입스크립트에서 타입을 지정하는 방법을 알려드리겠습니다.const a = { name: "Kim", age: 24,};console.log(a);//결과 : { name: 'Kim', age: '24' }변수 a를 const로 선언하고 객체를 할당했을 때,console.log로 변수 a를 출력하게 되면 다음과 같은 결과를 출력받게 됩니다. 이떄 타입스크립트에서는 Type을 지정할 수가 있습니다.const a: { name: string; age: number } = { name: "Kim", age: 24,};console.log(a);위의 코드와 같이 상수 a에 name은 문자열 age는 숫자형으로 명시해줌으로써 타입을 지정해줄 수가 있습니다.타입을 지정할때에는 해당 상수, 변수에 :를 붙이고 ..
[TypeScript] 타입스크립트 사용을 위한 초기 세팅
·
웹개발/TypeScript
TypeScripte(타입스크립트)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 더 안정적이고 유지보수가 쉬운 코드를 작성할 수 있도록 도와주는 문법입니다.타입스크립트 작성을 위한 초기세팅을 알려드리도록 하겠습니다. 1. Node.js와 npm 설치타입스크립트 사용을 위해서는 최신 버전의 Node.js와 npm이 설치되어야 합니다.설치는 및에 공식 사이트에 접속하여 다운받으실 수 있습니다.Node.js — Run JavaScript Everywhere (nodejs.org) Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 프로젝트..
리액트 상태 관리의 필수 도구: Redux로 상태 관리 쉽게 배우기
·
웹개발/REACT
리액트(React)를 이용해서 웹 개발을 개발하다 보면, 상태 관리가 굉장히 중요하다는 걸 느끼게 됩니다.오늘은 상태 관리 라이브러리인 Redux를 소개하고, 왜 리액트에서 필수적인지 설명해 드리겠습니다. 1. Redux란 무엇인가요? Redux는 상태 관리 라이브러리입니다. 상태 관리는 애플리케이션의 데이터나 상태를 일관되게 관리하는 방법을 제공해 주죠. 리액트 컴포넌트가 많아질수록 상태 관리가 어려워지는데, Redux가 이 문제를 해결해 줍니다.여기서 중요한 포인트는, Redux는 처음에는 문법이 어렵고 복잡하게 느껴질 수 있습니다. 하지만 걱정하지 마세요!저도 처음엔 어렵게 느껴졌어요. 그래서 무엇부터 시작해야 할지, 왜 Redux를 사용해야 하는지 먼저 알아보겠습니다.  2. 리액트에서 상태 관리..
리액트 컴포넌트와 JSX 문법: Virtual DOM의 기본 이해
·
웹개발/REACT
리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.리액트는 UI를 컴포넌트 단위로 나눕니다. 각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.컴포넌트 트리는 DOM과 같은 형태로 구성됩니다. 리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.리액트에서는 JSX(Java Script XML) 을 사용합니다.(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.컴포넌트를 정의하고, render 함수..
개발자 이력서와 GitHub 관리 팁🧾
·
튼튼발자의 끄적끄적
개발자로 취업을 준비할 때, 이력서와 포트폴리오의 중요성은 아무리 강조해도 지나치지 않습니다. 사실 개발자로 취업은 포폴 싸움이 전부라고 해도 과언이 아니죠.특히, GitHub은 많은 채용 담당자와 면접관들이 개발자의 능력을 평가하는 중요한 요소로 평가합니다.이번 글에서 GitHub을 효과적으로 관리하여 이력서에서 감점을 피하고, 가산점을 받을 수 있는 방법에 대해 알아보겠습니다.1. GitHub 주소가 이력서에 없다면 감점너무 당연한 내용이죠?어떤 사람인지 평가를 해야하는데 작업물이 없으면 어떻게 평가를 할까요?이력서에 GitHub주소가 없으면 면접관은 당신의 코드 능력을 평가할 기회를 놓치게 됩니다. GitHub은 당신의 프로젝트와 코딩 스타일을 직접 보여줄 수 있는 도구 중 하나이므로 꼭 이력서에 ..
🗣️ "라이브러리와 프레임워크에 대해 설명해보세요"
·
프론트엔드 개발자로 취업준비/기술 면접
🗣️ "라이브러리와 프레임워크에 대해 설명해보세요" 답변:라이브러리는 특정 기능을 수행하는 코드 모음입니다. 개발자가 필요할 때 호출해서 사용합니다. 예를들어 JavaScript의 jQuery가 있습니다. 쉽게말해 라이브러리는 내가 필요할 때 가져다 쓰는 도구상자와 비슷합니다.프레임워크는 전체적인 구조와 규칙을 제공하는 뼈대를 제공하며, 제어 흐름을 관리합니다. 예로 React, Angular가 있습니다. 내가 그 안에서 필요한 코드를 작성하고, 프레임워크가 전체 구조와 흐름을 관찰합니다.
🗣️ "개발자에게 가장 중요한 능력, 역량은 무엇이라고 생각하세요?"
·
프론트엔드 개발자로 취업준비/기술 면접
🗣️ "개발자에게 가장 중요한 능력, 역량은 무엇이라고 생각하세요?" 답변:개발자에게 가장 중요한 역량은 의사소통 능력이라고 생각합니다.기술적인 능력도 물론 중요하다고 생각합니다. 하지만, 개발자는 팀의 일원으로서 다양한 사람들과 협력해야 합니다. 예를 들어, 프로젝트 매니저, 디자이너, 다른 개발자들, 그리고 심지어는 고객과도 소통해야 할 때가 많습니다.좋은 의사소통 능력은 여러 측면에서 중요합니다. 3가지 정도 예시를 들어보겠습니다.첫째로, 팀원들과 효과적으로 소통하면 프로젝트의 진행 상황을 명확히 이해하고, 문제가 발생해도 빠르게 해결이 가능합니다.둘째로 코드리뷰나 피드백을 주고받을 때도 원활한 의사소통이 필요합니다.셋째로 비기술적인 이해관계자들에게 기술적인 내용을 쉽게 설명할 수 있어야 프로젝트..
🗣️ "웹 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해보세요"
·
프론트엔드 개발자로 취업준비/기술 면접
🗣️ "웹 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해보세요" 저라면 크리티컬 랜더링 패스를 가져와서 설명할 것 같습니다.더보기 크리티컬 랜더링 패스(Critical Rendering Path)?페이지의 콘텐츠가 사용자에게 빠르게 표시되도록 하는데 중요한 렌더링 프로세스를 설명하는 개념입니다. 이 패스는 페이지가 화면에 렌더링되는 과정을 최적화하여 사용자가 페이지를 더 빨리 볼 수 있도록 합니다. 답변:웹 브라우저가 웹 페이지를 렌더링하는 과정은 크리티컬 랜더링 패스를 기준으로 설명할 수 있습니다. 과정을 설명드리겠습니다.먼저 페이지를 요청합니다. 사용자가 웹 페이지를 요청하면 브라우저는 서버에 요청을 보내고 HTML 문서를 받아옵니다.그리고 HTML파싱이 진행됩니다. 브라우저는 이 HTML문서를..