고짬기록

호이스팅 위로 끌어올려지는 것 같은 현상 var 변수 선언과 함수 선언문에서 발생 var, let, const var let const 중복 선언 가능 불가능 불가능 재할당 가능 가능 불가능 스코프 레벨 함수 스코프 블록 스코프 블록 스코프 1. 중복 선언 2. 재할당 3. 스코프 레벨 function temp() { if(true) { var a = 1; console.log(a) // 1 } console.log(a) // 1 -> 함수스코프 } temp() console.log(a) // ReferenceError: a is not defined -> 함수 밖이므로 function temp() { if(true) { let a = 1; console.log(a) // 1 -> 블록 스코프 } con..

JSX JavaScript eXtention (JS의 확장 버전) HTML 문법을 JavaScript 코드 내부에 쓴 것 빌드 시 Babel에 의해 자바스크립트로 변환 JSX 사용 시 주의점 속성은 항상 큰따옴표로 감싼다. class의 속성명은 className으로 준다. 태그는 항상 닫혀있어야 한다. input, br을 사용할 때 HTML과 다르게 클로징 태그 사용해야 함 어떤 태그라도 Self-closing tag 가능하다. , 형제 노드를 작성할 수 없다. 반드시 div나 Fragment태그로 감싸진 형태여야 함 변수를 렌더 안에서 정의하고, 리턴에서 변수명을 중괄호로 감싼 형태로 표현 render() { const name = 'WonSang'; return ( {name} ) }

✔ 그룹을 클릭하면, 클릭된 그룹 안의의 채널들 제시 (+ 채널이 너무 많으면, 스크롤바 제공) // Contents.js onClickGroup = (e) => { // state에 선택한 그룹의 채널들 넣기 var v = e.target.innerText this.setState({ "ChkChannel": this.state.Channel[v] }) // 버튼 취소 if (document.querySelector(".group-chk")) { document.querySelector(".group-chk").classList.remove("group-chk") } // 버튼 체크 e.target.classList.add("group-chk") // 채널 nav바 보이기 document.querySe..

😂 react-slick 이용하여 다중 carousel 구현 중, 각 item들이 붙어있는 현상 발생!! .slick-slider와 .slick-slide에 margin을 주어서 해결하려고 했더니, 아이템들이 정돈되지 않은 상태로 나타남.. 💡 slide 아이템 안에 자식 div를 만들어서 가운데로 정렬을 해보는 생각을 함! - 코드 // Contents.js class Contents extends React.Component { state = { "Group": [], ... } render() { const { Group } = this.state const settings = { infinite: false, arrows: true, speed: 500, slidesToShow: 4, slides..

1. 설치하기 $ npm install react-slick --save $ npm install slick-carousel --save 2. React Slick 사용할 코드 위에 import 해주기 import React, { Component } from "react"; import Slider from "react-slick"; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; - 코드 class BestMemeber extends Component { ... render() { ... const settings = { // 슬라이드 옵션들 arrows: false, // 화살표 표시 dot..

💡 생각하기 경고문구가 없는 div의 className을 login-alert라고 하고, visibility: hidden으로 숨겨놓자. 경고문구가 필요할 때, login-alert의 className을 숨겨놓지 않은 log-alert-view로 변경하여 보여주자. ✔ 여기서 display: none이 아니라 visibility: hidden을 준 이유는 경고문구가 있을 때와 없을 때 공간이 사라지는 것을 원하지 않기 때문!! (경고문구 밑에 회원가입 버튼의 위치가 변경되지 않기를 원함!) 즉, display: none은 아예 사라지게 함 눈에 보이지도 않고, 공간도 존재하지 않음 하지만 visibility: hidden은 숨겨놓은 것이므로 눈에 보이지는 않지만, 공간은 존재!! ▶ 삼항 연산식을 이용하..

문제 주소 및 출처 ❕ https://programmers.co.kr/learn/courses/30/lessons/1844 코딩테스트 연습 - 게임 맵 최단거리 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,1],[0,0,0,0,1]] 11 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,0],[0,0,0,0,1]] -1 programmers.co.kr 문제 : Level 2 게임 맵 최단거리 언어 : Python3 / JavaScript 😥 정사각형 맵으로 생각해서 계속 틀린 문제,, 문제를 잘 읽읍시다❣ 💬 나의 코드 📌 Python3 def solution(maps): n = len(maps) m = len(maps[0]) che..

문제 주소 및 출처 ❕ https://programmers.co.kr/learn/courses/30/lessons/77485 코딩테스트 연습 - 행렬 테두리 회전하기 6 6 [[2,2,5,4],[3,3,6,6],[5,1,6,3]] [8, 10, 25] 3 3 [[1,1,2,2],[1,2,2,3],[2,1,3,2],[2,2,3,3]] [1, 1, 5, 3] programmers.co.kr 문제 : Level 2 행렬 테두리 회전하기 언어 : Python3 / JavaScript 💬 나의 코드 📌 Python3 # 회전 함수 def rotation(info, m, min_v): r1 = info[0]-1 c1 = info[1]-1 r2 = info[2]-1 c2 = info[3]-1 # → for i in ..