안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 개발 환경에 맞춰서 properties를 사용하기 위해선 dotenv를 사용해야합니다. 1. dotenv 설치하기 # npm npm i dotenv # yarn yarn add dotenv 2. .env 파일 생성하기 # 프로젝트 제일 상단에 생성하기 vue-tistory/.env 3. 변수 선언하기 # 변수명 "VUE_APP" prefix가 필수 VUE_APP_JSS=프뚜 VUE_APP_가 꼭 들어가야..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 작성 도중.... 임시저장이 안되고 컴퓨터가 꺼지는 바람에 다시 작성해서 올리겠습니다... 부들부들...

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 VUE를 개발하던 도중 콘솔창을 확인하다가 아래 메세지가 나오게 되었습니다. 영알못인 프뚜는 인터넷 검색을 하게 됩니다.. 변경사항의 적용이 잘 안 되는 문제를 겪는 사람에게 나타난다고 합니다. 바로바로 적용이 되지 않았던 부분들이 이 문제 때문인가 싶습니다. 해결방법에 대해 알아보도록 하겠습니다. 1. 아래의 경로로 이동하기 # 현재 프로젝트 (vue-tistory) ./node_modules/webp..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 VUE에서는 아래와 같은 라이프사이클 훅이 존재합니다. 상황에 맞춰서 사용한다면 좋은 퍼포먼스를 낼 수 있습니다. 크게 beforeCreate, beforeMount, mounted, beforeUpdate, update, beforeUnmount, unmounted가 있습니다. 1. beforeCreate 사용하기 (setup) # VUE3에서는 setup 프로퍼티가 create를 담당하고 있음 # 0..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 Javascript에는 원시타입과 참조타입이 있습니다. 원시타입은 언어의 최고 로우 레벨에서 직접 표현되는 불변 데이터입니다. 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태입니다. 또한 값이 절때 변하지 않는 불변성을 갖고있기때문에 때문에 재할당 시 기존 값이 변하는것 처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 html은 태그 안에 태그로 만들어진 형태입니다. 그러다보면 버튼(클릭)을 감싸고 있는 태그에 같은 이벤트를 추가할 때가 있습니다. 같은 이벤트를 추가하게 되면 이벤트 버블링 현상이 일어납니다. 1. 클릭 이벤트 연결하기 div태그 안에 버튼 태그를 생성했습니다. 버튼 클릭 이벤트와 div 클릭 이벤트를 연결했습니다. 2. 버튼 클릭하기 버튼을 클릭하면 buttonClick log만 출력되어야 하는데, ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit 티스토리에 사진을 업로드 할 때 사이즈가 너무 커서 부담스러울 때가 있습니다. 사진 하나하나 줄이는 건 쉽지만 한 번에 줄이는 건 쉽지 않습니다. 알씨를 사용하면 사이즈, 용량, 좌우대칭 등 자유롭게 처리할 수 있습니다. 1. 알씨 공식 홈페이지로 이동(클릭) 2. 알씨.exe 실행하기 3. 알씨 설치하기 동의를 클릭해줍니다. 프뚜는 반디집을 사용하기 때문에 알집 추가 설치 체크를 해제 했습니다. 인터넷을 켰을 때 광고가 나올 떄가 많습니다. 하단에 쿠팡/위메프/하프클럽 - 제휴추가와 zum을 검색엔진으로를 체크 해제 하셔야합니다. 4. 사진 추가하기 변경하고자 하는 사진을 사진보관함에 사진추가 버튼 또는 드..

안녕하세요! 프뚜(프로그래머 뚜)입니다! 커피가 맛있고 부드러운 빵이 먹고 싶었던 프뚜는.. 맛집을 알아보던 중.. 어커(ACCUR)라는 성수동 커피 & 소금빵 맛집을 찾게 되었습니다. 당장 달려가서 먹어야겠다! 하고 출발하게 되었습니다. 주황색으로 되어있어서 입구부터 맛있어보였습니다? ..? 들어가기 전에 정면으로도 찍어봤어요! (사진 수평을 맞추기 위해 열심히 노력중..) 메뉴, 주소 등 나와있는데 영알못 프뚜는... @.@.. 기..기다려!! 당장 위에 넣어줄게.. 처음 들어갔을 때 중후한 느낌이 느껴졌습니다. 여럿이서 앉을 수 있는 자리도 준비 되어있었어요! 뒤를 돌았을 때 보이는 뷰입니다. 큰 창문이 좋더라구요! 자 이제 커피와 빵을 시켜볼까요 !? (잘생긴 사장님의 뒷모습..) 프뚜는 초코 소..