티스토리

괴발개발

검색하기

블로그 홈

괴발개발

dnd0707.tistory.com/m

프론트엔드 개발자로 전직하기 (0/1)

구독자: 3

방명록 방문하기

주요 글 목록

SPA(Single Page Application) , Client-Side Routing 서론SPA의 정의 및 기본 개념SPA(Single Page Application)는 단일 HTML 페이지로 구성된 웹 애플리케이션을 의미합니다. 사용자가 웹 페이지를 탐색할 때, 전체 페이지를 다시 로드하지 않고 현재 페이지 내에서 필요한 콘텐츠만 동적으로 로드하여 빠르고 원활한 사용자 경험을 제공합니다. 이는 주로 JavaScript 프레임워크와 라이브러리를 활용하여 구현됩니다. SPA의 동작 원리기존의 다중 페이지 애플리케이션(MPA)에서는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML 페이지를 받아오고 전체 페이지를 새로 고칩니다. 반면에 SPA에서는 처음에 한 번만 전체 페이지를 로드하고, 이후의 페이지 전환은 서버와 비동기적 통신(AJAX)을 통해 필요한 데이터만 받아와 화면을.. 공감수 1 댓글수 1 2024. 6. 12.
[백준 / BOJ] 10986번 나머지 합 (Javascript / Node js) https://www.acmicpc.net/problem/10986누적합(prefix sum)먼저 누적합이란 나열된 수의 누적된 합을 말한다. 만약 [1, 2, 3, 4, 5] 라는 배열이 있고, 이 배열을 누적합으로 나타낸다면 [1, 3, 6, 10, 15] 가 된다. 보통 반복문을 통해 `0번 index부터 4번 index까지의 누적합`을 구한다면 5번의 수행동작이 필요하다. 즉 O(N)의 시간 복잡도를 갖는 것이다. 하지만 누적합을 사용하여 `0번 index부터 4번 index까지의 누적합`을 구한다면 누적합 배열의 4번 index 값을 꺼내오기만 하면 되기 때문에 O(1)의 시간 복잡도를 갖는다. 그렇다면 `2번 index부터 4번 index까지의 누적합`을 구하기 위해서는 어떻게 해야할까? (1.. 공감수 0 댓글수 1 2024. 6. 4.
[백준 / BOJ] 11444번 피보나치 수 6 (Javascript / Node js) https://www.acmicpc.net/problem/11444인사이트이번 문제는 우리들이 사랑하는 피보나치 수열이다. 피보나치 수열이 골드2까지 난이도가 책정된 이유에는 입력값의 크기 제한에 있다. 일반적으로 1초에 대략 1억번 정도의 연산이 처리된다는 것을 감안하면, 입력값의 최대값이 1000억이기 때문에 dp를 사용해서 O(N)의 시간 복잡도로 처리해도 시간 초과가 날 것임을 예상할 수 있다. 그렇기 때문에 피보나치 수열의 일반항으로는 어떤 짓을 해도 시간초과를 해결할 수 없을 것이다. 해서, 이 피보나치 수열의 일반항에서 시간 처리를 극적으로 줄일 점화식을 고안해내야 한다. 여기서 한가지 더 생각해보면 1000억이란 숫자를 1억 내로 안정적으로 줄이려면 제곱근으로 접근하는 것 외에는 거의 방법.. 공감수 0 댓글수 1 2024. 6. 4.
[백준 / BOJ] 17114번 하이퍼 토마토 (Javascript / Node js) https://www.acmicpc.net/problem/17114문제 해설이번 하이퍼 토마토 문제는 지난 토마토 문제에서 배열의 깊이가 2차원에서 11차원으로 변형된 심화 문제입니다. [백준 / BOJ] 7576번 토마토 ( Node js / Javascript )https://www.acmicpc.net/problem/7576 문제 풀이토마토는 BFS의 대표 문제들 중 하나입니다. 만약 BFS 혹은 그래프 탐색 자체에 대한 지식이 부족하다면 아래 링크를 참고하시길 바랍니다. 너비 우선 탐dnd0707.tistory.com 언뜻 보기에는 11차원이라는 말도 안되는 조건 때문에 괴랄해 보이겠지만 사실은 보이는 것 만큼의 난이도를 가진 문제는 아닙니다. 만약 만약 x축이 이동할 때 동시에 y축도 이동이.. 공감수 0 댓글수 0 2024. 5. 26.
동적 계획법 (Dynamic Programming) 1. 동적 계획법이란?동적 계획법이란 해결하고자 하는 문제를 작은 문제로 나누어 해결하고, 작은 문제들의 해들로부터 큰 문제의 답을 구하는 방식입니다. 여기서 중요한 점은 "분할과 정복"과 달리 DP는 분할된 작은 문제들이 상호 독립적이지 않고, 일정 부분을 공유한다는 점입니다. 본인은 편의점 알바를 하고있습니다. 그리고 저는 항상 출근하면 가장 먼저 담배 재고를 조사합니다. 담배를 꺼내 세다보면 맨 오른쪽처럼 10개가 넘어가는 재고들이 종종 있는데, 이런 경우에는 한눈에 몇개인지 들어오지도 않고 이런 것들을 하나하나 다 세다보면 재고 조사에 쓰는 시간이 꽤 길어집니다. 그렇다고 대충 눈대중으로 세고 넘어가기에는 여간 찝찝한게 아니죠.사진 속 모든 담배의 개수를 세야한다고 가정해볼까요? 세줄로 나누어 .. 공감수 1 댓글수 0 2024. 5. 26.
LCS 알고리즘 이번 포스팅에서는 LCS 알고리즘에 대해 아래의 백준 문제를 예제로 소개해보겠습니다.https://www.acmicpc.net/problem/9251 Longest Common Subsequence / Longest Common Substring LCS란 최장 공통 부분 수열(Longest Common Subsequence) 혹은 최장 공통 부분 문자열(Longest Common Substring)을 뜻합니다. LCS를 구하는 알고리즘은 다이나믹 프로그래밍(DP) 알고리즘의 대표적인 유형으로, 어째서 DP인지는 글의 마지막 부분에서 설명하겠습니다. 먼저 최장 공통 부분 수열( Longest Common Subsequence ) 란 두 개 이상의 시퀸스[ACAYKP, CAPCAK]가 주어졌을 때, 가.. 공감수 0 댓글수 0 2024. 5. 24.
[백준 / BOJ] 7576번 토마토 ( Node js / Javascript ) https://www.acmicpc.net/problem/7576 문제 풀이토마토는 BFS의 대표 문제들 중 하나입니다. 만약 BFS 혹은 그래프 탐색 자체에 대한 지식이 부족하다면 아래 링크를 참고하시길 바랍니다. 너비 우선 탐색(BFS)와 깊이 우선 탐색(DFS)BFS(Breadth-First Search)와 DFS(Depth-First Search)는 그래프 탐색 알고리즘의 두 가지 주요 유형으로, 그래프의 데이터를 탐색하는 데 사용됩니다. 이 두 알고리즘을 이해하기 위해서는 그래프가 무엇인dnd0707.tistory.com 본인이 떠올린 문제 해결 방안은 다음과 같습니다.1. 배열을 순회하며 1의 위치들 즉, 시작점들을 큐에 넣어준다.2. 시작점들이 담겨있는 큐로 BFS를 실행한다. 방문 .. 공감수 0 댓글수 0 2024. 5. 22.
프론트엔드 개발자가 되고 싶다. Day + 303 1. 2024년 백준 스트릭 모두 채우기 Day + 164 에서 세웠던 첫번째 목표인 24년 백준 스트릭 모두 채우기는 순조롭게 진행되고 있다. 이전 스트릭 최장기록도 갱신한지 2주정도가 지났다. 또한 Day + 120 에서 세웠던 첫번째 목표인 골드1 달성까지도 얼마 남지 않은 것 같다. 처음에는 알고리즘의 종류는 너무나 방대하고 다양해서 문제를 풀 때 알고리즘은 어느 정도 도움이 될 뿐 결국엔 문제 해결 능력과 사고력으로 막연하게 풀어야 된다고 생각했다. 하지만 점차 티어가 오르며 느낀 점은 첫째로 점점 문제들의 난이도가 높아질수록 해당 문제의 알고리즘을 모르면 푸는게 불가능에 가깝다는 점이고, 둘째는 생각보다 알고리즘의 종류는 유한하고 보통 코딩테스트 문제들에서 자주 등장하는 알고리즘은 더욱 한.. 공감수 0 댓글수 0 2024. 5. 18.
너비 우선 탐색(BFS)와 깊이 우선 탐색(DFS) BFS(Breadth-First Search)와 DFS(Depth-First Search)는 그래프 탐색 알고리즘의 두 가지 주요 유형으로, 그래프의 데이터를 탐색하는 데 사용됩니다. 이 두 알고리즘을 이해하기 위해서는 그래프가 무엇인지에 대한 개념이 선행되어야 합니다. 그래프에 대한 개념이 부족하신 분들은 아래 포스팅을 참고해주시면 감사하겠습니다. 그래프 ( Graph ) 탐색 이론1. 그래프의 구성요소 그래프의 기본 구성 요소는 정점(Vertex, 혹은 노드(Node))과 간선(Edge)입니다. 정점은 그래프의 기본 단위로, 위치나 상태 등을 나타낼 수 있고, 간선은 두 정점을 연결하는 선dnd0707.tistory.com 너비 우선 탐색 (BFS)너비 우선 탐색 (BFS) 는 그래프의 시작 정점에.. 공감수 0 댓글수 0 2024. 5. 18.
JWT(Json Web Token) 이해하기 JWT (Json Web Token)JWT(Jason Web Token)는 인터넷에서 정보를 안전하게 전송하기 위해 사용되는 방법 중 하나입니다. 단순히 말해서, JWT는 작은 정보 조각들을 안전하게 교환할 수 있도록 돕는 "티켓" 또는 "증명서"와 같습니다. 1. JWT의 구조와 무결성이 티켓은 세 부분으로 구성되어 있으며, 각 부분은 점(.)으로 구분됩니다.Header (헤더): 헤더는 주로 토큰의 타입을 선언하고, 정보를 암호화하는 데 사용된 알고리즘의 종류를 말합니다. 예를 들어, 종종 "JWT"와 "HS256"라는 알고리즘 이름을 볼 수 있습니다.Payload (페이로드): 페이로드는 토큰 안에 실제로 담겨 있는 데이터입니다. 여기에는 사용자 ID, 사용 권한, 토큰이 만료되는 시간 등이 .. 공감수 0 댓글수 0 2024. 5. 16.
재귀 함수 (recursive function) 의 동작 1. 재귀 함수란? 코드 내에서 본인을 호출하는 함수를 재귀함수라고 한다. 하지만 단순히 아래와 같이 자기 자신을 호출만 한다면 함수는 위 송강호씨처럼 영원히 자기 자신을 호출하기를 반복하게 될 것이다. function recursive() { recursive(); } recursive(); 이를 방지하기 위해서 재귀함수는 코드 내에 탈출 조건을 포함하고 있어야 하고, 본인을 호출할 때마다 입력 파라미터가 탈출 조건에 수렴하는 양상으로 변화해야 한다. function recursive(n) { if(n < 0){ //탈출 조건 return; } recursive(n - 1); //변화하는 파라미터, 0으로 수렴 } recursive(5); 2. 반복문 vs 재귀 함수 대부분의 재귀 함수 동작은 변수값을.. 공감수 0 댓글수 0 2024. 4. 13.
그래프 ( Graph ) 탐색 이론 1. 그래프의 구성요소 그래프의 기본 구성 요소는 정점(Vertex, 혹은 노드(Node))과 간선(Edge)입니다. 정점은 그래프의 기본 단위로, 위치나 상태 등을 나타낼 수 있고, 간선은 두 정점을 연결하는 선으로, 두 정점 사이의 관계를 표현합니다. 이러한 구성 요소들을 바탕으로, 그래프는 복잡한 네트워크 관계를 모델링하는 데 사용됩니다. 2. 그래프의 형태 그래프는 크게 방향성의 유무와 가중치의 유무에 따라 분류할 수 있습니다. 2-1. 무방향 그래프, 방향 그래프 무방향 그래프(Undirected Graph): 간선에 방향성이 없는 그래프로, 간선이 (A, B)라면 A와 B는 서로 연결되어 있음을 나타냅니다. 방향 그래프(Directed Graph): 간선에 방향성이 있는 그래프로, 간선이 (A.. 공감수 0 댓글수 1 2024. 3. 29.
[백준 / BOJ] 1107번 리모컨 ( Node js / Javascript ) 1107번: 리모컨첫째 줄에 수빈이가 이동하려고 하는 채널 N (0 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 고장난 버튼의 개수 M (0 ≤ M ≤ 10)이 주어진다. 고장난 버튼이 있는 경우에는 셋째 줄에는 고장난 버튼이www.acmicpc.net 문제 풀이 고장나지 않은 버튼들만을 이용해서 목표 채널까지 버튼을 가장 적게 눌러 도착하면 된다. 그런데 입력 조건을 보면 목표 채널의 최대값이 500,000인 것을 확인할 수 있다. 즉, 채널을 1부터 하나씩 모두 검사해도 처리시간이 매우 적게 나온다는 것이다.그렇다면 이 문제는 브루트포스를 사용해 손쉽게 해결할 수 있을 것 같다. 그렇다면 우리는 최악의 경우인 목표 채널이 500,000 번이고, 9를 제외한 모든 숫자가 고장났다고 했을 때를 감.. 공감수 0 댓글수 1 2024. 3. 29.
[백준 / BOJ] 1074번 Z ( Javascript / Node js ) 1인 경우, 배열을 " data-og-host="www.acmicpc.net" data-og-source-url="https://www.acmicpc.net/problem/1074" data-og-url="https://www.acmicpc.net/problem/1074" data-og-image="https://scrap.kakaocdn.net/dn/cWSnN9/hyVDAKuYll/mblD9ou5AdVp4Ztmo2lK3K/img.png?width=2834&height=1480&face=0_0_2834_1480,https://scrap.kakaocdn.net/dn/cGdciu/hyVAIQTLHK/K7DoNQ8vtdQXsPr6fybkw0/img.png?width=1066&height=1070&face=0_.. 공감수 0 댓글수 0 2024. 3. 22.
[백준 / BOJ] 1012번 유기농 배추 ( Javascript / Node js ) 1012번: 유기농 배추 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 www.acmicpc.net 문제를 단순히 요약하자면 0과 1이 n * m 테이블 형태로 주어졌을 때 1이 모여있는 집단의 개수를 구하라고 요구하고 있다. 그리고 모여있다의 정의는 문제 설명에 나와있다. 첫번째 제출에서는 반례가 나왔고, 두번째 제출에서는 시간 초과가 발생했다. 각각 어떤 이유로 틀렸고 시간초과가 발생했는지 살펴본 뒤 정답 코드를 설명해 보겠다. 틀렸습니다 아래는 처음 제출했던, 반례가 발견된 코드다. const fs = require("fs"); let input = fs .readF.. 공감수 1 댓글수 1 2024. 3. 20.
[BOJ / 백준] 18111번 마인크래프트 ( Node js / Javascript ) https://www.acmicpc.net/problem/18111 18111번: 마인크래프트 팀 레드시프트는 대회 준비를 하다가 지루해져서 샌드박스 게임인 ‘마인크래프트’를 켰다. 마인크래프트는 1 × 1 × 1(세로, 가로, 높이) 크기의 블록들로 이루어진 3차원 세계에서 자유롭게 www.acmicpc.net 문제 풀이 위 문제의 주제는 최소한의 작업 시간으로 땅을 평탄화시키는 것이고, 이를 잘 생각해보면 최소한의 작업 시간으로 땅을 평탄화를 시켰을 때 나올 땅의 높이를 구하면 된다는 것을 알 수 있다. 마침 땅의 높이도 ( 0 Number(item))); let [N, M, B] = input.shift(); let blocks = [].concat(...input); let min_height =.. 공감수 0 댓글수 0 2024. 3. 15.
[백준 / BOJ] 1932번 정수 삼각형 ( Node js / Javascript) https://www.acmicpc.net/problem/1932 1932번: 정수 삼각형 첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1번째 줄까지 정수 삼각형이 주어진다. www.acmicpc.net 위 문제는 전형적인 동적 계획법 (Dynamic Programming), DP 문제이다. 동적 계획법(DP)의 정의는 큰 문제를 작은 문제로 나누어 푸는 방식을 말한다. 큰 문제를 작은 문제로 나누어 푸는 방식을 동적 계획법(DP)이라고 부른다면 분할과 정복과 어떤 차이가 있는지 궁금할 수 있다. 가장 큰 차이점은 동적 계획법은 분할과 정복과 다르게 하위 문제의 해결이 상위 문제에서 사용 되기 때문에, 하위 문제의 해결을 재사용한다는 것이다. 그리고 이렇게 하위 문제를.. 공감수 1 댓글수 1 2024. 1. 9.
프론트엔드 개발자가 되고싶다. Day + 164 우테코 6기 지원 후기 같이 지원했던 친구와 발표날 오후 3시에 학교에서 만나 같이 결과를 확인했었다. 결과는 불합격! 나의 역량이 부족한 것이 아닌 나의 역량을 몰라봤다고 생각하라 말씀해주셨지만, 나보다 훨씬 많이 준비하고 훨씬 간절했던 사람들이 디스코드 채널에서도 적지 않게 보였고 우테코분들께서 정성껏 한사람 한사람 살펴봐주시는 것이 느껴졌었기 때문에 분명 타당한 결과라 생각한다. 그리고 덧붙여 로드맵과 추천 도서들을 첨부해주셨고, 마지막까지 정말 감사한 우테코였다. 그렇기 때문에 더욱 애정이 갔고 다음 7기를 더 철저히 준비해야겠노라 생각하게 되었다. 근황 우테코 불합격 소식 이후에는 학교도 종강했고 한달여간 전부 그만두고 잠시 회복기간을 가졌다. 그리고 새해가 되던날 여느 사람들이 그렇듯 나 또한.. 공감수 1 댓글수 1 2024. 1. 4.
티스토리 게시글 방문 알림 기능 만들어보기 ( Node js, Express, Discord ) 발단 우테코 프리코스가 끝나고 나는 심심할 때면 티스토리 방문 통계를 보곤 했다. 방문 통계에는 유입 경로가 나와 있는데, 내가 우테코 증빙자료로 첨부해 놓은 주소와 같은 경로로 들어온 흔적이 보이면 우테코님들께서 다녀가신 것 같은 기분이 들었기 때문이다. 친구는 내가 이렇게 시도 때도 없이 불멍 때리듯이 방문 통계로 통멍을 때리는 것을 보고, 그럴거면 차라리 글에 방문자가 생길 때마다 알림을 보내는 일종의 게시글 현관종(?) 기능을 만들어보는건 어떠겠냐 물었고, 흥미가 생긴 나는 기말고사가 끝나기만을 기다렸다 마지막 시험이 끝나자마자 만들어봤다. 기능 구조는 아래와 같다. 서버를 하나 만들고 배포한다. 서버에 이미지 파일을 호스팅한다. 서버 코드에 사용자 정의 미들웨어를 추가하여 나의 로컬 폴더의 이미.. 공감수 1 댓글수 0 2023. 12. 9.
모던 자바스크립트 Deep Dive 독후감 P. 59 ~ 73( 데이터 타입 ) 포스팅을 시작하기에 앞서본 글을 포함하여, 앞으로 포스팅할 [모던 자바스크립트 Deep Dive] 서적 관련 글들은, 철저하게 필자 본인의 학습 내용 정리 및 기록을 위한 용도이며 글에 왜곡되고 잘못된 정보가 존재할 수 있음을 말씀드립니다. Javascript 학습이 목적이신 분이라면 본 서적을 구매하여 직접 읽어보시는 것을 권해드립니다. 데이터 타입(Data type) 이전 단원들에서 학습했듯이, 메모리에는 오로지 0과 1만이 저장되어 있다. 그래서 'A' 라는 문자와 65라는 숫자는 메모리 상에 같은 2진수 0100 0001 로 저장되어 있고, 이를 문자 'A'와 숫자 65로 구분하기 위해서 데이터 타입이 존재한다 하였다. 그리고 이번에는 반대로 숫자 1과 문자 "1"은 전혀 다른 값이다. 확보해.. 공감수 0 댓글수 0 2023. 12. 8.
모던 자바스크립트 Deep Dive 독후감 P. 50 ~ 58(값과 표현식과 문 그리고 평가) 포스팅을 시작하기에 앞서본 글을 포함하여, 앞으로 포스팅할 [모던 자바스크립트 Deep Dive] 서적 관련 글들은, 철저하게 필자 본인의 학습 내용 정리 및 기록을 위한 용도이며 글에 왜곡되고 잘못된 정보가 존재할 수 있음을 말씀드립니다. Javascript 학습이 목적이신 분이라면 본 서적을 구매하여 직접 읽어보시는 것을 권해드립니다. 값(Value) 값(value)은 표현식(expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 그리고 모든 값은 데이터 타입을 갖는다. 예를 들어, 메모리에 저장된 값이 0100 0001 이라면 이는 숫자로 해석하면 65이고, 문자로 해석하면 'A'가 된다. 메모리에는 0100 000.. 공감수 1 댓글수 1 2023. 12. 2.
프런트엔드 개발자가 되고싶다. Day + 133 최근 근황 우테코 프리코스가 끝난지도 벌써 2주가 지났고 이제는 1차 결과 발표가 2주도 남지 않았다. 프리코스가 끝난 뒤 첫 일주일은 미뤄뒀던 학교 프로젝트들에 붙은 급한 불을 끄는데 소비했다. 한스쿱씩만 설명을 더 보태자면 두가지 프로젝트를 진행했는데, 하나는 Jupyter NoteBook를 사용한 주가 분석 프로젝트 그리고 다른 하나는 캡스톤디자인 프로젝트로 진행하고 있는 Web3 쇼핑몰이다. 특히나 Web3 쇼핑몰에서 Solidity로 스마트 컨트랙트를 구현하는 부분을 담당하게 되어 낯선 영역을 학습하느라 많은 시간을 소비했고, 스트레스도 많이 받았다. 하지만 이번에도 막상 결과물이 나오고나니 스트레스 받았던 것들은 금새 다 잊고 성취감만 남았다. 빅데이터 과목 기말 대체 프로젝트(주가 분석) d.. 공감수 0 댓글수 1 2023. 12. 1.
모던 자바스크립트 Deep Dive 독후감 P. 34 ~ 49 포스팅을 시작하기에 앞서 본 글을 포함하여, 앞으로 포스팅할 [모던 자바스크립트 Deep Dive] 서적 관련 글들은, 철저하게 필자 본인의 학습 내용 정리 및 기록을 위한 용도이며 글에 왜곡되고 잘못된 정보가 존재할 수 있음을 말씀드립니다. Javascript 학습이 목적이신 분이라면 본 서적을 구매하여 직접 읽어보시는 것을 권해드립니다. 사람과 컴퓨터 10 + 20 이라는 표현식이 있다고 했을 때, 사람과 컴퓨터는 모두 마찬가지로 '10','20','+' 의 의미를 알고 있어야하며 '10 + 20'이라는 표현식 자체도 해석(파싱)할 수 있어야 한다. 자바스크립트 엔진이 10 + 20이라는 식의 의미를 해석하면 각 10, 20 이라는 피연산자를 기억한다. 사람은 기억과 계산을 모두 뇌에서 하지만, 컴퓨.. 공감수 0 댓글수 0 2023. 11. 30.
모던 자바스크립트 Deep Dive 독후감 P. 1 ~ 33 포스팅을 시작하기에 앞서 본 글을 포함하여, 앞으로 포스팅할 [모던 자바스크립트 Deep Dive] 서적 관련 글들은, 철저하게 필자 본인의 학습 내용 정리 및 기록을 위한 용도이며 글에 왜곡되고 잘못된 정보가 존재할 수 있음을 말씀드립니다. 2장 자바스크립트 성장의 역사 ES3의 유래 넷스케이프 커뮤니케이션즈에서 낸 Javascript와 마이크로소프트사에서 낸 Jscript와의 경쟁으로 발생한 크로스 브라우징 이슈를 해결하고자 통합된 기준이 필요하다 느낀 넷스케이프 커뮤니케이션즈가 ECMA 인터내셔널에 자바스크립트의 표준화를 요청했었고, 1997년에 ECMA-262이라는 표준화된 자바스크립트 초판 사양이 완성되었다. 표준화된 자바스크립트는 상표권 문제로 ECMAScript 로 명명 되었다. 자주 접했던.. 공감수 1 댓글수 2 2023. 11. 29.
[백준 / BOJ] 24060번 알고리즘 수업 - 병합 정렬 1 (Javascript / Node js) https://www.acmicpc.net/problem/24060 24060번: 알고리즘 수업 - 병합 정렬 1 첫째 줄에 배열 A의 크기 N(5 ≤ N ≤ 500,000), 저장 횟수 K(1 ≤ K ≤ 108)가 주어진다. 다음 줄에 서로 다른 배열 A의 원소 A1, A2, ..., AN이 주어진다. (1 ≤ Ai ≤ 109) www.acmicpc.net merge_sort(A[p..r]) { # A[p..r]을 오름차순 정렬한다. if (p < r) then { q 공감수 0 댓글수 0 2023. 11. 21.
[GradeCalculator] TextField 컴포넌트의 error 속성 활용하기 (React js, Material UI) 현재 상황 위 화면은 현재까지 내가 구현한 학점 계산기 웹이다. 계산기의 과목명, 학점, 출석점수 등 모든 입력들은 Material UI의 TextField 컴포넌트를 사용하고 있다. 현재 계산기에는 학점을 정상적으로 계산하기 위해서 입력값에 대한 몇가지 유효 조건들이 존재한다. (과목명 중복 불가, 학점의 최소, 최대 점수 등) 그리고 위 유효성들에 대한 검사 로직은 이미 구현 되어있고, 저장 버튼을 눌렀을 때 유효 조건을 만족하지 않으면 예외처리 후 Alert를 띄우고 문제의 TextField로 focus하는 것까지 마친 상태이다. 목표 이번 포스팅에서 구현하고자 하는 것은 저장 버튼을 누르기 전에도 사용자가 잘못된 값을 입력했다는 것을 인지할 수 있도록 TextField의 error 속성을 이용하여.. 공감수 0 댓글수 0 2023. 11. 21.
프론트엔드 개발자가 되고 싶다. Day + 120 최근 근황 길고 짧았던 우아한 테크 코스의 마지막 프리코스 미션이 엊그제로 끝이 났다. 프리코스를 진행하는 동안은 학교 프로젝트도 백준도 뒷전이고 하루종일 미션에만 신경 썼던 것 같다. 원래 아직 내가 도전하기에는 많이 모자라다고 생각해서 참가할지 말지에 대해 고민했었는데, 프리코스 미션들을 진행하며 정말 도전해보길 잘했다고 생각했다. 결과는 아직 나오지 않았지만, 프리코스 자체만으로도 너무 많은 인사이트와 지식들을 얻을 수 있었다. '백준 문제 매일 풀기'도 다행히 단계별로 풀기에서 비교적 쉬운 부분들이어서 매일 하루에 30분정도 금방 투자해서 풀 수 있었다. 그런데 마지막 미션을 수행하던 기간 중 120을 향해 달려가던 스트릭이 끊어지고 말았다. 안그래도 멀티태스킹 능력이 현저히 떨어지던 내가 .. 공감수 1 댓글수 2 2023. 11. 17.
[Front-End] 우테코 프리코스 4주차 회고 (크리스마스 프로모션) 이번 4주차 미션은 여태까지의 프리코스에서 나왔던 다리 건너기가 아닌 새로운 문제가 나왔다. 그리고 저장소는 비공개로 생성해야 된다는 제출 방식과 관련된 규정도 추가됐다. 아마도 폭발적으로 증가한 지원자 수를 의식한 것이 아닐까 생각했다. (웹 프론트엔드 첫번째 미션 fork수만 950,,ㅜㅜ) 1. MVC 패턴 적용 지난 3주차에서 클린 아키텍처를 구현하는 것에 어려움을 느꼈었다. 그래서 이번 4주차 미션에서는 디자인 패턴을 적용하여 깔끔하고 이해하기 쉬운 구조를 설계하고자 MVC 패턴에 대해서 공부했다. MVC 패턴에 대해 학습하고 미션에서 적용해본 것이 이번 미션 얻은 가장 큰 경험인 것 같다. 3주차 미션 폴더 구조 src ┣ Constants ┃ ┣ InputConstants.js ┃ ┣ Lot.. 공감수 2 댓글수 2 2023. 11. 16.
[Front-End] 우테코 프리코스 3주차 회고 (로또 게임) 지난주 미션을 받고 첫 날은 Eslint를 설정하는 법을 배우고 설정하기 바빴고, 둘째날은 하루종일 기능목록만 작성했다. 그리고 남은 토,일,월에 구현하고, 화요일에 리팩토링,테스트 코드 작성, 그리고 수요일에 마지막 12시까지 소감문을 작성하다가 제출했다. 그 뒤 오늘 아침 수업을 다녀온 뒤 한숨 푹 자고 일어나니 마지막 미션이 시작됐다. 이제 4주차 미션을 시작하기에 앞서 3주차 미션을 돌아보고, 시작하려 한다. 3주차 미션을 진행하며 신경썼던 부분들 기능 목록 퀄리티 높이기 기능 요구 사항에 명시되지 않은 부분에 대해서도 고민해보기 Eslint, Prettier 사용하기 클린 아키텍쳐 1. 기능 목록 퀄리티 높이기 2주차 미션때도 1주차에 비하면 기능 목록 퀄리티가 많이 향상 됐었지만, 3주차 미션.. 공감수 1 댓글수 2 2023. 11. 9.
[GitHub] 커밋 메시지 수정하기, 커밋 메시지 컨벤션 서론 2주차 프리코스를 진행하며 커밋 메시지에 관한 요구사항이 추가 되었었다. 그런데 그 사실을 모르고 이미 커밋을 수차례 해버린 탓에 커밋 메시지를 수정하는 법을 배워봤다. 아래 방법을 통해 커밋을 커밋을 취소하고 다시할 필요없이 커밋 메시지만 직접적으로 수정할 수 있다. 지금부터 커밋 메시지를 수정하는 법과 AngularJS 의 Git Commit Message Conventions을 간단히 알아보자. 커밋 메시지 수정하는 법 위는 수정하기 전 내가 작성했던 커밋 메시지이다. 내용은 없고 제목만 있는 이유는,, 나는 제목과 본문을 따로 쓸 수 있는지도 몰랐다. 많이 쑥쓰럽다 그래서 VSCode 에서 커밋 메시지를 작성할 때 내가 제목만 작성하고 있는지도 모르고 제목 글자 수 제한 때문에 커밋 메시지에.. 공감수 1 댓글수 2 2023. 11. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.