본문 바로가기

분류 전체보기234

[Tailwind Css] hover와 focus를 한 번에 //tailwind.config.js const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('hocus', ['&:hover', '&:focus']) }) ], } 2023. 7. 5.
[자바스크립트] 이터러블 개념과 FE에서의 사용처 이터러블은 순회 가능한 객체를 의미 이러한 객체는 Sysyem.iterator 라는 특별한 메서드롤 가지고 있으면 이것을 통해 이터레이터를 반환함 이터레이터는 순회할 수 있는 값의 시퀀스를 나타내는 next() 메서드를 가짐 const iterable = [1, 2, 3]; const iterator = iterable[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator... 2023. 6. 24.
[자바스크립트] map 메서드와 Map 객체의 차이 1. map 메서드 js에서 map 함수는 배열에서 사용되는 메서드 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성함. 배열의 각 용소를 변형 / 추출하여 새로운 배열을 만들 때 사용 const nums = [1,2,3,4,5] const doubleNums = nums.map((n)=>n*2) //[2,4,6,8,10] 2. Map 객체 js의 내장 객체로 키- 값 쌍을 저장하는 자료구조 일반적인 객체와 다르게 키 - 값의 연결을 유지하며 순서가 보장 됨 기본적으로 삽입(set), 조회(get), 삭제(clear,delete) 가 있음 문자열 아닌 값도 키로 사용 가능 const mp = new Map() mp.set(1,3) mp.set("asd","asdasd") console.l.. 2023. 6. 24.
[웹] WebPack 이란? webpack이란 ( 참고 사이트 ) 웹팩이란 모듈 번듈링이라고 한다. html파일에 들어가는 Js 파일들을 하나의 js파일로 만들어 주는 방식을 모듈 번들링 이라고 한다. 즉, webpack은 다수의 js 파일을 하나의 js파일로 만들어주는 것 필요한 이유 옛날에는 페이지마다 새로운 html을 요청해주 뿌려주는 방식 현재는 SPA 방식으로 하나의 html 페이지에 여러 개의 js 파일들이 포함 됨. 연관 된 js파일들을 하나로 묶어서 관리 용이 컴파일 시 파일 불러오는 시간이 번들링을 통해 줄어듬 하나의 파일로 만들어서 웹 페이지 성능 최적화 됨 Babel이란? 최신 ES6버전을 ES 5 버전으로 변환해줌 대부분의 브라우저는 es6를 지원하지만 익스플로러 같은 경우 구 버전이므로 es5로 바꿔줘야함 $.. 2023. 6. 21.
[React] 컴포넌트가 데이터를 다루는 3가지 방법 Props, State, Context (참고 사이트) 1. Props 부모 컴포넌트에서 자식으로 전달 되는 데이터 부모에서 받으므로 자식에서 변경x const Text = ({text}) => { return {text} } const App = () => { return } Hello world! 라는 문자열 데이터를 전달 2. State 한 컴포넌트에서 동적 데이터를 다룰 때 사용 컴포넌트 안에서 데이터 변경 가능 import React, { useState } from 'react'; const Text = ({text}) => { return {text} } const App = () => { const [count, setCount] = useState(0); return setCount(co.. 2023. 6. 21.
[DFS/BFS] 아이템 줍기 (파이썬) - 진행 중 문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/87694 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 gr에는 직사각형들의 변에 해당하는 좌표들에 넘버를 달아줌. (0번째 rec면 그 변 좌표들에 gr[x][y].append(0) ) inner 라는 그래프를 따로 만들어서 해당 직사각형안에 있는 모든 좌표들에 True값을 부여해줌 현재 위치 x,y 의 직사각형 넘버를 따온다. 다음으로 이동 할 수 있는 nx,ny 의 gr값(직사각형 넘버)이 이전 x,y에서의 넘버와 같고 gr.. 2023. 6. 13.
[카카오] 블록 이동하기 ( 파이썬 ) 문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/60063 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 visited는 딕셔너리로 선언해서 키 값에 sx,sy,ex,ey 방문한 것들을 넣어주고 최소로 도착하는 시간을 기록해둠 동,서,남,북으로 이동했을 시에는 sx,sy,ex,ey의 순서는 그대로 유지된다. 90도로 꺽을 시에 생기는 유의 사항들 도형이 누워있거나 세워져 있거나에 따라 변하는 점이 달라짐. 90도로 꺽을 때 위에 있는, 왼쪽에 있는 점이 sx,sy가 되므로 좌표 .. 2023. 6. 10.
[연습 문제] 숫자 타자 대회 ( 파이썬 ) 문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/136797 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 번호에서 다른 번호로 이동할 때 드는 가중치들 미리 계산 (dist_num 함수) 각 단계별(numbers 각 자리수) 탐색 시 생성 될 수 있는 가중치들을 계산 왼손을 움직일 경우 가중치는 d[left][num] , 큐에 담을 수는 num,right 오른손을 움직일 경우 가중치는 d[right][num] , 큐에 담을 수는 left,num 따로 조건을 달지 않을 경우 생성.. 2023. 6. 6.
[탐색] 퍼즐 조각 채우기 (파이썬) 문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/84021 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 문제를 읽어보면 table에 있는 퍼즐 조각을 하나하나 옮겨보고 gb( game_board) 빈 공간에 딱 들어 맞는지 알아보는 문제 같다. 나 같은 경우는 gb에서 0으로 쭉 이어진 조각들을 구한 뒤 table을 탐색하면서 해당 조각이 table과 딱 들어맞는지 계산 함.(회전 포함) gb에서 0으로 쭉 이어진 각 조각들을 구해서 peace 라는 리스트에 담아줌( 이 때 각.. 2023. 6. 2.

티스토리툴바