본문 바로가기

전체 글

 (602)
알고리즘 풀이를 위한 Python 사용법 - 자료구조편 C++로만 알고리즘 문제를 풀던 나. C++ API의 옛스러움과 혼란스러움에 지쳐 Python으로 넘어왔다. 이 문서는 파이썬 초보가 알고리즘을 풀 때 알아두어야 할 지식들을 하나씩 삽질해가며 모아가는 공간이다. 1. stack Python에서 stack은 따로 자료구조 없이 list를 응용하면 된다. 1) PUSH stack = ['a', 'b', 'c'] stack.append('d') # stack의 push 역할로 list의 append() 함수 사용 print(stack) # output # ['a', 'b', 'c', 'd'] 2) POP stack = ['a', 'b', 'c'] pop = stack.pop() # 맨 마지막 (stack으로 따지자면 제일 위) 원소를 제거하면서 해당 값을 리..
알고리즘 풀이를 위한 Python 사용법 - 기본편 C++로만 알고리즘 문제를 풀던 나. C++ API의 옛스러움과 혼란스러움에 지쳐 Python으로 넘어왔다. 이 문서는 파이썬 초보가 알고리즘을 풀 때 알아두어야 할 지식들을 하나씩 삽질해가며 모아가는 공간이다. 1. 문자열 -> 숫자(정수형) stringNumber = '3' number = int(stringNumber) # 문자(정수형) -> 숫자 print(type(number)) ## output # 2. 문자열 -> 숫자(실수형) stringNumber = '3.5' number = float(stringNumber) # 문자(실수형) -> 숫자 print(type(number)) ## output # 3. 숫자 -> 문자열 number = 3 stringNumber = f'{number}' ..
C++ 에서 hash 쓸 땐 unordered_map !! Programmers의 2021 Dev Matching 백엔드 문제 중 "다단계 문제"를 풀었다. 문제에서 요구사항은 다단계의 제일 위에 있는 주인공이 얼마를 벌 수 있는지였고, 다단계 직원 수의 max 값이 10,000명 이었기 때문에 직원들간의 다단계 트리관계를 저장하기 위해선 해시 맵이 필수라고 생각하였다. 그리고 다른 사람들의 풀이를 볼 때 그 생각은 얼추 맞은 듯 하다. 거기까진 좋았는데.. 나는 해시를 직접 구현해버리는 시간 낭비를 저질렀다. 다른 사람들의 코드를 보니 이미 C++에는 red-black tree 기반의 map 컨테이너와 해시 테이블 기반의 unordered_map 컨테이너를 그냥 가져다 쓰고 있었다. 앞으로 환경이 허락되는 한(코테에서 컴파일러가 해당 컨테이너를 제공해주는 한)..
Vue 프로젝트 Port 변경하여 실행 NPM으로 vue 프로젝트를 실행시킬 때 PORT를 변경하고 싶은 순간이 있다. 이 경우 아래와 같이 포트를 지정해서 실행시켜주면 된다. /* npm run serve -- --port {Target Port} */ npm run serve -- --port 8082
콘솔에 객체 내부 데이터 출력하기 (feat. Vue, React, Javascript) Vue나 React, 혹은 그냥 Javascript로 개발할 때 콘솔로 객체를 찍어야할 상황이 종종 찾아온다. var obj = {"id": 1, "name": "korsa"} console.log(obj); 하지만 객체를 바로 찍으면 내부 데이터 대신 [object Object] 로 표시된다. 출력> [object Object] 이 때 객체를 JSON.stringify() 로 감싸주면 내부 데이터를 볼 수 있다. console.log(JSON.stringify(obj)); 출력> {"id": 1, "name": "korsa"}
Vue Mutations vs Actions (feat. Composition API) Vue 3 에서 Vuex를 Store 역할로 사용할 때 헷갈리는 부분이 Mutation과 Action의 차이였다. 우선, 가장 큰 차이점은 비동기 연산을 하느냐 마느냐 하는 것이다. Vuex Store는 크게 4가지 속성이 있다. state, getters, mutations, 그리고 actions. state는 말 그대로 현재 상태를 담고 있는 변수이다. getters도 말 그대로 state의 값을 얻어오는 역할이다. mutations은 state를 변경할 수 있게 해주는 유일한 녀석이다. '변이' 라는 뜻 그대로 state의 상태를 변화시키는 것이다. 이쯤이면 필요한 건 다 있는 것 같은데 actions라는 속성이 하나 더 있다. actions는 state와 관련한 비동기 연산을 담당한다. 그리고 비..
Vue 독립적인 Component 간의 데이터 통신 (feat. vuex store) Vue Composition API를 사용하면서 store 데이터를 watch 하는 방법이 손에 익지 않아 기록으로 남겨본다.. 우선.. 내가 구현하고 싶던 기능은 사용자가 웹사이트의 메뉴를 변경할 때 메뉴목록의 하이라이트 지점도 바뀌게 하는 것이었다. 이를 위해선 사용자와 인터랙션하는 Component와 메뉴목록을 관리하는 Component 간의 데이터 전달이 필요했다. Vue에서 상태 관리 등 전역으로 다루어야 할 데이터는 vuex의 store 기능을 사용하기에 store의 데이터를 조작하여 Component들 간의 데이터 전달을 하고자 하였다. 작업은 다음의 3 단계로 진행하였다. 1. Store에 변수 생성 // @/module/common.js import { createNamespacedHel..
여러 HTML 태그를 겹쳐서(overlay) 사용하고 싶을 때 여러 HTML 태그를 겹치게 (overlay) 하고 싶을 땐 CSS의 position 속성의 aboslute, relative 사용을 고려해보자 회사에서 vue3용 open-layers 라이브러리를 사용하여 지도를 표출하고 그 위에 버튼을 구현해야 하는 작업이 있었다. 버튼이당 그냥 태그 두 개를 나열하면 화면이 겹치지 않고 map이 표출된 영역 아래에 button이 표출된다. display: flex; 를 이용하는 방법이 있지 않을까 해서 검색해보았지만 찾지 못했다. 아마 flex는 레이아웃을 컨트롤하는 게 목적이어서 그러지 않을까 싶었다. 결국 찾은 방법은 태그의 position속성을 absolute로 지정하면 된다. 버튼이당 이렇게 하면 지도에 겹쳐져서 버튼이 표시된다. 그런데 또 하나의 난관에 부..

티스토리툴바