개발하는 금융인

(day 1) 코딩배워사업하자! 챌린지 시작

공청 — Sun, 2 Mar 2025 00:16:51 +0900

이 글은 Sonnet 3.7, GPT-4.5이 나온 시점이며

Google에서는 Gemini Code Assist가 발표된지 4일이 된 날입니다.

생각해보면, LLM이 발달하면서 소프트웨어 개발의 생산성이 엄청나게 높아졌지만

개인적으로는 바뀌는 것이 많이 없었습니다.

몇 개의 코딩에만 사용해봤고, 실제로 제품을 찍어내거나 하지는 않았죠.

오늘부로 수익화를 위한 여러 웹 사이트를 런칭해보고자 합니다.

개인적으로 많은 웹 페이지를 만들어봤고, 수익을 보게 된 프로젝트도 있지만

사회적으로 가치를 부여하면서도 꾸준히 유지보수하고 있는 제품은 없었습니다.

---

https://www.inflearn.com/course/mbti%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%88%98%EC%9D%B5%ED%98%95-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%BD%94%EB%B0%B0%ED%88%AC

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자> 강의 | 코배투 - 인프런

코배투 | , [사진]내 웹사이트로 수익을 창출하는 방법? “잠자는 동안에도 돈이 들어오는 방법을 찾아내지 못한다면 당신은 죽을때까지 일을 해야만 할 것이다.” 워런 버핏의 유명한 격언이

www.inflearn.com

가장 먼저 찾은 것은 "레퍼런스"입니다.

무언가를 시작하기 전에 지향점을 가지면 좋습니다.

이 강의를 수강하는 것을 시작으로 1인 개발자로서의 솔로프리너(solopreneur)의 길을 시작하려고 합니다.

목표는 2가지입니다.

1. 수익이 일어날 수 있는 구조를 생각해내고, 그것을 웹 형태로 녹여내볼 것

- 애드센스

- 결제

- 어필리에이트 등

2. 유지 비용이 적게 드는 웹 페이지를 구현할 것

- SSG (정적 페이지 생성)

- 저렴한 CDN과 호스팅 찾기

이 2가지만 시작하더라도 상당한 경험치를 얻을 수 있다고 생각합니다.

부가적으로 하려는 것은 데이터 수집을 체계적으로 해보는 것입니다.

가장 기본적인 단계인 구글 애널리틱스를 이벤트 별로 나누어서 프론트엔드에 녹여볼 예정입니다.

언섹시 비즈니스 리서치 클럽 3기를 마치며

공청 — Tue, 28 Nov 2023 01:36:26 +0900

살면서 하고 싶은 일이 있으신가요?

저는 저만의 제품을 만들어서, 그것을 사용하고 있는 유저를 보고 싶습니다.

nas daily를 세운 누세이르 야신은 회사를 세워야하는 이유로 "개인은 시간이 지나면 죽지만, 회사는 창업자의 뜻을 이어갈 수 있기 때문"이라고 했습니다.

짧은 생을 살아가면서 사회에 도움이 되거나, 타인에게 어떤 가치를 준다는 것은 얼마나 행복한 일일까요.

그렇게 제품을 만들고 창업을 준비하다가 찾은 것이 "언섹시 비즈니스" 라는 이메일 리스트였습니다.

https://maily.so/unsexybusinesskr

언섹시 비즈니스

화려하지 않은 비즈니스들을 소개드립니다.

maily.so

이곳에서는 리서치 클럽이라는 것을 운영합니다. 곧 4기를 뽑을 예정인가보네요.

https://breakbook.oopy.io/unsexy

언섹시 리서치 클럽 4기

쏟아지는 해외 비즈니스 케이스… 리서치를 하고 싶지만 계속 미루고 있지 않으셨나요? 언섹시와 함께 “되는 비즈니스의 비밀”을 찾아보아요!

breakbook.oopy.io

저는 3기로 참여하면서 20일간 평일동안 매일 리서치를 받아가면서 후기를 작성했는데요.

생각보다 너무 유익한 시간이었고 배운 것이 많아서 글로 남깁니다.

1. 리서리 클럽을 하면서 배운 것

첫번째, 실천을 해야한다.

- 실천하지 않으면 그 어떤 아이디어도 의미가 없습니다. 결국 제품이 나와야 세상에 영향을 미칠 수 있으니까요.

두번째, 마케팅은 중요하다.

- 훌륭한 제품을 만들었다고 하더라도, 알지 못하면 사용할 수 없습니다.

세번째, 작은 규모로 창업한다면 작은 규모에서 해야할 일을 하라.

