💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련하여 더 탐구한 내용은 기술서적과 ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요.감사합니다.📚 코드를 값으로 다루어 표현력 높이기console.log( reduce( add, map( (p) => p.price, filter((p) => p.price 이전 글의 마지막 섹션에서, 만들어둔 고차함수들을 연속적으로 활용하여 원하는 값(Products 객체 중 20000원이 넘는 제품의 가격 총합)을 평가해보았다. 이처럼 연속적인 함수들을 통해 값이 평가되는 과정을 조금 더 우아하..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련하여 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet, ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 제너레이터와 고차함수1️⃣ 제너레이터제너레이터란 이터레이터이자 이터러블을 생성하는 함수를 말한다. 일반 함수명 앞에 *를 붙혀 선언할 수 있다.function* gen() { yield 1; yield 2; yield 3;}let iter = gen();console.log(iter.next());console.log(iter.n..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련해 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet, ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 이터레이터 프로토콜1️⃣ 기존(ES6 이전)의 리스트 순회const list = [1, 2, 3];for (var i = 0; i 길이(length)라는 프로퍼티에 의존해서, 숫자라는 키로 내부의 값을 순회한다. 친근한 방식이다. 유사배열 역시 동일한 매커니즘으로 처리된다.const str = 'abc';for (var i = 0; i ..
1️⃣ 부산 개발자 네트워킹몇 달 전부터 내 인스타가 개발 알고리즘으로 뒤덮혀버렸는데, 우연한 기회로 원석(busan_dev_camel)님이 운영하시는 계정의 부산 개발자 네트워킹 파티 모집 게시글을 보게 되었다. 올 초까지 타지에서 학교 생활을 했었고, 경험한 개발 관련 활동들은 주로 온라인으로 진행했었어서 같은 분야에 몸담고 있는 사람들과 대면하여 소통하고 싶은 욕망이 컸다. 취준생이 가도 되려나..? 라는 걱정과 함께 목마른 사람이 우물 판다고.. 참가를 신청하게 되었다. 그렇게 행사 당일, 센텀에 있는 한 건물에서 진행되었는데 애꿎은 날씨에도 불구하고 약 마흔 분이나 오셨다. 나 빼고 거의 다 현업자 분들이라, 일 얘기도 엿듣고 격려와 조언, 빠질 수 없는 개발 얘기까지.. 세 시간 동안 맥주 마..
1️⃣ 정처기5월 초부터 중순까지 정처기 필기를 준비했다. 2주 정도 기출문제를 계속 돌렸고, 막판에 서브넷 마스크나 페이지 교체 알고리즘 등 계산이 필요한 것들을 한 번씩 정리했다. 유튜브 흥달쌤 님의 정처기 필기 플레이리스트로 정리했는데, 많은 도움이 되었다. 올해부터 출제 방식이 CBT로 변경됐다고 들었는데, 그래서 그런지 기출문제 풀던 것보다 체감상 어려운 느낌이었다. 생소한 문제들이 더 많았다고 해야되나..? 결과는 6월 초 쯤 나오지만 가채점 합격을 받아 실기 공부를 막 시작하려고 하고 있다. 6월 말 접수 일정이라, 좀 여유를 두고 준비하고자 한다. 실기 딴 이후엔 오픽을 위한 영어 공부를 할 계획이다. 2️⃣ 포트폴리오정처기 시험 이후 월말까지 포트폴리오를 제작했다. 빠를수록 좋긴 했는데,..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련해 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet 서적을 참고하여 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 일급함수와 고차함수평가- 코드가 계산되어 값을 만드는 것- 연산자 우선순위에 의해 순서를 갖고 평가가 이루어진다.- 사칙연산 뿐만 아니라 배열, 객체 등 다양한 형태와 복합적으로 평가될 수도 있다. 일급- 값으로 다룰 수 있다.- 변수에 할당할 수 있다.- 함수의 인자 혹은 결과 (Return 값)으로 사용될 수 있다.const a = 10;const add10 = a => a + 1..
🧑🏻💻 수료 후 한 달데브코스에서의 6개월은 어느 때보다 치열했다. 학습 방식과 방향성에 대해 생각해볼 수 있었고, 배운 것들도 많았다. 수료 후 우선적으로 계획한 것은 지금까지의 활동을 다듬는 것이었다. 배운 것들을 정리하며 더 깊은 이해가 필요한 것들을 공부하고, 휘몰아쳐간 프로젝트들의 문서와 코드들을 정비하고 있다. 파이널 팀원 분들과 후속 프로젝트도 병행하고 있다. 아직 기획 단계이긴 하지만, 디자이너 분도 함께 하게 되어 재밌는 걸 만들어보는 중이다. 같은 입장의 사람들 속에서도 뜻이 맞는 인연을 찾는게 정말 쉽지 않은 일이라 생각되는데, 데브코스 입과하길 잘했다는 생각이 드는 손에 꼽는 순간이다. 다양한 방면에서 각자의 강점이 뚜렷해, 수료 후 한 달이 지난 지금까지도 서로에게 좋은 자..
React Server Component (RSC) 서버 컴포넌트는 말그대로 서버 단에서 실행되는 컴포넌트이다. 2020년 React 18 버전에서 처음 선보여 Next.js 14 앱 라우터의 기본 컴포넌트 렌더링 방식으로 자리 잡았다. 마실가실 프로젝트를 Next 프레임워크로 작업하면서 궁금한 점도 많고 헷갈리는 부분도 있었어서, 서버 컴포넌트의 작동 원리와 이점에 대해 자세히 살펴보고자 한다. 서버 컴포넌트의 렌더링 방식 : RSC Payload 서버 컴포넌트 형태로 작성된 코드는 리액트에서 React Server Component Payload (RSC Payload)라는 특수한 데이터 형식으로 클라이언트 단에 전달된다. Element Tree 형태의 압축된 바이너리 표현으로, 객체와 유사한 형태를..
데브코스 5기 파이널 프로젝트 약 두 달 간의 여정이 마무리 되었다. 기획부터 프로젝트가 완성되기까지의 과정을 회고해보려 한다. 소개 실시간 산책 기록 및 산책로 공유 서비스 기간 2024.02.05 ~ 2023.03.25 (2개월) 인원 총 8명 (FE 5명, BE 3명) 스택 (FE) Next.js, Typescript, TanStack-Query, Zustand, Kakaomap API, TailwindCSS (BE) Java, Spring Boot, MySQL, redis, OAuth2, Spring Security, JJWT, SpringDoc, Sentry 주소 https://www.masilgasil.app/ GitHub - Team-SilverTown/Team-SilverTown-Masil..
개요 마실가실 개발이 한창이다. 벌써 다음 주가.. 최종발표..? 산책 경로를 썸네일로 저장하는 작업을 진행하면서 발생한 이슈에 대해 다뤄보려 한다. 유저가 산책을 기록 또는 공유한 후, 해당 산책로를 시각적으로 확인할 수 있는 이미지를 제작하는 로직이 필요했다. 썸네일 생성을 자동화하고자 한다고도 볼 수 있을 것 같다. 여튼 해당 로직을 구현하기 위해 유저가 산책을 완료한 후, 카카오맵 API를 통해 그려진 경로 데이터를 활용하고자 했다. 발생한 문제 위 사진은 마실가실에서 산책이 완료된 시점 지도에 경로가 그려진 모습이다. { 위도, 경도 }[] 형태로, 일정 시간마다 GeoLocation을 이용해 데이터를 담는다. 이 모습을 온전히 캡쳐하여 썸네일로 사용하면 끝이잖아?라는 생각과 함께 이전 챗팟 프..
