전체 글 검색 결과

해당 글 143건

[Markdown] 마크다운 내용 정리

Markdown Tutorial Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academics, scientists, writers, and many more. Websites like GitHub and reddit use Markdown to style their comments. 줄바꿈, 문단 구분 줄바꿈 , 라인의 마지막에 공백 두 칸 Enter 하나를 입력하면 줄바꿈이 되지 않는다. 문단 구분 : Enter 두 번 입력 h1 태그인 #에서도 자동으로 구분선이 생긴다. 구분선: ___, ---, 글꼴 서식 *이탤릭체*, _이..
🌕 Front/📑 Web Theory 2021. 12. 22. 16:21

[Emmet] 마크업 언어를 좀 더 빠르게 쓰자

Emmet 이란? HTML과 CSS의 작성의 시간을 단축 시켜주는 확장 기능 사용법: keyword 입력 후 tab키 입력 VScode Setting: "emmet.triggerExpansionOnTab": true Emmet 사용하기 1) HTML 문서 ! + tab 2) 자식노드 >를 사용하여, 자식 요소를 생성할 수 있다. div>ul>li + tab 3) 형제노드 +를 사용하여, 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. div>ul+ol+div + tab 4) 반복하기 *를 곱셈 연산자로 여러개의 요소를 생성할 수 있다. div>li*3 입력 후 Tab키 5) 그룹화 ()를 사용하여 괄호안에 있는 코드를 묶어 그룹화를 시켜, 요소간 레벨을 맞춘다. div>(header>ul>li*2..
🌕 Front/📑 Web Theory 2021. 12. 22. 16:17

[Python] iterable 객체 정리 (문자열, 리시트, 딕셔너리, 튜플, 집합)

iterable 객체: collections.Iterable의 인스턴스로, 반복가능한 객체를 말한다. 1. 문자열 2. 리스트 3. 딕셔너리 4. 튜플 5. 집합 6. range, enumerate, zip 1. 시퀀스 자료형 (iterable)의 공통 특징 1) 인덱싱: seq[index]에 해당하는 값 반환 (집합 사용 불가) 2) 슬라이싱: seq[index1 : index2] seq 원래 타입을 그대로 반환한다. (집합, 딕셔너리 사용 불가) nums = [1,2,3,4,5,6,7,8,9] nums[-3:] # [7, 8, 9] 3) count 메서드: seq.count(d): 시퀀스 자료의 자료d의 개수를 반환한다. 4) for 반복문: for item in seq 5) in 연산자: 멤버 확인..
🐍 Python 2021. 12. 21. 23:57

virtual DOM 파헤치기

Virtual DOM 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는 뜻이다. 이 이부분에서 Virtual DOM 이 빛을 발한다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이다. Virtual DOM 이 해결 하려고 하는건 무엇이냐? DOM fragment를 관리하는 과정을 수동으로 작업 할 필요 없이, 자동화하고 추상화하는것이다. 그 뿐만 아니라, 만약에 작업을 직접 한다면, 기존 ..
🌕 Front/⚛️ React JS 2021. 12. 9. 20:40

[고찰] 파생상품으로 공부할 때 주의할 점

