• 크롬 개발자도구 > Application 탭에 들어가면 사진과 같이 여러가지 브라우저 저장소를 확인할 수 있다.

• 해당 게시글은 이 Application 탭에서 확인할 수 있는 주요 저장소인 Local storage, Session storage, Cookie, Cache, IndexedDB의 각 특징과 쓰임새에 대해서 살펴보고자 한다. (HTML5 미만의 구형 브라우저에 대해서는 생각하지 않음)

• Extension storage : 외부 저장공간이 아닌 Chrome 확장 프로그램 저장용량을 뜻한다.

• 이는 모두 XSS 등에 의한 데이터 탈취 가능성이 존재하기 때문에, 민감한 정보는 BE단에서 처리하는 것이 좋다.

목차

• Web Storage API
  • 로컬 스토리지(Local storage)
  • 세션 스토리지(Session storage)
• IndexedDB
• 쿠키(Cookie)
• 캐시(Cache)
• Summary
• 마치며

Web Storage API

브라우저에 데이터를 간단히 저장하는 JS 기반 저장소 API

특징

• 쿠키(Cookie)와 유사하게 key-value 쌍을 이루어 브라우저 메모리에 데이터를 저장하나, 저장방식 자체는 쿠키와 상이하다.
• JS 객체를 통한 쉬운 접근이 가능하여 Web Storage API로 명명된다.
• Local, Session storage 각 scope에 따른 쓰임에 차이가 있다.

📓 Local storage

• 브라우저 탭 삭제시에도 데이터가 삭제되지 않고, 특정 유효기간도 존재하지 않는 저장소
• 테마 및 언어 설정 등의 반영구적이고, 민감정보가 아닌 데이터 저장 시 유용하다.

📝 Session storage

• 각 origin 별, 브라우저 탭 별로 귀속되어, 브라우저나 탭을 삭제하면 데이터도 함께 삭제된다. (새로고침은 OK)

• 💡 같은 origin의 여러 브라우저 탭이 존재할 경우
  • 각 탭은 서로 다른 session storage를 사용한다.
  • session storage의 scope는 탭에 귀속된다.

핸들링

• JS를 코드를 통한 접근 : localStorage, sessionStorage 변수 사용
• 사용자의 수동 조작 (권장X) : 개발자 도구를 통한 접근 등

📅 IndexedDB

브라우저 상의 noSQL 데이터베이스로 이해하면 쉽다.

특징

• 일반적인 noSQL처럼 데이터베이스를 생성하여 사용하고, 마찬가지로 key-value 쌍의 데이터를 저장한다.
• 트랜잭션 단위 요청, 여러가지의 자료구조가 저장 가능하며, 고용량의 저장공간을 지원한다.
• 모든 조작이 비동기 요청과 콜백 기반 구조다.
• JS를 통한 핸들링이 가능하나, Web Storage API에 비해 코드 구조가 복잡해질 수 있다.
  • 보통 idb, dexie등의 라이브러리를 함께 사용한다.

핸들링

• JS를 통한 접근 : window.indexedDB 변수 사용 (브라우저별 변수명 상이)
• 사용자의 수동 조작 (권장X) : 개발자 도구를 통한 접근 등 (데이터 조회, 삭제만 가능)

🍪 Cookie

현재는 Web Storage API의 등장으로 쿠키 사용 빈도가 많이 줄어들었으나, 특정 케이스에서 쿠키 사용이 최적인 경우가 존재한다.

특징

• 모든 HTTP request와 함께 전송된다.

  • 성능 저하가 발생할 수 있지만 서버에서의 제어가 가능하다.
  • 사용자 행동 트래킹 등 서버 데이터에 따라 클라이언트 데이터가 동기화 되어야 하는 경우 유리하다.

• 해당 도메인의 전역적인 설정과 관련된 데이터 설정 시 유리할 수 있다.

  • 테마, 언어 설정 등 개인화 옵션
  • 세션 관리에 필요한 자원 등

