본문 바로가기

프론트엔드7

백오피스 개발에 도움되는 사이트 모음 백오피스 및 관리자 사이트를 제작하는데 도움이 되는 라이브러리를 리서치 또는 직접 사용해 본 도구들을 모아서 정리하였습니다. * ⭐️ 평점 : 제일 프로젝트에 적용하면 좋아보이는 기술이 가장 높은 별점으로 1점부터 3점까지 존재한다. 1. 디자인 프레임워크 1. Chakra UI ⭐️ Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui... 2022. 11. 23.
웹 프론트엔드 개발자 면접 - Javascript (2) 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) Javascript 15. Closure 함수 독립적인 (자유) 변수를 가리키는 함수, 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 함수 내에서 함수를 정의하고 사용한 형태, function closure() { let variable = 'hello';// 자유변수 return () => { return variable; } } - 외부에서 변수를 직접 접근하는 것을 제한할 수 .. 2020. 9. 26.
웹 프론트엔드 개발자 면접 - Javascript (1) 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) Javascript 1. AJAX (Asynchronous Javascript And XML) - 브라우저에서 페이지 이동 없이 Javascript를 통해 HTTP REQUEST를 보내고 그 응답을 받아 처리할 수 있는 기능, Javascript 를 통한 비동기 통신, 클라이언트 - 서버간 XML 데이터를 주고 받는 기술 장점 및 단점 - 상호 작용성이 좋아짐 - 서버에 대한 요청이 줄어듦.. 2020. 9. 24.
웹 프론트엔드 개발자 면접 - CSS 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) CSS 1. 컨텐츠 숨기기 - display : none - visibility : hidden (영역 존재, 컨텐츠만 안보임) 2. 반응형 웹의 3요소 - @media 쿼리 - Fluid Grid (media 크기에 따라 div block 크기 변경) - Flexible Img 3. CSS selector 동작원리 - 브라우저가 HTML/CSS를 DOM 형식으로 변환시킴 - DOM에서 d.. 2020. 9. 21.
웹 프론트엔드 개발자 면접 질문 리스트 - HTML 웹 프론트엔드 개발자로 취직하기 위해서는 코딩테스트, 웹 과제, 토이 프로젝트 등을 통해 프로그램을 개발하고 시험을 준비하면서 기업이 필요로하는 능력을 키워야합니다. 하지만 개발을 통해서 멋진 포트폴리오를 만드는 것도 중요하지만 취업의 마지막 관문인 면접에서는 어떤 질문을 받게 될까요? 면접을 준비하는 입장으로서 저도 궁금합니다만... 그에 대한 대비를 위해 웹 프론트엔드 개발자로서 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) HTML 1. window 객체란 무엇인가요?.. 2020. 9. 20.
구조화된 CSS 작성을 위한 BEM (Block Element Modifier) BEM (Block Element Modifier) : CSS 를 효율적이고 빠르게 작성하기 위한 웹 개발 방법론 1. BEM 사용이유? BEM은 왜 사용해야 할까요? 보통 작은 웹 페이지를 구성할 때에는 CSS, SASS와 같은 방식을 사용해서 시작하게 됩니다. 하지만 점차 웹페이지가 커진다면, 하나의 CSS 파일로는 임의로 작성한 소스코드가 일관성을 유지하기 힘들게 되어 유지보수가 어렵게 될 것입니다. 2. BEM을 사용하면 생기는 이점 이점은 바로 성능과 효율성 입니다. 1) 코드 작성 시간이 줄어든다 : 모듈화 되어 한 번 잘 작성해놓으면 작성한 코드를 불러오면 됩니다. 2) 작성해야 하는 코드양이 줄어든다 : 중첩해서 CSS 코드를 작성할 필요가 없기 때문에 작성할 소스코드 양이 줄어듭니다. 3.. 2020. 8. 18.
FruitFinder 제작 - 깃허브 주소 GitHub - canoe726/FruitFinder: FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지. Contribute to canoe726/FruitFinder development by creating an account on GitHub. github.com 1. 소개 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 - 웹 프론트엔드 실력 향상 토이 프로젝트 2. 개요 1) 사용언어 : HTML, CSS, JavaScript(Vanilla) 2) API : Web Storage API 를 사용하여 화면 스킨, 입력한 검색어 .. 2020. 8. 11.

티스토리툴바