본문 바로가기

반응형

frond-end

[CSS] z-index 의 동작방식 z-index 의 쌓임 맥락 z-index를 이해하기 위해서 먼저, 쌓임 맥락(Stacking Context) 의 개념을 이해해야 한다. 쌓임 맥락 이란, HTML 요소들에 사용자를 바라보는 기준으로 가상의 z축을 생성하여 3차원 개념으로 보는 것 이다. 따라서, 쌓임 맥락을 형성한다는 것은 자신만의 3차원 공간을 형성하는 것이며 그 요소들의 우선순위를 z-index 가 정하게 되는 원리이다. 출처 : https://tympanus.net/codrops/css_reference/z-index/ 위 그림을 보면, 각 요소들이 사용자를 바라보는 z축 상에서 z-index 에 따라 "쌓이는" 것을 볼 수 있다. 바로 이것이 쌓임 맥락의 개념이며 쌓임 맥락을 형성하는 조건은 꽤 많다. position 이 rel.. 더보기
[typescript] any VS unknown 🁢 anyScript 는 이제 그만 프로젝트의 tsconfig.json 파일에서 compilerOptions 에서 [참고: https://www.typescriptlang.org/tsconfig] noImplicityAny 는 any 라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이다 즉, true 로 설정할 경우 any 로 추론될 수 있는 타입을 명시적으로 지정해줘야 한다. 하지만 feature 를 개발하다보면 시간에 쫓기거나 혹은 귀찮아서 타입 지정시 any 를 남발하게 되는데... 'any' 타입은 타입스크립트의 타입 체크를 완전히 무시하게 만들어 준다. 'any' 타입의 변수에는 어떤 종류이 값이든 할당할 수 있으며, 그 변수를 사용하여 어떤 작업을 수행해도 타입스크립트 컴파일러는 오류를.. 더보기
CORS 위의 사진처럼 웹 개발을 하다보면 가끔 cors 정책 위반으로 인해 에러가 발생하는 경험이 있을거에요 cors error 가 프론트에서 발견하지만 보통 백엔드에서 해결해줘야 하는 에러라고 생각해서 그동안 잘모르고 지나갔었는데요 단순 서버에서의 에러인 줄 았았는데 브라우저의 에러라는 것을 알게 돼서 프론트엔드 개발자라면 cors 에 대해 개념정도는 알아야 하지 않나 싶어서 스터디 하게 되었습니다. 보통 cors 에러가 나타날때 " 다른 출처를 막는게 cors 구나" 라고 생각했었는데 알고보니 다른 출처 요청을 허용해주는게 cors 더라구요 . 한번 제대로 알아봅시다. 자바스크립트에서의 요청은 기본적으로 서로다른 도메인에 대한 요청을 보안상 제한해요. 여기서, 두가지 정책이 있는데 same origin 정책.. 더보기
TDD (Test-Driven Development) 테스트 주도 개발 개발(코드 작성) 전 테스트 코드를 먼저 작성해나가는 방식 TDD 를 하기 위해서는 코드를 구현하기 전에 테스트코드를 먼저 작성한다 이 테스트코드를 실행하고 -> 구현하기 전에 테스트 코드를 먼저 작성했기 때문에 테스트를 실행하면 "실패" 할 것이다 -> 작성된 이 테스트코드가 "성공"할 수 있도록 그 테스트만을 통과할 수 있을만큼만 심플한 코드를 작성한다 -> 성공 그러면 다음 테스트로 넘어가서 이 단계를 반복. 이런식으로 테스트를 먼저 작성하고 전체적인 기능을 구현한다면 이제 그때서야 이미 작성된 코드를 여기저기 수정하고 깨끗하게 만드는 "Refactoring" 작업을 할 수 있다. 리팩토링을 자신감 있게 할 수 있는 이유는 , 구현된 코드를 다 테스트하는 테스트코드가 있기 때문이다.. 더보기
GitHub 사용법 github 사용하기 토큰 만들기📌 Personal access token 만들기우측 상단의 프로필 - SettingsDeveloper SettingsPersonal access tokens - Generate new tokenrepo 및 원하는 기능에 체크, 기간 설정 뒤 Generate token토큰 안전한 곳에 보관해 둘 것 ﹅ MACKeychainAcess 앱 실행github 의 인터넷 암호 항목 선택사용자명과 토큰 붙여넣기 원격 저장소 사용하기 로컬에 원격 저장소 추가 후 푸시 - HTTPS 프로토콜 사용 📌 GibHub 레포지토리 생성 후 복붙 명령어git remote add origin (원격 저장소 주소)로컬의 git 저장소에 원격 저장소로의 연.. 더보기

반응형