- 당신은 삼성, 구글, 애플이 아닙니다. 작은 규모에서는 작은 규모의 조직이 해야할 일이 있습니다.

네번째, 성공을 위해서 죽기살기로 달리기만 할 필요는 없다.

- 최종 목표는 "무언가를 하는 것". 사업은 돈에 관한 것이 아닙니다. 자신과 타인을 위한 꿈을 실현시키는 것입니다.

다섯번째, 당신은 주변 환경을 이겨낼 수 있다.

- 그 어떤 후진국에서 태어난 사람도 자수성가 할 수 있습니다.

2. 앞으로 시도할 일

- 전체적으로 build, ship, scale의 단계를 반복하는 사이클을 할 예정

- React Native를 통해 빠른 프로토타이핑과 제품 개발

- 더 많은 수요를 확인하고, 더 많이 조사하고, 더 많이 피드백을 받아보자!

3. 리서치 클럽에서 얻은 몇 가지 좋은 아티클 공유

1. 하루는 길지만 십년은 짧습니다. - 샘 알트먼

아티클 : The days are long but the decades are short by Sam Altman
링크 : https://blog.samaltman.com/the-days-are-long-but-the-decades-are-short

The days are long but the decades are short

I turned 30 last week and a friend asked me if I'd figured out any life advice in the past decade worth passing on. I'm somewhat hesitant to publish this because I think these lists usually seem...

blog.samaltman.com

2. Life is Short - 폴 그레이엄

http://www.paulgraham.com/vb.html

Life is Short

January 2016Life is short, as everyone knows. When I was a kid I used to wonder about this. Is life actually short, or are we really complaining about its finiteness? Would we be just as likely to feel life was short if we lived 10 times as long?Since ther

www.paulgraham.com

3. 4 mistakes to avoid to build a better 1-person business

https://www.indiehackers.com/post/4-mistakes-to-avoid-to-build-a-better-1-person-business-b6f517f37a

4 mistakes to avoid to build a better 1-person business

Not all businesses are good choices for solo-founders. Some are almost impossible to grow when you're a business of one. But how can you find a business...

www.indiehackers.com

4. How I built a $1M business on 2 hours a day

https://patwalls.com/how-i-built-a-1m-business-on-2-hours-a-day

How I built a $1M business on 2 hours a day

How I built a $1M business on 2 hours a day. This is the story of how I changed my life from a Starbucks: [Image] POV: It's 2017 and: - I'm 5 years into "working for the man" - I'm $50,000 in debt - I feel like there's no way out Me: "I'm going to start a

patwalls.com

5. Derek Sivers: New Kind of Entrepreneur. 10 Lessons from “Anything You Want”

https://www.playforthoughts.com/blog/derek-sivers-anything-you-want

Derek Sivers: New Kind of Entrepreneur. 10 Lessons from “Anything You Want” — Play For Thoughts

Derek Sivers is a very colorful character in the world of entrepreneurs. I am a great enthusiast of his approach to entrepreneurship. Derek proposes a new model of the entrepreneur who is the creator first. And he describes it all in his best-selling book,

www.playforthoughts.com

언섹시 비즈니스 리서치 클럽에 관심이 있으시다면,

저는 강추드립니다.

[책 추천] 리액트로 배우는 소켓 프로그래밍. 실시간 양방향 통신을 배워보자

공청 — Sat, 16 Sep 2023 23:00:13 +0900

이 책은 단단합니다.

처음부터 어려운 이론을 이야기하면서 코드베이스를 제시하지 않습니다.

리액트의 개념, Node.js의 개념, 소켓 통신을 설명하기 위해 OSI 7계층을 설명합니다. 웹 프로그래밍을 배우는 사람 중에 생각 외로 네트워크와 그 내부의 프로토콜에 대해서 깊게 공부하는 사람은 없습니다. 이미 누군가가 래핑해놓은 것들을 사용하며 추상적으로만 이해합니다. 이론의 배경을 아는 것은 매우 중요합니다. 그런 것들이 우리들로 하여금 추후에 작은 부분의 버그와 충돌을 심도깊게 이해하고, 쉽게 고칠 수 있게 해줍니다.

TCP 서버를 Node.js로 구성할 때는 net 모듈을 사용합니다. Node.js는 이미 설치할 때부터 가지고 있는 built-in module이 있는데, 그 중에 net 모듈은 TCP 서버와 클라이언트를 모두 구현할 때 사용합니다. 서버 측을 구현할 때는 ws모듈을 사용하죠. ws는 깃허브로 오픈소스화 되어있는 라이브러리로, 웹 소켓을 쉽게 사용하게 해줍니다.

