하나씩 배워나가는 개발일지

객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다.객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. 이번 장에서는 다양한 객체 생성 방식 중 생성자 함수를 사용해 객체를 생성하는 방법 및 객체 리터럴을 사용해 객체를 생성하는 방식과 생성자 함수를 사용해 객체를 생성하는 방식의 장단점을 알아보고자 한다. Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가해 객체를 완성할 수 있다.// 빈 객체 생성const person = new Object();// 프로퍼티 추가person.name = 'JIOH';person.sayHello = function () ..

var 키워드 문제점1. 변수 중복 선언 허용동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생var x = 1; // 변수 선언, 초기화 동시에var y = 1; // 변수 선언, 초기화 동시에var x = 100; var y; // 선언문 O, 초기화 Xconsole.log(x); // 100console.log(y); // 1 2. 함수 레벨 스코프함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. -> 의도치 않게 전역 변수가 중복 선언되는 경우가 발생var x = 1;// 코드 블럭, 하지만 var..

변수의 생명주기변수도 생명주기를 가진다.변수는 선언에 의해 생성, 할당에 의해 값을 가짐, 그리고 언젠가는 소멸한다.변수에 생명주기가 없다면, 한 번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 지역 변수의 생명주기지역변수의 생명주기는 함수의 생명주기와 일치즉, 함수가 호출되어 실행하는 동안에만 유효function foo() { var x = 'local'; // -> 변수 생성, 값 할당 console.log(x); // local return x; // -> 변수 x 소멸}foo();console.log(x); // ReferenceError: x is not defined "변수 선언의 실행 시점과 변수 호이스팅"에서 살펴보았듯이, 변수 선언은 선언문이 ..

스코프식별자가 유효한 범위 = 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.var var1 = 1; // 코드 가장 바깥 영역에서 선언한 변수if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 }}function foo() { // 함수 내에서 선언한 변수 var var4 = 4; function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 }}console.log(var1);..

함수를 사용하는 이유코드의 재사용유지보수 편의성, 코드의 신뢰성코드의 가독성함수도 객체다.// 변수에 "함수 리터럴"을 할당var f = function add(x, y) { return x + y;};리터럴: 문자 or 약속된 기호를 사용해 값을 생성하는 표기 방식위에 코드는 함수 리터럴을 변수에 할당함수 리터럴도 평가되어 값을 생성하며 이 값은 객체 -> 즉, 함수는 객체다단, 함수는 일반 함수와는 다르다(일급 객체이기 때문)일반 함수: 호출 X함수: 호출 O 함수 정의JS에서 함수를 정의하는 방법에는 4가지가 있다.정의된 함수는 JS 엔진에 의해 평가되어 함수 객체가 된다.// 1. 함수 선언문function add(x,y) { return x+y;}// 2. 함수 표현식var add = fu..

바쁜 취준을 이어가던 도중 구름톤 12기 해커톤 공고가 올라와서 지원했다. 구름톤이란? 구름톤은 카카오와 구름이 주최하는 제주에서 약 3박 4일동안 이루어지는 해커톤이다.  구름톤 in JEJUkakao x goorm 제주에서 펼쳐지는 해커톤9oormthon.goorm.io 오직 지원서 하나로 참가자를 선발하며, 포지션(기획자, 프론트엔드 개발자, 백엔드 개발자, 디자이너)을 선택하고 주어진 공통 질문에 답변해야 한다. 나는 프론트엔드 개발자로 지원했고, 이번 12기 질문은 다음과 같았다. 1. 구름톤 참여 동기 (300자) 2. 제주도가 직면한 사회문제는 무엇이라고 생각하나요? (300자) 3. 해당 문제를 해결하기 위한 서비스 아이디어 (500자) 4. 팀원과의 협업을 이끌어 나갈 나만의 장점 (30..

연사를 하게 된 계기 구름톤 유니브는 카카오, 구름이 주관하는 대학생들을 위한 온·오프라인 연합 전국 IT 동아리이다.구름톤 유니브에서는 매 기수마다 해커톤을 진행하는데, 참가자들이 팀을 꾸려 직접 아이디어를 기획하고 주어진 시간 안에 MVP를 구현해낸다.단순히 ‘개발자 모임’을 넘어서 실전에서의 협업과 프로덕트 완성 경험을 만들어주는 자리다.나는 작년 구름톤 유니브 3기 프론트엔드 파트로 활동했고 그중에서도 학교 대표로 활동하면서 교내 프로그램을 운영하고 해커톤에 참가해 해커톤 팀을 이끌었던 경험이 있다. 이번 4기에서 연사로 참여하게 된 건 운영진의 제안 때문이었다.갑작스럽긴 했지만 고민은 오래 하지 않았다.내가 뭘 가르칠 수 있을 정도로 잘한다고 생각하진 않았지만, 예전의 해커톤을 잘 몰랐을 때,..

DND 활동 중 디프만에 지원하여 서류를 통과하고 면접을 거쳐 최종 합격하게 되었다.디프만은 이번이 세 번째 지원이었다. 15기 때는 면접에서 떨어졌고 16기 때는 서류에서 떨어졌었다. 그럼에도 포기하지 않고 다시 도전한 결과, 드디어 17기에서 합격할 수 있게 되었다.원래 계획은 DND 활동에만 집중하는 것이었지만 디프만 모집 공고를 보고 "이번에는 꼭 붙어보자"는 마음으로 지원하게 되었다. 이전 두 번의 실패 경험을 통해 무엇이 부족했는지 돌아보고 이번에는 더 준비된 상태로 도전하고 싶었다. 디프만이란? 디프만 - Depromeet오직 디자이너와 프로그래머의 동반성장을 위해서www.depromeet.com 디프만(DEPROMEET)은 '디자이너와 프로그래머가 만났을 때'의 약자로, 디자이너와 프로그..

지난 번 SOPT 에 떨어지고 난 후, 사이드 프로젝트를 2개 정도 진행하면서 다른 IT 연합동아리도 알아보았다. 대외활동 1 - 2024 관광데이터 활용 공모전 참가우선 4월 말, 같은 학교 졸업유예 친구들 및 4학년 학생들과 한국관광공사 x Kakao 에서 주최한 '2024 관광데이터 활용 공모전' 에 참가하기로 했다. 아이디에이션 과정을 거쳐, '여행기와 여행 OOTD를 공유하는 블로그, 트리피' 라는 웹어플리케이션을 개발하기로 결정했다.우리는 여행 관련 정보를 제공하기 위해 TourAPI 와 공공데이터를 활용할 계획이고 나는 이 프로젝트에서 프론트엔드 팀장 역할을 맡았다. 우선 개발하기 전, 제안서 작성을 파트별로 나눠 진행하며 제안배경 및 필요성, 서비스 설명, 공공데이터 활용 방안, 서비스 차..

DND 지원 동기와 목표이전부터 사이드프로젝트 동아리에 참여하고 싶어서 YAPP, 매시업, 넥스터즈, 디프만 등 여러 동아리에 지원했지만 모두 떨어졌었다. 그래서 한동안은 지원을 하지 않다가 DND가 모집한다는 소식을 듣고 지원하게 되었다.입사 후 주어진 기능을 안정적으로 개발하는 데는 익숙해졌지만, 다양한 배경을 가진 사람들과 아이디어 발상부터 기획, 설계, 개발까지 함께하는 협업 경험은 부족했다. 실무에서는 이미 정해진 구조 안에서 일하는 경우가 많아, 팀원 각자의 사고방식이나 판단 기준을 알아가며 방향을 함께 결정해보는 기회가 거의 없었다. 이러한 점에서 DND는 현재 나에게 꼭 필요한 환경이라고 생각했다.프론트엔드 개발자로서 사용자 흐름과 인터랙션을 주도적으로 설계하고 서로 다른 관점을 가진 팀원..

웹 부트캠프를 끝마치고 코딩테스트와 사이드 프로젝트를 진행하면서 어딘가에 소속되어 있지 않은 것이 자꾸 불안함을 만들었다.제대로된 프로젝트를 더 해보고싶은 마음에 IT 연합 동아리 SOPT의 YB 34기에 지원했지만, 아쉽게도 면접에서 탈락하게 되었다. 면접에서 떨어졌기에 후기를 쓸지 말지 고민했지만 다음 기수에 SOPT 를 지원할 다른 개발자 분들에게 조금이나마 도움이 되었으면 하는 마음과 복기를 통해 스스로 성장하고자 하는 마음으로 서류 및 면접 후기를 남기려 한다. SOPT는 대학생 연합 IT 벤처 창업 동아리로 국내 최대 규모의 대학생 IT 연합 동아리이다.그만큼 경쟁률도 높고 서류합격도 힘들다고 들어서 이번 기수에서 중요하게 생각하는 핵심 가치를 기준으로 자소서를 작성하기로 했다. 이번 기수의 ..

투자대회 관리자 페이지 작업을 하면서 상태 관리 이슈에 부딪혔다.여러 페이지에서 공통으로 사용하는 투자대회 코드 필터 상태를 어떻게 효율적으로 관리할 것인가에 대한 고민이었다.이번에는 그 해결 과정을 정리해보고자 한다. 문제 상황 : 모든 페이지에서 동일한 API 중복 호출프로젝트 구조상 대시보드 메인 페이지(/dashboard)와 여러 서브 페이지들(/dashboard/analytics, /dashboard/reports 등)이 있었고 모든 페이지에서 투자대회 코드 필터를 선택할 수 있어야 했다.초기에는 각 페이지에서 필터바를 위해 동일한 투자대회 코드 목록 API를 호출하고 있었다. // 모든 페이지에서 이런 식으로export default async function AnalyticsPage() { ..

회사에서 투자대회 관리자 페이지를 새로 만들고 있다.내가 원하는 스택(Next.js 15, React 19, TypeScript, Tailwind 등)으로 설계했고 새 프로젝트에 기존 서비스 + 관리자 기능을 붙이는 작업이었다.작업하면서 마주친 2가지 이슈에 대해 정리해보고자 한다. 동적 API 비동기화 이슈Next.js 15로 올리면서 가장 먼저 마주친 건 params, searchParams 등 동적 API가 비동기(Promise)로 바뀐 것이었다. 기존에는 참가자 계좌 현황 페이지에서 아래처럼 코드를 짰었다.export default function AccountPage({ searchParams }) { const competitionCode = searchParams?.code; // ....

STO 조각투자 큐레이션 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.   위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다. 전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다. 예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크..