파생상품의 맥락에 끌려다니지 말고, 핵심을 주도적으로 파악해야한다. Quiz) 다음 IIFE의 실행결과는? var foo = { bar: function () { return this.baz; }, baz: 1, }; (function () { return typeof arguments[0](); })(foo.bar); 공부할 때 누군가가 공부한 것을 참고하면 큰 도움이 된다. 시행착오가 줄어들기 때문이다. 하지만 "정확하지 않다"는 치명적인 단점이다. 위의 예시만 봐도 틀린 설명 때문에 함참을 들여다봤다. 1. '익명함수내에서 실행된 foo.bar()' 익명함수내에서는 foo.bar()가 실행된 것이 아니다. foo.bar()는 엄연히 메서드이다. 익명함수내에서는 function () { return ..
🧠 FeedBack 2021. 11. 25. 11:00

스크립트(script) 추가/제거하는 버튼 만들기

script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다. index.html에서 script파일을 수동으로 일일이 바꿔야하는 수고를 덜었다. const fileList = ['class', 'promise'] const hasScript = (fileName) => { const currentScripts = document.head.getElementsByTagName('script') for(scriptElem of currentScripts){ if(scriptElem.src.includes(fileName)){ return true } } return false } const removeScript = (fileName) => { const curre..
🌕 Front/🌱 Vanilla JS 2021. 11. 22. 11:55

[Iterable VS Enumerable] 깔끔하게 정리하고 갑시다

한 방 정리 뜻함수뜻타입예시Iterable반복 가능한for (value of arr)순회하면서 값에 접근할 수 있는가 iterator 객체가 있는 데이터 타입Array, map, set,nodeList, StringEnumerable열거 가능한  for ( key in obj)객체의 key에 접근할 수 있는가객체 타입Object   예제로 살펴보자// 배열 예시let arr = ['Junha', 'Rany', 'Leo']arr.hobit = 'Prodo'// 객체 예시let obj = { firstKey: ['Nunu','Garen'], secondKey:['Yumi','Galio','Ryze'], thirdKey:['Minsu','heejung']}obj.fourthKey = 'Junha' ..
🌕 Front/🌱 Vanilla JS 2021. 11. 19. 12:07

arguments 객체: function안에 있는 너, 누가 선언했니?

arguments객체: 실행 컨텍스트 생성 시점에 만들어지다 arguments 객체는 실행 컨텍스트 생성 시점에 함께 만드는 정보 중 하나다. 지정한 매개변수의 개수와 무관하게 호출 시 인자가 모두 arguments 정보에 담긴다. 이러한 특성 덕에 함수의 자율성을 높이는 측면에서 자주 사용한다. arguments는 유사배열 객체이기 때문에 배열처럼 활용하기 위해선 별도의 처리가 필요하다. 또 함수 내부에서 매개변수의 값을 바꾸면 arguments의 값도 바뀌는데, 이는 전달된 인자를 모두 저장한 데이터라는 본래의 개념과 달라지게 된다. 이 때문에 ES6에서는 나머지 파라미터(rest parameter aka ...)가 등장하여 argumetns를 대체하고 있다. 1. 인자 개수와 무관하게, 유연하게 처..
🌕 Front/🌱 Vanilla JS 2021. 11. 18. 23:19

[Web APIs] 브라우저 API

API 개발자가 복잡한 기능을 쉽게 개발할 수 있도록 내부 코드에 신경 쓰지 않아도 복잡한 작업을 쉽게 기능을 가져다 쓸 수 있도록 돕는다. 1) Web APIs (or 브라우저 APIs) Web API는 WHATWG에서 표준을 관리하며 브라우저에서 동작하게끔 만들어진 API이다. 브라우저에 내장되어 있으며 브라우저를 이용해 복잡한 작업들을 쉽게 구현할 수 있도록 도와준다. 비디오 플레이를 시키거나 오디오 소리가 나도록 동작하는 것은 실제로는 백그라운드에서 C++언어와 같은 로우한 언어로 구현이 되어 있지만 사용자가 쉽게 자바스크립트로 사용할 수 있도록 처리가 되어있다. 2) 써드파티 API : 써드파티 API는 브라우저에 내장되어있는 API가 아닌, 외부에서 가져다 쓰는 API입니다. 트위터나 유튜브와..
🌕 Front/📑 Web Theory 2021. 11. 17. 12:05

[addEventListener] 콜백함수에게 인자를 주는 방법

EventTarget.addEventListener() target.addEventListener(type, listener[, options]); 소개 1. EventTarget의 메서드이다. 2. 주어진 이벤트 유형에, EventListener를 구현한 함수를 이벤트 처리기 목록에 추가해 작동한다. 3. EventTarget은 보통 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. 매개변수 1) type - 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열. ex) 'click' 2) listener - 지정된 타입의 이벤트가 발생했을 때, callback함수가 작동한다. - 콜백함수의 첫 번째 인자는 '이..
🌕 Front/🌱 Vanilla JS 2021. 11. 17. 11:35

GIT 원격 저장소 명령어: branch, merge, checkout, push

1. 브랜치 생성 - 브랜치는 독립적으로 어떤 작업을 진행하기 위한 개념으로 각각의 브랜치는 다른 브랜치에 독립적이다. - 메인 브랜치: 배포할 수 있는 수준의 안정적인 브랜치 - 토픽 브랜치: 기능 추가나 버그 수정과 같은 단위 작업을 위한 브랜치 $ git branch # 브랜치 목록 확인 $ git checkout 브랜치이름 # 브랜치 전환 $ git checkout snapshot hash code # 스냅샷 이동도 가능 $ git branch 브랜치이름 # 브랜치 생성 2. 브랜치 병합 $ git checkout master $ git merge topic_branch $ git branch --merged # merge된 branch 확인 $ git branch -d branch name # ..
🚛 DevOps/🟥 GIT 2021. 10. 13. 11:43

백준 1931번 회의실 배정

https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 문제의 핵심: 회의를 많이 진행하려면 명시적 조건을 뭐로 내걸까? 명시적 조건이란 눈에 '확연히' 보이는, 단순한 조건을 말한다. 생각보다 명시적 조건이 많지 않다. 처음에 생각했던 방법: Brute Force로 모든 경우를 배치해볼까? -> 배치해도 그게 답으로 먀기는 방법은 따른 문제다. 방법1. 회의시간이 가장 짧은 것들을 우선배치할까? -> 순서를 알 수 없기에 기각 방법2. 회의시간이 빠른 것들을 정렬해볼까? -> (1,1000) (2,3) 처럼 회의시간은 빠른데 늦게 끝나면 말짱 도로목 방법3. 회의시..
🐍 Python/🤔 Algorithm 2021. 10. 1. 17:34

[파이썬 코드업 기초 100제] 문법 복습, 자주 틀리는 유형

