Programming39 [Nuxtjs] nuxt-link 란? 페이지를 연결할 때 (이동시킬 때) 사용하는 는 와 같은 역할을 한다 의 href와 같이 to를 이용해서 형태로 사용한다. 이름을 가진 라우터를 사용할때나 데이터 값을 넣어 사용할 때에는 v-bind:to=”…” 를 사용한다. props 를 사용할 수 있는데 props 중에는 1. replace 기본값이 false 이며 클릭할때 router.push() 대신 router.replace() 를 호출한다. 뒤로가기를 하더라도 히스토리 레코드를 남기지 않으므로 이전화면으로 돌아가지 않는다.append 기본값이 false 이며 상대 경로가 현재 경로에 추가된다. 2. append 예를 들어 현재 경로가 www.test.com/home 일 경우 아래 nuxt-link 를 클릭하면 www.test.com/home/.. 2024. 1. 28. Github Actions란 GitHub Actions GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화 할 수 있는 지속적 통합 및 지속적 배포 (CI/CD) 플랫폼이다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로우를 생성하거나 Merge된 풀 요청을 프로덕션에 배포할 수 있다. Github Actions 구성요소 Workflows 워크플로우는 Github Actions의 기본 구성 단위이다. 일반적으로 .github/workflows/.yaml 이라는 yaml 파일에 정의된다 (폴더구조) 워크플로우는 하나 이상의 작업을 포함할 수 있으며 리포지토리에서 푸시 또는 풀 요청과 같은 이벤트에 의해 트리거 된다. Events 이벤트는 워크플로우를 시작하는 트리거이다. 일반적인 이벤트에는 push.. 2024. 1. 28. 너무나도 망한 프론트엔드 기술면접 복기.. 평소에 해당 회사 서비스를 많이 이용했었고 개발문화도 잘 되어있어 붙으면 좋겠다라고 생각하고 지원한 회사에 서류 합격하여 면접 기회가 생겨 평소에도 긴장을 많이 하지만 긴장을 엄청 하고 면접에 참여를 했다 처음 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. 이전 1 2 3 4 ··· 7 다음
