티스토리

Coding 공부
검색하기

블로그 홈

Coding 공부

welog.tistory.com/m

mmmlee 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 notice) 블로그 이용시 부탁사항 모두보기

주요 글 목록

  • Ch1. Css Ch1. CSS 1. Basic Reset using the universal selector box-sizing: border-box; 요소의 크기를 테두리와 패딩을 전부 포함해서 적용시킨다. universel selector를 통해 모든요소의 마진과 패딩을 없애준다. padding은 상속되지 않으므로, body에만 padding을 넣어준다 폰트와 색깔은 상속되므로, body에 선언해준다. *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; list-style: 1.7; color : #777; padding: 30px; } 2... 공감수 0 댓글수 0 2022. 9. 13.
  • [Antd] antd 사용시 Input useref 타입 typescript (feat : 강의불만) import {Input} from 'antd' export default function App(){ const inputRef = useRef(null); return ( ) } 라고 쓰면 다양한 오류가 발생한다. import {Input} from 'antd' import type {InputRef} from 'antd' export default function App(){ const inputRef = useRef(null); return ( ) } 라 쓰면 된다. 출처 : https://stackoverflow.com/questions/72577119/type-a-is-not-assignable-to-type-b-in-typescript-with-antdesign Type A is not as.. 공감수 0 댓글수 0 2022. 8. 1.
  • [세팅] React + Vite+ Storybook + TS 스토리북 트러블 슈팅 설치하다보면 Storybook 명령어가 실행 안될때가 있다. 그 이유는 에러로그를 쳐보면 package.json의 type이 module이라 생기는 문제이다. 그래서 이 부분을 commonjs로 바꿔주거나 삭제해주면 되다. 그리고 스토리북을 실행해보면 스토리북 화면이 안보이고, 일반 react 실행했을때 화면이 뜨는 경우가 있다. 그때는 rm -rf node_modules/.cache 를 해주면 된다. 아니면 --no-manager-cache 라는 flag를 줘서 캐슁된걸 사용하지 못하게 하면 된다. 공감수 0 댓글수 0 2022. 7. 24.
  • [TS] Advanced Type 1. Union Type function combine(input1 : number|string,input2 : number|string){ // union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지, // 그안에 무슨 타입이 있는지 몰라서 경고 문구가 나온다. //const result = input1 + input2; let result; if ( typeof input1 === 'number' && typeof input2 === 'number'){ result = input1 + input2; } else { result = input1.toString() + input2.toString(); } return result } const c.. 공감수 0 댓글수 0 2022. 7. 13.
  • [알고리즘] 플레2 달성?? 그림은 귀찮고.. 작년 11월즈음에 플레2를 달성했다. 주변 아는 고인물들의 날먹이라면서 다이아 문제를 주는것을 풀다보니 우연치 않게 되는데 실제 내실력은 플5에서 더이상 안 는것 같다.~~ 플5일때랑 지금이랑 비슷무리하다. 알고리즘을 이론을 공부안 한 죄.. 어차피 지금 목표는 기업코테이고, 기업코테 수준에서는 통용될수 있는방법인데.. 흐음 아쉽다.. 나중에 제대로 공부를 하는 날이 오길 기대한다(취업하고) 공감수 0 댓글수 0 2022. 7. 11.
  • [버그?] 토스앱 토스뱅크 통장 개설하다가 느낀 점 & 고객센터 불편한 점 친구에게 토스뱅크에 좋은 통장이 있다고 해서 개설을 할려고 했다. 그 통장은 연 2% 통장개설이었다. 다른 배너도 없고, 통장 2% 통장개설을 찾아 탭을 뒤적뒤적였다. 그러다가 발견한 곳이 전체탭이었다. 지금은 만들어서 그런지 사라져서 다른 이미지를 부랴부랴 가져왔다. 만들려고 눌렀는데 ??? 통장이 개설이 안된다.. 내가 문제인가 싶어, 껐다 켰다. 토스 업데이트도 해봤다 근데 해결이 안되길래 채팅상담을 통해 문제를 해결하고자했다. 처음에는 네트워크 환경을 바꿔보라기에 와이파이 LTE,5G 전부 바꿔서 시도했다. 그리고 다음으로는 인증서를 만들어보라고 해서 내가 필요하지도 않았지만, 토스 인증서를 만들었다. 근데도 안 만들어졌다. 그리고 난뒤에는 토스인증서 만들어주는 별도의 링크를 주길래, 들어갔더니... 공감수 0 댓글수 0 2022. 7. 11.
  • [잡답] 티스토리 버그? 티스토리 자동로그인으로 쓰고 있는데, 어느 순간 갑자기 글쓰기 및 개별 블로그를 제외한 tistory가 운영하는 메인, 수정 글쓰기 등 공통적인 부분에 전부 400 에러가 뜨는 버그가 발생했다. 시크릿모드에서는 정상적으로 로그인 후 모든기능이 작동하는데 원래 쓰는 자동로그인된 크롬 브라우저에서 갑자기 모든 기능이 안됬다. 심지어, 우상단의 아바타를 클릭하면 나오는 운영중인 블로그도 전부 사라졌다. 며칠간 뭐가 문제인가하다가 우연치 않게 고쳐졌는지, 잘 모르겠지만 고치긴했다. 자동로그인이 안 풀린상태로 시크릿모드에서 로그인 했을때와 자동 로그인의 쿠키를 비교를 했는데, _ga 즉 구글 애널리틱스 쿠키가 한 페이지를 가득 채울정도로 많이 있었다. 그리고 한 도메인당 쿠키제한이 있는게 생각이 났고, 한번 지워.. 공감수 0 댓글수 0 2022. 7. 11.
  • 타입스크립트 타입 1. Number Type 숫자 All numbers, no differentiation between integers or floats 2. String Type 백틱, 작은따옴표, 큰 따옴표 All text values 3. boolean Type true of false Just these two, no “truthy” or “falsy” 4. Object 객체 타입 (컴파일 단계에서 명시적으로 선언을 해주거나, 기본적으로 할당되었을때 타입스크립트가 인식한다) 중첩 객체 또한, 객체 안에 객체에 대한 타입을 명시해주면 가능하다. Any Javascript object, more specific types are possible 5. Array [1,2, 3] Any javascript array t.. 공감수 0 댓글수 0 2022. 7. 10.
  • 타입스크립트 타입 vs 자바스크립트 타입 자바스크립트 typeof는 런타임 중에 에러를 체크한다. 타입스크립트는 타입을 컴파일 중에 체크를 해 에러를 미리 방지해준다. 공감수 0 댓글수 0 2022. 7. 4.
  • [BOJ/백준] 2695 공 DP 문제 테이블 방식은 2종류 dp[a][b] = a번의 횟수와 b의 높이가 남았을때의 최저 시도횟수 dp[a][b] = min(dp[a][b], 1 + max(dp[a-1][t-1], dp[a][b-t])) 1~b 사이에서 떨어드렸을 때, 깨지는 경우와 안깨지는 경우의 최악의 경우 max값을 구하고, 거기에 +1을 해준다. 횟수가 1회 남았을시에는 무조건 높이만큼의 횟수가 필요하니 그에 맞게 초기화 횟수와 상관없이 1층만 남았을때에는 1회로 끝낼수 있으니 그걸로 초기화 다른 dp식 cozyyg 님의 코드를 보고 복기한거 틀릴 수 도 있음 dp[x][y] = x번 던질 기회가 남았을때 y번 시도해서 알 수 있는 유리가 깨지는 최소 높이 dp[x][y] = dp[x][y-1] + dp[x-1][y-1] .. 공감수 0 댓글수 0 2022. 6. 21.
  • 운영체제 3강 - 2 동기식 입출력과 비동기식 입출력 동기식 입출력 프로세스가 입출력이 진행될때, instruction이 실행이 안될때 I/O 요청 후 입출력 작업이 완료된 후에야 제어가 사용자 프로그램에 넘어감 구현 방법1 I/O 끝날때까지 CPU를 낭비시킴 매시점 하나의 I/O만 일어날수 있음 구현 방법2 I/O가 완료될 때까지 해당 프로그램에게서 CPU를 빼앗음 I/O 처리를 기다리는 줄에 그 프로그램을 줄 세움 다른 프로그램에게 CPU를 줌 비동기식 입출력 프로세스가 입출력이 진행될때 instruction이 실행이 될 수 있을때 I/O 가 시작된 후 입출력 작업이 끝나기를 기다리지 않고 제어가 사용자 프로그램에 즉시 넘어감 두 종류 모두 I/O의 완료는 인터럽트로 알려줌 Thread Thread is basic uni.. 공감수 0 댓글수 0 2022. 6. 7.
  • 운영체제 3강 프로세스의 개념 Process is a program in execution 프로세스의 문맥(context) 프로그램의 코드가 어디까지 실행을 했는가, data의 변수가 어떻게 되었는가? Register에 어떤 값을 넣어놓고, instruction을 어디까지 실행을 해야했는가에 대한 모든 요소를 문맥이라 한다. CPU의 수행상태를 나타내는 하드웨어 문맥 Program Counter 각종 register 프로세스의 주소공간 code,data,stack 프로세스 관련 커널 자료구조 PCB(Process Control Block) - 운영체제는 프로그램이 실행될때마다, 프로그램을 컨트롤 하기 위한 1개의 PCB block이 생성된다. Kernal stack - 각 프로세스의 코드를 실행 중에, 시스템콜이 일어.. 공감수 0 댓글수 0 2022. 5. 18.
  • 운영체제 2강 - 2(반효경) 컴퓨터 시스템 구조 CPU는 Program Counter 라는 레지스터가 가리키는 메모리 주소의 instruction의 일만 진행 CPU는 interrupt line을 instruction을 실행전 매번 확인을 후, interrupt이 들어오면, 운영체제로 권한이 바뀜 I/O에 접근하는 모든 권한은 mode bit이 0일때에만 가능 인터럽트는 하드웨어 인터럽트, 소프트웨어인터럽트가 있다 하드웨어는 I/O가 요청하는 인터럽트 소프트웨어 인터럽트는 트랩이라고 하며, Exception이거나 system call이 있다. 동기식 입출력과 비동기식 입출력 동기식 입출력(synchronous I/O) I/O 요청 후 입출력 작업이 완료된 후에야 제어가 사용자 프로그램에 넘어감 구현방법 1 I/O가 끝날 때까지 CP.. 공감수 0 댓글수 0 2022. 5. 13.
  • TS 공부 1. ts에 대한 타입은 type이나 interface를 통해 지정이 가능하다. 2. 만약 객체의 프로퍼티가 나중에 존재하거나 그럴때에는 선택적 프로퍼티인 ?을 넣어서 선언을 해준다. 3. 배열은 타입[] 으로 선언을 해준다. 4. Element의 subset이 HTMLElement이다. 5. 함수의 리턴값이 여러종류일 때 제너릭을 이용해서, 문제를 해결할 수 있다. 6. Map의 get은 선언한 타입이거나 undefined가 올 수있다. 그러니 널병합연산자로 undefined를 제거해줄수 있다.(부정확) 7. interface는 extends을 통해 확장이 가능하고, 이것은 type일때에는 &와 비슷하다. 8. interface는 여러번 정의가 가능하고, 그럴때마다 프로퍼티가 병합이 된다. 공감수 0 댓글수 0 2022. 5. 12.
  • 운영체제 2강( 반효경) 컴퓨터 시스템 구조 각각의 io device들은 디바이스들을 조정하는 device controller가 작업을 해준다. 디바이스 콘트롤러들도 작업공간이 필요한데, local buffer라 이야기한다. cpu 내에는 memory보다 빠른 register라는 저장공간이 있다. mode bit은 Cpu에서 실행중인 명령어가 사용자프로그램인지, 운영체제인지 구분해주는 것이다. interrupt line : cpu의 실행 중인 명령을 멈추는 입력신호가 있는지 확인하기 위한거(지금 이해한거) ex ) i/o에서 오는 신호가 왔을때 timer에서 지정된 시간을 썼다고 왔을때 time : 특정 프로그램이 CPU를 독점하는것을 막기 위한 하드웨어 사용자 프로그램은 I/O에 직접적으로 instrunction을 할 수 없고.. 공감수 0 댓글수 0 2022. 5. 12.
  • [BOJ/백준] 3343 장미 import sys from math import ceil def input(): return sys.stdin.readline().rstrip() N,AC,AP,BC,BP = map(int,input().split()) if AP*BC < BP*AC: AC,AP,BC,BP = BC,BP,AC,AP answer = float('inf') for A_COUNT in range(BC): B_COUNT = ceil((N-A_COUNT*AC)/BC) isover = False if B_COUNT 공감수 0 댓글수 1 2022. 5. 11.
  • [BOJ/백준] 16890 창업 import sys from collections import deque def input(): return sys.stdin.readline().rstrip() A = list(input()) B = list(input()) N = len(A) A.sort() B.sort() A = deque(A[:(N+1)//2]) B = deque(B[N-N//2:N]) answer = ['?']*N left = 0 right = N-1 for idx in range(N): if idx%2: if A and A[0] >= B[-1]: answer[right] = B.popleft() right -= 1 else: answer[left] = B.pop() left += 1 else: if B and B[-1] 공감수 0 댓글수 0 2022. 5. 11.
  • DRF #1 GET all list GET detail : retrieve POST create PUT update DELETE delete PATCH partial_update 공감수 0 댓글수 0 2022. 5. 10.
  • 운영체제 소개 1강 (반효경) 운영체제란 무엇인가? 운영체제란 ? 컴퓨터 하드웨어 바로 위에 설치되어 사용자 및 다른 모드 소프트웨어와 하드웨어를 연결하는 소프트웨어 계층 협의의 운영체제 운영체제의 핵심 부분으로 메모리에 상주하는 부분 광의의 운영체제 커널 뿐 아니라 각종 주변 시스템 유틸리티를 포함한 개념 운영체제의 목적 컴퓨터 시스템의 자원을 효율적으로 관리 프로세서 기억장치 입출력 장치 등의 효율적 관리 사용자 간의 형평성 있는 자원 분배 주어진 자원으로 최대한의 성능을 내도록 사용자 및 운영체제 자신의 보호 프로세스, 파일, 메시지 등을 관리 효율성이 높게 관리, 하지만 효율성만 최고로 할시, 형평성이 맞지 않게 된다. 컴퓨터 시스템을 편리하게 사용할 수 있는 환경을 제공 운영체제는 동시사용자/ 프로그램들이 각각 독자적 컴퓨터.. 공감수 0 댓글수 0 2022. 5. 5.
  • [프로그래머스] 92344 파괴되지 않는 건물 2022 KAKAO BLIND RECRUITMENT def solution(board, skill): answer = 0 N = len(board) M = len(board[0]) skill_board = [[0 for i in range(M+2)] for _ in range(N+2)] cnt = 0 for sk in skill: sk_type, r1,c1,r2,c2 ,degree = sk if sk_type == 1: degree = -degree r1 +=1; r2+=1; c1+=1; c2+=1 skill_board[r1][c1] += degree skill_board[r1][c2+1] -= degree skill_board[r2+1][c1] -= degree skill_board[r2+1][c2+1] += degree for x in range(1,.. 공감수 0 댓글수 0 2022. 1. 15.
  • [프로그래머스] 92345 사라지는 발판 2022 KAKAO BLIND RECRUITMENT dx = [-1,0,1,0] dy = [0,1,0,-1] N,M =0,0 def B_turn(curboard,A,B,turn): x,y = B if curboard[x][y] == 0: return (-1,turn) flag = False winner = [] loser = [] for i in range(4): nx = x + dx[i] ny = y + dy[i] if 0 공감수 0 댓글수 0 2022. 1. 15.
  • [BOJ/백준] 19566 수열의 구간 평균 import sys from collections import defaultdict def input(): return sys.stdin.readline().rstrip() N,M = map(int,input().split()) arr = list(map(int,input().split())) prefix_sum = [0] + arr[:] result = 0 num_dict = defaultdict(int) for i in range(1,N+1): prefix_sum[i] += prefix_sum[i-1] calc = prefix_sum[i] - M*i result += num_dict[calc] num_dict[calc] += 1 print(result+num_dict[0]) 몇달 전에 푼 문제라 정확.. 공감수 0 댓글수 0 2022. 1. 15.
  • [React] 09. Hook Flow 09. Hook Flow Hook이 동작하는 순서에 대해서 설명한다. 현재까지 배운 useEffect와 useState의 동작하는 순서에 대해서 말하겠다. App render -> useState : initial -> rendering End -> useEffect : 등록한 순서대로 작동을 한다. 여기서 상기해야할 점은 useEffect는 사이드 이펙트를 관리하는 Hook이기 때문에 전부 그려지고 난뒤에, 작동을 하는 것을 알 수 있다. 위의 코드를 실행해보면 Hook Flow에 대해서 알 수 있는데, 렌더링시 Parents render -> Parents useState Call -> Parents render end -> Child render -> child useState Call -> Chi.. 공감수 0 댓글수 0 2021. 12. 23.
  • [React] 08. Custom Hook 08. Custom Hook 반복되는 Hook 들을 커스텀 된 훅으로 묶어서 사용하는 방식 반복되는 로직을 재사용이 쉽도록 만들어서 사용하며, 커스텀 Hook을 만들 때에는 use라는 단어를 앞에 두어서 만들어준다. import { useState, useCallback } from &#39;react&#39;; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); // change const onChange = useCallback(e => { const { name, value } = e.target; setForm(form => ({ ...form, [name]: value })); }, []); const .. 공감수 0 댓글수 0 2021. 12. 23.
  • [BOJ/백준] 12912 트리 수정 import sys sys.setrecursionlimit(3000) def input(): return sys.stdin.readline().rstrip() def get_diameter(): result = 0 visited = [0 for _ in range(N)] def dfs(node,tag): nonlocal visited stack = [(node,0)] visited[node] += 1 max_node = -1 max_dis = 0 while stack: node,dis = stack.pop() if dis>max_dis: max_dis = dis max_node = node for next_node in graph[node]: if visited[next_node] == tag: visi.. 공감수 0 댓글수 0 2021. 12. 23.
  • [React] 07. Component Side Effect 07. Component Side Effect useEffect를 통해서 변수의 상태를 변경 시킴으로 일어나는 사이드 이펙트를 관리하는 방법을 배웠다. side-effect는 부정적인 의미로만 쓰이는 것이 아닌, 한 변수의 변화로 인해 함수 외부의 값이 변화하거나 일어나는 현상을 side-effect라고 한다. useState의 초기값의 lazy한 inital을 필요로 할때에는 useState(()=>window.localStorage.getItem(&#39;initial&#39;)) 를 통해 가져올 수 있다. React.useEffect(() => { window.localStorage.setItem("initial",initial)},[initial]) useEffect라는 Hook은 update가 .. 공감수 0 댓글수 0 2021. 12. 22.
  • [React] 06. Component State Handle 06. Component State Handle 함수형 컴포넌트에서는 컴포넌트 내부의 데이터를 사용하고, handle하기 위해서 useState라는 Hook을 사용한다. useState를 사용하면, 현재의 원소상태와, 이 원소를 수정할 수 있는 setter가 주어진다. const [keyword, setKeyword] = React.useState(""); useState 안에 들어가 있는 값은 해당 value의 초기값에 해당된다. 우리가 정한 setter를 통해 value를 수정할 수 있다. setter를 사용하는 방법은 두 종류로, 새로운 value를 그대로 넣어주는 방법과, 함수를 넣어주는 방법이 있다. 자세한 설명은 공식문서인 https://ko.reactjs.org/docs/faq-state.h.. 공감수 0 댓글수 0 2021. 12. 16.
  • [React] 05. event handler 05. Event Handler 리액트에서는 이벤트를 처리하는 방식은 DOM Elements에서 처리하는 방식과 유사하다. React에서는 소문자 대신 캐멀 케이스를 사용을 하며, jsx를 사용하여, 문자열이 아닌 함수로 이벤트 핸들러를 전달하면 된다. class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn.. 공감수 0 댓글수 0 2021. 12. 15.
  • [React] 04. rerendring 04 Reredering react에서는 값이 변경이 되는 부분만 rerendering이 된다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); // highlight-next-line ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); 위와 같이 매 초마다 h2의 text 값이 변경되지만, 전체를 rerender 하는 것이 아닌 실제 값이 변경된 부분에만 변경이 일어난다. diff 알고리즘에 대해서는 https://ko.reactjs.org/docs/reconciliation.html.. 공감수 0 댓글수 0 2021. 12. 14.
  • [React] 03.JSX 03. JSX jsx는 슈가 문법으로 javascript를 확장한 문법이다. React에서 javascript로 마크업을 만들고, 시각적으로 좀 더 수월하게 표현하게 해주는 방법이다. JSX는 필수는 아니지만, UI 관련 작업을 할 때 도움이 된다. JSX는 HTML 태그를 넣을수 있을 뿐만 아니라, 그렇기 때문에, jsx 내부에 jsx를 사용해서 만들 수 있다. 단 jsx를 활용한 태그는 파스칼케이스로 만들것을 권장한다. 그 이유는 첫글자가 대문자가 아니라면, 기존의 HTML 태그로 인식할 수 도 있기 때문이다. const Paint = ({title, description, children}) => { return ( {title} {children} {children} ) } const elemen.. 공감수 0 댓글수 0 2021. 12. 10.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.