https://codeup.kr/problemsetsol.php?psid=33 문제집 / Python 기초 100제 codeup.kr 순전히 문법을 몰라, 구현 시간이 많이 걸렸다. 기초 문법은 외워야하니깐 복습을 해보자. 1. 문법 되짚기 1. " 'a' " 에서 '는 그냥 출력된다. 2. 출력 형식에 필요한 따옴표와 출력할 문자인 따옴표를 구분하기 위하여 \" 또는 \' 를 이용한다. \'를 출력하고 싶다면 \'='니까 \\'를 써야 한다. 3. \도 안전하게 출력하려면 \\를 사용하는 것이 좋다. 4. To use single or double quotes inside of a string, surround the string in triple quotes. both_quotes = """ 'a"b..
🐍 Python/📝 CodingTest 2021. 9. 28. 15:50

백준 분해합

https://www.acmicpc.net/problem/2231 2231번: 분해합 어떤 자연수 N이 있을 때, 그 자연수 N의 분해합은 N과 N을 이루는 각 자리수의 합을 의미한다. 어떤 자연수 M의 분해합이 N인 경우, M을 N의 생성자라 한다. 예를 들어, 245의 분해합은 256(=245+2+4+5)이 www.acmicpc.net 나의 풀이 N = int(input()) total = 1000000 for i in range(N): arr =[] org = i while(i!=0): arr.append(i%10) i //=10 if sum(arr)+org == N: total=org break; if total == 1000000: print(0) else: print(total) 상대방 풀이 ..
🐍 Python/📝 CodingTest 2021. 9. 24. 16:44

백준 블랙잭

https://www.acmicpc.net/problem/2798 2798번: 블랙잭 첫째 줄에 카드의 개수 N(3 ≤ N ≤ 100)과 M(10 ≤ M ≤ 300,000)이 주어진다. 둘째 줄에는 카드에 쓰여 있는 수가 주어지며, 이 값은 100,000을 넘지 않는 양의 정수이다. 합이 M을 넘지 않는 카드 3장 www.acmicpc.net 처음 풀이 N, M = map(int, input().split()) li = list(map(int, input().split())) li.sort() n = 3 sum = 0 for i in range(N): if n>0 and sum + li[N-1-i] M: # 3개의 값 더한것이 M보다 크다면 넘어감 continue else: result = d[i]+d[..
🐍 Python/📝 CodingTest 2021. 9. 23. 14:55

백준 덩치

https://www.acmicpc.net/problem/7568 7568번: 덩치 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩 www.acmicpc.net N = int(input()) li = [] for i in range(N): li.append(list(map(int, input().split()))) for i in range(N): rank = 1 for j in range(N): if (li[i][0]
🐍 Python/📝 CodingTest 2021. 9. 23. 10:56

옛날 풀이 / 백준 동전

완전탐색_모의고사 7분19초 인덱스, 값 구분 주의 [인데스%배열의크기]로 패턴 반복 가능 완전탐색_소수찾기 40분 반복문 그만 돌아가게 하는 조건 잘 살피기 return False로 아에 함수를 끊을 수도 있다. break문으로 for문을 끝낼 수 있지만, 중첩 for문 일 경우 아래 코드가 실행되므로, break 되는 종료조건에 변수를 조정함으로써 값을 연속시킬 수 있다. print(int(str(0)+str(1))) -> 1 map(''.join) 이지 ..join()이 아님 완전탐색_카펫 16분 문제조건 하나 안 읽음 이중 for문에서 range 종료조건이 변수로 되어 있어서 range(3,i) 같은 경우 range(3,3)일 때 fo문이 진행이 안되어 오류가 났었음. 정렬_K번째수 4분 k번째 ..
🐍 Python/📝 CodingTest 2021. 9. 22. 20:33

탐욕법(Greedy): 체육복

https://programmers.co.kr/learn/courses/30/lessons/42862 코딩테스트 연습 - 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번 programmers.co.kr def solution(n, lost, reserve): lost = set(lost) reserve = set(reserve) common = lost & reserve lost = list(lost-common) reserve = list(reserve-common) for i in reserve: if i-1 in lost: lost.remove(i-1) e..
🐍 Python/🤔 Algorithm 2021. 9. 22. 16:17

React [리렌더링 과정]

들어가기 전 리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다. ReactDOM은 엘리먼트를 랜더링할 때, 이전 엘리먼트와 비교하여 변경된 부분만 업데이트한다. render() render()함수는 내부 컴포넌트 재귀적 렌더링, 뷰의 정보를 담은 객체로 변환하여 반환을 한다. 랜더링 시작: 내부 컴포넌트를 시작으로 최상위 컴포넌트를 렌더링해간다. 마크업 생성: 최상위 컴포넌트 렌더링 작업이 끝나면, HTML 마크업을 만든다. DOM 주입, 표시: 해당 마크업을 실제 페이지의 DOM요소 안에 주입하여, 화면에 표시한다. 리 렌더링 https://felixgerschau.com/react-rerender-components/ When does React re-render components? React ..
🌕 Front/⚛️ React JS 2021. 9. 8. 12:26