핸들링

HttpOnly 플래그가 설정된 쿠키 값은 JS를 통한 접근이 불가능하다.

• JS document.cookie를 통한 접근
• 서버 측에서의 만료시간, 보안 플래그(Secure, HttpOnly) 등을 설정하여 제어 (언어 / 환경 별 방법 상이)
• curl, postman 등 HTTP 클라이언트를 통한 접근
• 사용자의 설정 및 조작 : 브라우저 설정, 확장 프로그램, 개발자 도구(Network) 조작 등

📦 Cache

브라우저에서 자동으로 정적(static)인 컨텐츠를 저장하는 것을 의미한다.

특징

• 페이지에서 불러오는 정적 컨텐츠가 많을 경우, 캐시 메모리를 사용하면 로딩시간을 줄일 수 있다.
• 지정한 캐시 만료/갱신시간보다 정적 컨텐츠 업로드 주기가 빠를 경우, 최신버전이 반영되지 않을 수 있다.
  • 이 경우 캐시 갱신에 대한 핸들링이 필요하다.

• 💡 정적 컨텐츠

  • WAS(Web Application Server)와 WEB서버가 분리되어 있을 때, WEB서버에서 원활하게 구동되는 것들이다.
  • e.g. HTML, 이미지, JS(script) / CSS(style sheet) 등

핸들링

1. WEB 서버 혹은 response의 헤더 설정을 통한 cache-control(캐시 만료기간) 옵션 설정

2. 정적 컨텐츠 로드 시 조작 : 해시값(fingerprint) 사용, 쿼리스트링(ver=) 사용 (수기, 권장X)

   일반 CSS 로드 예시 : style.css
   해시값 사용 예시 : style.4dgjf63.css # 번들러로 자동 생성 가능

3. 서비스 워커를 통한 캐시 제어 : PWA(Progressive Web Application) 환경이거나 오프라인 기동이 필요한 경우에만 추천

4. 사용자의 캐시 갱신 (권장X) : 브라우저 캐시 제거, 개발자 도구 사용 등

5. 사용자의 캐시 최대값 설정 (권장X) : 브라우저 바로가기에 --disk-cache-size=${cache_size} 커맨드 설정(크롬 기준)

Summary : 모아보기

각 목적과 특징에 맞는 브라우저 저장소를 이용하자.

마치며 : 토막지식

• 사생활보호 & 시크릿 모드 : cookie 저장소 자체를 사용하지 않거나, Web Storage API의 저장용량을 0바이트로 할당하는 일부 브라우저도 존재한다고 한다.
• Web Storage의 저장소 크기는 접속 환경별로 다르다 : 서드파티 쿠키 활성화 여부, 접속 브라우저 등에 따라 Web storage에 접근 가능한 크기는 상이할 수 있다.

참고 자료

• MDN
  • Web Storage API (ko)
  • IndexedDB API(ko / en)
  • IndexedDB key characteristics and basic terminology (en)
  • HTTP Cookie (ko)
  • Set-Cookie (ko)
  • Service Worker(en)
• 기타 기술 블로그
  • WHATWG - local storage
  • imgix docs - Fingerprinting Images to Improve Page Load Speed
• stack overflow
  • What is the maximum amount of data that a browser (for example: Chrome) can store in cache?

• 프로젝트 진행 배경
• 사용 스택
  • 선정 이유
  • 탈락했던 후보군
  • PHP 기반 프레임워크의 반려
