개요 규모가 큰 프로젝트일수록, 코드들을 유지보수하기 좋게 잘게 쪼개는 것이 중요해진다. JavaScript 모듈 패턴은 코드의 캡슐화, 재사용성, 의존성 관리를 위해 자바스크립트에서 사용되는 대표적인 패턴 중 하나이다. 이 개념은 자바스크립트가 ES6 이전까지 공식적인 모듈 시스템이 없던 시절부터, 클로저(Closure)와 IIFE(즉시 실행 함수 표현식) 등을 활용해 네임스페이스 충돌 방지, 정보 은닉(Private 변수) 등을 위해 사용되었다. 본격적으로 모듈 패턴과 어떻게 쓰이는지에 대해서 알아보자 모듈 패턴이란? 자바스크립트에서 변수와 함수를 하나의 모듈로 묶고, 외부에 필요한 것만 노출하는 방식이다. 이 패턴의 주요 목적으로는 캡슐화(encapsulation): 내부 구현을 숨기고 필요한..

padStart, padEnd에 대한 내용만을 보고 싶다면 인덱싱을 통해 바로 이동해주세요 문제[PCCP 기출문제] 1번 / 동영상 재생기 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krhttps://school.programmers.co.kr/learn/courses/30/lessons/340213 비디오의 길이 : video_len,현재 시간 : pos오프닝 시작 시간 : op_start 오프닝 종료 시간 : op_end'next', 'prev'와 같은 명령어가 포함된 배열 : commands 위의 주어진 정보를 토대로 commands 이후 현재 시간을 반환하면 된다. 추가 조건은 문제정보를 확..

개요 URL이 빈번하게 쓰이긴 하나 종종 URI가 언급될 때면 고개가 갸우뚱 될 때가 있다. Ex) FE 분들 스웨거 참고하셔서 권한별로 URI 구분해뒀으니 용도에 맞게 사용하시면 됩니다! URL, URI를 구분 못하는 내 입장으로는 저 문장에서 URI가 URL로 바뀌어도 자연스럽게 느껴진다.(실제로 문제가 없다) URI (Uniform Resource Identifier) URI는 통합 자원 식별자로, 인터넷이나 네트워크 상의 자원을 고유하게 식별하는 문자열이다. 따라서 URI를 통해 자원의 위치, 이름 또는 둘 모두를 식별할 수 있게 한다. 따라서, URI는 이후 설명하는 URL과 URN을 포함하는 상위개념이다. 주로 사용하는REST API의 핵심 원칙 중 하나는 “자원(리소스) 기반 URI"이다..

개요 무방향 그래프에 속해있는 정점이 주어질 때 특정 정점으로부터 도달할 수 있는 모든 정점을 한번씩 방문하는 것을 그래프 순회라고 한다. 그리고 순회 방법에는 BFS와 DFS 총 두 가지 방법이 있다. 순회방법은 문제를 보고 차차 설명하도록 하겠다. 문제 게임 맵 최단거리 문제https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 가로세로가 n, m의 크기로 이루어진 2차원 배열에서 길과 벽은 1,0으로 표시되어있다.1,1 위치에서 n,m으로 가는 최단거리를 구하는 문제 오류오류라고도 하기..

개요 최근 코테준비를 다시 시작하면서 1단계를 비롯한 낮은 난이도 문제들을 해결하며 뿌듯해하고 있었다. 하지만, 정답률이 낮은 문제로 갈 수록 내가 아는 지식, 방식내에서 해결 안되는 문제들이 많았고 DFS, 탐욕법, 동적계획법 같은 개념들을 모르고 진행하는데에 한계를 느꼈다. 보통 해결되지 않는 상황은 크게 두 가지로 나누어지는데 1. 해당 문제를 풀기위한 작전, 방식 자체가 안떠올라 시작 자체를 못하는 경우 2. 어느정도 구현은 했으나 테스트 혹은 제출 단계에서 일부 테스트 케이스를 통과하지 못하는 경우 이 두 가지가 단순히 많이 풀어보기 보단 위에서 말한 익숙치 않은 알고리즘, 자료구조에 대한 이해도가 낮다 생각해 코테 문제를 풀며 접하는 여러 상황에 대해서 기록하고자 했다. 문제 프로그래머스 ..

서론 프로젝트를 진행하다보면 단순 HTTP를 통한 API 구현이 아닌 웹소켓을 통한 구현이 필요한 기능들이 있다. 그 기능들로는 실시간 채팅 앱, 실시간 알림 시스템, 실시간 주식/코인 가격, 실시간 협업 툴(노션)등이 있다. 본인의 경우 웹소켓 연결을 통해 실시간 주식 가격을 차트에 보여주거나 가격을 보여준 경험이 있다. 해당 프로젝트를 진행할 때, 웹소켓에 대한 이해를 제대로 하지 못한채로 주먹구구식으로 기능구현에만 관심이 치우쳤던 것 같다. 이번 기회에 웹소켓에 대해 제대로 이해해보려한다. WebSocket과 HTTP 어째서 위에서 언급한 실시간과 관련된 기능들은 우리가 주로 사용하는 HTTP를 통해 구현할 수 없는 것일까? HTTPHTTP의 특성으로 요청-응답을 기반으로 클라이언트가 요청을 보..

이전 두 게시물에 이어 4.0에서 새로 도입되고, 변경된 점들을 알아보자 1. 향상된 고성능의 엔진 도입 프레임워크를 다시 만든 수준으로 아키텍처 및 속도면에서 큰 개선을 이뤘다고 한다. 아래 표에서도 보이듯이, 빌드속도가 대량 개편되었다고 한다. 특히 flex, col-span-2나 font-bold와 같이 사용중인 속성을 재사용하는 증분 재빌드의 경우 대폭 속도가 상향되어 버전업을 하는 것만으로도 속도 개선을 느낄 수 있다고한다. 2. 현대 웹을 위한 Tailwind v4.0 3.0이후 웹 플랫폼의 많은 발전이 이루어졌고 4.0버전에선 이 최신 웹기술을 최대한 활용한다고 한다. @layer을 통해 theme, base, componenets, utilities 계층을 명확히 구분이 가능하며 스타일간..

저번 시간에 우연히 발견한 베타 버전이 아닌 정식 4.0버전의 릴리즈 공식 홈페이지를 가면 4.1버전이 나온 것을 볼 수 있다. 4.0보다는 변경사항이 적으나 그래도 신기한게 몇가지 있어 나열해보자면 4.1 버전의 변경점 1. text-shadow text-shadow-색상 지정을 통해 텍스트 그림자를 적용할 수 있게 되었다.제목이나 강조하고픈 텍스트에 스타일링 적용하면 좋을 것 같은 유틸리티이다. 예전엔 글꼴을 특이한걸 고르거나 같은 글씨체에 relative와 absolute를 활용해 위와같이 표현할 수 있었는데 간편한 거 같다.  2. maskcss 마스킹 기능을 활용가능한 유틸리티로 이미지 혹은 그라데이션을 통해 요소를 가리거나 드러낼 수 있게 되었다.  3. 향상된 이전 브라우저 호환성 최신 기능..