염딩코

리렌더링 최적화 - 2편

안녕하세요~~👋👋 여러분 잘 지내고 계신가요? 이제 슬슬 봄이 다가오고 있어요..!!! 🎉모두들 따뜻한 봄을 지내시길 바랄게요~ 문제상황저는 회사에서 경기 기록에 선수 정보를 추가/수정할 수 있는 기능을 맡게 되었어요!이미 구현된 부분이 있었고, 해당 부분에 추가적인 기능을 넣는 상황이었어요. 하지만, 왜인지 모르게 경기 기록 수정 모달이 굉장히 늦게 띄워졌어요..!!! --> 문제 상황 아래 영상을 확인해보시면 아시겠지만, 2초정도 늦게 모달이 띄워졌어요! 콘솔을 찍어보면서 원인을 찾아보기 시작했어요..! (6번이 모달, 7번이 경기로그입니다.) 문제는 모달이 열릴 때와 닫힐 때, 모든 기록들이 찍히는 것을 확인할 수 있었어요..!!!모든 기록들이 리렌더링이 되는 상황이었습니다! 결론부터 얘기하..

Front-End

[JavaScript] k진수에서 소수 개수 구하기

k진수에서 소수 개수 구하기 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/92335 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 복기1월 5일에 풀고, 한 달이 지나서야 풀이를 남기게 되어서 정확한 맥락을 놓쳤을 수도 있기 때문에최대한 꼼꼼히 다시 보고, 저의 그 당시 생각들을 떠올려가며 정리해보겠습니다. 문제를 읽어보시면 아시겠지만, 문제 조건 아래 바로, 아래의 예시가 나옵니다.위의 조건에 맞는 소수는 211, 2, 11로 총 3개가 됩니다. 마지막 조건과 위의 예시를 잘 읽고 생각하면, 결국은 0을 ..

알고리즘 PS

Next.js의 서버

안녕하세요~모두들 잘 지내고 계신가요? 오늘은 디프만 활동을 하면서 제가 부족하다고 느낀 부분을 제대로 정리해보기 위해서 왔어요!! 디프만 활동을 하면서 저희 팀은 서비스의 빠른 초기 렌더링과 팀원들의 Next.js 역량 증진을 위해서Next.js 프레임워크를 선택하게 되었어요. 백엔드 팀원들과 얘기를 나누던 중, Next.js의 "서버"는 백엔드 개발자들이 흔히 얘기하는 서버와 어떤 차이가 있고, 왜 존재하는지 질문을 했었어요. 저는 이 내용을 자신있게 대답하지 못 했고,,, 바로 찾아보고 다시 머릿속에 넣고자 했어요..🥲🥲 Next.js우선 Next.js는 무엇일까요?Next.js는 React 기반의 프레임워크로, 클라이언트와 서버의 경계를 넘나들며 동작할 수 있는 풀스택 프레임워크입니다. 특히..

Front-End/NextJs

리렌더링 최적화 - 1편

저는 지금 다니는 회사에 올해 1월에 입사를 했습니다.입사하기 전, 저만의 목표를 잡았었습니다. 바로 저희 서비스의 성능을 개선하기..!! 였습니다. 성능을 개선해야 하는 부분은 여러가지가 있었습니다. LCP 최적화, 서버 사이드 렌더링으로 인한 일부 페이지 렌더링 속도 저하, 리렌더링 최적화 등이 있었습니다. 그 중에 오늘은 리렌더링 최적화 1편으로 찾아왔습니다.왜 1편이냐면.. 최적화해야하는 부분이 정말 여러곳이 있는데, 1편에는 스크롤과 관련된 리렌더링 이슈를 가져왔어요. 문제 상황바로 본론으로 들어가보겠습니다.아래의 영상은 문제 상황을 녹화한 영상인데요. 스크롤을 할 때마다, 최상단의 헤더(AppBar 컴포넌트)가 지속적으로 렌더링이 되는 문제가 있었어요.그리고 더 이상했던 점은 렌더링이 ..

Front-End

디프만 16기 Web 합격 후기

