본문 바로가기

분류 전체보기

 (12)
25.07.20 프로그래머스 - 바탕화면 정리 문제 및 코드 프로그래머스코딩테스트 연습 > 연습문제 > 바탕화면 정리 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krfunction solution(wallpaper) { // 파일 위치 값 추출 const points = wallpaper.flatMap((v, i) => [...v].map((val, j) => (val === '#' ? [i, j] : null)).filter(Boolean) ); // 추출된 위치 값을 x, y로 분리하여 각각 배열로 추출 const x = points.map(([v]) => v); const y = points.map((..
useSyncExternalStore로 외부 상태 안전하게 구독하기 주제 선정 이유 최근 이력서를 넣은 회사에서 사전과제를 진행했는데 처음 사용하는 기술이 있어 그에 대해 좀 더 공부하고자 포스팅을 했다.과제 내용은 상태관리 라이브러리를 구현해보는 것이었는데 이때 외부 store와 연결을 위해 useSyncExternalStore 라는 함수를 사용했다. 동시성 렌더링 (Concurrent Rendering) useSyncExternalStore를 이해하려면 먼저 Concurrent Rendering(동시성 렌더링) 개념을 이해할 필요가 있다.이 개념은 React 18에서 도입된 것으로 UI 렌더링 작업을 보다 유연하고 끊김 없이 처리해 앱의 성능과 사용자 경험(UX)을 개선하는 것을 목표로 한다. 예를 들어 입력창에 텍스트를 입력할 때 입력한 값을 실시간으로 화면에 렌더..
25.07.17 프로그래머스 - 공원 산책 문제 및 코드 프로그래머스코딩테스트 연습 > 연습문제 > 공원 산책 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr// 방향 정보const directionMap = { 'E': ['y', +1], 'W': ['y', -1], 'S': ['x', +1], 'N': ['x', -1],}function solution(park, routes) { // 시작점을 찾는 함수 const findStartPos = (p) => { const x = p.findIndex(v => v.includes('S')); const y = [...p[x]].indexOf..
25.07.12 프로그래머스 - 추억점수 문제 및 코드 프로그래머스 코딩테스트 연습 > 연습문제 > 추억점수 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr function solution(name, yearning, photo) { const arr = name.reduce((t, v, i) => { t[v] = yearning[i]; return t; }, {}); const result = photo.map(v => v.reduce((tot, val) => tot += arr[val] ?? 0, 0)); return result;}
Sorting 알고리즘 코드를 짜는 과정에서 데이터를 일정한 기준에 맞춰 나열하는 '정렬(Sort)'은 가장 기초적이면서도 필수적인 개념이다.이번 기회에 다양한 정렬 알고리즘의 핵심 원리와 작동 방식을 공부해보고 각 알고리즘을 코드로 하나씩 직접 구현해 보았다.Big O 표기법알고리즘의 퍼포먼스 나타내는 표기법Big O 표기법은 시간 복잡도를 다룸시간 복잡도 : 알고리즘 실행 속도공간 복잡도 : 알고리즘을 수행할 때 필요한 공간 (리소스)데이터 입력 n(faster) O(1) (slower)이 글에서 다루는 정렬을 시간 복잡도 순으로 나열하면 아래와 같다.버블 정렬 – O(n²)선택 정렬 – O(n²)삽입 정렬 – O(n²) 퀵 정렬 – O(n log n)합병 정렬 – O(n log n)선택 정렬 (Selection sort..
Cypress로 테스트 코드 작성하기 ※ 이 글은 2019년도에 작성된 글을 기반으로 작성되었습니다. (원본참조) 내가 테스트 코드를 알게된 건 신입때였다. 그 당시 다니던 회사에는 개발을 완료하면 QA팀에서 검수를 하여 피드백을 받는 식으로 작업을 했었는데 QA팀에 일이 몰려 검수가 늦어지고 검수 중에 자잘한 피드백이 많이 발생해 마감일정이 미루어지는 일이 비일비재 했었다. 그래서 QA 검수 기간을 줄여보고자 여러 방안을 모색하던 중 테스트 코드란 것을 접하게 되었다.처음에는 jasmine과 karma를 사용하여 테스트 코드를 작성했는데 한 페이지에 대한 테스트 코드를 작성하려면 그 페이지에서 사용하는 모듈들을 전부 import해야하는 번거로움이 있었다.(지금 생각해보면 내가 하고 싶었던 것은 E2E 테스트이고 jasmine과 karma는..
2024 연말 재활 프로젝트 이 프로젝트를 만든 이유 퇴사 후 나는 가고 싶었던 곳으로 여행도 가고 배워보고 싶었던 수영도 등록해 보는 등 그 동안 시간이 없어서 못했던 일들을 해보며 지쳤던 심신을 달랬다. 쉬는 동안에도 감을 잃어버리지 않게 간간히 코딩테스트 했지만 아무래도 직접 실무를 뛸 때보다 부족하다 생각을 해왔다. 그래서 간단하게 손풀기용 프로젝트를 하나 만들었다.사용한 기술 스택Vite + React + Typescript (https://ko.vite.dev/guide/)Material ui (https://mui.com/material-ui/react-autocomplete/)-> antd와 고민했지만 결국 mui를 먼저 사용해보고 다음 프로젝트에서 antd를 사용해 봐서 차이를 공부해보려한다.Styled Compon..
브라우저 렌더링 (Browser rendering) 브라우저 렌더링 이란웹 페이지의 리소스(HTML, CSS, Javascript)를 분석하여 시각적으로 표시되는 과정브라우저의 Rendering Engine과 Javascript Engine에서 실행Rendering Engine : 문서의 구조(HTML)와 스타일(CSS)을 분석하여 화면에 출력하는 역할Javascript Engine : 문서의 JS 코드를 분석하고 실행하는 역할 브라우저 렌더링 과정 브라우저 렌더링 과정을 간략히 표현하면 리소스 불러오기 -> 리소스 분석 (parsing) -> 화면 출력 으로 이루어져 있다. 1. 리소스 불러오기브라우저 렌더링 첫번째 단계는 해당 페이지의 리소스를 불러오는데서 시작한다.아래는 브라우저가 리소스를 받아오는 과정이다.브라우저 주소창에 URL을 입력되면 먼저 ..

티스토리툴바