체크박스 아이콘의 테두리가 잘려 보인다는 QA 요청이 왔습니다. 이슈 재현을 해보니 사파리 브라우저에서만 발생하는 이슈였습니다. (특정 브라우저에서만 발생하는 이슈는 정말 귀찮다고 생각해요..ㅠ) 개발자 도구로 스타일 조작을 해봐도 요지부동이었습니다. 검색을 통해 발견한 방법들은 다 적용해 본 것 같습니다 🫠 그러면 제가 찾아 보았던 방법과 결과를 정리해 보겠습니다. 문제 Safari에서 SVG 아이콘 픽셀이 깨짐 (정상 렌더링이 되지 않음) 원인 Safari 자체에서 SVG 지원이 완벽하지 않음 해결 방법 img 태그 사용하기 svg view box 수정 svg에 attribute 추가 svg width와 height 단위 변경 아이콘의 border만 css로 처리하기 svg 디자인 직접 수정하기 (✅..
객체에 대해 설명해 봐야 한다면 뭐라고 해야 할까요? 객체란? 객체에 대한 짧은 정의는 이렇습니다 자바스크립트의 가장 기본적인 데이터 타입 자바스크립트의 타입은 원시 타입과 객체 타입으로 나뉘어지죠 프로퍼티의 순서없는 집합 const 객체 = { name: '김객체' , human: false } 객체는 자신만의 프로퍼티를 가지고, 프로토타입으로 불리는 다른 객체에서 프로퍼티를 상속받기도 합니다. 자바스크립트가 프로토타입 기반의 객체지향 프로그래밍 언어라고 불리우는 이유입니다. 프로퍼티 프로퍼티는 이름과 값으로 이루어져 있습니다. 이름은 문자열이나 심벌 타입을 가집니다. 보통 대부분의 이름은 문자열입니다. 값은 이름과 다르게 타입을 가리지 않습니다. 어떤 타입도 가능하고 getter나 setter 또는 ..
로그인이 뭔지 아세요? Q. 로그인은 무엇일까? A. 인증된 사용자라는 것을 알려주기 위한 기능 Q. 어떻게 구현해야 할까? A. JWT 토큰 위의 내용은 이 글에 대한 요약이 아닙니다 ❌ 공부를 하기 전에 생각한 제 대답입니다. 제가 어떻게 이해했고, 결론은 어떻게 내렸는 지 써보겠습니다. 알아볼까요 어떤 서비스에나 있는 로그인과 로그아웃은 간단해 보입니다. 그렇지만 이 인증과 인가 기능을 구현하기 위해서는 고려해야 할 것이 많습니다. 사용자의 정보가 털리지 않도록 보안을 지켜야 하고, 사용자가 서비스에 머무는 동안 로그인이 잘 되어 있도록 사용성을 중시해야 합니다. 로그인의 문제점 구현에 앞서서 알아야 하는 부분입니다. 로그인을 공부하다 보면 서버와 보안에 대해 알게 됩니다! (또 여기서 모르는 용어..
API에서 날려주는 데이터를 UI에 더 잘 뿌려주기 위해 꼭 알아야 할 부분입니다. 이 글은 자세한 개념을 다루지 않고, 제가 기억하고 싶은 부분 중심으로 작성했습니다. 🥑 구조 Object.assign(target, ...sources) Object.assign({초기값, 객체들}) 뒤에 있는 객체들이 초기값 부분과 합쳐집니다. ❓ 왜 쓰는가 우리가 객체를 복제하고 싶을 때, 쉽게 이용할 수 있는 방법은 또 다른 변수에 객체를 담는 것입니다. const user = { name: "gaegul", gender: "female" } const newUser = user; // newUser에 user를 복제 console.log(newUser.name) // gaegul newUser은 user의 내용을..
여차저차 갖가지 에러를 해결하며 프로젝트에 맞는 npm install 성공 완료! 그리고 npm run start 에러… import된 css들이 제대로 컴파일이 되지 않는 것 같았습니다. 찾아보니 sass 팀에선 더이상 node-sass를 지원하지 않는다고 합니다. 이는 최신 m1 환경도 지원하지 않는 다는 소리. 공식 사이트에서 dart-sass를 이용하라고 말합니다. We no longer recommend LibSass for new Sass projects. Use Dart Sass instead. If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your packag..
해당 어플리케이션 웹사이트에서 가서 직접 설치할 수도 있지만, 더 편하게 터미널에서 명령어로 우리가 필요한 프로그램들을 설치해 보겠습니다. Visual studio code, Chrome 설치하기 우선 저는 비주얼 스튜디오 코드와 크롬이 필수 앱입니다. $ brew install visual-studio-code $ brew install google-chrome 최신 homebrew에는 cask가 기본으로 되어 있어서 --cask 명령어는 생략해도 됩니다. 카카오톡 설치하기 PC톡은 무조건 아니겠습니까… 설치에 앞서서 mas를 설치해야 합니다. cask : 웹사이트에서 받을 수 있는 어플리케이션 설치 mas : 앱스토어에서 받을 수 있는 어플리케이션 설치 // mas 설치 $ brew install m..
