kasumil의 코딩 공작소

$("#test").click(()=>{ let dif=$(this).attr('value'); console.log(dif); }); 위 코드의 결과물은 "undefinded"이다. 왜? 라고 생각할텐데 그 이유는 $(this)가 해당 익명함수를 가르키는 것이 아니라 window 객체를 지칭해버린다. 즉, 저 함수 내부를 지칭하는 게 아니라 함수 밖을 지칭해버림. 그렇기에 이를 해결하려면, $("#test").click(function() { let dif=$(this).attr('value'); console.log(dif); }); 화살표 함수를 지우고 익명함수로 바꿔버리자. 그러면 $(this)가 익명 함수를 읽어버린다. console.log찍어보니 bind가 끊어지는 듯? 그래서 그런 듯 싶다.

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다. 그렇다면 id값 같은 동적인 부분은 어떻게 해야할까? 바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것. /pages ㄴ index.js /news ㄴindex.js /id ㄴ[newsDetail].js 위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다. 이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다. import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook function newsId () { const router = useRouter(); ro..

Next.js의 경우 서버사이드이다. 기존 react와 다르게 크롤링을 위해서 서버에 요청시 모든 페이지를 로딩한다. 즉 검색 기능에 노출되기 쉽다. 그리고 또한 page를 기존 React의 경우 페이징을 위해 무조건 쓰는 React router v5 기준 Switch, v6기준 Routes를 쓰지 않는다. pages ㄴindex.js // domain.com/ 과 같은 상황 ㄴnews ㄴ index.js // domain.com/news ㄴnews/id ㄴindex.js // domain.com/news/id 이러한 구조로 폴더별로 경로를 설정할 수 있어서 매우 좋다. 즉 편리하다 이말이여~ 기존에는 라이브러리를 일일히 호출하고 이를 넣어서 경로 잡아야 했는데, 그런게 없으니 ㅎㅎㅎㅎㅎ import R..

// 요건. // forEach문을 돌려 해당 내용과 일치하는 부분이 있으면 해당 내용만 리턴. // 없을 경우 다른 변수를 할당. 어떤 이벤트의 하위... Arr.forEach((el) => { 이부분에서 진행해야함. }); }) 오늘의 사고력 문제... 특정 배열에서 일치하는 부분이 있으면 그 배열 순서에서 일치하는 다른 배열변수에서 id값을 가져와 넣어줘야한다. 그런데, 일치하지 않으면 그냥 일반적인 변수로 넣어줘야 했다. 따로 따로는 쉬웠으나 합치는 부분이 너무나도 어려웠다. 오늘 어려웠던 이유.... 하나의 if안에서 모든 것을 컨트롤하려고 했다. 이게 무진장 어려웠는데, 퇴근 직전에서 막상 만들고 이해를 못 했다가 작동되는 것만 확인하고 일단 퇴근하면서 생각해봤는데, 제대로 된게 맞더라. //..

만들려고 했더니 리액트 라우터 돔이 v6로 바뀌면서 호출방식이 바뀐걸 오늘 알았다. Switch 함수가 사라지고 Routes로 변경되었고, usehistory도 대체됨. 이게 뭔 이야기인가 했더니 요거 였다. 바빠서 영상이 올라온 것만 봤었다. 그리고 까먹음. https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC React Router v6 업데이트 정리 velopert님의 영상을 토대로 정리한 블로그 글입니다.동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!React Router v6가 정식으로 릴리즈 되었다. 공식문서그 동안 사용했던 React Router v..

https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org https://soyoung210.github.io/redux-toolkit/tutorials/basic-tutorial/ Redux Toolkit # 기본 튜토리얼: Redux Toolkit 소개 soyoung210.github.io 위 두개는 거진 리덕스 툴킷을 정리한 내용이다. 하지만 내용이 너무 복잡하고, 이것 썼다 저것썼다해서 헤깔린다. 이미 이해를 하고나서 내용을 정리하고자 공식문서 링크를 찾던 도중..

리덕스 툴킷을 다시 배우려고 정리 좀 했다. useSelector = 리덕스 라이브러리 내장된 함수로 리듀서에 있는 state값을 불러오는 함수. useDispatch = 리덕스 라이브러리 내장된 함수로 리듀서 값을 변경시키는 명령 함수. 왜 리덕스가 어렵냐 하면 보일러 플레이트가 많은 상태에서 실질적으로 용어가 많은데, 쓰임을 모르겠으니 헤매는 것. action은 payload를 가지고 있는데, 가르칠때 action도 같이 가르치니 이해가 안된상태에서 헤매게 되는 것. 쉽게 말하면 dispatch 사용하는 것을 action인데, 이를 다른 것처럼 설명하니 헤매게 되는 것이다. dispatch = action이라고 이해하면 편하다. 최상단 index.js import React from 'react'; ..

모든 명령어는 window를 기준으로 작성되어 있습니다. 일단 파이썬 설치를 한다. 이때 path를 클릭해서 기본으로 추가되도록 한다. 이걸 안하면 파이썬 path 설정을 수동으로 잡아야한다. 1. 파이썬 3.4 이후 pip는 내장되어 있으므로 설치할 필요가 없다. 2. 쉘에 접속한다. window 기준 cmd. 3. pip install virtualenv 4. virtualenv (폴더이름) 5. cd 폴더이름/scripts/ 6. activate.bat(가상화 작동 명령) 7. 가상화의 경우 또 다른 컴퓨터를 만드는 것으로 매번 라이브러리를 설치해줘야한다. 8. pip install Django 9. 설치 후 python 입력 10. import django 하고 에러 없으면 깔린게 맞다 11. 그..

파이썬의 카테고리의 이게 처음이자 마지막 작성글일것을 보는데, python은 그냥 기초언어다. 프론트엔드의 html같은것이라고 보면된다. 여기에 확장으로 백엔드 django나 아니면 프론트 flask로 간다. 이걸 모르고 왜 이렇게 어렵지 했는데, do it 파이썬 보고 이건 그냥 기초언어다 싶더라.

세미콜론이 없기도하고 {} 중괄호도 없어서 매우 불편하다. tab키를 이용한 빈칸 공백 스타일이 어떻게 보면 편한데 난 불편해!!! 어떻게 아니 억떻게 ;이 없을 수 가 있어! 자바스크립트 쓰다가 파이썬 쓰면 습관적으로 계속 ;를 계속 치게된다. 아오~ 어떻게 보면 진짜 편한건데 파이썬만 쓰는 게 아니니까 자바스크립트 리액트 php 등을 쓰다보니 ;이 익숙해서 너무 불편하다... 개발하는데 있어 윈도우에서 불편한 점이 많아, 리눅스를 깔려 했더니 윈도우를 포맷해야 하므로 귀찮아 기존에 남아돌던 하드디스크에 설치하여 해당 하드는 500gb정도 개발용으로 쓰려고 생각 중. 요즘 node도 쓸줄 알고 하니까 다시 파이썬 학습 중이다.