• [앞으로의 계획](#앞으로의 계획)

프로젝트 진행 배경

• pure PHP 코드로 인해 뒤엉켜있는 FE / BE 코드
• $n(n > 15)$년 간의 코드 누적 : 미사용 코드 다수, 실제 사용되는 로직은 극히 일부
  • 수기처리 코드 : 공통로직을 찾아내 최대한 모듈화, 객체화를 하여도 기존 수기처리로 인해 이전 코드와 큰 차이가 없었다.
  • 몇 만 줄의 한 파일 : 한 파일 당 한 기능을 하지 않고, 기본적인 절차/객체지향의 코드 형태를 따르지도 않았다.

따라서 부분적으로 마이그레이션을 하는 것이 가장 현실적이고 실현 가능한 방법이 아닐까, 하는 생각이 들었다.

초기 사용 스택

최대한 오래 갈 수 있는 스택을 선택했으며, 다른 모듈이나 라이브러리도 많지만 일단은 초기 구성을 최소화 하고 추후 고도화 시킬 수 있는 방향으로 셋팅했다.

• node.js 20.10.0 LTS + express 4.19.2 (+ dotenv등 기타 npm 모듈)
• sentry
• typescript 5.5.3
• 기존 DB : My SQL, MS SQL (SQL Server), Oracle 모두 사용

선정 이유

기재해둔 내용이 상당히 적다. compact한 틀을 만드는 것이 첫번째 목표였기 때문이다. 그 외에도 아래의 목표들이 해당 스택 선정의 이유가 되었다.

1. 범용성, 커뮤니티 규모 : 프레임워크를 사용하지 않고 pure PHP를 사용하던 팀원들이 접할 수 있는 자료가 충분한가?
2. 정규화 : DB에서 정규화가 되어있는 편이 아니다. API단에서 이를 보완할 수 있는가?
3. 확장성 : 기존 서비스는 많은 기능이 동작 중이다. 내가 알지 못하는 영역이 분명히 존재할 것이기 때문에 초기엔 최대한 컴팩트하게, 그리고 이후 기능 추가는 쉬워야 한다.
4. 빌드 용이 : CI/CD, 미러링이 구축된 환경이 아니기 때문에 빌드가 하나의 변수로 작용할 수 있다.
5. 영구성 : 오래 유지/사용할 수 있는 버전or환경인가?
6. HTTP2 프로토콜 사용

탈락했던 후보군

• java 계열 : Spring boot + kotlin

  • 장점
    • 정규화, 객체/인스턴스 관리가 용이하며 강제성을 띄며, 이에 대한 자료도 많다.
    • annotation의 활용 : 타 언어에 비해 annotaion의 역할과 명시성이 확실하다.
  • 반려 사유
    • 기존 인력의 낮은 친숙도 : 정적 언어의 특성, Java / Gradle syntax를 알고 있어야 접근성이 좋다.
    • 빌드

• python : Django rest framework

  • 장점 : PHP와 가장 비슷한 언어적 특성, 친절한 템플릿
  • 반려 사유 : RESTful 할 수 있지만 이후 설명할 정규화가 흠이 되었다.

• javascript : Next.js API Routes

  • 반려 사유 : 빠르게 변화하는 프레임워크, 파일 구조 기반 url라는 리스크, 비교적 적은 자료(14), 검색엔진을 따로 사용하지 않는 환경
  • 결정적인 반려 사유 : FE / BE 서버가 분리되지 않은 입장이라면 유용하겠지만, 분리 목적으로 넥스트를 바라보니 장점이 떠오르지 않았다.
  • 그 외에도 JS기반 프레임워크는 수 없이 존재하지만 가장 자료가 많고, 확장성이 큰 express를 선정하게 되었다.

PHP 기반 프레임워크의 반려

php is dead 밈이 나올 정도로 수십년간 건재한 PHP.. 때문에 PHP라는 언어 자체를 피하고 싶다는 강박은 없었다. (오히려 앞서 언급한 '영구성'에 가장 잘 부합하는 것이 PHP가 아닐까 싶다.)

다만 PHP를 기반으로 하는 Laravel과 Composer, CodeIgniter 등은 아래의 이유로 배제하였다.

1. 범용성

   • 압도적으로 적은 자료 수 : 자료 자체의 수가 타 프레임워크 (spring 계열, node.js 계열)과 차이가 컸다.
   • PHP 버전 종속성 : 찾은 자료가 있어도 PHP가 버전에 민감하다 보니, syntax 지원이 안돼 페이지가 먹통이 되는 일이 잦았다.

2. 동적 언어 PHP

   • 입출력 / 배열 관리를 중점해 처리할 수 있는 환경이 아니었다.
   • 한 페이지에서 여러 형태의 데이터 입출력이 처리되는 경우가 많음
   • 모든 페이지에서 일정한 데이터를 사용하지 않음 : 비슷한 형태는 많지만, 동일한 형태는 희소함

앞으로의 계획

스크래치부터 시작하고자 한다. 개발환경 구축부터

1. VS Code 환경 구축하기 : express + eslint + dotenv 환경 구축
2. docker 환경 구축 : node 설치, git 연결
3. alias, HTTP2 설정 : localhost에서 테스트
4. sentry 로깅 설정
5. auth 관련 구현 : 이 부분은 벨로그에 기재하지 않을 예정이다.
6. DI 이용하여 커넥션 / 모델 구현 및 테스트

여태까지 겪은 pure PHP 스파게티 코드들에게 안녕을 고할 수 있기를 바라며! 글을 마친다.

목차

• 브라우저 매커니즘
• 코드 상에서의 발생
• 개념을 알고 있어야 하는 이유
  • 발생 빈도를 줄이려면

브라우저 매커니즘

1. DOM(Document Object Model) Tree 생성

• Server->Client : URL 입력, HTML 코드등 데이터 수신
• Browser parsing
  • HTML source -> Token : TagName, Attribute, AttributeValue
  • lexing : Token -> DOM Tree nodes -> logical tree (DOM)

2. CSSOM(CSS Object Model) Tree 생성 : CSS 규칙에 따라 생성

   • logical tree인 DOM과 달리, JS를 통한 CSS 접근이 가능하다.
     • CSS에 대한 DOM개념
   • 사용자의 CSS read / write를 가능하게 한다.

3. Browser rendering : merge to Render Tree(DOM Tree + CSSOM Tree)

• DOM Tree root node부터 시작, element들이 visible한지, computed style이 무엇인지 도출
• not visible한 element : 무시. <meta>, <script>, <link>, display: none; 등의 요소는 제외하고 구성됨
• visible한 노드 : CSSOM에 맞춰 Rendering Tree에 구성 됨

4. Reflow : visible한 node들에 대한 레이아웃을 계산한다.

• ex) width, position, float 등