node.js의 built-in 모듈의 자세한 용례와 설명은 이곳에서 확인할 수 있습니다.

Net | Node.js v20.6.1 Documentation

Net# Source Code: lib/net.js The node:net module provides an asynchronous network API for creating stream-based TCP or IPC servers (net.createServer()) and clients (net.createConnection()). It can be accessed using: const net = require('node:net'); copy IP

nodejs.org

그것을 토대로 간단한 리액트 앱을 만듭니다. 클라이언트 측이기 때문에 MDN 문서를 참고하는 것이 좋습니다. 이 책 덕분에 Websocket 객체에 대해서 공부할 수 있게 되었습니다.

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

WebSocket - Web APIs | MDN

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

developer.mozilla.org

4장부터는 본격적으로 socket 라이브러리를 활용하여 실제 서비스를 만들어보는 경험을 가집니다. 이론만 안다고하여 쌀이나오지는 않죠. 우리는 무언가를 계속 만들어봐야합니다. 이런 경험들은 단순하지만 취업과 창업의 시작이 될 수 있습니다.

이 책은 1개의 간단한 예제와 4개의 큰 규모의 예시를 제공합니다. 간단한 채팅, 인스타그램 실시간 알림, 극장 좌석 예약서비스, 구글문서, 슬랙 메신저를 만듭니다. 간단한 채팅을 만들 때부터 실시간으로 통신한다는 것에 대한 개념이 잡힙니다. 서버에 연결되고, 비연결되는 것을 나눠서 보여주면서 ‘실제로 이런 웹 서비스들은 이렇게 만들어지는구나…’ 라는 감탄을 자아내게 됩니다.

단순히 웹 서비스를 클론하면서 HTTP 기반으로 GET, POST 메서드만 사용해본 초보 개발자에게는 많은 도움이 될 뿐만 아니라 Node.js의 웹 소켓 부분을 경험하기에 최고의 서적이라고 생각합니다. 소켓 형태의 서비스는 생각 외로 많이 사용됩니다. 실시간 가격을 가져오거나, 어떤 상태를 실시간으로 읽어올 때 모두 사용되죠.

리액트를 처음 접하고 제대로 된 현실 세계의 프로젝트를 경험하고 싶다면, 혹은 리액트는 할 줄 아는데 스터디용으로 책을 찾고 있는 분이라면 이 책을 추천합니다. 웹 개발의 새로운 측면을 살펴보는 데에 큰 도움이 될 것입니다.

프로젝트 예제가 끝나면 부록이 별도로 있는데요.

부록에서는 sock.js와 mongoDB를 소개합니다.

SockJS

WebSocket emulation. SockJS has 10 repositories available. Follow their code on GitHub.

github.com

MongoDB: 애플리케이션 데이터 플랫폼

업계 최고의 최신 데이터베이스를 토대로 구축된 애플리케이션 데이터 플랫폼을 사용해 아이디어를 더욱 빠르게 실현하세요. MongoDB는 데이터를 손쉽게 처리할 수 있도록 지원합니다.

www.mongodb.com

NoSQL계의 선두주자인 몽고디비를 사용해보는 것은 빠른 프로토타이핑과 여러 스타트업 취업에 매우 유리한 선택입니다.

간단하게 설치하고 연계하는 방법도 소개가 되어있으니 살펴보시는 것을 권장드립니다.

이번에 이 책을 읽으면서 다른 루비페이퍼 출판사의 책들을 살펴봤는데요,

초보 개발자에게 도움이 될만한 책이 많았습니다.

이제 막 코딩을 시작한 분은 파이썬 퀵스타트를,

간단한 모바일 게임을 만들고 싶은 분은 유니티 게임 프로그래밍을,

어느 정도 개발을 해본 사람들에게는 UI/UX에 대해서 공부할만한 사용자를 사로잡는 UXUI 실전가이드를 추천드립니다.

여러 책을 읽으면서 실력을 쌓아가고 새로운 개념을 배우는 것은 너무 즐거운 과정입니다.

올해 추석 연휴도 꽤 기네요. 책을 읽으면서 실력을 쌓는 시간을 가져야겠습니다.

미국에서 소고기 가격이 오르면, 식당들이 돈을 번다.

공청 — Tue, 22 Aug 2023 22:25:37 +0900

오랜만에 재미있는 영상을 봤다.

미국에서 여러가지 이유로 소고기의 가격이 급등했으며, 향후 3년간은 회복이 어렵다고 한다.

그런데 소고기와 직접적으로 관련된 업종(도축업체, 소고기를 키우는 업체 등)은 적자에 죽을 맛인데

소고기를 조달해서 간접적으로 판매하는 음식점(스테이크 하우스, 햄버거 등)은 엄청나게 돈을 벌고 있다는 것이다.

하나의 원재료에 연결되어있는 밸류체인에서

어떤 섹터는 비용을 가격에 반영하기가 어렵고, 어떤 섹터는 엄청나게 쉬울 뿐만 아니라 추가로 이익을 더 얹을 수 있다는 것이다.

이런 논리는 여러 밸류체인을 살펴보지 않고서는 알 수가 없다.

아래 영상을 보면 알 수 있다.

https://youtu.be/oyWb_L_sXFI

1. 미국, 소고기 가격 급등하다.

여러가지 이유로 급등했다고 한다.

공급업자들이 소 떼를 줄였고, 가뭄으로 풀이 줄어들면서 비싼 사료를 먹이게 되면서 그렇게 됐다.

자세한 내용은 영상을 참고하면 되고.

어쨌든 현상은 이미 발생했다.

현상이 발생한 상태에서 어떤 섹터가 오를지는 어떻게 예상할 것인가?

이번 상황을 통해서 배워두면 좋을 것 같다.

2. 외식업은 돈을 많이 벌었다.

S&P500 지수(파란색)과 나머지 세 개의 레스토랑을 비교한 모습

소고기가 2배가 올랐다고해서 스테이크 가격이 2배 오를리 없다.

애초에 스테이크 가격은 소고기 뿐만 아니라 인건비, 부동산 임대료, 소스 등 여러 가지의 총합이기 때문이다.

그러니까 소고기의 원가가 만약에 스테이크 가격의 20%를 차지하고 있었다면, 20%에 해당하는 금액이 2배가 된 것 뿐이다.

만약에 스테이크가 충분히 경쟁력이 있다면? 소비자들이 여력이 생겨 더 많은 스테이크를 소비하고자 한다면?

스테이크 가격의 상승분 뿐만 아니라 거기에 더 많은 금액을 얹혀 최종 가격을 올릴 수 있을 것이다.

지금 미국의 소비자들은 주머니가 넉넉한 편이다.

실업률은 줄고 임금은 오르고 있다.

다덴 레스토랑, 쉐이크쉑, 텍사스 로드하우스는 S&P500 지수를 추월하여 지난 1년동안 엄청나게 올랐다.

3. 다른 외식업 회사는 무엇이 있을까?

미국 주식을 살펴보기에 가장 쉬운 방법은

해당 섹터를 커버하고 있는 ETF의 구성종목을 확인하는 것이다.

외식업에서 유명한 ETF는 "EATZ"라는 티커의 ETF이다.

EATZ ETF의 구성 종목들

포함되어있는 금액 순으로 정리했다.

눈에 띄는 것은 맥도날드, 도미노피자, 얌!브랜드, 쉐이크쉑, 파파존스가 있다는 것이다.

개별 종목들을 하나씩 뜯어봐야겠다.

자바스크립트 함수 호이스팅에 대하여 (함수표현식, 함수선언문)

공청 — Wed, 21 Jun 2023 23:35:02 +0900

자바스크립트의 함수는 양자역학의 중첩 상태이다. 관찰하는 순간 결정되는 것이다.
변수가 될 수도, 매개변수가 될 수도, 리턴값이 될 수도 있는 것이여...

0. 초능력자 자바스크립트 함수

자바스크립트에서 함수는 일급 객체(First Class Object)라고 불린다.

일급 객체는 다른 어떤 객체와도 같이 제한 조건이 없이 사용된다는 의미이다.

크게 3가지가 인터넷에 예시가 많은데,

간단한 함수 하나를 만들어서 설명해보자.

doubleNumber라는 함수를 선언한다.

기능은 정말 간단하다. 하나의 숫자를 받으면 2배를 해서 리턴해준다.

let doubleNumber = ( number ) => ( number * 2 ); 
// 화살표 함수 표현식

let doubleNumber2 = function(number) { return number * 2 } 
// 함수 표현식 (function expression)



// 함수 선언문
function doubleNumber3( number ) {
 return number * 2
}

위의 3가지는 모두 같은 기능을 구현하는 함수인데 표현하는 방식이 다르다.

같은 기능을 하는 함수라도 선언하는 방식에 따라서 문제가 발생하는 경우가 있는데

그건 조금 후에 알아보자.

1. 일급 객체로서 사용되는 조건의 예시

첫번째, 변수에 할당할 수 있는가? ( 가능 )

let doubleNumber = ( number ) => ( number * 2 ); // 화살표 함수 표현식

변수에다가 함수를 넣었다. 말도 안돼. 코끼리를 냉장고에 넣다니.

자바스크립트에서는 가능하다.

심지어 함수를 객체에다가 넣을 수도 있고, 배열에도 밀어 넣을 수 있다.

// 객체 안에다가 함수를 넣었음.
let exampleObject = { myFunction: doubleNumber }


// 배열에다가 함수를 넣었음.
let myArray = [];
myArray.push( doubleNumber );

아래 사진은 크롬 브라우저에서 직접 실행한 결과이다.

브라우저에서 한 모습. 진짜로 됨

두번째, 매개변수로 전달될 수 있다.

function doubleNumber(number) {
  return number * 2
}

function doubleWhateverYouWant(doubleFunction, doubleIt) {
  // 함수를 매개변수로 전달했다.
  console.log(doubleFunction(doubleIt) + 5);
}

doubleWhateverYouWant(doubleNumber, 2);  // 9
// 2가 들어가서 2배가 된 이후에 5랑 더해져서 9가 됨

세번째, 리턴값으로 사용될 수 있다.

function doubleNumber(number) {
  return () => {
    // 리턴값 자체가 숫자의 2배를 출력하는 함수
    console.log('2배는?' + number * 2);
  }
}

doubleNumber(4)

이 경우에는 콘솔이 찍히지는 않는다. 대신 콘솔을 찍는 "함수 자체"가 리턴된다.

2. 그건 그렇다치고, 함수 호이스팅이란게 뭔데?

저렇게 되면 문제가 생긴다.

뭐냐면,

let doubleNumber로 변수를 선언해두고 거기에 함수를 넣었을 때

doubleNumber는 함수인가 변수인가?

"아니 이게 뭔소리여, 그냥 변수에 넣은 함수지~" 라고 할 수 있지만

정확히 말하면 변수에다가 함수를 넣는 방식을 "함수 표현식" 이라고 부르며,

function 함수명(value) { return value; }

이런 식으로 적는 것을 "함수 선언문"이라고 부르는데

두 가지는 약간 다르게 작동한다.

예시를 보자.

let a = 10
let b = 20

add1(a, b);
add2(a, b);


function add1(num1, num2) {
    console.log(num1+num2) // 실행되는지를 확인 위해 더한 값을 출력한다.
}

let add2 = (num1, num2) => num1+num2; // 그냥 더해만 보자.

똑같은 기능을 구현한 함수를 만들고 함수가 선언되기 이전에 둘 다 불러봤다.

어떻게 될까?

정답은,,,

아래 함수는 오류를 내며 수행되지 않는다는 것이다.

add2를 호출한 곳에서 에러가 난다.

그 이유는

일반 함수로 선언을 하는 경우에는 브라우저가 실행할 때 자바스크립트 엔진이 전체를 해석하면서

어디서든 실행 가능하도록 미리 상단으로 끌어올려놓는다.

이것을 "호이스팅" (Hoisting)이라고 부른다.

그래서 전역에서 함수를 사용하고 싶을 때는 변수에 넣는 형식이 아니라

function으로 시작하는 함수 선언문을 사용해야한다.

끝!

const 선언 / Object.seal() / Object.freeze()

공청 — Thu, 15 Jun 2023 19:35:32 +0900

1. 그들이 건들지 못하게 하라

나는 안드로이드 개발할 때도 약간 변태 같은 습성이 있었는데

바로 사람들이 구성한 라이브러리의 내부를 일일이 뜯어보는 것이었다.

라이브러리나 프레임워크나 결국 다른 언어로 만들어진 덩어리일 뿐이기에

항상 나는 추상화된 코드 밑에 어떤 마법들이 일어나고 있는지 파악하고 싶었다.

프론트엔드를 공부하고 있는 지금은 React 라이브러리에 큰 관심이 있는데

톺아볼 요량으로 패스트캠퍼스의 React 라이브러리의 초기 버전을 구현하는 수업을 들었다.

