본문 바로가기

분류 전체보기

"모던 프론트엔드" 에 대해 회사에서 담당하는 서비스는 Vue.js 를 사용하고 있다. 같은 프론트엔드 팀의 다른 서비스를 맡고 있는 팀원들은 React 를 사용하고 계시다. 담당하는 서비스가 다르더라도 매주 수요일마다 프론트엔드 세션을 하는데 이해도를 높이기 위해서 나름대로 둘 다 스위칭이 가능할 정도로 학습이 필요하다고 생각했다. 더 나아가 왜 이러한 프레임워크를 사용하며, 그 전에 바닐라 자바스크립트, HTML, CSS 기본이 되는 것들을 잘 이해한다면 어느 프레임워크를 사용하던지 잘 적응이 될거라 믿는다. 그런 점에서 프론트엔드 생태계에서 롱런하기 위해 프레임워크 같은 도구에 너무 매몰되지 말아야 한다. ﹆﹆ 모던 프론트엔드 란? 코파일럿 에게 물어보길 "Modern Frontend"는 일반적으로 Frontend 웹 개발에 .. 더보기
DP : Dynamic Programming (동적 계획법) #️⃣ DP : Dynamic Programming 이전의 값을 재활용하는 알고리즘 이전의 값을 활용해서 시간복잡도를 줄일 수 있다. 예시) - 1~10 숫자 중 각각 이전값들을 합한 값 구하기 문제 dp 에서는 점화식 을 구하는게 핵심이다 ! 이전값을 어떻게 활용하는지를 구하는 알고리즘 이기 때문에 예를들어 점화식 : An = An-₁ + An-₂ 더보기
[프로그래머스-level2] 게임 맵 최단거리 - javascript https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [풀이] 최단거리를 구하는 거니 BFS 알고리즘을 사용해야 한다. 알고리즘 이해만 있다면 수월하게 풀 수 있는 난이도 문제. function solution(maps) { let answer = 1; let visited = maps //탐색을 마친 노드들 let needVisit = []; //탐색해야할 노드들 const n = maps.length; //세로 const m = maps[0].le.. 더보기
[javascript] BFS 📶 그래프 탐색 어떤것들이 연속해서 이어질 때, 모두 확인하는 방법 이다. Graph : Vertex (정점) + Edge (이어지는 것) - 시작점에 연결된 Vertex 찾기 - 찾은 Vertex 를 Queue 에 저장 - Queue 의 가장 먼저 것 뽑아서 반복 ⏱️ 시간복잡도 알고리즘이 얼마나 오래 걸리는지 / 문제를 해결하는데 걸리는 시간과 입력의 함수 관계 나타낸다. BFS : O(V+E) BFS 의 기본원리 - 방문여부 확인 (재방문 금지) - Queue: BFS 실행 최단거리는 BFS(너비우선탐색) 로 푸는게 좋다. 탐색 스택, 방문 배열 생성 탐색을 시작하는 정점을 탐색스택에 쌓는다 탐색스택이 없어질때까지 아래 반복 - 스택 최상단에 있는 것을 없애고, 이를 탐색 - 탐색 시에 방문했는지 .. 더보기
[프로그래머스-level2] 기능개발 (javascript) https://school.programmers.co.kr/learn/courses/30/lessons/42586 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [풀이] - 각 기능은 진도가 100% 일 때 배포 가능 - 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발되더라도 앞에 있는 기능이 배포될 때 함께 배포 ---> Queue 활용 Math.ceil() Math.ceil() - JavaScript | MDN The Math.ceil() static method always rounds up and returns the smallest integer.. 더보기
Frontend-Tech-handbook (.~ daily update ) Frontend-Tech-handbook 프론트엔드 테크 개념에 의한 필수적으로 알아야 할 지식에 대해 정리한 글입니다. 되도록이면 매일 하나 이상의 글을 올려서 업데이트할 예정입니다. (TIL) 자바스크립트 🐾 프로그래밍이란? 더보기
[프로그래머스_lv2] 타겟 넘버 (javascript) https://school.programmers.co.kr/learn/courses/30/lessons/43165?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [유형] - 깊이/너비 우선 탐색 (DFS/BFS) [풀이] 💡 노드그래프 시각화할 수 있는 사이트: https://csacademy.com/app/graph_editor/ dfs 풀이 const numbers = [4, 1, 2, 1]; //[1, 1, 1, 1, 1]; const target = 4; //3; function solution(numbers, .. 더보기
[백준18870-silver2] 좌표 압축 (javascript) https://www.acmicpc.net/problem/18870 18870번: 좌표 압축 수직선 위에 N개의 좌표 X1, X2, ..., XN이 있다. 이 좌표에 좌표 압축을 적용하려고 한다. Xi를 좌표 압축한 결과 X'i의 값은 Xi > Xj를 만족하는 서로 다른 좌표 Xj의 개수와 같아야 한다. X1, X2, ..., XN에 www.acmicpc.net [풀이] 📌 좌표압축 ? 만약 x축의 좌표가 [0 ,1 ,2 ,3 ,100 ,150]과 같이 주어졌을 때, 0~3은 각 1씩 차이라 크게 문제 되지 않지만 100과 150을 탐색하기 위해서는 100까지, 150까지 탐색해야하는 문제점이 있다. 다시말해 4~99, 101~149는 쓰지 않는데 탐색하고 있는 시간낭비를 하고 있는 것이다. 숫자의 갭차.. 더보기
[백준2751-silver5] 수 정렬하기 2 (javascript) https://www.acmicpc.net/problem/2751 2751번: 수 정렬하기 2 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 수가 주어진다. 이 수는 절댓값이 1,000,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net [풀이] let fs = require('fs'); let [n, ...input] = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); input.sort((a, b) => a - b); console.log(input.join('\n')); 📌 여기서 주의할점은! sort() js 내부함수 사용할 시 숫자 배열 정렬은 무조건.. 더보기
로그아웃 시 다른 에러 상태 코드 도 같이 보여주는 문제 (axios + vue3) 현재 실무 vue 서비스에서클라이언트에서 로컬스토리지의 액세스 토큰 유무로 로그인/비로그인을 판단한다.axios를 사용하여 HTTP 요청을 보내고 응답을 처리하는 wrapper 함수로 동작 중 이다. 여기서는 axios의 요청 및 응답 인터셉터를 사용하여 특정 상황에 대한 처리를 구현하고 있다.    🍒 실무에서 axios 이용한 로그인, 로그아웃 기능 #1🍒 trouble issue -> trouble shooting #2           🔎 #1.  현재 접속하고 일정시간 지나면 자동으로 로그아웃 되는 부분의 기능이 어떻게 동작중인가? 토큰 자체가 갖고 있는 정보로 브라우저의 시간과 비교해서 로그아웃 당함로그아웃 로직은 API 호출 시 응답의 상태코.. 더보기
반응형

티스토리툴바