일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 상속 (inheritance)
- Promise Chaining
- Instanc
- flex-direction
- 클래스 문법 구조
- 화살표함수 기본 개념
- 재귀함수 탬플릿
- 조건문
- align-content
- 문자열을 객체로 만드는법
- 얕은복사와 깊은 복사
- props비구조화 할당
- 다형성 (polymorphism)
- 재귀적으로 생각하기
- 캡슐화 (encapsulation)
- align-iitems
- Promise all
- 참조자료형
- 객체지향 프로그래밍 특징
- async/await
- string
- justfiy-content
- 첫번째 미니 프로잭트
- display
- Math.floor()
- 추상화 (abstraction)
- css 정리
- class
- probs.children
- probs
- Today
- Total
목록전체 글 (129)
희락코딩
return용도 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환합니다. 이때 값을 명시하지 않으면 undefined를 반환합니다. 아래와 같은 명령문은 모두 함수 실행을 중단합니다. return; return true; return false; return a+b /3; return x; return;만 있는 경우는 아래 예시처럼 사용 할 수 있습니다. if문의 조건이 충족하는 경우 해당 함수를 실행을 중단하고 함수 자체에서 빠져나가는 것을 의미합니다. function () { if(num === 0){ return; // 위의 조건을 만족하면 해당 함수를 중단 } //...샬라샬라~ }
Parsing error : Cannot find module 'next/babel' next.js를 처음 접한 사람이라면 누구나 공감하는 에러인 것 같다. 코드를 작성하다 갑자기 vs코드 파일창이 빨간색으로 오류가 있는것마냥 표시가 되어 있을 것이다... 하지만 브라우저에서는 아무 문제 없이 잘 된다... 그래도 보기 싫어서 찾아 보았다 해결방법은 간단하다. .eslintrc 파일에 가서 아래 코드를 추가 하였다. { "extends": ["next/babel","next/core-web-vitals"] } 참고 자료
npm ERR! code ERESOLVE 라이브러리 설치 도중 unable to resolve dependency tree 문구와 함께 에러가 발생했따.. 원인은 버전 문제였고 간단히 해결 할 수 있는 문제였다. 설치시 npm install --force or npm install --legacy-peer-deps 둘중 하나를 뒤에 붙이면 된다. 문제는 해결 했지만 이 명령어가 무엇인지 궁금해져서 찾아 보았따. --force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가할수 있다. --legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다. 결론은 force를 통해 우회적으로 해보고 안되면 legacy를 사용해서 진행하면 될 것 같다! 참고1 참고2 참고3
Momentum-App 데모 사이트 프로젝트 목표 순수 자바스크립트만 활용하여 간단한 웹 어플리케이션 만들기, 또 한 dom조작 및 api를 활용하여 위치 기반 서비스 구현 해보기! 기능 구현 및 시연 영상 기능 구현 리스트 새로 고침시 랜덤 배경화면 출력 실시간 시계 기능 위치 기반 날씨 및 기상 정보 todolist localstorege 리셋 기능 랜덤 명언 출력 시연 영상 회고... 자바스크립트의 힘을 다시 한번 느낀다!!! 뿌듯하다... 뭔가 만드는게 너무 재미있다...!!! 다음엔 무엇을 만들어 볼까나~@
버튼 클릭시 reload되는 현상 문제 원인 - 우선 button이 form 태그 안에 있을 경우 발생합니다. 그이유는 form태그안에 있는 버튼은 기본적으로 type이 submit 으로 설정되어 있어서 어떠한 이벤트를 주었을 때 버튼 클릭을 하면 reload가 되는 현상이 나타 납니다. 일반 버튼일 경우 상관 없지만 form 태그 안에 버튼이 있는 경우에는 따로 type을 설정하지 않으면 reload현상이 나타납니다. 해결볍 1 html에서 button 태그 type을 button으로 설정합니다. //문제 코드 수정 // 해결 코드 수정 해결법 2 자바스크립트에서 event.preventDefault()로 제어 해줍니다. preventDefault()는 브라우저의 기본 동작을 제어 해주는 역할을 합니다..
up_and_down_game 게임즐기기!! 미니 프로젝트 목표 React에서 useState와 input값에 대한 이해를 향상 시키고 렌덤함수와 setTimeout를 응용해서 간단한 웹 게임 구현하기! 미니 프로젝트 내용 리엑트를 활용한 up down 간단한 웹 게임 입니다. 사용 스택 react, html, css 기능 및 시연 영상 1부터 30까지의 임의 수를 맞추는 게임 입니다. 정답을 맞추면 셋타임아웃을 통해 새로운 렌덤 숫자가 생성됩니다. 코드 import React,{useState} from 'react' import './App.css'; function App() { const [status, setStatus] = useState('1~30 사이의 ..
애플코딩 짱짱 애플코딩 완강 후 vue로 개인 프로젝트를 진행하였다. 배울땐 쉬웠는데 막상 직접 해보려고 하니 막히는 경우가 많아서 애먹었다... 그래도 한달 공부하고 결과물을 만들어 낸 것에 대해 만족한다!!! 그리고 공부한 걸 직접 활용해서 프로젝트를 진행해보니 내가 놓쳐던 부분이나 애매하게 알게 된 내용들을 알수 있어서 좋았따!!! 다음 미니 프로젝트를 기약하며 !!! Art_Shop_ground_vue 데모 사이트 https://art-ground-shop-github-io.vercel.app/ 윈도우는 깨지는... 맥용으로 만들었음... 프로젝트 목표 Vue에 쓰여지는 다양한 메서드와 더미 api를 활용하여 데이터 바인딩을 하고 vue에 대한 전반적인 지식을 습득하기 위한 연습용 프로젝트 입니다..
vuex 사용법 vuex는 props와 custom event로 데이터 주고받는게 힘들때 사용합니다. vuex를 설치하면 js 파일하나에다 모든 데이터를 저장 할 수있습니다. 그럼 모든 컴포넌트를 그 데이터를 직접 꺼내고 수정할 수 있어 프롭스 필요없이 모든 컴포넌트가 데이터에 직접 접근이 가능합니다. 그리고 vue파일과 데이터, 규모가 클 때 사용합니다. 리엑트에서 리덕스 개념으로 생각하면 편합니다. vuex 셋팅 우선 터미널에서 vuex를 설치합니다. npm i vuex@next --save그리고 js파일을 만들어 아래와 같이 기본 셋팅을 합니다. // store.js import (createStore) from 'vuex` const store = createStore({ state(){ ..