5. Repaint : 병합된 Render Tree의 노드들을 화면에 픽셀로 표시

• ex) opacity, color, background-color, visibility 등

💡 computed style?

• CSS는 Cascading style sheet로, 선언 방식or위치에 따라 우선순위가 나뉜다.
• 우선순위(inline > internal > external)에 따라 적용된 최종 style을 computed style이라고 한다.

코드 상에서의 발생

이러한 reflow, repaint는 이벤트가 일어나 화면이 변경되었을 때에도 발생한다.
코드와 함께 확인해보자.

let elStyle = document.body.style;

// dimension 상 변화 O + 화면상 변화 O => reflow + repaint
elStyle.padding = '15px 10px';
elStyle.border = '1px solid red';
elStyle.fontSize = '30px';

// dimension 상 변화 X + 화면상 변화 O => repaint only
elStyle.color = 'white';
elStyle.backgroundColor = 'black';

// element append : dimension상 변화 O + 화면상 변화 O => reflow + repaint
document.body.appendChild(document.createElement('H1'))

이와같이, DOM element의 구조적인 dimension 상 변화가 있다면 reflow, 화면상의 픽셀값이 변화하면 repaint가 일어나는 것을 확인할 수 있다.

그 외에도 JS에서 reflow/repaint 관련 syntax를 사용할 때에도 발생한다.

• ex) getComputedStyle(), scroll(), .focus(), .style

개념을 알고 있어야 하는 이유

reflow, repaint의 발생 빈도를 줄이면 아래의 것들이 개선될 수 있다.

