반응형 Coding11 Flutter Web에서 폰트적용 안되는 이슈 해결 방법 들어가며Flutter로 웹 프로젝트를 진행하면서 한글 폰트로 Pretendard를 적용하려고 했습니다. 일반적으로 Flutter에서는 pubspec.yaml에 폰트를 추가하여 사용하는 것이 기본적인 방법인데요. 하지만 이 방식으로는 Pretendard 폰트가 제대로 적용되지 않는 이슈가 있었습니다. 오늘은 이 문제를 해결한 방법을 공유하고자 합니다.문제 상황처음에는 Flutter의 일반적인 폰트 적용 방식인 pubspec.yaml에 폰트를 추가하는 방법을 시도했습니다.# pubspec.yaml flutter: fonts: - family: Pretendard fonts: - asset: assets/fonts/Pretendard-Regular.otf - asset: assets/fonts/Pretenda.. 2024. 11. 7. 모던 자바스크립트 Deep dive - 데이터 타입 숫자 타입 모든 수를 실수로 처리한다. 2진수, 8진수, 16진수를 변수에 할당하고, 그 변수를 참조하였을 경우 모두 10진수로 해석된다. const value = 0o101; console.log(vaule) // 0o101이 아니라 65가 출력된다. 심벌 타입 변경 불가능한 원시 타입, 다른 값과 중복되지 않는 유일무이한 값. 주로, 이름이 충돌할 위험이 없는 객체의 유일한 property키를 만들기 위해 사용. Symbol 함수를 호출하여 생성. 심벌 값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값. =? 그냥 property를 만들어도 동작하는데 심벌 타입으로 property를 생성하여 왜 쓰는 걸까? 데이터 타입 필요한 이유 값을 저장할때 확보해야 하는 메모리 공간의.. 2022. 3. 17. 모던 자바스크립트 Deep dive - 표현식과 문 값 식이 해석되어 생성된 결과 변수의 정의에 의해 변수에 할당되는 것은 값. const value = 1+2; 위 statement에서 변수 value에 할당 되는 것은 1+2가 아니라 해석 된 결과 값인 3이다. 즉, 할당 되기 전에 평가가 되어 값을 생성되어야 한다. 표현식과 문 문(statement)은 프로그램을 구성하는 기본 단위이며, 최소 실행 단위. 표현식은 값으로 해석 될 수 있는 문. 즉, 문 ⊂ 표현식 문이 표현식인지 아닌지 구별할 수 있는 가장 간단한 방법은 변수에 할당해보는 것. 구글 개발자도구에서 표현식이 아닌 문은 undefined로 출력됨. 2022. 3. 16. 모던 자바스크립트 Deep dive - 변수 메모리 데이터를 저장할 수 있는 메모리 셀의 집합체이며 메모리 셀의 크기는 1바이트(8비트)이다. 메모리에 저장되는 모든 값은 2진수로 저장된다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 변수는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다. 즉 변수는 값이 아니라 메모리 주소를 기억하고 있다. 개발자는 메모리 주소에 직접 접근하지 않고 변수를 통해 안전하게 값에 접근할 수 있다. 변수 선언 만약에 메모리 공간에 기존 값이 있으면 잘못된 값을 불러올 수 있으므로, 변수를 선언할 때는 메모리 공간에 undefined를 할당하여 초기화한다. 여기서 할당이란 변수에 값을 저장하는 것을 .. 2022. 3. 15. tailwind CSS에 template literals 사용시 주의점. 사진과 같이 아이콘을 원 형태로 배치를 하고 싶어서 li 각 요소마다 rotate를 걸어주고, 각도는 다 다르게 설정을 하고 싶었다. 아래와 같이 코드를 작성하니 전혀 동작을 하지 않았다. 각도(변수 deg)를 계산하여 생성하고 rotate-[각도 deg]를 className에 넣고 싶었다. deg를 console로 찍어보니 잘 생성되고 있고, 혹시나 hoisting 때문에 안 되는 것인가 싶어서 deg값이 있을 때 li 요소를 생성하게 했는데 되지 않았다. const iconSet: string[] = [ "home-outline", "person-outline", "settings-outline", "mail-outline", "videocam-outline", "key-outline", "game-.. 2022. 3. 8. tailwind를 이용하여 active 유지하기 Active시 css를 유지하고 싶었다. 즉, 클릭하면 menu가 나타나고 다시 클릭하면 menu가 사라지게 하고 싶었다. 위와 같이 작성을 하면, Icon에 클릭을 유지하는 동안만 active css로 변하고, 클릭을 제거하면 다시 이전 css로 돌아온다. tailwind css만으로 active를 유지하고 싶어서, 구글링을 how to maintain active with tailwind로 했지만 찾지를 못했다. 고민하다가, 아래와 같은 방법으로 문제를 해결하였다. 좋은 방법인지는 모르겠지만, 혹시 tailwind CSS만으로 아래와 같은 기능이 구현 가능하다면 가르침 부탁드립니다. useState를 이용하여 active 값을 관리하고, Icon 클릭 시 active 값을 변하게 하였다. 그리고, 삼.. 2022. 3. 6. tailwind와 ionicons를 같이 쓰는 법. 요즘 tailwind의 매력에 푹 빠져있다. 기존에 쓰고 있던 ionicons를 같이 쓰고 싶어서, 사용법에 대해 구글링을 하였지만, 찾지를 못하였다. 이 글은 공식적인 사용 방법이 아닌 내가 찾은 사용법을 설명하고자 한다. 이로 인해 문제가 생긴다면 책임은 못 집니다. 먼저 Ionicons는 아래 사이트에서 이용 가능합니다. https://ionic.io/ionicons Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io ionicons를 tailwind와 사용하기 위해서 기존 tailwind 방식대로 className에 코드를 넣으면 작동을 하지.. 2022. 3. 5. css 공부하며 몰랐던 것 정리. Button w-6 말고, py-2, px-6을 이용하자. 한줄에 여러개의 element가 있으면, item-center를 쓰자. 2022. 3. 4. 클린코드 1장 의미 있는 이름 [21-38] 변수, 함수, 클래스의 존재 이유? 수행 기능? 사용방법에 대한 답을 할수 있는 이름으로 짓자. 코드만 봐도 맥락이 보이도록 하자. 코드의 의미를 흐리는 단어를 넣지 말자. 이름이 달라야 한다면 의미도 달라야 한다. 루프에서 반복 횟수를 세는 변수 i, j, k 는 괜찮다. 클래스와 객체 이름은 명사나 명사구가 적합하다. [32] Manager, Processor, Data, Info 등과 같은 단어는 피하자. ? = 위 단어는 명사나 명사구 인데 왜 피해야 하는 걸까? 메서드 이름은 동사나 동사구가 적합하다. [32] 생성자를 중복정의 할 때는 정적 팩토리 메서드를 사용한다. 메서드는 인수를 설명하는 이름을 사용한다. Complex fulcrumPoint = Complex.. 2022. 3. 2. 알고리즘 - 누구나 자료 구조와 알고리즘 1 자료 구조가 중요한 까닭 속도 측정 → 연산이 얼마나 “빠른가"를 측정 할 때는 얼마나 많은 단계가 필요한지를 생각 해야한다. 배열에 데이터 삽입 → 삽입할 공간을 만들기 위해 기존 데이터를 이동시키는 단계가 필요함. 맨 뒤의 데이터부터 순차적으로 한칸씩 이동 한다. 배열에서 데이터 삭제 → 메모리에 빈 공간이 있으면, 효율적이지 않음. 데이터 삭제 후, 남은 데이터를 이동 시켜 빈 공간을 메우는 작업이 필요함. 집합에 데이터 삽입 → 중복 된 데이터가 있는지 먼저 확인 하여야 하므로, 검색 단계 + 삽입 단계가 필요함. 결론 → 중복 제한이 없다면 배열이 집합 보다 좋다. 2022. 3. 2. 이전 1 2 다음 반응형
