전체 글
-
notion 클로닝 프로젝트 회고 - History API, SPA프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 7. 7. 17:01
노션 클로닝 프로젝트 과제기간이 여차여차 끝났네요! 어려웠지만 많이 배워갈 수 있었던 시간이었던 것 같습니다. 팀원들에게서도 너무너무너무 x 10000 많이 배웠습니다. 아직 기능 구현이 완벽히 되지 않아서 계속 손 볼 것 같아요. 우선 지금까지 프로젝트 만들면서 만났던 문제들이나 알게 됐던 것에 대해 한번 정리하고 가려고 합니다! 🙌 우선 지금까지 만든 결과물은 이렇습니다. 과제의 요구 사항 중 하나는 'History API를 이용해 SPA 형태로 만드세요.' 였어요. History API와 SPA에 대한 개념이 제대로 잡혀 있지 않은 채로 막무가내로 진행하다 보니까 결국에는 마지막에 페이지와 컴포넌트 틀을 다시 잡게 되는 문제가 발생했어요. 저는 목록만 있는 MainPage와 목록과 해당 컨텐트를 담..
-
유틸성 함수(utility function)JavaScript 2023. 6. 23. 15:32
안녕하세요! 😎오늘은 유틸성 함수(utility function)에 대해서 알아보려 합니다. 저번주에 멘토님께 코드 리뷰를 받는데 비교에 대한 코드가 반복되면 유틸성 함수를 사용해 보라는 리뷰를 주셨어요! 유틸성 함수가 뭐죠...? 그래서 한번 정리해 보려고 합니다! 우선 utilie 이라는 단어를 찾아보면 유용한, 도움이 되는, 쓸모 있는 이라는 뜻으로 변역 돼요. 흠... 그럼 utility function은 쓸모있는 함수...? 쓸모없는 함수도 있나...? 전혀 도움이 안 되네요. 좀 더 이용목적에 초점을 두고 찾아보니 '코드의 크기가 작고, 애플리케이션 비즈니스와는 관련이 적으며, 굉장히 일반적인 기능을 담당하는 코드'라고 나오네요! 프로젝트에 관련된 중요한 코드 기능보다는 자주 사용되는 작..
-
렉시컬 스코프(정적 스코프)JavaScript 2023. 6. 15. 21:13
클로저에 대해서 공부를 하는데 렉시컬 스코프에 대한 얘기가 반복적으로 나와 한번 정리해 보려 합니다. 한 번쯤 생각해 보신 적 있을 거예요.자바스크립트 엔진이 우리가 짠 자바스크립트 소스코드를 어떻게 인식하고 처리해서 우리가 원하는 결과를 도출해 줄까? 자바스크립트 엔진은 소스코드를 2개의 과정, 즉 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리해요.저는 처음에 "소스코드의 평가"과정을 생각하지 못했어요. 단순하게 그냥 코드는 실행된다고만 생각했죠.하지만 아니에요. 실행을 위해서는 미리 실행을 위한 정보를 수집하는 과정이 필요하답니다. 이 단계가 "소스코드의 평가" 과정입니다. "소스코드의 평가" 과정에서는 실행 콘텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변..
-
[프로그래머스 FE 데브코스/TIL] 단일 연결 리스트Coding Test/JavaScript 2023. 6. 15. 18:50
가장 먼 노드 코딩테스트 문제를 오늘 강의들으면서 같이 풀어봤는데 그래프 구조의 문제를 푸는게 처음이었어서 생소하더라구요. 여러번 연습을 해봐야 겠어요. 그리고 트리, 힙, 트라이, 정렬 알고리즘과 자료구조들에 대해서 공부했습니다. 평소에 자동완성 기능이 어떤식으로 작동하는 지 궁금했는데 트리(trie)구조 더라구요? 주말에 한번 구현해보려구요! 오늘 부터 다음주 화요일까지 첫번째 과제 수행 기간이에요. 전회 순회, 중회 순회, 후위 순회를 구현하는 건데 이렇게만 봐서는 아직 감도 잡히지 않습니다. 😎 구글링 열심히 해봐야 겠어요... 이전에 공부했던 자료구조와 알고리즘 구현 코드를 오늘 다시 연습해봤습니다. 🔗 단일 연결 리스트 구현 착각했던 부분이 첫번째 노드가 head가 되는줄 알았는데 he..
-
[프로그래머스 FE 데브코스] 해시 문제 : 베스트 앨범Coding Test/JavaScript 2023. 6. 8. 14:02
오늘은 오프 멘토님과의 첫 번째 커피챗이 있는 날이네요! 기대됩니다. 🤩오늘 강사님께서 해시와 고차함수들을 이용한 문제와 linked list를 이용한 Queue 문제를 풀어주셨는데 저는 조금 어렵더라고요.한번 차근차근 다시 풀어봐야겠어요. 제 것으로 만들면 다른 문제 풀 때에도 분명 도움이 많이 될 거 같아요.+ 저녁에 커피챗 시간을 가졌는데 생각할게 많아졌어요.. 아직 너무 학생 같은 마인드로 강의 듣고 복습하고 하는 식의 공부만 했던 게 아닌가라는 생각이 들면서 좀 더 능동적으로 필요한 공부를 찾아서 해야겠다는 생각을 했어요. 지금 내가 부족하고 필요한 부분을 찾아서 책임지고 설명할 수 있을 정도로 깊게 공부하고 정리해야겠더라고요. 차근차근 지치지 말고 해 봐야겠습니다!다음 커피챗도 기대됩니다! ..
-
[프로그래머스 FE 데브코스/TIL] DAY4 2023.06.06 화프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 6. 6. 23:16
오늘은 자료구조와 알고리즘에 대해 배웠어요. 데이터 = 음식 재료, 자료구조 = 도구, 알고리즘 = 레시피, 소프트웨어 = 요리, 개발자 = 요리사와 같이 요리에 비유해 주시니까 확 이해가 가더라고요! 정리해볼 내용은 시간 복잡도와 자료구조 중 선형구조인 배열과 연결 리스트에 대한 내용입니다. 단일 연결 리스트를 코드로 구현하는 연습을 하라고 하셨는데 구현 코드가 class로 짜여 있더라고요.. class와 친하지가 않아서 class도 같이 공부해 봐야겠어요! 🥸 ✔️ 시간 복잡도 컴퓨터 프로그램의 입력값과 연산 수행 시간의 상관관계를 나타내는 척도입니다. 빅오표기법 Big-O notation을 주로 사용합니다. 빠름 ↔ 느림 O(1) < O(log n) < O(n) < O(n log n) < O(n2)..
-
[프로그래머스 FE 데브코스/TIL] DAY3 2023.06.05.월프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 6. 5. 20:51
오늘은 팀 매칭과 멘토님 배정이 이루어졌습니다! 멘토님과의 커피챗 시간이 기다려집니다! 팀원들과도 아직은 어색하지만 빨리 친해지면 좋겠어요. 😊 오늘 정리해볼 내용은 네트워크, 객체 지향, 프로토타입, 이벤트 루프입니다. ✔️ 네트워크 브라우저에 URL을 입력하면 무슨 일이 발생할까요? URL을 해석합니다. scheme://:@:/ DNS를 조회합니다. DNS❓ Domain Name System 도메인과 IP주소를 서로 반환해 주는 시스템입니다. https://www.comic.naver.com 에서 'naver.com'부분은 도메인(Domain)이고, comic 부분은 호스트 네임입니다. 호스트 네임❓ 네트워크에 연결된 장치들에게 부여되는 각각의 고유한 이름으로 각각의 서비스를 구분하고자 사용합니다. ..
-
[프로그래머스 FE 데브코스/TIL] 브라우저 동작원리, 메모리, 스코프JavaScript 2023. 6. 4. 21:40
데브코스 첫날이네요! 앞으로 6개월 동안 강의를 들으면서는 노션에 메모하고, 중요하다고 생각하는 부분은 블로그에 쓰면서 생각을 정리하려고 합니다. 오전 시간과 주말을 잘 사용해야겠다는 생각이 첫날부터 드네요... 😅오늘 신경 써서 보고 싶은 부분은 브라우저의 동작 원리, 메모리, 스코프와 클로저입니다.그리고 키워드 var을 지양하는 이유를 호이스팅과 관련해서 한번 알아보라고 하셔서 이 부분도 정리해 보겠습니다. ✔️ 브라우저의 동작 원리브라우저의 동작은 크게 통신, 렌더링, 스크립트 실행으로 나눌 수 있습니다. 통신브라우저와 서버와의 통신을 의미합니다.브라우저가 서버에 요청을 보내면 서버는 요청에 따라 특정 값을 응답합니다. ❗️요청은 한 번에 하나를 할 수도 있고, 한 번에 여러 개를 할 수도 있습..