• read/write 감소하며 최적화에 유리해짐
• 웹 성능이 떨어질 경우, 발생 요소를 고려하여 문제를 해결할 수 있음
• 클린 코드, 언어적인 활용과도 연관이 있기 때문에 코드 유지보수에도 일정 정도 도움이 될 것으로 예상

발생 빈도를 줄이려면

1. 가상 메모리 / 캐싱 활용하기 (JS 코드 요소 활용하기)

1-1. fragment 노드를 사용

• 더 유연한 코드 작성이 가능하다. (실제로 DOM에 추가된 element가 아니기 때문에)
• 속도 면에서는 접속 환경에 따른 차이가 발생할 수 있다, fragment 사용 시 효과는 미미한것 같다. (오히려 느릴 때도 있다)

  const root = document.querySelector('#root');

// ex1. documentFragment 객체 사용하기
const fragment = new documentFragment();

fragment.append(document.createElement('h1'));
fragment.append(document.createElement('h2'));
fragment.append(document.createElement('h3'));

root.append(fragment);

두번째 예시는 ex1과 선언 방식만 다르고 거의 동일하다.

// ex2. createElement('fragment') 컴포넌트 활용하기
const fragment = document.createElement('fragment');

// ex1과 동일
fragment.append(document.createElement('h1'));
fragment.append(document.createElement('h2'));
fragment.append(document.createElement('h3'));

root.append(fragment); // ex1과 동일

세번째 예시는 ex1, ex2 비슷하지만, append할 요소들을 포괄하는 컴포넌트가 같이 추가된다는 차이점이 있다.

// ex3. fragment 사용 없이 가상 메모리 이용하기
const divEl = document.createElement('Div');

// ex1, ex2와 변수명만 다름
divEl.append(document.createElement('h1'));
divEl.append(document.createElement('h2'));
divEl.append(document.createElement('h3'));

root.append(divEl); // ex1, ex2와 변수명만 다름

1-2. 캐싱하기

같은 맥락으로, 변경사항이 여러번 발생하는 element라면 변수에 캐싱하는 것도 도움이 될것 같다.

• class, cssText 사용하기

1-3. 주의할 점

해당 게시글이 참고한 github documnet에 따르면, 다음과 같은 유의점이 기재되어있다.

• jQuery(${CSS_selector}) : :even, :has, :gt, :eq 피하기
  • 기피해야하는 이유? : 본인으로서는 정확히 알 수 없으나, 이하의 이유들로 추론된다.
    • 현존하는 Vanilla JS가 이미 충분히 직관적임 : querySelectorAll, Array.prototype.filter 등
    • jQuery라는 라이브러리를 사용 : 즉각적인 코드 실행이 아님
    • 명확하지 않은 선택범위 : 해당 관심사(concern)에 속하지 않는 범위의 파악이 어려움
    • 러프하게 이야기 하자면, '있는거 쓰지 뭐하러 굳이 직관적이지도 더 빠르지도 않는걸 쓰냐'는 느낌이지 않나 싶다.
• 코드 상의 관심사(concern)는 최소 범위로 잡을 것

2. 가시적인 element 숨기기

Render Tree 구성은 보여지는 노드들을 대상인 점을 이용한다.
기본적으로 보여지지 않는 element들에 대해서는 미리 display: none;처리를 하거나, visible한 케이스를 분리해 주는 것도 도움이 될 것이다.

3. CSS 수정

• 20개 미만의 사항이라면 css 파일보다는 <style> 태그 사용하기
• inline style 피하기
• position: absolute, position: fixed 등을 활용하기 : 리소스 감소에 도움을 준다.

• 참고자료 (참고 비중순 정렬)
• github: dom_performance_reflow_repaint.md
• Avoid Reflow & Repaint
• edwith : 캐스케이딩 - computed style이 결정되는 방식
• MDN : CSSOM
• MDN : DOM
• velog : documentFragment 객체는 무엇이며 왜 써야할까?

간단히 문제 정리를 해 보았다. ▶ 문제 링크

함수 명세

기계 내부가 되는 격자 형태는 N칸 X N칸의 형태이다.

• board
  • N개의 element들로 이루어진 list N개가 argument로 입력된다.
  • 행렬을 떠올리면 쉬울것 같다. 처음 입력된 list부터 가장 상위에 있는 list
  • 숫자 == 인형의 종류 (0은 빈칸)
• moves : 인형을 꺼내올 열 번호 (index 값과 상이하게, 첫 열이 0이 아니라 1이다.)
• return 값 : 사라진 인형의 개수

코드 처리

• board에서 moves에 담긴 열의 맨 위 인형을 꺼내 별도의 바구니에 담는다.
• 별도의 바구니 속 최상단 인형의 종류 == 새로 담는 인형의 종류일 경우 두 인형은 사라진다.
• 사라진 인형의 개수를 반환할 것.

일단 한번 함수를 작성해 보았다.

def solution(board, moves):
    result = 0
    stack = [ ] # 크레인으로 꺼낸 인형을 담음.

    for col_idx in moves:
        try:
            col_idx -= 1 # 열 값이니 하나 빼줘야 index 계산 가능

            # 뽑을 인형이 위치한 좌표 찾기
            row_idx = [el for el in board if el[col_idx] != 0] # col_idx에 유효한 값이 있는 곳
            row_idx = board.index(row_idx[0]) # 맨 위에 있는 list의 index

            # 인형 뽑기 처리
            popped_el = board[row_idx][col_idx] # 젤 위에거, 해당 index의 인형
            board[row_idx][col_idx] = 0 # 빈칸 처리

            # 바구니에 담기 전 처리
            if len(stack) > 0: # 빈 바구니가 아닐 경우

                if stack[-1] == popped_el: # 맨 위 인형이 같으면
                    stack.pop(-1) # 삭제
                    result += 2 # 터진 인형 : 새로 뽑은 거 + 맨 위에 있던 거

                else: # 맨 위 인형이 다른 종류 : stack에 쌓기
                    stack.append(popped_el)

            else: # 빈 바구니 : stack에 쌓기
                stack.append(popped_el)

        # moves에 있는 열 번호에 인형이 없는 경우
        except IndexError:
            continue

    return result

일단 테스트 코드는 통과했다. 채점버튼을 눌러봤다.

이럴수가. 한번에 정답. 사실 코드를 몇 번 고쳤다.

첫 번째 코드에서의 접근

board를 조작하지 않고, list_to_pop 변수를 만들었다. col_idx가 0이 아니며, 맨 위에 인형이 위치한 row의 list 변수였다. 그렇지만 이렇게 변수를 따로 빼게 될 경우, board에 접근이 어렵기 때문에 for문이 한번 더 돌때 인형을 뺐음에도 그 전과 같은 board 상태일 것이라 판단했다.

IndexError 예외를 뺀 이유

그리고 프로그래머스 예시 출력을 봤을 때, 1열에 2개의 인형이 있음에도 불구하고 3번을 빼길래 넣었다.

번외 : ChatGPT를 이용해 코드 줄이기

코드가 좀 긴 감이 있어 한번 줄여볼까 싶은 마음이 들었다. 위의 내 코드를 주며 축약을 부탁했고, 주석을 좀 정리해서 코드를 다시 써봤다.

def solution(board, moves):
    result = 0
    stack = [ ] # 크레인으로 꺼낸 인형을 담음.

    for col_idx in [col - 1 for col in moves]: # col_idx를 미리 빼 준다.

        # row_idx를 구하는 식은 한줄로 축약이 됐다.
        row_idx = next((row_idx for row_idx, row in enumerate(board) if row[col_idx] != 0), None)

        # 코드를 풀어보면
        #   for row_idx, row in enumerate(board):
        #       if row[col_idx] != 0:
        #           return row_idx
        # iterable 반환 -> next(iterable, None) 으로 젤 처음값만 도출
        # -> 가장 위쪽에 있는 인형을 뽑을 행(row_idx)이 됨.

        # 뺄 수 있는 인형이 없는 경우
        if row_idx is None: # 예외처리로 빼지 않고 좌표를 도출하기 전 row_idx로 검사.
            continue

        # 빼야할 인형의 좌표는 별도의 축약이 없었다.
        popped_el = board[row_idx][col_idx]
        board[row_idx][col_idx] = 0

        if stack and stack[-1] == popped_el: # stack의 None검사가 합쳐졌다.
            stack.pop()
            result += 2
        else:
            stack.append(popped_el)

    return result

코드가 확실히 짧아졌다. 속도 차이도 있을까 싶어 채점버튼도 다시 한번 눌러봤다.

ChatGPT 코드 ▼

위에서 작성한 내 코드 ▽

작은 양으로 추정되는 데이터가 들어왔을 땐 상관 없지만, 많은 양으로 추정되는 데이터가 들어왔을 땐 대략 0.2 ~ 0.45ms의 속도 차이를 보인다. 아마 무시할 수는 없는 수치라 예상된다.

그리고 주석을 지우면서 나름대로 아쉬웠던 점을 적어봤다.

chatGPT 코드를 참고했을 때 생각되어지는 개선점

1. enumerate() 활용
   • 어차피 board.index()로 row_idx를 빼올거
     enumerate를 돌리면 확실히 빠르고 직관적이였을 것 같다.
2. 내장 함수에 대한 이해 : next()
   • next(iterable[, default]) 의 기본 값 설정 부분을 모르고 있었다.

백준은 입력값을 split하는 방식으로 구분하고, 결과값을 print로 출력하는 방식인 것 같았다.

▶ 문제 링크

먼저 첫 코드

str = input().split()
parenthesis_cnt = 0 # 괄호 쌍 개수

for s in str:
    if s == '(':
        parenthesis_cnt += 1

    elif s == ')':
        parenthesis_cnt -= 1

    else:
        parenthesis_cnt = -1
        break

print('NO' if parenthesis_cnt < 0 else 'YES')

프로그래머스처럼 출력값을 따로 볼 수 없었기에 더 어렵게 느껴졌다. 예시 출력값들을 위의 로직에 맞춰 숫자를 계산해봤다.

