잔잔한 물결로 파도 만들기

여기 아주 간단한 코드가 있다.import React, { useState } from 'react';function CounterButton() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( Count: {count} );}export default CounterButton;    누군가 '버튼을 누르면 무슨 일이 벌어지나요?' 라고 물으면, 다음과 같이 쉽게 대답할 수 있다.  "버튼을 누르면 count 상태가 1씩 증가합니다."  (아마도) 군더더기 없는 설명이다.  한편, 이렇게 대답할 수도 있다. "버튼을 누르면 onClic..

1. IT 개발 조직의 일원이라면 UX와 DX를 모두 고려해야 한다.- UX -> 사용자 경험 -> 유입 및 리텐션 상승 -> 매출 증대- DX -> 개발 생산성 -> 비용 감축 && 더 다양한 시도와 빠른 이터레이션으로 장기적 매출 증대 도모- UX와 DX는 상충되기도 한다. UX를 위해 무거운 라이브러리를 도입했다가 DX가 훼손되는 경우가 그 예이다. 이런 경우에는 정답이 없다. Trade off를 잘 비교해보되, 비슷하다면 UX의 손을 들어주고 이에 수반되는 기술적 챌린지는 문제해결능력을 발휘해서 해소한다. 2. 업무 방식- 워터폴 방식 vs 애자일 방식- 워터폴: 기획 > 기획 리뷰 > 디자인 > 디자인 리뷰 > 개발- 애자일: 왔다갔다 빠른 피드백루프[GPT: IT 서비스 환경에서는 종종 하이브..

Return 타입 명시매개변수 받는 괄호 오른쪽에 콜론(:) 찍고 return 타입 명시 가능.// 올바른 return 타입 설정const combine = (arg1: number, arg2: number): number => { return arg1 + arg2}// 에러const combine = (arg1: number, arg2: number): String => { return arg1 + arg2}console.log(combine(1, 2)) void 타입자바 등 다른 프로그래밍 언어에는 있는 반환타입이다. 자바스크립트에는 void가 없었지만 타입스크립트에서 추가되었다.void는 return 값이 없는 경우이다.// void 타입 - return 값이 없음 (엄밀히 말하면, 기..

첫 회사에 출근한지 일주일이 지났다. 정신없고 기빨리고 신기하고 재미있는 시간이었다ㅎㅎ 그냥 매순간이 황송하고..😭😭 내가 과연 이 회사에서 1인분을 할 수 있을까 싶기도 하고.. 아직 회사 건물에 드나드는게 어색하고 막 그렇다. 작년엔 아무것도 모르던 내가 이젠 개발자라니??? 내가 프로젝트에 가담한다니?? 다음은 첫 일주일동안 느낀 감상들이다. 1. 또 다시 강남이구나 회사생활을 많이는 안해봤지만, 인턴 등 계약직을 포함해서 늘 강남, 선릉, 압구정 쪽 근방으로 출퇴근을 했었다. 현 회사도 강남역에 바로 붙어있고 그래서 매일 아침 출근할 때마다 데자뷰같은 느낌이 든다. 늘 느끼지만 강남역엔 사람이 참 많다. 어지러워서 싫어하지만 또 사람 구경하는 맛도 있다. 새삼 반 년 전에는 경기도 기숙사에 ..

기초 설정기본 셋팅1. npm 설치해당 프로젝트에 npm init 해서 node.js 설치 2. lite server 의존성 설치 (optional)npm install --save-dev lite-server 의존성 설정(package.json) 들어가서 "start" 명령어에 lite-server 등록하기 * 컴파일 하는 방법TS 컴파일 명령어tsc 파일명// tsc app.ts 그럼 ts 파일이 컴파일되어 js 파일이 생성된다. 만약 IDE 단에서 오류를 발견했다고 하더라도 컴파일 자체를 막진 않는다. 따라서 컴파일 하기 전에 에러가 있는지 잘 확인하고 고친 후에 컴파일을 해야 한다. 안그러면 오류가 있는 버전의 JS 파일이 도출된다. 데이터타입TS는 JS의 슈퍼셋. 즉 JS의 기존 데이터타입을 다..

SQL 로 할 수 있는 업무는 그 목적 및 역할에 따라 크게 DDL(Data Definition Language), DML(Data Manipulation Language), TCL (Transaction Control Language), DCL(Data Control Language) 로 분류할 수 있다.1. DDL (Data Definition Language)- 테이블, 인덱스, VIEW 등 객체의 C(생성)U(변경)D(삭제) -> 스키마 구조 정의/재정의 주요 명령어- CREATE (테이블, 인덱스, VIEW, SEQUENCE)- ALTER (컬럼 추가/타입 변경, 제약조건 추가/수정 등)- DROP (특정 객체(테이블) 삭제)- TRUNCATE (테이블의 모든 row(record)를 비우기)- ..

CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다. 실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋 CSR 웹사이트 [개발자 도구 - 네트워크 탭 - HTML 파일] 선택HTTP 헤더 포함 다양한 정보들이 나온다. 우클릭하고 [소스 패널에서 열기] 클릭 그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다. 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 ..

인터넷에서 클로저의 정의를 둘러보다보면 잘 이해가 가지 않는다. 굉장히 모호하게 서술되어있기 때문이다. 개념 자체가 모호해서 그런 것일 거다. 내가 책에서 이해한 방식대로 한번 정리하는 것이 필요할 것 같다. 클로저를 활용하는 방식은 다양한데, 솔직히 말하면 내가 아직 거기까지 다루기엔 시기상조인 것 같다. 그래서 이번에는 클로저가 어떤 개념인지를 명확히 이해하는 것에만 초점을 맞추려고 한다. 클로저(Closure)란? 클로저에 대한 서술은 저자마다 상이한데, 코어 자바스크립트 저자에 따르면 그나마 다음 문장들이 잘 정의한 것에 가깝다고 한다. 클로저는 함수를 선언할 때 만들어지는, 유효범위가 사라진 후에도 호출할 수 있는 함수 - , p116 클로저는 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는..

앞서 실행 컨텍스트의 구성 요소 중 ThisBinding도 있다고 하였다. 이는 this 키워드가 무엇을 가리킬지를 나타내는 정보이다. 코드를 짜다보면 지금 내가 호출하는 this가 무엇을 가리킬지가 머릿속에 그려져야 하는데, 자바스크립트의 this를 공부해보면 참 줏대가 없는 놈이라고 느낀다. 많은 사람들이 그럴 것이다. 특정 함수가 호출될 때 실행 컨텍스트가 형성되는데, 이때 어떤 상황이냐에 따라서 this에 다른 대상이 바인딩된다. 그 패턴에 대해서 알아보자. 선정리 후설명 전역 공간에서의 this 전역 객체를 가리킨다. (브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체) 메서드 호출에서의 this 메서드가 적용되는 객체를 가리킨다. (즉, 점(.) 앞에 붙어있는 ..

처음 JavaScript를 공부했던 1월에 자바스크립트의 동작 구조를 간단히 살펴본 바 있다. 직전 포스팅에서는 실행 컨텍스트 개념을 정리하였다. 그리고 최근에는 가비지 컬렉션(Garbage Collection)의 기본적인 개념에 대해서 살펴보았다. 이 두 개념에서 조금 더 나아가서, JavaScript에서 메모리 관리가 어떻게 이루어지는지를 전반적으로 알아보도록 하자! (잠깐 복습) 기본적으로 콜 스택(Call Stack)은 현재 실행 중인 함수의 실행 컨텍스트들을 쌓는 공간이다. [실행 컨텍스트 복습] 각 함수 호출은 실행 컨텍스트(Execution Context)라는 단위로 콜 스택에 쌓이게 된다. 실행 컨텍스트는 해당 함수의 실행에 필요한 모든 정보를 포함하는데, 여기에는 - 변수 환경(Varia..