공부할 때 인강을 듣거나 주로 책을 보면서 토이 프로젝트를 했었다. 결국 누군가의 코드를 쓰는 것이다 보니, 나만의 프로젝트를 오랜만에 다시 시작해볼까 한다. 지금까지 포트폴리오를 2개 만들었는데, 첫 번째는 학원을 다니며 만든 퍼블리싱 포트폴리오고, 두 번째는 자바스크립트 프레임워크 (Vue.js)를 이용하여 만든 프론트엔드 포트폴리오였다. 퍼블리싱 포트폴리오는 다양한 애니메이션을 많이 추가하여 인터렉티브하게 제작했고, 프론트엔드 포트폴리오는 정적이고, Vue에서 지원하는 기능들을 많이 사용하여 제작했다. 세 번째 포트폴리오는 Vue.js와 Express를 이용하고, 동적 효과등을 이용하여 포트폴리오 최종본을 만들어볼까 한다. (지금까지 만든 포트폴리오는 사실 100% 만족하여 만들지 못 했기에...)..
#Vue.js 프로젝트 작업 중 created로 API Call을 하고, 값을 Component Data에 저장하여 mounted에서 데이터를 가공하려고 했는데, created에서 API 응답으로 Data에 저장한 값을 mounted에서 찾지 못하는 현상이 생겨 고생했다. 나의 지식으로는, created에서 API Call을 하면, Life Cycle에서 created 후 mounted가 되기 때문에 값을 가져올 수 있을 거라 생각했는데, 그게 아니었다. 정확한 Vue Life Cycle의 로직을 알 순 없지만, Created에서 함수를 부르면 함수는 갈길가고, mounted도 갈길을 가서 이어지지 않는건가...? 라는 생각이 들었다. 결국 한시간 정도 디버깅하며 mounted 내에서 API Call을 ..
항상 인강으로만 공부하다가, 회사 동료가 자바스크립트 이론 책을 하나 빌려주어 책을 보게됐다. 책 제목은 '코어 자바스크립트' 로, 이론적인 부분에서 많이 도움이 된다고 하여 시작했다. 첫 시작은 자바스크립트의 데이터 타입에 관련한 내용이었다. 자바스크립트의 데이터 타입은 기본형, 참조형이 있는데 둘의 차이가 무엇인지의 내용이었다. 기본형은 불변형인데, 불변이라는 것은 변하지 않는다는 것인데 a라는 변수에는 여러 값들을 넣을 수 있다. var a = 'abc' 를 선언했다가, a = 'abcdef' 를 다시 선언하여 값을 바꿀 수 있는데 왜 불변이라고 할까? 먼저, a라는 값을 선언하면 메모리에서 공간을 확보한다. 그리고 해당 공간의 이름을 a라고 저장한다. var a = 'abc' 로 값을 넣을 경우 ..
프로젝트에서 조금 더 의미있는 마크업을 하기 위해 시멘틱 마크업 관련 글을 검색해서 찾아보았다. 기본적으로 의미가 있는 태그를 사용하는 게 의미 있다고 생각하여, 리스트 관련 내용은 ul & li, 테이블은 table, 상단, 하단 헤더 푸터는 header & footer, 적절한 태그가 없을 경우 div 등을 사용해왔다. 근데 의미있는 마크업을 검색해보니 section, article 등이 나왔다. 알고 있는 태그이긴 했지만 잘 사용하지 않았기 때문에 어떤 태그인지 조금 자세히 찾아보고, 앞으로 더 의미있는 마크업을 하기 위해 사용해보려고 한다. article : 해당 컨텐트 영역은 페이지에서 독립적인 내용이어야 하며, 해당 부분을 떼어 다른 페이지로 이동해도 그 영역의 내용만으로 온전히 하나의 기사가..
소규모 프로젝트에서는 상관없지만, 프로젝트가 커지면 커질수록 CSS양은 늘어나게 되고, CSS가 많아지면 많아질수록 당연히 성능도 저하된다. 성능 개선 방법 1. @import 를 사용하지 않는다. 속도 측면에서 import는 좋지 않은 방식이라는 내용이 많다. 하지만 Vue에서는 style 내부에 import로 파일을 불러오고 있는데, 해당 방식보다 더 나은 방법이 있는지는 알아봐야 한다. 추가로, index에서 모든 스타일 시트를 불러오는 것보단, 컴포넌트 별로 사용할 스타일 시트를 분리하여 불러오는 게 속도 향상에 좋다. 2. 선택자 방식 header > ul > li > p 보다는 클래스 명을 지정하여 뎁스를 줄여주는 게 좋다. 또한 태그 선택자를 사용하지 않는다. 태그 선택자의 경우 속도의 문제..
BEM (Block Element Modifier) 작명규칙 소문자, 숫자만을 이용하여 작명한다. 여러단어의 조합은 하이폰으로 연결하여 작명한다. (sub-header__title--color-red) 기본적으로 id (label for에서는 사용), 태그 선택자를 사용하지 않고 class 만을 사용한다. (태그 선택자는 성능 저하를 유발하기 때문에 방법론이 아니더라도 사용을 하지 않는 것이 좋다) Block Block은 재 사용할 수 있고, 독립적인 구성요소여야 한다. (header, footer, nav, logo 등) 형태 (small, big, red, blue)가 아닌 목적 (error, menu, button, success)에 맞게 결정해야 한다. 환경에 영향 받지 않아야 한다. (여백, p..
#JavaScript, ES6 프로젝트를 하다보면, 가끔 예상하는 this의 값과 전혀 다른 값을 불러오는 경우가 있다. 예를 들면, window를 바라보게 this를 썼는데 특정 객체나 함수를 본다던가, 특정 객체나 함수를 바라보도록 this를 썼는데 window를 바라본다던가의 문제로 헤맬 때가 있었다. this를 어디서 부르는지의 차이도 있지만, 일반 함수와 화살표 함수의 this는 다르기 때문에 이를 정리하고자 한다. function func() { return console.log(this); } const obg = { text: "1234", testFunc: func, }; 우선 일반 함수를 작성해봤다. 이 상태에서 obg.testFunc() 을 실행하면 나오는 this는 어디일까? 위 코..
- Total
- Today
- Yesterday
- Redux
- vuetify
- Cypress
- vue3
- 포트폴리오
- 퍼블리셔
- vue.js
- typescript
- composition
- vuex
- frontend
- vue
- 타입스크립트
- NUXT
- react native
- JS
- react query
- 호이스팅
- 자바스크립트
- backend
- Front
- pagination
- react
- three.js
- Core Components
- CORS
- react-query
- Store
- e2e
- pinia
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |