본문 바로가기

FRONT-END7

Front end 면접에서 자신의 경험을 어필하는 방법 소개 프론트 엔드 면접을 준비하는 것은 자신의 경험을 효과적으로 어필하는 것이 어려운 경험일 수 있습니다. 이 블로그 포스트에서는 프론트 엔드 면접에서 자신의 경험을 어떻게 효과적으로 보여줄 수 있는 가치 있는 팁에 대해 논의하겠습니다. 이 가이드라인을 따르면 잠재적인 고용주에게 자신의 기술, 지식 및 성과를 자신있게 보여줄 수 있습니다. 본문 1. 채용 공고의 요구사항 이해하기 면접 전에 채용 공고를 주의 깊게 검토하고 프론트 엔드 역할의 특정 요구사항을 이해하세요. 이를 통해 가장 관련성 높은 기술과 프로젝트를 강조할 수 있습니다. 2. 관련 프로젝트 강조하기 경험을 설명할 때, 직접적으로 프론트 엔드 개발과 관련된 프로젝트에 초점을 맞추세요. 직면한 도전, 사용한 기술 및 작업의 성과에 대해 이야기.. 2023. 6. 27.
Front end 기술 면접에서 검증되는 핵심 이해도 소개 Front-end 기술 면접은 프론트엔드 개발자 채용 과정에서 필수적인 부분입니다. 이 면접은 후보자의 프론트엔드 기술에 대한 핵심 이해도와 실제 문제 해결 능력을 평가하기 위해 진행됩니다. 이 블로그 포스트에서는 프론트엔드 기술 면접에서 일반적으로 검증되는 주요 영역을 살펴보겠습니다. 1. HTML HTML은 웹 페이지의 기반입니다. 면접관들은 후보자의 HTML 태그, 속성 및 의미론적인 마크업에 대한 지식을 테스트할 수 있습니다. HTML 요소의 적절한 사용법, 블록 수준과 인라인 요소의 차이, 의미론적 HTML 사용의 중요성 등에 대한 질문을 할 수 있습니다. 2. CSS CSS는 웹 페이지의 시각적인 표현을 담당합니다. 면접관들은 후보자의 CSS 선택자, 특수성 및 상속에 대한 이해도를 확인.. 2023. 6. 27.
Front end 면접에서 예상되는 코딩 과제와 해결법 소개 프론트엔드 개발은 웹 개발의 중요한 부분이며, 프론트엔드 개발자로서 면접에 잘 준비하는 것이 중요합니다. 프론트엔드 면접에서 코딩 과제는 문제 해결 능력, 코딩 능력 및 프론트엔드 기술에 대한 이해력을 평가하는 중요한 요소입니다. 1. HTML 과제 HTML은 웹 페이지의 기초입니다. 프론트엔드 면접에서는 HTML 태그, 속성 및 의미 있는 마크업에 대한 지식을 평가하는 HTML 과제를 만날 수 있습니다. 일반적인 HTML 과제에는 다음과 같은 것들이 있습니다: vs : 차이점과 각각을 언제 사용해야 하는지 설명하십시오. HTML과 CSS를 사용하여 반응형 네비게이션 메뉴를 만드십시오. HTML5 속성을 사용하여 적절한 유효성 검사가 구현된 양식을 만드십시오. 2. CSS 과제 CSS는 웹 페이지의.. 2023. 6. 27.
Web Pack이란 무엇인가 단순 정의 WebPack이란 모듈을 번들링하는 도구다. WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다. 대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다. 다음은 공식 홈체이지에 잇는 예제이다. src/index.js import bar from './bar'; bar(); src/bar.js export default function bar() { // } webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle... 2020. 11. 6.
Cookie, Local Storage, Session Storage 각각의 차이점 0. 공통 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다. 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다. 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form) 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다. 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다. 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다. 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다. Cookie 브라우저 요청이 있을 경.. 2020. 11. 5.
Stacking Context? Stacking Order? HTML에서 각 요소 레이어가 화면에 쌓이는 순서와 쌓이는 맥락(?)을 의미하는데, 아래 예제가 가장 유명한 듯 하다 Red Green Blue 주석처리한 opacity를 활성화하면 이렇게 된다. stacking order인지 context떄문인지는 모르겠다. 다른 예제로 z-index를 활용한 예제가 있는데, 보다 명확하게 이해할 수 있을 것 같다. (적어도 z-index를 활용한 부분에 대해서만큼은) Division Element #1 position: relative; z-index: 5; Division Element #2 position: relative; z-index: 2; Division Element #4 position: relative; z-index: 6; Division Eleme.. 2020. 11. 5.
CSS 전처리기의 종류와 장단점 CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 CSS 전처리기 프레임워크의 종류 Sass Less Stylus 왜 전처리기를 사용해야 하나 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문 너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문 CSS 전처리기 사용시 장단점 장점: CSS 코드를 여러 파일로 나눠 유지보수성이 향상 CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생.. 2020. 11. 5.
반응형