안녕하세요! ~ 👋 여러분들은 2025년 잘 보내고 계신가요?벌써 1월이 마무리되어가고 있어요!!! 모두들 새해 복 많이 받고 하시는 일!!! 잘 되었으면 좋겠습니다 🔥🔥 본론으로 들어가면, 저는 작년에 인턴을 하면서 자소서와 지원서를 엄청 열심히 쓰지 못 했던 것 같아요.그래서 많은 기업에 지원하지 못 했던 것들이 조금 후회되네요..ㅠㅠ 그 중에 디프만도 지원했었는데 디프만만 합격했어요!!! 🥹🥹 (행운) 사실 디프만은 3학년 1학기 때, 정확히 1년 전에 지원했었는데요!아쉽게도 탈락했어요.. :(1년 동안 프론트엔드 개발자로서 역량을 쌓기 위해 정말 열심히 달려왔어요. 🚗 대학교 생활을 하면서 졸업작품으로 Web 서비스를 기획부터 배포까지 진행했었구요!AWS Cloud Club 동아리 활..

TIL/Depromeet

토스페이먼츠 결제 연동하기

안녕하세요..!!여러분 잘 지내고 계신지 궁금하네요^^ 짧은 휴가에서 복귀하고 회사에서 토스페이먼츠 결제 연동 업무를 할당받았어요! ☺️☺️ 사내 서비스 중에서 티켓을 구매할 수 있는 기능이 생겨서 이를 토스페이먼츠 SDK를 활용해서 구현하기로 결정했었어요. 결제 위젯과 결제창이 있는데요! 저희는 결제창을 선택했어요..!결제창으로 토스페이먼츠 결제 연동하기 카드/간편결제 통합결제창 연동하기 | 토스페이먼츠 개발자센터토스페이먼츠 카드/간편결제 통합결제창을 연동하는 방법이에요. 구매자가 결제창에서 결제수단, 결제 정보를 선택한 뒤에 카드 또는 간편결제 앱으로 이동해요.docs.tosspayments.com토스에서 아주 친절하게 가이드라인을 제공해줘서 정말 쉽게 구현할 수 있었어요!! 😎😎 하지만, 중간에..

Front-End

[TIL] 4학년 2학기 인턴 회고

모두들안녕하세요~ 👋 코딩 외적인 얘기로 오랜만에 찾아왔습니다!! ^^ 저는 이제 4학년 2학기 인턴을 3일 남겨두고 있는데요!저의 인턴 생활을 기록으로 남겨두고 싶어서 끄적끄적 해봅니다..📝 저는 올해 2024년 7월 1일부터 2024년 12월 31일까지 한 모 서비스 기업에서 인턴 활동을 하게 되었어요. 6개월 인턴 경험이 얼마 안 되는 시간의 경험이라고 생각했는데, 그래도 막상 해보니생각보다 긴 시간이었고, 다양한 업무를 처리하기에 충분한 시간이었어요! 제가 인턴 기간동안 했던 작업들을 정리해봤어요..! 그 외에도 성능개선이나 코드 리팩토링도 꽤 진행했어요.선임 개발자분들에게 코드 리뷰도 받고, pair programming도 하고, 저를 잘 키워(?)주셨어요!! Next.js에 대한 경험이 ..

TIL/인턴

[JavaScript] 방문 길이 - 프로그래머스

방문 길이 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/49994 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 복기경로 문제는 예전에 Dynamic programming을 공부할 때, 자주 접한 케이스이다.경로 문제는 대부분 유사한 형식을 가지고 있는 것 같다. 이번 문제도 동일하다.방향 정보를 담고 있는 move 객체dirs을 순회하면서 move[dir]을 구조 분해하여 각각의 좌표를 업데이트해주는 로직경계를 벗어났는지 판단해주는 예외처리적어도 위의 3가지는 자주 등장하는 코드이니 익숙하지 않다면 익혀주는게 ..

알고리즘 PS/Javascript

[JavaScript] n진수 게임 - 프로그래머스

n진수 게임 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/17687 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 복기지난 문제와 마찬가지로 이번 문제도 2018 카카오 3차 코딩테스트 문제 중 하나인 것 같다.지난 문제와 조금 더 쉽게 느껴졌다. 지난 문제는 재귀함수로 문제를 풀었다면,이번에는 단순 반복문으로 문제를 해결해서 그런 것 같다. 매개변수가 많아서 당황할 수 있지만, 단계별로 어떻게 매개변수를 써야하고,어떤 작업을 순차적으로 할 것인지 정리하여 쉽게 문제를 해결할 수 있었다. 문제 풀이1단계처음으로..

알고리즘 PS/Javascript

[JavaScript] 압축 - 프로그래머스

압축 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/17684 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 복기2018 카카오 블라인드 코딩테스트 문제였다. 3차라고 붙어져있는데, 3차 코딩테스트 문제 중 하나였던 것 같다. 카카오 문제의 특징은 지문이 길지만, 상당히 친절한 편인 것 같다. 꼼꼼하게 읽으면서 구현하면 생각보다 쉽다는 느낌을 받는다.당황하지 않고, 차분하게 문제를 읽는 습관을 들이는데 좋은 훈련이 되는 것 같다. 문제로 넘어가보자.문제에서는 친절하게 압축 과정을 알려주고, 예시까지 보여줬다. ..

알고리즘 PS/Javascript

[JavaScript] 롤케이크 자르기 - 프로그래머스

롤케이크 자르기 - 프로그래머스 문제복기이 문제는 시간복잡도를 고려하지 않았을 때는 쉽게 풀 수 있었지만,시간복잡도까지 고려했을 때는 아이디어가 필요했다. 시간초과 Ver.중복을 피해야 하기 때문에 set을 사용했다.topping의 길이는 최대 1,000,000까지 가능했다.시간초과 버전에서는 slice를 사용하여 시간초과가 발생했는데, slice는 begin부터 end까지 얕은 복사본을 새로운 배열로 반환하는 javascript 메서드다. 결국 O(n)의 시간복잡도를 갖는 알고리즘을 만들어야 하는 상황에서반복문 속의 slice 사용은 O(n * (n/2)) => O(n^2) 의 시간복잡도를 만든다.function solution(topping) { let sum = 0; for(let i ..

알고리즘 PS/Javascript

[JavaScript] 뉴스 클러스터링 - 프로그래머스

뉴스 클러스터링 - 프로그래머스 문제링크https://school.programmers.co.kr/learn/courses/30/lessons/17677 문제복기 다중집합과 자카드 유사도에 대한 개념이 나온다.개념은 모두 지문에서 알려주지만, 다중집합을 구현하는 것은 어렵지 않았지만다중집합 간에 교집합과 합집합을 구하는 부분에서 어려움을 느꼈다. 1단계1단계에서는 두 문자열의 다중집합을 구현하는 로직을 작성한다.다중집합을 우선 생성해야 교집합과 합집합을 구하고, 자카드 유사도를 구할 수 있기 때문이다. 다중집합을 생성하는 로직은 아래의 코드와 같이 구현했다.반복문을 돌면서 하나씩 붙여주고, 알파벳이 아닌 문자는 continue하는 방식으로 구현했다. 마지막으로 대소문자 구분이 없는 점을 고려해주..

알고리즘 PS/Javascript

[Next.JS] Image 컴포넌트

Next.JS에서는 특별한 기본 제공 이미지 컴포넌트가 있습니다.바로 컴포넌트입니다! 이미지를 보여줄 때, 단순히 태그를 사용하는 것이 아니라,Next.JS에서 제공하는 컴포넌트를 사용하면 이미지를 더 최적화된 방식으로 출력하도록 도와요. 예를 들어, lazy loading을 적용하여 보일 때만, 불러옵니다. 위의 동작은 추가적인 설정없이 자동으로 해줍니다.lazy-loading이 되면 안되는 이미지도 있습니다! 예를 들면, header에서 항상 보이는 이미지/아이콘 같은 경우에는priority 속성을 추가해서 항상 우선적으로 보이도록 설정할 수 있습니다. 반응형 이미지를 적용하는 과정도 단순화할 수 있어요. 그래서 컴포넌트를 사용하는 것이 좋습니다. 그리고, Image를 사용하면 이미지의 확장자..

Front-End/NextJs

[TypeScript] TypeScript 연습문제 1단계

타입스크립트 레벨을 높이기 위해 연습문제를 풀어볼건데요! 함께 하시고 싶은 분들은 아래의 링크에서 연습문제들을 풀어보실 수 있습니다..! https://typescript-exercises.github.io/#exercise=1&file=%2Findex.ts TypeScript ExercisesA set of interactive TypeScript exercisestypescript-exercises.github.io 저는 1단계부터 차근차근 풀어보고 부족한 부분을 채워나아가려고 해요!!정답도 있어서 확인해보실 수 있어요^^ 1단계 문제/*Intro: We are starting a small community of users. For performance reasons, we have..

Front-End/TypeScript

[JavaScript] 주식가격 - 스택/큐

프로그래머스 알고리즘 고득점 Kit - 스택/큐 문제설명n초 간의 주가를 초 단위로 기록한 배열 prices가 매개변수로 주어질 때, 각 초의 주가를 기준으로 해당 초 부터 n초 사이에 가격이 떨어지지 않은 시간은 몇 초인지 배열에 담아 return 하도록 solution 함수를 완성하세요. 제한사항prices의 각 가격은 1 이상 10,000 이하인 자연수입니다.prices의 길이 n은 2 이상 100,000 이하입니다. (2 입출력 예prices : [1, 2, 3, 2, 3]return : [4, 3, 1, 1, 0] 입출력 예 설명1초의 주가는 1이며 1초부터 5초까지 총 4초간 주가를 유지했습니다.2초의 주가는 2이며 2초부터 5초까지 총 3초간 주가를 유지했습니다.3초의 주가는 3이며 4초의..

알고리즘 PS/Javascript

[JavaScript] 다리를 지나는 트럭 - 스택/큐

프로그래머스 알고리즘 고득점 Kit 문제 설명 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. 예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 따라서, 모든 트럭이 다리를 지나려면 최소 8초가 걸립니다. solution 함수의 매개변수로 다리에 올라갈 수 있는 트럭 수 brid..

알고리즘 PS/Javascript

[JavaScript] 베스트앨범 - 해시

프로그래머스 알고리즘 고득점 Kit - 해시편문제 설명스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트앨범을 출시하려 합니다.노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다.장르 내에서 많이 재생된 노래를 먼저 수록합니다.장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다.노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항genres[i]는 고유번호가 i인 노래의 장르입니다.plays[i]는 고유번..

알고리즘 PS/Javascript

NextJs Essentials반드시 알아야 할 핵심 개념 Routing, Pages, ComponentsFetching, Sending DataStyling, Images, Metadata Next.JS 설치// 설치npx create-next-app@latest// 실행npm run dev 폴더 구조 분석app 폴더는 가장 중요하다.app 폴더로 전체 웹사이트에 두고 싶은 다양한 페이지를 설정하는 곳이다.해당 폴더에 page.js, layout.js가 존재한다. page.js와 layout.js는 예약어이다.page.js는 페이지를 렌더링해야한다는 것을 알려준다.React 구조를 보인다.서버 컴포넌트라는 것이 주목할 점이다. Components which require a special "en..

Front-End/NextJs

AWS EC2(Amazon Elastic Compute Cloud)는 클라우드에서 컴퓨팅 인스턴스를 제공하는 서비스로, 사용자가 원하는 시간에 서버를 생성하고, 사용량에 따라 비용을 지불할 수 있습니다. EC2는 필요에 따라 스케일링이 가능하며, 다양한 인스턴스 유형을 지원해 애플리케이션, 데이터베이스, 빅데이터 분석 등 여러 목적에 맞는 성능을 제공할 수 있습니다. 아래에서는 EC2의 주요 개념과 AWS SAA 시험에 자주 나오는 내용을 정리해드릴게요. 1. AWS EC2란?AWS EC2는 클라우드에서 가상 서버 인스턴스를 제공하는 서비스입니다. 필요한 만큼만 서버를 생성해 사용할 수 있으며, 서버의 크기와 성능을 조절할 수 있습니다. 사용자는 운영체제, CPU, 메모리, 스토리지를 선택하여 맞춤..

AWS

[AWS] CloudFront

AWS CloudFront는 전 세계에 분산된 엣지 서버를 활용해 콘텐츠를 캐싱하고 전달하는 콘텐츠 전송 네트워크 (Content Delivery Network, CDN) 서비스입니다.웹사이트의 이미지, 비디오, HTML, CSS, JavaScript 파일 등을 사용자와 가까운 위치에서 제공하여 로드 속도와 응답성을 크게 향상시킵니다. 아래에서는 CloudFront의 기본 개념과 AWS SAA 시험에 자주 나오는 중요 내용을 정리해 드릴게요. 1. AWS CloudFront란?AWS CloudFront는 빠르고 안전한 콘텐츠 전송을 목적으로 하는 서비스로, 엣지 서버 네트워크를 통해 콘텐츠를 전 세계 사용자에게 효율적으로 배포할 수 있도록 돕습니다. CloudFront는 애플리케이션의 성능을 높이고 사용..

AWS

[AWS] AWS Organization

AWS Organizations는 여러 AWS 계정을 하나의 조직 내에서 관리할 수 있게 해주는 서비스로, 큰 규모의 기업이나 프로젝트에서 여러 계정을 효율적으로 관리하고 보안을 강화하는 데 유용합니다. AWS SAA 시험에서도 자주 등장하는 주요 개념을 잘 이해하고 계정을 그룹으로 묶어 관리하는 방법을 정리해볼게요. 1. AWS Organizations란?AWS Organizations는 여러 AWS 계정을 중앙에서 통합 관리하고 정책을 적용할 수 있게 해주는 서비스입니다. 이를 통해 비용 관리, 정책 적용, 보안 강화를 쉽게 할 수 있으며, 멀티 계정을 활용해 개발, 테스트, 운영 등 계정별로 용도를 나눠 사용하기에 좋습니다. 2. 주요 개념- 조직(Organization): AWS Organiza..

AWS

AWS S3(Simple Storage Service)는 AWS에서 가장 많이 사용되는 스토리지 서비스 중 하나로, 데이터를 안전하게 저장하고 필요할 때 언제든 접근할 수 있게 해주는 매우 유용한 서비스입니다. S3의 중요한 개념과 시험에서 자주 나오는 내용들을 아래에 정리해보죠!! 1. AWS S3 기본 개념- S3 버킷(Bucket): S3에 데이터를 저장하려면 먼저 버킷을 만들어야 합니다. 버킷은 데이터를 저장하는 일종의 "컨테이너" 역할을 하며, 각 버킷은 전 세계적으로 유일한 이름을 가져야 합니다. - 객체(Object): S3에 저장되는 각각의 데이터 파일을 객체라고 부릅니다. 객체는 데이터 자체, 메타데이터(설명 정보), 고유한 키로 구성됩니다. - 키(Key): 객체를 구분하는 ..

AWS

[AWS] IAM 이란?

IAM(Identity and Access Management)은 AWS 보안의 기본 요소로, AWS 리소스에 대한 접근을 관리하는 매우 중요한 서비스입니다.간단한 설명부터 시험에 자주 등장하는 핵심 개념까지 함께 정리해볼게요. 1. AWS IAM이란?AWS IAM은 AWS Identity and Access Management의 약자입니다.AWS IAM은 사용자와 권한을 관리하여 AWS 리소스에 대한 접근을 제어하는 서비스입니다. 쉽게 말해, 누가(AWS 계정 내 사용자)가 무엇을(EC2, S3, RDS 같은 리소스) 할 수 있는지를 설정하는 보안 서비스입니다. 2. 주요 개념- User (사용자): AWS 리소스에 접근할 수 있는 계정. 각 사용자는 개별 자격 증명(Access Key, Secret..

AWS

[JavaScript] 전력망을 둘로 나누기 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편프로그래머스 완전탐색 마지막편입니다.이 문제는 개인적으로 어렵다고 느껴서 두고두고 공부할 필요성을 느꼈습니다. 문제보러가기 문제 설명n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있습니다.당신은 이 전선들 중 하나를 끊어서 현재의 전력망 네트워크를 2개로 분할하려고 합니다.이때, 두 전력망이 갖게 되는 송전탑의 개수를 최대한 비슷하게 맞추고자 합니다.송전탑의 개수 n, 그리고 전선 정보 wires가 매개변수로 주어집니다. 전선들 중 하나를 끊어서 송전탑 개수가 가능한 비슷하도록 두 전력망으로 나누었을 때, 두 전력망이 가지고 있는 송전탑 개수의 차이(절대값)를 return 하도록 solution 함수를 완성해주세요. 제한 사항 문제 풀이전력망..

알고리즘 PS/Javascript

[JavaScript] 모음사전 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 문제풀이모음의 수는 정해져 있습니다. 그래서 vowels로 배열을 만들어서 쉽게 접근할 수 있었습니다.vowels는 순서대로 배치했습니다. 재귀함수를 이용해서 단어를 생성하고, 마지막에 word와 같은 단어의 index를 찾는 방향으로 구현하고자 했습니다. currentWord를 dictionary 배열에 push하면서 모든 경우의 단어를 넣었습니다.currentWord + vowels[i]를 인자로 넣어주면서 계속 단어를 생성했습니다. 마지막에 사전 순으로 정렬을 하고 indexOf() 메서드를 활용하여 word의 인덱스를 찾았습니다.function solution(word) { const vowels = ['A', 'E', 'I', 'O',..

알고리즘 PS/Javascript

[JavaScript] 피로도 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다.이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다."최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며,"소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다.이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 ..

알고리즘 PS/Javascript

[JavaScript] JS Heap 과 가비지 컬렉터

회사에서 타이머를 개선하던 중, setInterval 호출 주기에 따른 메모리 비용을 분석하면서,JS Heap과 가비지 컬렉터에 대해서 공부하고 정리해보게 되었어요! 😎😎 1. 메모리 관리란 무엇인가?자바스크립트가 어떻게 메모리를 관리하는지 알아보려면, 먼저 메모리 관리가 무엇인지 이해해야 해요. 컴퓨터 프로그램은 데이터를 처리하기 위해 메모리라는 공간을 사용하고, 이 메모리에는 변수를 저장하거나 객체를 생성하는 등의 작업이 이루어집니다. 메모리를 효과적으로 관리하지 않으면, 프로그램의 성능이 떨어지거나, 메모리 누수가 발생할 수 있어요.자바스크립트는 자동 메모리 관리를 제공합니다. 즉, 프로그래머가 직접 메모리를 할당하거나 해제하지 않아도, 자바스크립트 엔진이 이를 자동으로 처리합니다. 그 과..

Front-End/Javascript

[JavaScript] 카펫 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 완전탐색 네 번째 문제입니다. 문제풀이function solution(brown, yellow) { const area = brown + yellow; let w = 0; let h = 3; const result = []; while(true) { w = Math.floor(area / h); if(w 이 코드는 카펫의 테두리 갈색(brown) 격자 수와 내부 노란색(yellow) 격자 수가 주어졌을 때, 전체 카펫의 가로(w)와 세로(h) 크기를 찾는 함수입니다.주요 로직은: 1. 전체 면적(area)을 구합니다 (brown + yellow) 2. 세로(h)는 ..

알고리즘 PS/Javascript

[JavaScript] 소수 찾기 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 완전탐색 세 번째 문제입니다. function solution(numbers) { const numArr = numbers.split(''); const set = new Set(); // 소수인지 확인하는 로직 function isPrime(num) { if(num 0) set.add(Number(number)); for(let i = 0;i 이전 완전탐색 문제들과 달리 필요한 작업이 많았습니다.경우도 많기 때문에 재귀를 사용해서 구현했습니다. 1. 어떤 수를 사용했고, 사용하지 않았는지도 중요했습니다. used를 매개변수로 사용하여 사용여부를 판단했습니다. 2. for문..

알고리즘 PS/Javascript

[JavaScript] 모의고사 - 완전탐색

프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 완전탐색 두 번째 문제입니다. 저의 코드는 복잡합니다..학생1, 학생2, 학생3의 정답찍기 패턴과 정답 갯수를 묶어서 다루고 싶었습니다. 1. repeat을 통해서 정답찍기 패턴을 반복해서 생성할 수 있었습니다.2. 정확하게 나눠떨어지지 않는다면 slice함수를 이용해서 추가해주었습니다.3. for문을 돌면서 변형된 문자열을 돌면서 학생별로 정답을 누적합합니다.4. 누적합의 최댓값을 구하고, 학생별로 result 배열에 추가해줍니다. // 나의 풀이function solution(answers) { let result = []; const len = answers.length; let student1 = ["12345", 0]; let stud..

알고리즘 PS/Javascript

Prev 1 2 3 4 5 Next

티스토리툴바