Programming/WEB8 너무나도 망한 프론트엔드 기술면접 복기.. 평소에 해당 회사 서비스를 많이 이용했었고 개발문화도 잘 되어있어 붙으면 좋겠다라고 생각하고 지원한 회사에 서류 합격하여 면접 기회가 생겨 평소에도 긴장을 많이 하지만 긴장을 엄청 하고 면접에 참여를 했다 처음 git 관련 질문에서 너무 어버버하고 잘 대답하지 못해서 멘탈이 나가 이후 질문에서 아는 문제도 제대로 답변하지 못했다... 면접에는 떨어질거로 예상하지만 이 면접 경험을 토대로 나의 부족함을 깨달았고 이번 면접을 복기해보려고한다. - git에서 Pull Request란? - git stash란? - 만약 develop 브랜치에서 파생된 브랜치에서 작업을 진행했을때 서로 다른 코드를 들고있으면 어떻게 할건가? - 아르고CD 와 젠킨스에 대해 설명해주세요. - CICD가 뭔가요? - http에 대해.. 2024. 1. 11. 마이크로 프론트엔드 아키텍처 (MFA) * 회사 기술블로그에 직접 작성한 내용을 발췌. 마이크로 서비스란 복잡한 문제에 부딪혔을 때 문제를 작게 나누고 작은 문제를 해결하는 방법이 효율적이기에 데이터 단위로 작게 나누어 작은 문제를 하나씩 해결하는 방식을 말합니다. 그러한 방식을 적용한 것을 마이크로 프론트엔드라고 말하는데 이는 독립적으로 제공한 프론트엔드 APP으로 더 큰 하나의 전체 APP을 구성하는 아키텍처 스타일을 말합니다. MFA 특징 - 대규모 서비스를 개발할 때 용이합니다. - 프론트엔드의 단일 구조를 개별적으로 개발/테스트 및 배포할 수 있는 작고 간단한 단위로 개발하는 패턴입니다. - 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식입니다. - 작동 단위에 사용된 프레임워크의 종류에 상관하지 않고 조합 .. 2023. 12. 20. 프론트엔드 아키텍처의 SSL 구현방법 및 보안 고려 사항 * 회사 기술블로그에 직접 작성한 내용을 발췌. 1. SSL의 개념 및 구현 방법 1–1. SSL 인증서 : 클라이언트와 서버 간의 통신을 공인된 제3자(CA) 업체가 보증해주는 전자화된 문서 1–2. SSL 인증서의 장점 및 역할 - 통신 내용이 노출, 변경되는 것을 방지 - 클라이언트가 접속하려는 서버가 신뢰할 수 있는 서버인지 확인 가능 - SSL 통신에 사용할 공개키를 클라이언트에 제공 1–3. SSL에서 사용하는 암호화의 종류 - 암호 : 텍스트를 아무나 읽지 못하도록 인코딩하는 알고리즘 - 키 : 암호의 동작을 변경하는 매개변수, 키에 따라서 암호화 결과가 달라지기 때문에 키를 모르면 복호화가 불가능 ·디지털 서명 - 전자 서명을 통해서 누가 메시지를 썼는지 알려주고, 메시지가 위조되지 않았음.. 2023. 12. 20. 프론트엔드 아키텍처의 구현 전략 * 회사 기술블로그에 직접 작성한 내용을 발췌. 1. 모듈화와 컴포넌트 기반 개발 모듈화와 컴포넌트 기반 개발은 프론트엔드에서 재사용 가능한 코드를 작성하고 유지 보수를 용이하게 하는데 중요한 전략입니다. 1–1. 컴포넌트 기반 프레임워크 사용 React, Vue, Angular와 같은 프레임워크를 활용하여 컴포넌트를 정의하고 재사용합니다. 1–2. Atomic Design 패턴 원자적인 요소부터 시작하여 조합 가능한 구성 요소까지 계층적으로 설계하여 재사용성을 높입니다. 1–3. CSS 방법론 적용 BEM(Block-Element-Modifier), OOCSS(Obejct-Oriented CSS), SMACSS 등의 CSS 방법론을 활용하여 스타일을 모듈화합니다. - OOCSS : CSS를 모듈 방식으.. 2023. 12. 20. 프론트엔드 아키텍처란? * 회사 기술블로그에 직접 작성한 내용을 발췌. 만약 개발을 할 때 어떤 규칙을 세우지 않고 코드를 짜게 되면 후에 그 코드의 양이 늘어나게 될 경우 불편함이 생기고 정리가 안되는 시점이 생기게 됩니다. 이러한 점을 방지하기 위해 처음부터 특정한 규칙을 만들어 개발을 하게 된다면 이것이 반복이 되어 특정한 패턴이 만들어지고 이러한 패턴을 모두가 이해하고 따를 수 있도록 하는 구조를 아키텍처라고 합니다. 소프트웨어 관점에서 지속적으로 관리가 잘 되는 코드를 위해선 좋은 아키텍처가 필요하며 웹에서도 좋은 아키텍처의 모습이 지속적으로 진화하고 있습니다. 모든 패턴과 아키텍처에 대해서 설명드릴 순 없고 어떤 아키텍처가 있는지에 대해서와 이 아키텍처의 개념에 대해서만 간단하게 설명드릴 예정이지만 각각의 아키.. 2023. 12. 20. [Nodejs] 간단한 api 구현해보기 1. express-generator 설치 1~5 과정은 command 또는 PowerShell에서 작업한다. Express Application Generator Tool : 사용자가 손쉽게 프로젝트를 생성할 수 있도록 도와주는 웹 애플리케이션 프레임워크 npm install -g express-generator 2. 프로젝트 생성 express 프로젝트이름 express demo 3. 모듈 설치 프로젝트 경로 이동 cd 프로젝트 이름 cd nodejs-api npm 설치 npm install 4. 서버 실행 npm start 5. 테스트 및 확인 port 3000 접근 express를 통해 프로젝트를 생성하면 아래와 같은 구성이 생성된다. bin/www 웹 서버 구축에 관한 파일, 포트번호 등 nod.. 2023. 8. 21. 이전 1 2 다음
