rhanziy

좋은 기회로 인해 서울 우먼테크메이커스에서 주관하는 잇츠 스터디 크루 3기에 참여할 수 있게 되었다!!~ㅅ~여러 학습활동 주제 중 나는 '타입스크립트 톺아보기'라는 주제의 스터디를 신청했다. 온라인으로 진행되는 스터디였고 따로 교재나 사전 준비없이 정해진 주제에 대해 공부하고 팀원들에게 공유하는 방식의 자유도가 높은 스터디였기 때문에 부담감도 적었다. 스터디 리더님이 원하는 조원들의 상도 공감이 됐고, 저런 팀원들과 함께하고 싶은 마음이 들기도 했다.저는 같이 이야기하며 배운다고 생각해요. 그래서 대화에서 회피보다는 문제에 부딪히며 해결하시려고 노력하시는 분이면 좋겠습니다.추가로 왜 이런 방식으로 돌아가는지에 대한 고민과 호기심이 있는 분이면 너무 좋아요.스터디의 구체적인 진행방식은 이렇다!1. 8주차까..

~글을 읽는 분들에게 전하는 혼잣말~저는 수포자 입니다.ㅠㅠ 수학은 제가 가장 먼저 포기한 과목이었지만, 개발자가 된 후 이 선택이 이렇게 큰 후회로 남을 줄은 몰랐습니다. 중학교 2학년 때부터 수학을 멀리했던 저는 프론트엔드 개발자로 직종을 전환한 뒤에도 수학의 빈자리를 크게 느끼지 못했습니다. 실무에서 배워야 할 것들이 산더미였거든요.하지만 이직 준비를 위해 [코딩테스트]라는 넘을 마주한 순간, 제게 부족했던 수학적 사고 능력을 뼈저리게 느끼게 되었습니다. 처음에는 코딩 문법과 자료구조 개념이 생소해서 그런가 보다 했지만, 반복되는 좌절 끝에 깨달았죠. '근본적인 해결책은 수학과 친해지는 것이다.'그래서 수포자 스터디에 참여해 초등~고등학교를 아우르는 개념 보충용 수학 교재를 사서 풀어보고 있습니다...

길고 복잡한 HTML 덩어리를 한줄로 축약하려면 Component화 시키면 된다. .vue파일을 새로 만들어서 HTML 작성하고 1. 만든 .vue파일 import하기 2. component에 등록하기 3. 가져다 쓰기 component 파일 작명할 때 주의점 🔽 더보기 컴포넌트.vue 작명은 2단어 이상으로 작명하자. 안그러면 에러발생ㅠ ex) MyDiscount 작명은 카멜형식 이게 귀찮으면 vue.config.js 파일 열어서 lintOnSave : false 하고 서버 재가동하거나 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // transpileDependencies: true, lintO..

일단 Vue로 동적인 모달창 만드는법 1. 모달창 HTML, CSS로 만들기. 2. 현재 HTML ui 상태를 데이터로 저장해두기. 3. 상태에 따라(if문) HTML ui를 보여줄지 말지 Vue 문법으로 작성 step1. 모달창 UI 코드짜기 상세페이지 상세페이지 내용 // CSS .black-bg { position: fixed; top:0; left:0; width:100%; height:100%; padding:50px; background: rgba(0, 0, 0, 0.5); } .white-bg { position:relative; width:80%; margin:0 auto; padding:50px 0; background:white; border-radius: 8px; } .white-bg..

vue에서 이벤트 처리는 v-on:이벤트명 = " 이벤트 발생 시 실행할 코드 " or @이벤트명 = " 이벤트 발생 시 실행할 코드" 으로 사용한다. 예를들어 이벤트 핸들러 onclick은 v-on:click = " " 축약형으로는 @click = " " 이 되는 것. 1. 이벤트 발생 시 실행할 함수는 script태그 export default { method { } } 에 때려넣는다. 2. vue에서는 데이터가 변하면 html에 바로 반영되니까 @click = " 변수++ " 이렇게 쓰면 댐. 3. 여러가지 이벤트들은 ctrl+space로 확인하자. @mouseover, @drag, @input 등등 많음. {{ a }} {{ a }} 50만원 허위매물신고신고 수 : {{ click }} 허위매물신..

vue에서 html에 자바스크립트 데이터를 바인딩하는 방법은 {{ 변수명 }} 콧수염 문법을 사용하면 된다. 변수명은 어떻게 담냐!? script 태그내에 export default 안에 data() { return { 여기에 obj 형식으로 담으면 댄다. } } 이걸 데이터 보관함이라고 하자. product라는 데이터는 array형식으로 넣었는데, 사용할때는 뭐 배열 꺼내오는 방식으로 쓰면 된다. 원룸샵 {{ products[0] }} {{ price1 }} 만원 {{ products[1] }} 70만원 {{ products[2] }} 70만원 보면 html속성 값(class나 style)에도 데이터 바인딩을 할 수 있는데, html속성에 사용할때는 콧수염 문법이아닌 : 속성name = "변수명" 이렇..

https://velog.io/@minseok_yun/Velog-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4MarkDown-%EC%82%AC%EC%9A%A9%EB%B2%95 Velog 마크다운(MarkDown) 사용법 내가 볼려고 만든 마크다운 작성법 velog.io

1. node.js 다운받기. 최신버전 확인 2. 프로젝트 폴더생성 3. 터미널에서 프로젝트 폴더로 이동 후 npm install -g @vue/cli 4. vs코드 에디터 부가기능 설치 Vetur, HTML CSS Support, Vue 3 Snippets *npm install 안되면 yarn 1.xx 설치해보세요. 구글에 Installation | Yarn 사이트 들어가서 설치하고.. 재시작. 맥은 설치 필요 없이 터미널에 npm install --global yarn yarn 있으면 yarn global add @vue/cli 5. 작업영역에 작업용 폴더 추가하고 vue create 프로젝트명 - vue3 선택 6. vue 프로젝트를 작업영역에 추가 7. src > App.vue에 코드를 짜면 됨..