Dependency Injection, 객체지향 프로그래밍을 하다보면 한번 쯤 듣게 되는 용어중 하나인데요. 이번 글에서는 의존성 주입이 무엇이고 어떤 배경으로 생겨난 개념인지, 왜 필요한지에 대해 간단히 정리해보려고 합니다. 문제점 개발을 하다보면 코드에 의존성이 생기기 마련입니다. 그럼 의존성은 무엇이고, 왜 생겨나는 걸까요? 아래의 코드를 봐주세요. 위 코드와 같이 클래스에서 함수가 호출되기 위해서는 클래스를 필요로 합니다. 이것을 Programmer 클래스는 Coffee 클래스의 의존성을 가진다 라고 합니다. 이와 같이 코드를 설계하였을 때, 코드의 재활용성이 떨어지고, 위 예제에서 클래스가 수정 되었을 때, 클래스도 함께 수정해줘야하는 문제가 발생합니다. 즉, 결합도(coupling)가 높아지게 됩니다. DI(의존성 주입)를 해야 하는 이유 DI로 프로그램을 설계 했을 때, 다음과 같은 이점을 얻을 수 있습니다. Unit Test가 용이해진다. 코드의 재활용성을 …

학교에 고등학생 개발자를 채용하기 위해 기업설명회가 열렸었는데, 지원하고 싶은 3학년 학생과 2학년 학생들을 대상으로 채용 면접이 진행되었습니다. 성장하는 스타트업 회사이고, 떨어져도 좋은 경험이 될 수 있을 것 같아 웹 프론트 개발에 지원하여 면접을 진행하였습니다. 난생처음 보는 기술면접에서 한 50%정도만 정확히 이야기 한 것 같았는 데, 면접을 통해 개발을 할 줄 아는 것도 중요하지만 개발에 필요한 이론을 습득하는 것도 꽤나 중요한 것 임을 알게 되는 계기가 되었던 것 같습니다. 이 글에서는 면접의 질문 내용 중에 웹 개발에 있어서 꽤나 중요했던 질문들이 있어서 정리해보려고 합니다. 1. 웹 표준이란? 웹 표준이란 www(World Wide Web) 의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다 보통 웹 개발과 디자인에 관계되어 표준이 되는 규칙등을 말한다. 이러한 규칙들은 W3C 에서 표준을 정의하고 발표(?)한다. HTML : 접근…

Typescript를 배우면서 중요한 내용을 정리한 글입니다. 이전부터 타입스크립트의 장점과 필요성을 알고는 있었지만 Typescript를 쓰지 않고도 개발을 잘 해왔기 때문에 사용을 꺼려왔었습니다. 그리고 평소처럼 React로 javascript만을 이용하여 웹 어플리케이션 개발을 하던 도중 (대충 Props로 값을 넘겨줄 때, 타입정의를 하지 않아 버그가 발생했다는 내용…) props-type을 정의 하지 않는 이유도 있지만 개발하면서 일일히 props-type을 정의 하는 것은 꽤나 번거러운 일입니다. 그래서 이번 기회에 Typescript를 사용해보자고 마음먹게 되었습니다…ㅎㅎ 왜 타입스크립트 인가? 타입스크립트는 타입이 있는 자바스크립트란 단어는 보다 정확히는 정적 타입 시스템(static type system)을 도입한 자바스크립트라는 뜻입니다. 또한 JS는 인터프린터 이지만 TS는 컴파일을 통해 타입을 체크하여 오류검출 등을 하여 정적 타입을 이용하여 코딩을 할 수 있…

과거에는 브라우저가 웹서버에 웹페이지를 요청하여 클라이언트를 제공하여 웹페이지가 작동하였습니다. 하지만 최근에는 SPA(Signle-Page-Application)를 이용하여 클라이언트(대표적으로 React, Vue, Angular)를 구현하며, 클라이언트를 서버와 분리하여 클라이언트 로직을 분명히 합니다. 또한 서버에 API를 요청하므로써 웹 어플리케이션을 개발합니다. REST API가 무엇인가? REST API에 REST는 Representational State Transfer의 약자로 소프트웨어 프로그램 아키텍처의 한 형식입니다. REST api의 등장은 2000년도에 HTTP의 주요 저자 중 한 사람인 로이 필딩이 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표 하였습니다. REST 구성 REST API는 다음의 구성으로 이루어져있습니다. 자원 (Resource) -…

이 포스트에서는 CORS에 대한 이슈에 대해서 다뤄볼려고 합니다. 웹 개발을 하다보면 한번쯤 겪게되는 이슈로 클라이언트와 서버의 오리진이 다를 때 발생하는 이슈입니다. 🤔 CORS? 크로스 도메인? CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이때 요청을 할때는 cross-origin HTTP 에 의해 요청됩니다. 하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다. 동일 출처 정책(same-origin policy) 불러온문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이것은 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는데 도움이 됩니다. — MDN web docs — …