Front End Develop Front End Develop

자바스크립트 클린코드에 대한 관점들이 많이 있습니다. 다른사람들을 위한 코드를 작성하는 것이 좋고, 또 그 자체로도 본인에게도 매우 도움이 되기 때문에 어떻게 보면, 클린코드는 좋은 개발자의 덕목에 필수불가결하다고 할 수 있습니다. 여전히 어지럽고 난해한 코드를 작성하는 법, 아무도 알아보지 못하게 코드를 작성하는 법에 대한 책들이 있긴 하지만, 저는 그런 관점에 대해서는 자기 자신이 자신이 없기 때문이라는 생각만 듭니다. 이 글에서는 자바스크립트 관점에서만 다룹니다. 1. 강력한 타입 체크 == 대신에 ===를 사용하세요. 0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false // 예시 const val = "123"; ..

오늘은 Trello 데이터를 통해 멋진 CMS와 같은 사이트를 만들어보도록 하겠습니다. 전체적인 시나리오는 트렐로에서 칸반 보드를 만들고 해당 내용에 라벨링을 'stage' 또는 'live'를 붙이게 되면 네틀리파이 hook을 통해 자동으로 사이트에 패치되게되는 시나리오입니다. 추가적으로 깃헙도 연결하여 깃헙에 커밋하면 그 내용 또한 자동으로 네틀리파이(netlify)에 반영됩니다. netlify 계정 만들기 www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deplo..

구글에 입사하기 위해서 2020년 기준 자바스크립트 질문들에 대해서 소개드립니다. 부제 : Callbacks, Promises, Await/Async 1. Callback 간단한 callback 예시 const body = document.getElementsByTagName('body')[0]; function callback() { console.log('Hello'); } body.addEventListener('click', callback); EventListener 이벤트 함수도 콜백을 사용합니다. 이 경우 "콜백"이라는 함수를 다른 함수 "addEventListener"에 전달합니다. addEventListener가 실행되면 click 이벤트와 함께 콜백을 등록합니다. 여기서 JavaScri..

script 호출 방식을 지연하는 것에 async와 defer가 있습니다. 언제 사용하면 좋을까요? async는 DOM에 직접 연관이 없거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행해야할 때 효과적입니다. 구글 애널리스틱스, 쿠키봇 등 독립적으로 사용되는 서드파티 스크립트들은 async가 적합합니다. defer도 async와 마찬가지로 병렬로 로드합니다. async와 유일한 차이점은 defer는 DOM이 모두 로드 된 이후에 실행이 일어납니다. 그래서 순서가 보장된다는 차이점이 있습니다. 때문에 기본적으로 DOM의 모든 요소에 접근할 수 있고, 실행 순서도 보장이 됩니다. 스크립트 파일끼리 의존성이 있을 경우 사용하면 좋습니다.

Z-index를 사용할 때 Stacking Context를 고려하십니까? 아마 대부분 스태킹 컨텍스트에 의해서 z-index의 순서가 결정된 다는 것을 알고 있을겁니다. 여기서 더 나아가서 또 놀라운 사실이 있습니다. 스택 컨텍스트 생성에 있어서 놀라운 예외가 있습니다. 스택 컨텍스트 생성을 발생시키지 않게 함으로 인해서 내부 콘텐츠와 z-index를 교차할 수 있습니다. ~~JUST PASSING THROUGH~~ .scroll-area { overflow: scroll; border: 3px solid salmon; width: 18ex; height: 15ex; margin-left: 2ex; } .scroll-area .vertical-bar { position: relative; float: l..

Async/Await 사용할 때 try/catch문 없이 사용 할 수 있을까요? 아래의 코드를 개선하여 각각 에러처리도 가능하면서 try/catch 구문에서도 빠져나가 봅시다. function fetchAndUpdatePosts() { fetchPosts() .then((posts) => { updatePosts(posts) .catch((err) => { console.log('error in updating posts'); }); }) .catch(() => { console.log('error in fetching posts'); }); } 포스트를 패치하고 나서 업데이트 하는 구문인데 패치할 때 catch에 걸릴 수도 있고 업데이트할 때 catch에 걸릴 수도 있습니다. 우선 async/await..

CSS를 마스터하기 위한 15가지 기법들에 대한 이야기가 미디엄에 잘 포스팅 되어있어 재해석 합니다. "CSS는 쉽지 않다"는 웹 개발 커뮤니티에서 가장 큰 불만 중 하나 일 것입니다. CSS는 기초를 배우는 것 외에도 창의성과 사물을 시각화하는 능력이 필요하다고 굳게 믿습니다. 15가지 기법에 대해서 알아보시죠. 1. HTML(1/15) HTML의 기본기가 탄탄하면 CSS가 훨씬 쉬워진다는 말은 당연한 말이겠지요. CSS 스타일링을 위해서 HTML 구조와 의미론적인 시멘틱 태그를 희생해서는 안됩니다. CSS를 더 잘 알수록 HTML 구조의 파편화와 불필요한 태그 생성에 경계를 강하게 하는 성향이 당연스럽게 나타납니다. HTML 기본기가 탄탄하면 접근성을 손상시키지 않고 UI를 올바르게 만드는 방법을 알..

다양한 색상은 사용자가 사용자 인터페이스의 다른 부분으로 방향을 잡는 데 도움이됩니다. 사이드 바는 종종 보충 콘텐츠, 링크 및 필터링 기능을 포함합니다. 이러한 사이드 바에 배경색을 제공하면 사용자에게 이것이 중요하지만 기본 콘텐츠와는 별개라는 사실을 강조 할 수 있습니다. 와이드 스크린 모니터와 최신 노트북은 일반적인 그리드 컨테이너 크기의 최대 너비를 능가하는 넓은 디스플레이 해상도를 제공합니다. Bootstrap, Foundation 및 TailwindCSS의 가장 큰 기본 그리드 컨테이너 너비는 각각 1140px, 1200px 및 1280px입니다. 가장자리 Column에 할당 된 배경색이 확장되도록하려면 어떻게 해야합니까? 절대적으로 배치 된 대형 의사 엘리먼트(:: before, :: aft..