본문 바로가기

Frontend66

python 2일차 / function / def / parameters / arguments / return values / format / f"" # 2.4 Functions # function 을 정의할 때 def 를 쓴다. # 변수와 마찬가지로 숫자로 시작하면 안되고 스네이크 케이스를 쓴다 def say_hello(user_name, user_age): # parameter print("hello", user_name, "how r u ?") print("you are", user_age, "years old.") # 2.5 Identation # python에선 공백이 매우 중요하다. # 코드를 두칸 띄워줘야 그 코드가 어떤것 안에 들어가 있는걸 알수있다. def say_bye(): print("bye~") say_bye() # 2.6 Parameters # parameter: function의 괄호 안에서 쓰는 인자 # argument: f.. 2023. 1. 2.
Python 1일차 / 변수 / string / bool # 2.0 Hello world print("Hello world!") # 2.1 Variables 변수 a = 2 b = 3 c = a + b c = 1 #파이썬은 위에서 아래로 코드를 읽는다. print(c) # 변수는 숫자나 기호가 아닌 글자로 시작 해야한다. # 변수명에는 띄어쓰기를 사용할 수 없다. # python에서는 스네이크 케이스로 작성한다. myAge = 77 # camelCase는 javascript에서 많이 사용된다. my_age = 77 # python 에서는 스네이크 케이스를 많이 쓴다. print(myAge) print(my_age) # 2.2 Booleans and Strings my_name = "solyi" print(my_name) # True, False 는 첫 글자를 .. 2023. 1. 2.
[vue]컴포넌트 통신 세션8: 컴포넌트 통신 Component Communication & Reusable 1. 이번 세션 학습 컴포넌트로 UI를 구성하는 방법 어떻게 컴포넌트끼리 통신하는지, 컴포넌트 사이에서 어떻게 데이터를 주고 받는지 어떤 접근법이 있고, 어떻게 선택 해야하는지 2. 외부에서 데이터 받아오기 중요!같은 컴포넌트를 여러번 사용할때 매번 다른 데이터로 설정한다는 개념 props property의 약자로 커스텀 html 속성을 의미한다. props 로 설정한 것을 vue가 인식하게 하려면 받는 component 에서 props 를 추가해주어야한다. 가장 단순하게 받는 방법은 [ ] array 이다. props: [], 그 다음 모든 커스텀 속성을 추가해준다. props: [ 'name', 'phoneNumbe.. 2023. 1. 2.
[Nuxt.js] 학습정리 Nuxt ? 파일 기반의 자동 라우팅 생성이 넉스트의 특징. - 디렉터리 구조 설명 [pages] pages 내부에 생성한 main.vue 페이지는 localhost:3000/main 으로 바로 접근이 가능하다. 폴더나 vue파일을 생성하고 서버를 실행하면 .nuxt/router.js 에서 해당 이름들을 확인 할 수 있다. [layouts] error 페이지는 layouts/error.vue 로 작성하면 자동으로 인식해서 존재하지 않는 경로를 요청 할 경우 자동으로 페이지를 넘겨준다. default.vue 공통된 UI들을 보여주고 싶을 때 사용한다. 헤더, 푸터 등 헤더에서 메뉴를 보여주고싶을때 vue에서는 를 사용했지만 nuxt에서는 홈페이지 로 변경하여 사용해준다. 는 는 nuxt에서 REST API.. 2022. 2. 1.
[ESlint] 유용한 ESlint 모음 순서 정렬 해주는 규칙 (ex. asyncData 는 data 위에 위치한다.) { "vue/order-in-components": ["error", { "order": [ "el", "name", "key", "parent", "functional", ["delimiters", "comments"], ["components", "directives", "filters"], "extends", "mixins", ["provide", "inject"], "ROUTER_GUARDS", "layout", "middleware", "validate", "scrollToTop", "transition", "loading", "inheritAttrs", "model", ["props", "propsData"], ".. 2022. 2. 1.
[Nuxt/error] [vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. [vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue ul 요소는 항목의 목록을 나타내며, 항목의 순서가 중요하지 않습니다. 즉, 순서를 변경하면 문서의 의미가 크게 변경되지 않습니다. [vue/no-super-root] 템플릿 루트에는 정확히 하나의 요소가 필요합니.. 2022. 2. 1.
[vue2 - error] Vue packages version mismatch: 온라인에서 다운로드받은 nuxt 프로젝트에서 오류가 발생했다. npm install > npm run dev 실행했더니 Vue Package version mismatch : 라는 오류가 발생. Vue packages version mismatch: - vue@2.6.14 - vue-server-renderer@2.6.12 package.json 파일에서 vue와 vue-server-renderer 의 버전이 명시되어있지 않아서 자동으로 최신 버전으로 업뎃을 했고, 그 결과 vue 와 vue-server-renderer의 버전이 일치하지 않는다는 내용. package.json 파일에 다음을 추가해준다. "vue": "^2.6.12", "vue-server-renderer": "^2.6.12", packa.. 2022. 1. 31.
[vue] eslint 가 아닌 prettier 가 적용 될 때 vs code 에서 별다른 설정을 만지지 않았음에도 불구하고 내가 원했던 대로 개행이 되지 않았다. 또한 자꾸 스크립트 부분에 작은 따옴표를 사용한다고 설정 해두었는데 저장할때마다 큰 따옴표로 변경되어 불편함을 느꼈다. 검색해보니 설정이 바뀌어있었다. vscode 의 단축키 ctrl + shift + p 로 메뉴 검색을 열어서 Open Settings (JSON) 을 열어준다. ctrl + f로 formatter 라고 검색해보면 "editor.defaultFormatter": "esbenp.prettier-vscode", 이렇게 eslint 가 아닌 prettier 로 설정되어 있음을 알 수 있다. 그 부분을 아래와 같이 eslint 로 변경해주면, 성공적으로 원하던 부분에서 개행이 된다. "editor.. 2021. 12. 25.
[vue] 정리 (최종 업데이트:2021-12-21) 최솔이의 작성 요령 개념 개념 ? 명령어 $ npm ... 주석 // 플러그인, 팁 * 주제별로 언급 @ 2021-12-07 VUE CLI / VUE 파일의 구성 요소 3가지 CLI ? Command-Line Interface 를 의미한다. 터미널을 통해 프로젝트를 손쉽게 시작할 수 있도록 도와준다. $ npm install -g @vue/cli // npm 이라는 명령어를 통해 vue cli를 전역(-g)에 설치해준다 * vue cli 공식 사이트 https://cli.vuejs.org/ $ vue create hello-world // 간단하게 프로젝트를 생성 할 수 있다. 강의 내에서 간단한 프로젝트 생성은 건너 뛰고 lint ? 코드 작성의 규칙을 정함 eslint , rules 도 마찬가지 pu.. 2021. 12. 7.
[React] 컴포넌트간 통신 / Context API / provider / consumer / useContext 기존 구린 방법 1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경) 2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경) 각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다. 이문제를 해결하기 위해 useContext를 사용하기로 했다. 1. 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider 데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능 1) consumer import PersonContext from "../contexts/PersonContext"; export default function Example1() .. 2021. 11. 16.
[React] Basic Hooks / Additional Hooks / React Router Hooks Basic Hooks useState: state를 대체 할 수 있다. useEffect: 라이프 사이클 훅을 대체 할 수 있다 Additional Hooks useReducer : state를 변경하는 로직이 담겨있는 함수 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때 다음 state가 이전state에 의존적일때 Redux를 안다면 쉽게 이용 가능 useMemo useCallback createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다 useRef: (Uncontrolled-useRef) : 렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력 React-Router-Hooks useHistory 이전: props를 .. 2021. 11. 16.
[React] Component Styling / Style loader / React Shadow / Ant Design // 프로젝트 생성 $ npx create-react-app style-loaders-example // install $ npm i sass $ npm i classnames $ npm i styled-components 스타일로더 CSS 모듈, SASS 모듈 Styled Component 1,2 react shadow ant design 2021. 11. 16.
[React] router / react-router-dom / query-string / redirect 먼저 프로젝트 내에 Pages라는 폴더를 생성하고, Home , About , Profile, NotFound 등 jsx파일을 추가한다. // Home.jsx export default function Home() { return Home 페이지입니다.; } App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다. 또한 이동시킬 페이지들을 모두 import한다. import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom"; // App.js 의 App return 내부 (isLogin ? : )} /> 코드를 확인해보면 .. 2021. 11. 16.
반응형

티스토리툴바