(https://fastcampus.co.kr/dev_academy_kmt2)

이 강의 뿐만 아니라 유튜브(https://youtu.be/Z7ysKNFrMqo)에서 보고 배운 것이 있는데

바로 Object.seal()과 Object.freeze()이다.

리액트가 제공하는 객체는 희한하게도 수정이 안된다.

그 이유는 해당 객체가 "Freezed" 되어있기 때문인데, Object.freeze를 통해 해당 객체를 수정하지 못하게 할 수 있다.

Object 클래스가 가지고 있는 모든 메서드를 외울 수는 없지만, 이 메서드는 알고 있으면 좋을 듯하다.

내가 만든 어떤 객체가 누군가가 임의로 바꿀 수 있으면 위험한 상황에는 굉장히 중요하기 때문이다.

2. const, Object.seal, Object.freeze 차이

const는 ES6(ECMA 2015)부터 지원하는 문법으로 현대 브라우저라면 대부분 지원한다.

예전에는 var보다 느리다는 악평(?)이 있었지만 현재는 수정된 이슈이다.

const로 선언하는 것들은 모두 "상수"로 된다고 처음에 배우지만,

엄밀히 말해서는 객체(Object) 형태의 내부는 모두 재할당부터 수정까지 가능하다.

설명 안 한다. 바로 예시부터 들어가 보자

(1) 빈 객체에 냅다 값 넣어보기

const exampleObject = {};
exampleObject.key = 'value';
// 비어있는 객체에 key라는 키에 "value"라는 문자열 값을 넣음

console.log(exampleObject)
// {key: 'value'} 라는 값이 나온다.

나는 분명히 const로 선언했는데 객체 내부로 직접 값을 할당하니까 할당이 된다?!

(2) 원래 값이 있던 순서쌍을 수정해 보기

const exampleObject = { key: "first value"}; // 하나의 객체를 탄생시킨다.

exampleObject.key = "New value"
// 원래 있던 "first value"의 값을 새로운 "New value"로 수정

console.log(exampleObject)
// key: "New value"가 되었다.

당연히 된다. 위가 되면 아래도 되는 것이 논리적으로 추측 가능하다.

그런데, 여기서 안 되는 것이 있긴 하다. 바로 해당 변수에 대한 재할당이 안된다.

(3) const가 가진 유일한 방패

const exampleObject = { key: "first" }

exampleObject = {key: "New Key"} // 에러 발생!!!!!

이번 경우에는 에러가 발생한다.

Uncaught TypeError: Assignment to constant variable. at <anonymous>:코드줄번호

이유는, 자바스크립트 스펙상 const로 선언된 변수는 재할당이 금지되어 있기 때문이다.

그러니까 우리가 처음에 자바스크립트를 배울 때 const를 재할당이 안된다고 이해했다면 정확히 이해한 것이고

안에 들어가 있는 값이 아예 변할 수 없다고 인지하면 크게 문제가 될 수 있다는 것이다.

그런데 자바스크립트 언어에서 이미 할당되어 있는 값을 수정할 수 없게 만들어두었을까?

자바스크립트 자체가 형편없고 이상하다는 평가가 많지만, 그 정도는 아니다.

(4) Object.seal()

Object 클래스에 있는 메서드 중에서는 seal()이라는 것이 있는데, 여기 안에 매개변수로 객체를 주면 해당 객체는

ㄱ. 새로운 속성을 추가할 수 없으며

ㄴ. 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어준다.

그런데 예외가 되는 것은

"쓰기 가능한 속성의 값은 변경할 수 있다."

이게 무슨 말인지 예시로 알아보자.

우선 ㄱ와 ㄴ을 살펴본다.

23살의 홍길동은 성공해서 서울과 경기도에 자기 아파트가 있다.

let exampleObject = { name: "홍길동", age: 23, houseLocation: ["서울", "경기도"] }

Object.seal(exampleObject) // 밀봉!

exampleObject.pants = "blue" // 새로운 키와 값을 쌍으로 추가!!

console.log(exampleObject)
// { name: "홍길동", age: 23, houseLocation: ["서울", "경기도"] }
// pants의 값이 추가되지 않았다.

여기서 seal을 수행하고 새로운 속성을 추가해 보자, 예를 들어 바지 색상이 파란색이다.

새로운 속성을 추가하려 했으나 아무 오류도 내지 않고 추가되지 않았다. 이미 밀봉된 상태에서는 새로운 속성을 받아들이지 않는다.

또한 삭제도 안된다. delete exampleObject.name을 해도 그대로 값이 출력된다.

delete exampleObject.name

console.log(exampleObject)
// { name: "홍길동", age: 23, houseLocation: ["서울", "경기도"] }

그럼 뭐가 될까? 값의 수정은 된다.

홍길동이 한 살 더 먹어서 24살로 되었다고 가정해 보자.

exampleObject.age = 24

console.log(exampleObject)
// { name: '홍길동', age: 24, houseLocation: ['서울', '경기도'] }

참고: exampleObject안에 있는 houseLocation은 배열로 그 자체가 또 객체이다. 이 객체 내부는 seal이 적용된 상태가 아니므로 수정과 삭제가 모두 가능하다. (delete exampleObject.houseLocation[1]이 가능)
위가 불가능하게 하려면 반복문을 통해 해당 객체의 모든 요소를 하나하나 돌면서 일일이 다 봉인해야 한다.

(5) Object.freeze()

freeze는 거의 다 위의 seal()과 같다.

다른 점은 해당 값의 변경도 안된다는 것이다.

let exampleObject = { name: "홍길동", age: 23, houseLocation: ["서울", "경기도"] };
Object.freeze(exampleObject);

exampleObject.age = 24;

console.log(exampleObject)
// {name: '홍길동', age: 23, houseLocation: ["서울", "경기도"] }// 해당 값은 변하지 않는다.

3. 읽어볼 만한 글

1. Object 클래스와 내부의 모든 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생

developer.mozilla.org

2. Object.seal()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

Object.seal() - JavaScript | MDN

Object.seal() 메서드는 객체를 밀봉합니다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어줍니다. 하지만 쓰기 가능한 속성의

developer.mozilla.org

3. Object.freeze()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Object.freeze() - JavaScript | MDN

Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의

developer.mozilla.org

끝!

건강하게 살기 위한 6가지 팁

공청 — Sat, 27 May 2023 23:45:08 +0900

최근에 건강검진으로 내가 많이 아프다는 것을 알게 됐다.

인생에서 중요한 게 무엇일까 다시금 생각을 해보면서, 꼭 실천해야만 하는 것들을 적어놓는다.

1. 충분한 만큼 숙면을 취할 것

보통 6~8시간은 자야한다.

2. 몸을 움직이기

웨이트 트레이닝, 달리기, 자전거나 주짓수 등

심박수를 높이고 호흡을 활성화시키자.

3. 많은 양의 햇빛을 아침에 받자

아침 기상 후 많은 양의 햇빛을 받는 것은 중요하다.

4. 먹는 것의 75~80%는 비가공이나 최소로 가공된 식품을 먹자

5. 사회적 관계

친구와 가족들과의 온라인와 오프라인 관계를 건강하게 유지하자.

React로 만든 웹을 모바일 환경에서 공유하고 싶을 때 (WebView, Navigator.share())

공청 — Mon, 22 May 2023 13:48:34 +0900

리액트로 공유 기능을 구현하는게 이렇게나 어렵다니.

바이럴을 통해 수익을 내는 웹 앱을 React 기반으로 만들고 있다.

정확히는 Next.js 13.4 프레임워크를 활용하지만, 결국 내부는 리액트와 JSX다.

애를 먹고 있는게 있는데 바로 안드로이드 웹뷰.

안드로이드 웹뷰(WebView) 객체는 Navigator.share()를 지원하지 않는다.

그래서 iOS에서는 정상적으로 공유를 잘 불러내지만 안드로이드는 그냥 먹통이다.

무슨 일인지 모르겠으나 alert()도 먹히지 않는다.

그래서 여러 글을 찾아보니 아래와 같이 ClipBoard에 주소를 복사하게끔 처리하고 있다.

세상에 쉬운 일이 하나 없다.

참고 할만한 글

1. 순수하게 공유하기에 대해서 공부하기

https://velog.io/@otterji/navigation.share-copyClipboard

[React] 공유하기 기능 완벽하게 구현하기 (Web Share API)

iOS, Android, Web 각 상황에서 공유하기 기능을 구현하는 그 길고도 험난한 과정

velog.io

2. 안드로이드 앱 <-> 웹 페이지 간 통신에 대해서 공부하고 싶을 때

https://sesang06.tistory.com/170

iOS, Android WebView 와 네이티브간의 유용한 통신 방법 - Javascript Interface, Webkit Messaging

개발하고 있는 프로젝트에서 웹뷰는 상당한 레거시로 내려들어왔습니다. 하이브리드로 앱이 개발되었을 시절에 생긴 클라이언트와 백엔드, 웹프론트의 레거시란 레거시가 모두 집약되어 나타

sesang06.tistory.com

3. 카카오톡 공유하기까지 있는 아티클

https://all-dev-kang.tistory.com/m/entry/React-%EC%9A%B0%EB%A6%AC%EC%84%9C%EB%B9%84%EC%8A%A4%EB%A5%BC-%EB%8D%94-%EB%84%90%EB%A6%AC-SNS-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-Navigatorshare

[React] 우리서비스를 더 널리, SNS 공유하기 (Navigator.share)

들어가며 이번에 갑자기 서비스를 운영 중에 팬덤을 타고 SNS에 서비스가 공유되는 일이 발생했었습니다. 그래서 이번 기회에 유저의 편의성을 위해 링크를 만들어 제공하거나 SNS로 바로 공유가

all-dev-kang.tistory.com

Next.js 프레임워크를 다루며 정말 도움된 YouTube 영상들

공청 — Sat, 20 May 2023 00:44:28 +0900

암 온 다 넥스트 레베루 프레임워크의 절대적 룰을 지켜

Next.js 13.4 버전으로 사이드 프로젝트를 진행하고 있습니다.

현재 cloudpages에 올려서 서비스를 하고 있으며, 지금도 여전히 개발하면서 기능을 확장하고 유지하고 있습니다.

Next.js를 배울 때 보면 좋을만한 영상을 공유드립니다.

1. <Image /> 컴포넌트에 대하여

이미지는 참 속 썩이는 아이입니다.

Next.js는 알아서 최적화 해줍니다.

https://youtu.be/ZKG8JBdgSos

2. App Route (App directory)에 대해서 다룹니다.

Next.js 13.4부터는 앱 디렉토리가 stable 버전으로 나옵니다.

단순히 디렉토리만 나눠서 라우팅된다는 것 뿐만 아니라, 그룹으로 묶을 수도 있습니다.

자세한 것은 영상을 확인하시죠.

https://youtu.be/k2IQ-CcE7pk

3. 데이터를 가져오고, SEO에 metadata를 최적화하기

Next.js 프레임워크를 유지보수하는 Vercel의 공식 영상입니다.

https://youtu.be/gSSsZReIFRk

위의 영상들은 풀 코스의 튜토리얼이 아닙니다.

프레임워크의 단면을 볼 수 있는 조각들이죠.

Next.js에서 해메고 있다면 크게 도움이 될 것입니다.

자바스크립트(Javascript)를 더 깊게, 심화해서 알고 싶은 사람에게 권하는 아티클 5개

공청 — Sat, 20 May 2023 00:35:04 +0900

자바스크립트 고수로 향하는 아티클 5개

자바스크립트를 깊게 공부하고 싶은 분께 몇 개의 아티클을 제공해 드립니다.

1. 고급 자바스크립트 배우기 by John Resig

jQuery를 창시한 개발자가 직접 만든 자바스크립트 교육자료입니다.

존 레식 본인의 책인 [자바스크립트 닌자 비급]이라는 책에서 다루는 내용인데, 웹으로 올려놓은 것입니다.

https://johnresig.com/apps/learn/

Learning Advanced JavaScript

johnresig.com

2. 책 <자바스크립트는 왜 그 모양일까?> 요약본

JSON 포맷을 널리 알린 더글러스 크락포드의 책입니다.

정확히 다 알 수는 없지만 대략적인 요약본이니 읽어보고 궁금하면 전문을 사서 읽어보는 것도 좋을지도?

https://www.rinae.dev/posts/how-javascript-works-summary

'자바스크립트는 왜 그 모양일까?' 읽기

더글라스 크락포드의 '자바스크립트는 왜 그 모양일까?' 감상평 및 요약

www.rinae.dev

3. 자바스크립트 문제 풀기

당신은 얼마나 자바스크립트에 대해서 알고 있나요? 이 2개의 링크로 본인의 수준을 확인해 보세요!

- Javascript Questions

https://github.com/lydiahallie/javascript-questions/blob/master/ko-KR/README-ko_KR.md

GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations

A long list of (advanced) JavaScript questions, and their explanations :sparkles: - GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations

github.com

- JS is Weird!

https://jsisweird.com/

Jacob Bergdahl

Software developer, designer, author, writer, and speaker.

jacobbergdahl.com

4. The cost of Javascript

2019년 영상에 대한 글입니다.

자바스크립트 최적화에 대해서 알아봅니다.

https://v8.dev/blog/cost-of-javascript-2019

The cost of JavaScript in 2019 · V8

Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and

v8.dev

5. 지난 3년간 모든 자바스크립트, 타입스크립트의 기능

번역글입니다.

한번 읽어보시는 것을 추천드려요.

https://velog.io/@surim014/All-JavaScript-and-TypeScript-Features-of-the-last-3-years

[번역] 지난 3년간의 모든 자바스크립트 및 타입스크립트 기능

이 글에서는 지난 3년 동안(일부 변경 사항은 더 이전의) 자바스크립트/ECMAScript와 타입스크립트의 대부분의 변경 사항을 살펴봅니다.

velog.io

끝!