Today, What I learned? 특강에서 프레임워크를 이용하지 않고 바닐라 JS로 SPA를 구현하는 법과, hashed url path에 대해 배웠다! 이후 좀 찾아보니 생각보다 SPA를 구현하는 방법에 대한 글과 영상이 많았다. 🤔 개인 프로젝트에 적용해보았으면 좋았을 텐데 싶은 아쉬움... 기회가 되면 리팩토링 할 수 있으면 좋겠다.. 일단 오늘 배운 것에 대한 정리 시작! MPA와 SPA 우선 이 두 주제에 대해서는 이전에 따로 정리해보았던 글이 있다. (부족함이 있을 수 있음) https://i-ten.tistory.com/174 MPA,SPA 부터 CSR, SSR 까지 들어가며 상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨 먼..

Today, What I learned? 알고리즘 꾸준히 쌓아가기 💪 ... 를 계속하며 오늘은 세 가지의 정렬 알고리즘에 대해 js로 구현해보았다. 추가적으로 네이버 메인페이지 코드를 분석하다가 알게 된 display: table에 대해서 정리해본다. 정렬 알고리즘 정렬 알고리즘은 모든 요소가 정렬되어야 하고, 그 안에서 각 요소별로 순차적으로 비교되기 때문에 이중 for문을 이용한다. 따라서 시간 복잡도는 모두 O(n^2)를 가진다. 버블 정렬 버블 정렬은 모든 요소들을 대상으로, 인접한 두 값을 비교해서 왼쪽의 값이 더 크다면 자리를 바꾸는 과정을 반복해서 정렬하는 방식이다. 아래 이미지를 참고하면 이해가 좀 더 편하다! js로 구현하기 function bubble_sort(arr) { let an..

Today, What I learned? 창민 튜터님의 CS특강과 계속되는 알고리즘과의 전쟁.. 🔥 오늘은 CS 특강에서 들은 CPU와 이진 탐색, 재귀함수에 대해서 정리한다! 특강 관련해서만 정리해도 양이 꽤 많긴 하지만.. 정리 시작! 👏 CPU 흔히들 컴퓨터 견적을 따질 때 많이 보는 것들 중에 하나로 익숙할 수 있다!.. Central Processing Unit의 약자로 중앙 처리 장치를 말한다. CPU는 컴퓨터의 두뇌라고 할 수 있다. 컴퓨터 시스템 전체를 제어하며 명령어를 수행하고 데이터를 처리한다. 처리장치와 제어장치로 구성되어 있고, CPU에는 캐시 같은 부가 장치도 포함되어 있다. 왜 CPU는 싱글 코어에서 멀티 코어가 되었는가? 결론적으로 싱글코어만으로 낼 수 있는 퍼포먼스에 한계가 ..

Today, What I learned? 어제에 이어서 알고리즘 공부를 계속!... 자료구조 중 연결 리스트에 대해 정리해보고 구현해보는 시간을 가졌다. 튜터님의 알고리즘과 자료구조에 대한 코멘트와 연결 리스트에 대해 정리해보려 한다. 🙌 시간 복잡도와 공간 복잡도 시간 복잡도와 관련해서는 예전에 블로깅을 한 적이 있다. https://i-ten.tistory.com/154 알고리즘의 시간복잡도와 Big-O 들어가며 기왕이면 가장 빠른 길로 가자! 출퇴근을 하거나, 친구와의 약속 등등. 어딘가를 향할 때 우리는 항상 목적지로 가는 빠른 루트를 찾아보는 경향이 있다. 컴퓨터도 마찬가지다. 프로그 i-ten.tistory.com 알고리즘에서는 이제 공간복잡도보다 시간 복잡도를 더 필수적으로 챙겨야 하는데, ..

Today, What I learned? 본격적인 알고리즘 등반 다시 시작이다.. 🥹 오늘 여러 알고리즘 문제를 풀었는데, 음 역시 쉽지 않다... 오늘 튜터님의 특강을 들으며 리마인드 하고 싶은 부분은 이렇다. 1. 코드는 짧게 짜는 게 핵심! 쉽고 빠르고 간결하게 프로그램을 짜는 게 프로그래머의 본질! 2. 나의 현재 실력을 자기 객관화를 하자! 프로그래머스, 백준 등을 이용해 정량적 체크는 덤 3. 한글로 로직을 먼저 생각해보고 코드를 짜자. 오늘 풀었던 몇몇 문제들 중 파이썬으로도 풀고, 자바스크립트로도 다시 풀어본 문제를 정리해본다. 문장 내 알파벳 최대 빈도수 구하기 문장 안에서 알파벳 별로 빈도수를 카운트해서 가장 빈도수가 높은 알파벳을 반환하는 문제다. 이 문제는 파이썬으로 풀면 이런 방법..

Today, What I learned? 파이썬 문법 강의를 들으며 기초 문법을 익히고, 오후에는 바닐라 JS로 끝말잇기 게임을 만들어 보았다. (아직 에러 처리 중이지만!) 파이썬 문법은 원래 살짝만 알고있었던 터라 새롭게 알게 된 부분을 정리해본다. Python 파이썬 문법을 배우며 느낀 것은 들여쓰기가 정말 중요하다는 것과!... 자바스크립트 문법에 익숙해져있다보니 자연스럽게 js 문법으로 써놓고 아차 싶은 경우가 많다는 것... ('===' 연산자나 if문 괄호 등등) f-string 자바스크립트의 템플릿 리터럴 같은 녀석이다. f'코드'로 문자열 안에 변수를 편하게 넣을 수 있다. for s in scores: name = s['name'] score = str(s['score']) print(..

Today, What I learned? 오늘은 자바스크립트 개념을 다시 훑어보며 잘 몰랐던 부분들에 대해서 좀 더 깊게 공부하는 시간을 가졌다. 타입 중 null과 undefined, undeclared의 차이점과 객체 리터럴에 대해서 정리해보려 한다! null, undefined, undeclared의 차이점 먼저 undefined부터 정리해보자! undefined undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값인데, 스코프에 변수가 선언되었지만 값이 할당되지 않은 상태다. 고로 초기화되지 않았을 때의 값이라 할 수 있다. let name; console.log(name); // undefined null undefined와 헷갈리는 경우가 많은 null. 값이 없는 것을 의도..

미니 프로젝트를 마치며 월요일부터 시작된 미니 프로젝트가 끝났다!.. 월요일 오후부터 오늘 오전까지 4일이라는 짧은 시간 안에서 결과물을 만들어냈다는 것이 다 끝나고 보니 대단하다는 생각 👏👏 특히 우리 팀은 나를 제외하고 이런 개발 프로젝트가 처음인 분들이 대부분이었는데, 끝까지 포기하지 않고 깃허브로 협업도 착착 해낸 것이 뿌듯하다 😊 발표 후 튜터님들의 피드백을 바탕으로 결과물에서 좋았던 부분과 아쉬웠던 부분, 개선되었음 하는 부분을 따로 정리해보려 한다! 아쉬웠던 부분 다크 모드 적용 디테일 담당 파트는 아니었지만, 개인 페이지에서 다크 모드 적용 시에 입력창과 방명록 부분도 변화가 있었어야 했는데 챙기지 못해 사용성 부분에서 아쉽다! 웨일 브라우저의 경우, 다크모드에서 아래와 같이 입력창을 포함..

1. Today, What I learned? 오늘은 프로젝트를 진행하면서 첫 PR을 보내보았다!.. 한번 PR 보내니 그간의 두려움이 눈 녹듯이 사라지는 매직.. ✨ Flask 에러와 html 태그 에러 등등 수정했고 아직 마무리 작업이 좀 더 남아있기는 하지만 🥲.. 일단 오늘 알게 된 부분 정리를 해본다! Flask 관련 에러 서버를 실행하면 에러가 줄줄 길게 나오는 것을 발견... 관련해서 구글에도 찾아보니 폴더 구조에 문제가 있어서 발생한 오류였다. Flask 프레임워크에서는 templates에 html 파일을, static에 css, js 등 나머지 에셋 파일을 담을 수 있는데 이때 파일 구조에는 templates 폴더가 없었다!.. 폴더 구조를 제대로 맞추어서 해결! 관련 글 스파르타코딩클럽..

Today, What I learned? 이전부터 내 맥북에만 있었던 소스 트리의 문제가 몇 개 있었는데 관련해서는 따로 포스팅해보려 한다. 미니 프로젝트를 진행하면서 다크 모드를 구현하고, Flask 서버에서 HTML 중복 처리에 관해서 새롭게 알게 되었다. 소스트리 문제 해결 포스팅은 아래 에서 볼 수 있다. 👇 [git] 맥북 소스트리 완전 삭제하고 토큰 재설정 문제점 나의 맥북에만 있던 소스트리 문제가 있다.. 진작 해결했어야 했는데 미루다 보니 여기까지.... 🥹 문제점은 이렇다. 1. push 할 때 403 에러가 뜰 때 있음 (이건 토큰 문제라는 것을 알고 있 i-ten.tistory.com 다크 모드 구현 완성된 다크 모드 먼저 보기 다크 모드를 구현하기 위한 과정은 다음과 같다. 1. b..