(())()) NO : -1 [-1]에서 break (((()())() NO : 2 (()())((())) YES : 0 ((()()(()))(((())))() NO : 1 ()()()()(()()())() YES : 0 (()((())()( NO : 3 (( NO : 2 )) NO : [0]에서 break ())(() NO : [2]에서 break

위에 적은 코드들은 닫는 괄호 ) 만 필터링하지, 여는 괄호 (가 더 많은 경우는 필터링하지 않는다는 것을 깨달았다.

그래서 맨 마지막 구문을 아래와 같이 고쳐줬는데...

print('NO' if parenthesis_cnt != 0 else 'YES')

처참히 실패. 그래서 아예 stack으로 구현해봤다.

str = input().split()
li = [ ]

for s in str:
    try:
        if s == '(':
            li.append(s)
        elif s == ')':
            li.pop(-1)
    except:
        print('NO')
        break

print('NO' if len(li) > 0 else 'YES')

코드가 짧아진 만큼 빨간 실패 글자도 더 빠르게 나타났다. 답답해진 나머지 IDE에서 따로 돌려보니, 문제는 두가지였다.

1. split()의 기본값을 고려하지 않음 split의 기본값이 공백 인데, 공백 없이 입력되는 문자열을 받으니 list에 들어갈 리가 없었다.

2. try 문의 위치 어찌 저찌 split이 실행 됐다 해도, for문 안에서 IndexError를 잡고, NO를 출력한 뒤에 또 if문이 들어간 print 함수를 실행해 총 두 번 출력했다.

그렇게 다시 고쳐진 코드.

li = [ ]    
str = input()[::1]

try:
    for s in str:
        if s == '(':
            li.append(s)
        elif s == ')':
            li.pop(-1)
    print('YES' if len(li) == 0 else 'NO')
except IndexError:
    print('NO')

예시로 나온 문자열들을 넣어보니 이번엔 꽤 성공적이였다. 그러나 이번에도 실패해, 최종병기 구글링을 꺼냈다.

.. 알고보니 예시 입력에 나온것들은 따로 따로 입력되는 것이 아니라 한번에 입력되는 것이였고 입력된 문자열 중 젤 처음의 정수, T 개의 문자열이 들어온다고 했다. 문제 자체를 잘못 이해한 것이였다!

이해한 대로 코드를 고쳐줬다.

for i in range(0, int(input())):
    li = [ ]
    str = input()[::1]

    try:
        for s in str:
            if s == '(':
                li.append(s)
            elif s == ')':
                li.pop()
        print('YES' if len(li) == 0 else 'NO')
    except IndexError:
        print('NO')

허무하게도 한번에 통과했다. 다사다난 첫 파이썬 백준 문제 풀이였다. 두번째 부터는 좀 잘 할수 있기를.

문제를 잘 읽는것이 시작의 반 이상이라는 걸 깨닫는다.

0. Jupyter notebook 기동

1-1. Settings - Theme 에서 테마 설정

Light / Dark 밖에 없지만 일단 나는 Dark로 설정했다.

1-2. 상단 Settings - Advanced Settings Editor - 우측 상단 체크 박스 클릭

2. 좌측 System Defaults 참고해 커스텀 하고 싶은 변수명 복사해두기

주석이 꽤 자세히 되어있으니 참고하면 좋다.
System defaults 부분에 직접 입력은 불가능하니 변수명만 복사해 두자.

• codeCellConfig : 코드 셀 설정
• markdownCellConfig : 마크다운 셀 설정
• rawCellConfig : raw NBConvert 셀 설정

3. 우측 User Config에 들여쓰기 똑같이 지켜서 변경 값 넣어두기

내 경우 jupyter notebook때와 같이 D2Coding, Consolas 폰트를 넣어주었다.

당연하지만 구문 오류가가 있으면 실행되지 않는다. 혹시나 싶어 첨부하는 구문 오류 검사기 : https://ko.rakko.tools/tools/63/

4. 우상단 저장버튼을 눌러주면 적용 완료.

0. (최초 실행 시) 테마 패키지 설치, 테마 리스트 확인

pip install jupyterthemes
jt -l # 테마 리스트

1. 원하는 테마, 폰트 입력

jt -t ${theme_name} -f ${monospace_code_font} -nf $notebook_font} -tf ${textcell_font}

폰트 사이즈까지 설정하고 싶은 경우 각각 -fs, -nfs, -tfs 로 설정해 주면 된다.
(jt -h 명령어를 입력하면 더 자세한 설명을 볼 수 있다.)

이렇게 stylefx.py에서 설정이 안됐다는 경고창이 뜨게 되어 따로 설정해 주어야 한다.

2. 해당 경로 stylefx.py에 폰트명 추가해주기

stored_font_dicts 라는 함수 내 mono, sans, serif에 사용할 폰트 명을 적어준다.
(필자는 D2Coding 폰트와 Consolas 폰트를 추가했다.)

3. 다시 1번 명령문 을 실행해보자.

또 지정된 경로를 찾을 수 없다는 에러가 뜨는데, 해당 디렉토리에 ttf 파일만 옮겨주면 끝난다.

폰트 경로 확인하기

Windows 키 - 검색 - 글꼴 or font - '글꼴 설정' - 원하는 폰트 선택
할 경우 아래의 결과가 뜬다. (경로는 지웠음) 이 경로로 들어가 디렉토리 째로 복사해준다.
단, ttc 파일은 읽지 못하니 ttf 파일만 가져와야 한다.

4. 1번의 명령문 재실행

이렇게 깜빡였다 다시 입력창이 뜨면 성공적으로 적용 완료.