🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. 📝 블로그 이사 티스토리 블로그에서 이 블로그로, 그리고 이 블로그에서 새로운 블로그로 옮기게 되었다. 첫 블로그는 티스토리라는 플랫폼에서 시작한 블로그였다. 그리고 이 블로그는 정말 react, gatsby라는 게 뭔지도 모를 때, 아니 거의 js가 뭔지도 모를 때 무작정 템플릿을 가져와서 어영부영 CI/CD를 완성해서 배포한 블로그였다.(그 당시에는 진짜 엄청 뿌듯… 블로그에 글을 쓰면 잔디도 심을 수 있다는 생각에 굉장히 큰 동기부여가 되었다.) 그리고 드디어…!!!!!! 그동안 내심 프론트엔드 개발자라면 스스로 처음부터 개발한 블로그는 하나 있어야하지 않을까 생각했는데, 를 만나고 나서 드…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. 운영체제 운영체제: 컴퓨터 하드웨어를 다루기 쉽게 해주는 소프트웨어. 단순하게 생각하면 컴퓨터라는 하드웨어를 쉽게 다루기 위한 인터페이스를 제공해준다고 생각해도 된다.(물론 이외에도 정말 많은 것들을 관리하지만!) 운영체제의 목적 주어진 하드웨어를 최대한 효율적으로 사용하기 컴퓨터 시스템을 편리하게 사용할 수 있는 환경 제공 *멀티테스킹: 여러 개의 프로그램을 동시에 실행하는 것 => CPU를 빠르게 전환하면서 동시에 실행하는 것처럼 보이게 하는 것 운영체제의 구성 CPU => CPU 스케쥴링: CPU를 효율적으로 사용하기 위해 CPU가 어떤 프로세스를 먼저 실행할지 결정하는 것 메모리 => 메모…

💠 기분전환 아무리 몰입하고 즐겁더라도 매일 공부하고 개발만 하다보면 삶이 다소 피폐(?)해지는 느낌이 들 때가 있다. 어딘가 몸도 뻐근한 것 같고 머리도 무거운 것 같고…! 요즘엔 이런 상태가 오면 빠르게 벗어나기 위한 여러가지 취미 혹은 습관을 만들어보고 있다. 대체로 이런 행동들은 순간적인 기분을 전환시키기 위함인데, 최근에 배드민턴 치기와 무작정 한강으로 드라이브해서 차 안에서 개발하는 게 가장 효과적인 것 같다. 배드민턴은 치다보면 꽤나 몸을 쓰게 돼서 개운하다. 한편 한강 드라이브, 차 안에서 공부는 탁트인 한강을 보면 스트레스도 풀리고 차 안에서 개발까지 할 수 있으니 일석이조다. 예전에 나는 이런 상태가 오더라도 그 자리에 앉아서 무작정 더 머리에 우겨넣으려고 애쓰는 타입이었다.(사실 지금도 완전히 자유롭진 못한 것 같지만) 지금 내가 하는 개발, 공부를 함에 있어서 어떤 게 더 효율적이라고는 말할 수 없다. 다만, 지금 내가 하는 경험들과 시간들이 단순히 개발자가 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Toast 컴포넌트 구현하기 살짝 애매한 감이 있지만, tailwindcss를 사용해서 Toast 컴포넌트를 구현해보았다. 우선 브라우저 하단에서 위로 튀어나오는 토스트와 그 반대로 이동하는 토스트를 구현하고 싶었기 때문에 아래와 같이 tailwindcss config를 설정하였다. 이렇게만 하면 사실 거의 끝이 났다. 이제는 토스트 컴포넌트를 구현하면 된다. 토스트 컴포넌트는 아래와 같이 구현하였다. props로 children과 direction을 받아서 토스트의 내용은 children으로 전달하고 위에서 구현했던 애니메이션 중 하나를 direction에 따라서 적용하도록 하였다. 이제 토스트…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Next.js의 Parallel Routes Next.js의 Route 관련 공식문서를 보다가 재미있는 기능을 발견했다. 바로 Parallel Routes이다. 말 그대로 평행으로(병렬로) 라우팅을 할 수 있는 기능이다. layout.tsx 컴포넌트를 기준으로 해당 파일이 위치한 곳에서 폴더명 앞에 를 붙이면 해당 폴더의 이름에 해당하는 컴포넌트는 layout.tsx 컴포넌트의 props로 가져올 수 있다. 말로 하면 되게 복잡해보이는데 아래 예시를 보면 이해가 쉽다. 이 때 또 중요한 게 있다. 바로 인데, 이 파일의 역할은 위와 같이 동일한 위치에서 다른 컴포넌트는 그 내부에 경로가 있는데 다…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Next.js에서의 svg 보통 React를 사용할 때는 아래와 같이 svg 파일을 React Component로 변환해서 사용하곤 했다. 그런데 Next.js에서는 이렇게 사용하면 에러가 발생한다. 이유는 Next.js에서는 svg를 모듈로 인식하지 않기 때문이다. Next.js에서 svg를 사용하는 방법은 여러가지가 있는데 그 중 2가지를 기록해둔다. 1. import 후 Image 컴포넌트 사용(비추) 이 방법은 사실 정말 간단하다. svg를 import하고 Image 컴포넌트를 사용하면 된다. 하지만 이 방법은 svg를 React Component로 변환하는 것이 아니라 그냥 이미지로 사용…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. useReducer 사실 그동안 에 대해서 라는 생각을 자주 했었다. 내가 다루는 프로젝트 수준에서의 상태가 그렇게 복잡하지도 않았고, 애초에 그렇게 복잡하게 관리되는 상태라면 여러개의 state로 분리하는 게 개인적으로는 개발자 경험에도 좋다고 생각했기 때문이다. 또 그러다가 상태를 핸들링하는 함수가 다소 복잡하거나 지저분하면 그 부분만 커스텀 훅으로 분리하기만 해도 충분하다고 생각했기 때문이다. 그러다 오늘 강의를 듣고 테스트 코드를 작성하면서 의 필요성을 느꼈다. 앞에서 말했던 것처럼 사실 잘 분리하고 조작만 한다면 로도 충분히 깔끔한 코드를 짤 수 있다고 생각한다. 다만, state를 다루…

이 글은 스터디에서 리액트 톺아보기 2. Intro를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼는 …

이 글은 스터디에서 리액트 톺아보기 1. Preview를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Next.js의 Image src 에러 Image 컴포넌트의 src에 백엔드에서 받아온 이미지 url을 넣어주었는데, 아래와 같은 에러가 발생했다. 이는 Next.js 공식문서에서도 확인할 수 있는데, 외부 url을 통해 이미지를 가져올 때 악성 이미지를 가져오지 않기 위함이라고 한다. 해결법은 생각보다 너무 간단하다. 파일을 생성하고 아래와 같이 작성해주면 된다. PWA가 가능하게 해주는 서비스워커? 서비스워커란 우리가 작성한 웹 앱을 브라우저가 백그라운드에서 실행할 수 있게 해주는 브라우저 기능이다. 기본적으로 서비스워커는 우리 서비스의 실행유무와 상관없이 백그라운드에서 실행되기 때문에 브라…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Swiper UX 개선 Swiper를 이용해서 Carousel을 구현 후, 배포하여 핸드폰에서 동작시켜보았다. 그런데 웬걸 슬라이드 UX가 뚝뚝 끊기면서 작동했다. 이 부분을 혹시 공식문서에서 지원하나 해서 찾아보았는데 다행히 라는 옵션을 제공하고 있었다. 이 옵션을 적용하니 슬라이드 UX가 매끄럽게 동작했다. 적용하고 나서 슬라이드가 아주 매끄럽게 동작하게 되었다. 다만 문제는 데스크탑에서 터치 슬라이드가 되질 않는다는 것이었다. 구글링도 해보고 이것저것 다 해봤지만 적용 후에는 어쩔 수 없는 것 같다. 그래도 유저에게 슬라이드를 넘겨줄 수 있는 UX를 제공하기 위해 Navigation 버튼을…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Swiper 사용 후기 기존 react로 프로젝트를 할 때는 열심히 적용해보려다가 계속 ui가 깨져서 포기하고 직접 Carousel 컴포넌트를 구현했다. 직접 구현한 것까진 좋은데, 아무래도 touch slide나 확장성면에서 완성도가 많이 떨어졌다.(조금만 건드려도 부서질 것만 같은 컴포넌트…) 그래서 이번엔 다시 각잡고!!! swiper를 열심히 뜯어보면서 적용해보았다. 하… 이렇게 편하고 쉬운 건 줄 알았더라면… 허허 우선 swiper에서는 다양한 기능을 가진 module들을 지원하고 있다. 아래와 같이 사용하면 된다. 추가 1) 보통 slide가 변경될 때마다 콜백을 실행하려고 를 사용했는…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 50년 만에 이 벌어질 위기 이스라엘에 선 미국, 팔레스타인에 선 이란 둘의 대리전으로 흘러갈 수도… 글로벌 금융 시장 - 주요 원유 산지 중동에 지정학적 리스크가 불거지자 유가 급등 🗞 키워드 국제 정세, 전쟁, 유가 🔤 단어 정리 Proxy War: 대리전. 두 단체가 충돌했을 때, 이 두 단체를 지원하는 더 큰 규모의 단체의 충돌로 이어지는 경우 🤔 내 생각 팔레스타인 하마스의 선제공격으로 700여 명의 사망자, 이에 대한 이스라엘의 보복으로 400여 명의 사망자가 발생했다고 한다. 전쟁이라는 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. next 컴포넌트 구성하기 어느정도 프로젝트 시작 전 여러 세팅은 마무리하고 컴포넌트 구성을 하려니 생각보다 많은 고민이 필요했다. 13버전부터는 컴포넌트 별로 클라이언트, 서버 컴포넌트를 분리해서 사용할 수 있게 되었다. 그래서 컴포넌트를 구성할 때 어떤 컴포넌트를 사용할지 고민이 필요했다. 기본적으로는 최대한 SSG로 구성하고 그 뒤에 유저와의 인터렉션이 있는 경우에는 클라이언트 컴포넌트, 데이터가 자주 변경되는 경우에는 SSR로 구성하기로 했다. 물론 그럼에도 헷갈리는 부분들이 존재하기는 한다. 예를 들어, 서버에게 이미지들을 가져와서 그 이미지를 나열하고 그 이미지를 유저가 선택해서 어떤 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. tailwind theme with light, dark mode 보통 우리가 주어진 디자인을 토대로 개발하게 될 때는 정해진 색상, 크기, 폰트 등을 정해두고 시작한다.(더욱이 디자이너분께서 잘 정리된 디자인 시스템 형태로 작성해주시면 최고!) 즉, tailwind의 모든 값들을 사용할 필요가 없다는 것이다. 이럴 땐 를 이용해서 필요한 값들만 정의해두고 사용하면 된다. 단, 주의할 점은 위와 같이 theme을 설정하게 되면 기존의 tailwind 값들은 모두 무시된다는 것이다. 따라서 기존의 tailwind 값들을 사용하고 싶다면 를 이용해서 추가해주어야 한다. 잘 정의된 theme 값들이 있…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. tailwind dark mode tailwind에서 다크 모드를 적용하는 방법은 크게 2가지가 있다. 각각 와 를 이용하는 방법이다. media 따로 설정을 하지 않아도 기본적으로 적용되는 방법이다. 간단하게 를 붙여주기만 하면 현재 내 환경의 시스템 설정에 따라서 다크 모드가 적용된다. class 를 이용하는 방법도 간단하다. 일단 tailwind.config.js에서 를 로 설정해준다. 그리고 를 이용해서 다크 모드를 적용하고 싶은 곳에 를 붙여주면 된다. 그런데 이 때, 를 붙여주는 것만으로는 다크 모드가 적용되지 않는다. 를 붙여주고 싶은 곳에 를 붙여주면 된다. 이 때, 보통 특정 태그…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. Next.js 기존에 React로 진행했던 베스트 라빈스 프로젝트를 Next.js로 마이그레이션 하기로 했다. 사실 처음부터 베스트 라빈스는 Next로 진행하고 싶었다. 왜냐하면 서비스 제공 및 유지 보수에 초점을 맞추고 시작한 프로젝트라서 SEO에 강점을 주고 싶었기 때문이다. 하지만 프로젝트 시작 전에 급하게 Next를 배우면서 진행하기에는 주어진 10일이라는 시간 동안 MVP 조차 완성하지 못할 거 같아서 React로 진행했었다. MVP 개발이 끝나고 마침 시간이 나서 Next로 마이그레이션을 하기로 했다. PWA 적용과 Open Graph Next도 React와 마찬가지로 PWA를 지원한다…

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 원티드 인턴십 마무리 길다고 생각했던 한달이 빠르게 지나, 인턴십이 마무리되었다.(개발 세션은 마무리되고 커리어 세션은 아직 진행중이지만 ㅎㅎ) 솔직히 기대했던 것보다 너어무 내용이 좋아서 주변 동료들에게도 추천했을 정도였다. 아무래도 멘토 역할을 맡아주신 연욱님의 역할이 가장 컸다. 단순히 지식을 전달해주는 느낌의 개발 세션이 아니라, 언어 자체의 가치관과 라이브러리의 기원(?) 등의 근본적인 부분에 집중한 세션을 구성해주셔서 정말 도움이 많이 되는 시간이었다. 그리고 동일한 프로젝트를 개인적으로 진행하고 동료와 함께 서로 회의를 통해 best practice로 재구현하는 과정은 이전에는 해본 적 없는 새로운 느낌이었다. 다른 사람의 코드를 읽고 보는 게 쉽지 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Next.js Serverless 서버리스는 기보다는 개발자가 따로 는 정도의 의미이다. Next.js에서는 api 폴더만 만들어서 그 안에 정해진 함수를 작성하면 서버리스로 api를 만들 수 있다. 이렇게 만든 api는 와 같은 형태로 접근할 수 있다. Next.js의 정확한 서버 구축 방식이 어떻게 되는지는 모르겠지만 vercel과 aws의 파트너십을 보면 aws의 람다를 통해서 서버리스를 구현하는 것 같다. Loading UI Next는 리액트의 Suspense Boundary를 사용하여 로딩 UI를 편하게 구현할 수 있게 해준다. 로딩을 주고 싶은…

🍨 베스트라빈스 프로젝트 약 10일동안 기획부터 디자인, 개발까지 진행한 베스트라빈스 프로젝트. 동료에게 추천받아 알게된 포텐데이를 통해 지원했고 좋은 기획자분과 디자이너분을 만나서 열심히 달려볼 수 있었다. 사실 매일매일 회고를 작성하려했는데, 10일이라는 짧은 시간동안 하나의 서비스를 MVP까지 완성하는 게 쉬운 일이 아니었다. 해서 우리 팀이 10일 동안 어떤 과정을 거쳐서 프로젝트를 진행했는지, 그리고 나는 어떤 역할을 맡아서 어떤 공부를 했는지에 대해 회고해보려고 한다.(1차 회고인 이유는 이후에도 몇몇 기능을 더하고 리팩토링을 진행할 예정이기 때문이다!) 베스트 라빈스: 배포 링크 1. 아이디어 회의 및 팀 목표 설정 각자 어떤 서비스를 하고 싶은지 생각해오기로 했다. 여러가지 아이디어들 중 우선 10일 안에 MVP 기획 및 디자인, 개발이 가능하고 추후 확장이 가능한 아이템을 고르기로 했고 그 결과 를 개발하기로 했다. 구체적인 기획과 디자인, 추천 방법은 정해지지 않…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 로톡: 변호사 소개 플랫폼 2년 넘게 이어진 로톡과 변협 간 갈등이 사실상 로톡의 승리로 마무리 로톡에 가입한 변호사 회원에 대한 징계 처분 취소 결정 🗞 키워드 IT, 리걸테크 🔤 단어 정리 없음 🤔 내 생각 IT 카테고리에서 잊을만하면 한 번씩 등장했던, 로톡과 변협의 갈등..! 아무래도 개발자인 나는 당연히 로톡이 이겨야한다고 생각했고 그래야만 보수적인 산업 영역도 개발과의 융합에 물꼬를 틀 수 있을 것이라 생각했다. 어떤 뒷배경이 있었는지는 알 수 없으나, 드디어 로톡이 승리했다는 기사를 보고…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 favicon이 변경되지 않을 때 해결법 프로젝트를 시작하면서 디자이너분께서 만들어주신 아이콘으로 favicon에 적용했다. 그런데 아무리 새로고침을 해보고, 페이지 캐시도 지워봐도 변경되지 않았다. 그러다가 방법을 찾았는데 아래와 같이 을 명시해줌으로써 브라우저가 새로운 favicon을 가져오도록 할 수 있다. 기존 변경 PWA PWA란 Progressive Web App의 약자로, 웹과 앱의 장점을 결합한 것이다. 웹의 장점은 브라우저에서 접근할 수 있다는 것이고, 앱의 장점은 오프라인에서도 사용할 수 있다는 것이다. 이러한 장점을 결합한 것이 PWA…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 (Forward) Proxy vs Reverse Proxy Proxy: 대신하는 대리의 역할 (Forward) Proxy Server: 을 하는 서버 클라이언트의 IP를 숨길 수 있다. 해당 네트워크에 있는 클라이언트들의 특정 웹사이트 접근을 제한할 수 있다. (공통) 요청에 대한 응답을 캐싱할 수 있다. Reverse Proxy Server: 을 하는 서버 서버의 IP를 숨길 수 있다. Proxy에서 로드밸런싱을 함으로써 서버의 부하를 줄일 수 있다. (공통) 요청에 대한 응답을 캐싱할 수 있다. HTTP vs HTTPS(feat. TLS handsha…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Next.js: page routing vs app routing page routing(v.12) 디렉토리에 파일을 생성하면, 해당 파일의 이름을 URL로 사용할 수 있다. 보통 원하는 page의 이름에 해당하는 폴더를 만들고 그 폴더 안에 파일을 생성한다. 그러며 폴더 구조에 따라 URL이 결정된다. app routing(v.13) 디렉토리에 page를 생성하면, 해당 파일의 이름을 URL로 사용할 수 있다. Next.js: Client Component vs Server Component Client Component 말 그대로 클라이언트 즉,…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 이스라엘 100개 vs 한국 22개 모란 로브벤처스는 이스라엘의 스타트업 원동력으로 실패를 꼽음 “실패는 결코 좌절을 가져오는 것이 아니다.” 🗞 키워드 IT, 실패 🔤 단어 정리 없음 🤔 내 생각 이스라엘 100개, 한국 22개. 기업가치 10억달러 이상인 유니콘 기업의 숫자다. 심지어 이스라엘의 인구수는 1,000만 명, 한국은 5,000만명이다. USB를 최초로 발명하고 여러 성공적인 창업을 경험한 모란 로브벤처스는 그 이유를 에서 찾았다고 한다. 이스라엘은 대부분의 청년들이 창업을 시도할 때부…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Cypress E2E 테스트를 위한 라이브러리. 와는 달리 는 브라우저에서 동작한다. 보통 유저의 행동을 테스트하기 위해 사용한다. 오늘 jest와 RTL로 각 컴포넌트 단위의 테스트 코드를 작성하고 Cypress로 간단한 유저의 행동 양식에 맞는 E2E 테스트 코드를 작성했다. Cypress 자체가 브라우저 UI 단에서 실제 유저의 액션을 보여준다는 점에서는 좋지만, jest와 RTL 만으로도 간단한 유저 행동은 테스팅할 수 있는 것 같아서 Cypress의 효율성에 대해서는 의문이 든다. Test 코드 양식 멘토님께서 가르쳐주신 대로 테스트 코드마다 s…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 테스트 코드 소프트웨어 테스트는 이다. 테스트 코드는 이다.(개발자는 항상 뭐든지 자동화하려고 노력해야 한다!!! 효율적으로 살자!!!) 테스트 코드를 작성함으로써 빠른 주기로 내 코드에 대한 피드백을 받을 수 있다. 실시간으로 개발 중에 피드백을 받을 수 있다. 즉, 코드를 작성함에 있어서 더 확신을 갖고 작성할 수 있다. 테스트 코드 대상의 규모에 따라 단위 테스트, 통합 테스트, E2E 테스트로 나눌 수 있다. 단위 테스트: 함수, 모듈, 클래스 등의 단위를 테스트하는 것 통합 테스트: 단위 테스트를 통합하는 것 E2E 테스트: 사용자의 관점에서 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Recharts Recharts는 React를 위한 라이브러리로, SVG 기반의 차트를 쉽게 구현할 수 있도록 도와준다. Recharts는 다양한 종류의 차트를 지원한다. 또한, ResponsiveContainer, ComposedChart 등의 api를 통해 반응형 및 다양한 형태의 차트를 구현할 수 있다. d3가 아닌 Recharts를 사용한 이유는 확장성에 있어서는 d3가 더 유연하고 강력하지만, Recharts는 이름처럼 React를 위한 컴포넌트를 제공하기 때문에 React와의 호환성이 더 좋다고 생각했다. 또한, 현재 진행하는 미션 프로젝트에서…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Next.js Next.js는 다양한 라이브러리를 조합하는 React를 사용하는 개발자들을 위한 프레임워크이다. 아래와 같은 것들을 지원한다. 풀스택 기반 File-based routing(파일 기반 라우팅) 최적화 ex) SEO, Image, Font SSR 뿐 아니라 다양한 형태를 결합한 하이브리드 렌더링 제공 리액트로 구현한 어플리케이션은 기본적으로 CSR 방식으로 렌더링을 한다. 그러다보니 초기 로딩속도, SEO, 보안 등의 단점이 존재한다. 이를 보완하기 위해 SSG 방식이 등장했다. SSG 방식은 빌드 시점에 미리 페이지를 렌더링하여 정적인 페…

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 원티드 인턴십 원티드 인턴십 프로그램에 지원했다. 4주동안의 개발 세션 과정과 2주동안의 커리어 세션 과정으로 나누어지는 인턴십 프로그램이다. 지금 이 글을 적는 시점에는 이미 조금 진행을 마친 상태인데, 개발 세션 과정에 너무너무너무 만족하고 있다. 리액트에 대한 기본기를 매주 미션으로 익히고 팀원들과 함께 다시 한번 협업하며 코드를 작성하니 더 성장하는 기분이 든다.(같은 기획과 내용이 주어져도 이렇게 다르게 코드를 짠다는 게 참 신기하다.ㅋㅋㅋ) 함수형 코딩 스터디로 진행 중인 책을 거의 다 읽었다. 여전히 객체지향을 처음 접했을 때만큼의 임팩트는 없지만, 막연하고 추상적이었던 함수형 코딩에 대해서 조금은 실용적으로 배울 수 있어서 도움이 됐다. 아무래도 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 html의 tabindex html의 tabindex는 키보드로 포커스를 이동할 수 있는 요소를 지정하는 속성이다. 이 속성을 사용하면 키보드로 포커스를 이동할 수 있는 요소를 지정할 수 있다. 이 때, tabindex의 값은 숫자이며, 0이면 포커스를 받을 수 있고, -1이면 포커스를 받을 수 없다. 또한, 숫자가 클수록 우선순위가 높다. 그러나 mdn에서는 0보다 큰 숫자 사용을 지양할 것을 권장하고 있다. (유저에게 있어 UX적으로 더 혼란을 줄 수 있기 때문이다.) React에서 특정 element를 ref로 참조하고 해당 element에 포커스를…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 React: Context API 그동안 그냥 막연하게 Context API를 와 자연스럽게 연관지어서 생각했었다. 헌데 오늘 세션을 듣고서 왜 Context API인지, 어떤 상황에서 Context API를 사용하는 게 적절하지, 그리고 실제 Context를 어떻게 분리하고 각각을 관리하는 게 좋은지 알게 되었다. 일단 다른 컴포넌트에게 문맥을 전달한다는 의미에서 Context API라는 게 충격… 덧붙여 Context API와 useState 혹은 useReducer를 같이 사용하면 이제서야 의 역할을 수행할 수 있게 된다. MSW의 원리 프로젝트 진…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 DNS Domain Name System의 약자로, 도메인 주소를 IP 주소로 변환하는 시스템이다. DNS가 존재하는 이유는 우리가 어떤 웹 사이트에 접속할 때, 단순히 숫자로만 이루어진 IP 주소를 입력하는 것보다 의미를 갖는 문자로 된 도메인 주소를 입력하는 것이 더 편리하기 때문이다. DNS는 OSI 7계층에서 HTTP와 같이 응용 계층에 속한다. (도메인 주소를 통해 IP 주소를 요청하는 것이니) 우리가 도메인 주소를 입력하면 처음 Local DNS Server(Resolver, 주로 Internet Service Provider)에게 도메인 주소…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ Error Boundary Error Boundary란 를 의미한다. 즉, 특정 Error Boundary로 감싸여진 구간에서 에러가 발생하면 그 에러를 잡아내서 처리할 수 있다는 것이다. 이에 대한 개념을 적용한 Error Boundary 컴포넌트를 리액트에서는 공식문서를 통해 제공하고 있다. 먼저 리액트 공식문서에서 설명하는 Error Boundary를 살펴보자. 아래는 리액트 공식문서를 번역하여 정리한 내용이다. 리액트는 기본적으로 어플리케이션에서 에러를 던진다면 화면으로부터 UI를 지울 것이다. 이것을 방지하기 위해서는 컴포넌트들을 Error Boundary로 감싸야한다. Error Boundary는 특별한 컴…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 무한 스크롤 이제는 많이 익숙해진 UX로, 유저가 스크롤을 내릴 때마다 특정 위치에서 data를 불러오는 방식이다. 이를 통해 유저는 더 많은 데이터를 볼 수 있고, 서버는 불필요한 데이터를 보내지 않아도 된다. 예전에는 유저의 viewpoint의 위치를 계산하여 특정 위치에 도달하면 데이터를 불러오는 방식이었다면, 이제는 Intersection Observer API를 사용하여 특정 요소가 viewport에 들어오면 데이터를 불러오는 방식으로 구현한다. Intersection Observer API는 브라우저가 요소의 위치를 계산하는 것이 아니라, 브라…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Git Actions GitHub에서 제공하는 CI/CD 서비스 GitHub에서 제공하는 가상 환경에서 코드를 실행할 수 있다. Git Actions에서 제공하는 여러 yaml 파일을 통해 원하는 스크립트를 실행할 수 있다. (추가) CI는 단순히 빌드뿐 아니라, 테스트까지도 포함한다. 서브넷 마스크 IP 주소를 나누는 기준이다. IP 주소는 크게 네트워크 ID와 호스트 ID로 나눌 수 있다. 서브넷 마스크 또한 1과 0의 조합으로 이루어진 32비트이며 1은 네트워크 ID를, 0은 호스트 ID를 나타낸다. IP 주소와 서브넷 마스크를 AND 연산하면 네트…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 AWS - S3, CloudFront, Route53 그리고 Certificate Manager S3: 정적 파일을 저장하는 서비스 CloudFront: CDN 서비스 Route53: 도메인을 구매하고 관리하는 서비스 Certificate Manager: SSL 인증서를 발급받고 관리하는 서비스 위의 서비스를 이용해서 간단하게 정적 웹사이트를 배포할 수 있다! MemoryRouter react-router-dom의 컴포넌트 주로 테스트를 위해 사용한다. BrowserRouter와는 코드를 실행하는 환경의 차이가 있다. BrowserRouter는 브라우저 …

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 husky 위의 코드가 가장 일반적인 pre-commit과 pre-push hook을 설정하는 방법이다. 이 때, husky v5 이전에는 으로 작성했었는데(format 후에 다시 staging 해야해서), v5 이후에는 해주지 않아도 알아서 변경사항만 staging 해준다.(vscode의 source control로 commit해보면 그 차이를 확실히 알 수 있다.) typeof null의 함정 은 이다. 이는 자바스크립트의 오래된 버그이다! 기억하자! custom-hook 생각보다 커스텀 훅은 작성하기 쉽다. 다만 무분별하게 작성하면 오히려 코드가 더…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 husky git hook을 쉽게 관리할 수 있게 도와주는 패키지이다. git hook은 git의 특정 이벤트가 발생했을 때 실행되는 스크립트이다. 예를 들어, 이라는 git hook은 commit을 하기 전에 실행되는 스크립트이다. 또, 라는 git hook은 push를 하기 전에 실행되는 스크립트이다. useEffect vs useLayoutEffect useEffect는 렌더링이 완료된 후, 즉 브라우저가 repaint까지 완료된 후에 실행된다. useLayoutEffect는 렌더링이 완료된 후, 브라우저가 repaint하기 전에 실행된다. reac…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. ⚛️ 키워드: 직관적이고 쉽고 간단하게 작성 Stateless vs Stateful Stateless: 상태가 없다. 즉, 매번 요청마다 모든 정보를 새로 전달해야 한다. Stateful: 상태가 있다. 즉, 매번 요청마다 모든 정보를 새로 전달하지 않아도 된다.(이전 요청의 상태를 기억하고 있으니까) Connectionless 연결을 유지하지 않는다. 즉, 매번 요청마다 연결을 새로 맺어야 한다. HTTP 요청마다 TCP 연결을 맺고 끊는다. HTTP/1.1에서는 Keep-Alive라는 기능을 통해 연결을 유지할 수 있다.(사실 1.1 전부터 있었지만, 1.1에서는 기본적으로 활성화되어있다.) 과…

🤩 참고 유튜브: 리처드 파인만, 20세기의 천재 과학자?! [안될과학 - 과학자열전] 나무위키: 리처드 파인만 디지털 시대에도 효과적인 파인만 학습법 Richard Feynman 리처드 파인만 공부법 모음 리처드 파인만의 공부법 ✅ 파인만 은 10대 이전부터 물리에 재능을 보인 신동으로, 물리학 발전에 크게 공헌한 물리학자다. 뿐만 아니라 그는 어려운 개념을 쉽게 설명하는 것으로도 유명했는데, 덕분에 파인만을 라고 부르기도 한다. 어려운 개념을 쉽게 학습하고 설명하는 방법을 이라고 하는데, 이 방법을 적용하면 어려운 개념을 쉽게 이해할 수 있을 뿐만 아니라, 학습한 내용을 다른 사람에게 설명할 수 있을 정도로 이해하게 된다. 개발 공부를 시작하고 매일 매일 꾸준히 학습을 하면서 라는 질문에 쉽게 대답을 하지 못했다. 이에 대한 답을 찾기 위해 의 학습법을 참고하여 새로운 글쓰기 방식을 도입하게 되었다. 평소에 사람들에게 설명하는 걸 좋아하는 편이라, 나에게 잘 맞을 것 같았고 를…

🚤 성장일지 7.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! ⚛ (7.0)<완전 개편> 을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다. 성장일지 회고 및 7.0 버전으로 들어가며… 어느덧, 이렇게 거의 매일 성장일지를 작성한지 1년이 되었다. 그 과정에서 지속적으로 성장일지를 작성하는 방법을 고민하고 발전시켜나가면서 나름의 틀을 만들어갈 수 있었다. 성장일지를 통해서 그나마 매일 조금씩 어제의 나보다 얼마나 나아가고 있는지 확인할 수 있었다. 다만, 최근 이렇게 매일 일지를 쓰는 방식이 근본적으로 맞는지 의문이 들기 시작했다. 아니 정확히 말하면 좀더 효율적인 방법으로 나를 성장시키고 그 성장을 좀더 쉽게 확인할 수 있는 방법은 없을까 계속 고민이 들었다. 새로운 방법 - 파인만 학습법 새로운 글쓰기 방식으로 라는 별명을 가진 의…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자! 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈) ☀️ 오늘의 경험 pushState()와 popstate 이벤트 정말 단순하게 생각하면 는 어떤 상태와 함께 url을 변경하고 history stack에 새로운 상태를 추가하는 것이고, 이벤트는 history stack에서 상태…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자! 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈) ☀️ 오늘의 경험 Server-Side Routing vs Client-Side Routing 보통 과 을 구분해서 이야기하는 경우가 많다. 하지만 이 둘을 방식에 따라서도 구분할 수 있다는 것을 알게 되었다. SSR(Serve…

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 한여름의 더위 7월이 끝난지 일주일이나 지나서 지난 회고를 적는다. 장마가 껴있어서 그런지 7월은 조금은 시원(?)했던 기억이 없잖아 있다면(정확히는 비에 대한 기억이 더 강하다면), 8월은 정말 이제 일주일짼데 쨍쨍한 더위만이 생각나다. 덥다 덥다 하면 더 더울 것 같아서 말하고 싶지 않은데, 어떤 날은 정말 너무 심하게 덥다. 푹 익는다 못해 녹는 기분이다. 🫠 그럼에도 여름만이 주는 묘한 시원함, 청량감이 있어서 매일매일 기분이 좋다. 수료후 한달 진짜 이 말도 별로 안쓰고 싶은데, 어찌 시간이 이렇게 빠르게 흘러가는지… 코드스쿼드 과정을 수료했다고 6월 회고를 적은 게 얼마전 같은데 벌써 1개월이 지나있다. 돌이켜보면 정말 열심히 살았다. 매일 정말 최선…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자! 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈) ☀️ 오늘의 경험 요구 사항을 잘 보고 오버코딩하지 말자 오늘도 알고리즘 문제를 풀었다. 문제 자체는 number[]와 number가 주어지고 number[]에서 주어진 number와 같은 숫자들을 제외하는 문제였다. 사실 평소에…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 7. 신뢰할 수 없는 코드를 쓰면서 불변성 지키기 레거시 코드 혹은 신뢰할 수 없는 코드로부터 코드를 보호하기 위한 방어적 복사 얕은 복사와 깊은 복사의 차이 와 구분 우리가 신뢰할 수 없는 코드와 소통할 때, 방어적 복사를 사용한다. 앞에서 배운 는 안전한 코드 내에서 불변성을 지키면서 코드를 작성하는 방법이다. 직접 내부 코드를 로 변경하여 불변성을 지키는 방법도 있겠지만, 그렇지 못한 상황들이 있다. 예를 들면우리가 직접 코드를 수정할 수 없는 라이브러리 혹은 레거시 코드를 사용하여 데이터를 변경해야할 때이다. 그렇다면 우리가 불변성을 지…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자! 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈) ☀️ 오늘의 경험 monorepo 모노레포는 하나의 저장소에 여러 프로젝트를 관리하는 것을 말한다. 이렇게 하면 여러 프로젝트를 한 번에 관리할 수 있고, 공통된 패키지를 사용할 수 있다. 오늘 내가 공부한 내용에서 나온 모노레포…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자! 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈) ☀️ 오늘의 경험 웹소켓 프로토콜 HTML5 표준 기술 HTTP 환경에서 클라이언트와 서버 사이에 하나의 TCP 연결을 기반으로 을 가능하게 한다. 전이중 통신: 일반적인 HTTP 통신과 다르게 양방향으로 진행되는 통신 웹소켓 기…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 들어가기에 앞서 이 글은 원티드에서 주관하는 프리온보딩 프론트엔드 챌린지 8월 - 리액트 리팩토링 실전가이드: 테스트부터 최적화까지 에 제출할 사전과제를 기반으로 작성한 글입니다. 🗂️ 1) 테스트 1-1) 유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요 유닛테스트 실행 가능한 가장 작은 단위의 소프트웨어(주로 )를 테스트 일반적으로 함수, class의 method 단위로 진행한다. 가장 작은 단위를 테스트하는만큼 좀더 직관적이고 빠른 테스트가 가능하다. 사실상 테스트의 기본이라고 할 수 있다. JS 진영에서는 주로 를 사용한다. 통합테스트 유닛테스트보다는 큰 단위의 소프트웨어를 테스트 개발자가 변경할 수…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 6. 변경 가능한 데이터 구조를 가진 언어에서 불변성 유지하기(feat. JS) 데이터가 바뀌지 않도록 적용하기 깊이 중첩된 데이터에도 적용하기 이해하기 1) 동작을 읽기, 쓰기 혹은 둘 다로 분류하기 : 데이터를 바꾸지 않고 정보를 꺼내는 것 인자에만 의존해서 정보를 가져오는 읽기는 즉, 이 된다. : 데이터를 바꾸는 것 변경되는 데이터가 어디에서 사용될지 알 수 없기 때문에 이 필요하다. : 데이터를 바꾸면서 정보를 꺼내는 것 2) 카피-온-라이트 원칙 세 단계 복사본 만들기 복사본 변경하기 복사본 반환하기 2-1) 배열의 카피-온-라…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 5. 더 좋은 액션 만들기 암묵적 입력과 출력을 제거해서 재사용하기 좋은 코드 만들기 복잡하게 엉킨 코드를 풀고 더 좋은 코드 만들기 모든 액션을 없앨 수는 없다. 액션은 필요하다. 하지만 암묵적 입력과 출력을 줄임으로써 액션을 최소화할 수 있다. 1) 비즈니스 요구사항과 설계 고려하기 기계적인 리팩토링만이 항상 최선의 구조를 만들어주진 않는다. 비즈니스 요구사항을 고려해야 한다. 비즈니스 요구 사항: 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 기능 아래 함수는 비즈니스 요구사항인 에 대한 내용 없이 과 에 대한 내용만을 가지고 있…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 회고 이것저것 많이 하고 금요일 밤도 즐겁게 보낸 하루였다. :) 세워놓은 계획들 중에서 너무 개발이나 공부에 치중하는 경향이 있는 것 같은데, 남은 주말에 이력서에 좀더 집중해보려 한다. 🫧 오늘의 고민 프로젝트 - 세컨드 핸드: 동네 설정 api 부분을 수정하면 좋지 않을까? 기존 우리 프로젝트에서는 …

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 새로운데 아직 적응이 되질 않는 느낌..?! 오늘은 처음으로 아웃풋 기반의 계획을 작성해보았다. 아직 아웃풋을 중심으로 계획을 세우는 게 쉽진 않지만, 그래도 뭔가 좀더 가시적인 결과에 초점을 맞추니까 스트레스도 덜한 것 같고 뭔가 더 명확한 하루가 되는 것 같다. 물론 아직 서툴러서, 아주 효율적이…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 4. 액션에서 계산 빼내기 함수로 정보가 어떻게 들어가고 나오는지 이해하기 테스트하기 쉽고 재사용성이 좋은 코드를 만들기 위한 함수형 프로그래밍 이해하기 액션에서 계산을 분리하는 방법 알기 1) 변경 전 코드 2) 명시적 입력/출력, 암묵적 입력/출력 명시적 입력: 함수의 인자로 전달되는 값 명시적 출력: 함수의 반환값 암묵적 입력: 전역변수를 읽는 등 인자 외의 다른 모든 입력값 암묵적 출력: console.log(), DOM 변경, 전역변수 변경 등 반환값 외의 다른 모든 출력값 암묵적 입력과 출력: 3) 변경 절차 계산에 해당하는 코드를 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 MS의 챗GPT가 탑재된 챗봇 빙을 출시했지만 구글에는 큰 영향을 주지 못했다. 검색 광고 부문 매출이 전년 대비 26억 달러 증가(전체는 약 7% 증가) 물론 MS도 전년 대비 8% 증가 🗞 키워드 IT, 검색, 구글, MS 🔤 단어 정리 없음 🤔 내 생각 처음 챗GPT가 상용화되었을 때, 마음속으로 생각했었다. 특히나 개발을 하고 있는 나로서는 챗GPT가 제공해주는 정보와 편리함이 너무 막강했기 때문이다. 정말 단순한 코드 정도는 웬만하면 작성해주고, 가끔 헷갈리는 용어나 CS 개념 또한 굉장히…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 그 동안 뭔가 조금 계속 답답하다는 느낌을 받았는데, 이제 그 방향을 조금 알 것 같다. input이 아닌 output을 중심으로 계획을 세우자. 지금까지 내가 세운 계획들은 대부분 input을 중심으로 세웠다. 이제부터는 input이 아닌 에 집중해서 계획을 세워보려 한다. 그리고 그 output이…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ 작성하게 된 이유 바닐라 JS로 간단한 기능을 구현하다가 Proxy 객체를 알게 되었다. 이전에도 살짝 공부는 했었지만, 개념은 기억이 나도 객체 자체의 사용방법은 기억이 나질 않아서 정리하게 되었다. 🗂️ Proxy Proxy는 주로 , , 등의 의미를 갖는다. 흔히 우리가 라고 부르는 스파이 느낌의 단어도 Proxy에서 유래된 것이다. IT 용어로 Proxy(프록시)가 사용되는 다양항 상황이 있다. 우선 Proxy 서버라고 하면 라고 생각하면 된다. 클라이언트가 서버에 요청을 보내면 Proxy 서버가 요청을 받아서 서버에 요청을 보내고, 서버가 응답을 보내면 Proxy 서버가 응답을 받아서 클라이언트에게 응답을 보내…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 흐… 오늘은 뭔가 이것저것 많이 한 것 같으면서도 안한 느낌이다. 저녁 전까지 빡세게 공부하다가 webstorm의 메모리 점유율을 보고 그냥 넘길 수가 없었다. 무엇보다 아주 느린 건 아닌데 미묘하게 느려진 속도가 너무 거슬렸다. 그래서 vsc로 갈아타면서 기존에 잊고 있던 단축키부터 익스텐션들까지 …

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 뭔가 그래도 고민을 끝내고 방향을 잘 잡아서 가는 것 같아서 기분이 좋다. 지금 이 분야가 너무 좋은 만큼 방향이 조금은 잘못되어도 괜찮으니(사실 옳은 방향이란 거 자체가 없으니까) 열심히 꾸준히 잘 나아가자. 그리고 내가 원하는 삶을 살면 된다. 이미 이 개발 세상을 알게 된 것만해도 반은 성공이니…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 3. 액션과 계산, 데이터의 차이를 알기 액션과 계산, 데이터의 차이를 알 수 있다. 액션이 코드 전체로 퍼질 수 있다. 코드에서 어떤 부분이 액션인지 찾을 수 있다. 액션과 계산, 데이터 모든 개발 과정에서 액션과 계산, 데이터를 구분하는 기술을 적용할 수 있다. 액션(부수 효과) 실행 시점과 횟수에 의존 계산(순수 함수, 수학 함수) 입력을 받아서 출력을 반환한다. 데이터 이벤트에 대한 사실 함수형 프로그래머는..! 최대한 액션에서 계산을 빼내려고 한다. 또 계산에서 데이터를 분리할 수 있는 생각한다. 나아가서 액션을 계산으로, 계산을 데이터…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 2. 현실에서의 함수형 사고 현실적인 문제에 함수형 사고를 적용해보자. 소프트웨어 구조를 계층으로 나눠서 설계해보자. 시간에 의존하는 액션을 타임라인으로 시각화해보자. 액션과 계산, 데이터 코드를 과 , 로 나누는 작업이 우선이다.(계층형 설계) 액션 와 에 의존한다. 사용할 때 항상 조심해야한다. 계산 어떤 것을 결정하거나 계획하는 것 함수형 프로그래머는 액션보단 계산을 선호한다.(다루기 쉬우므로) 데이터 가능한 데이터를 사용한다. 유연하기 때문에 저장하거나 네트워크로 전송하는 등 다양하게 활용 가능하다. 변경 가능성에 따라 코드 나누기 자…

🦍 동료와의 대화(feat. 시저) 요즘 취업에 대한 준비, 지금 내가 하고 있는 개발에 대한 고민이 늘 있었다. 프론트엔드 개발 자체가 너무 재미있고 좋지만, 지금 내가 이력서에 작성하고 있는 한줄 한줄이 어떤 의미를 갖고 있는지 잘 나아가고 있는건 맞는지. 그리고 나는 어떤 방향으로 공부를 하고 있고 이 방향은 과연 내가 원하는 목표에 도달하기에 좋은 방향인지. 오랜만에 코드스쿼드에 나와 공부를 하던 중, 동료인 시저와 서로 안부를 물으면 대화를 하다가 느끼는 게 많아 이렇게 글로 남긴다. 시저는 요즘 webpack에 대해 공부하고 있다고 한다. 처음엔 그냥 번들러를 깊게 파는구나 생각했는데, 시저는 훨씬 더 깊은 느낌으로 방향을 정한 것 같았다. 우리가 사용하는 cra(create-react-app)가 어떻게 동작하는지?를 궁금해하고 본인이 좀더 커스텀하게 다룰 수 있는 방법은 뭔지 등을 고민하는 것이었다. 시저의 이야기는 간단하게 말하면 였다. 당장 우리는 모든 프로젝트를…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 이번 주는 전반적으로 쪼오금 저번 주보다 집중을 못하는 느낌이다..! 근데 또 이상하게 목표한 계획들은 잘 하는 것 같고..? 조금 아쉽지만서도 매일 조금씩 나아가는 느낌이라 다행인 것 같다. 🫧 오늘의 고민 하나에 집중하는 게 좋을까? 여러가지를 병행하는 게 좋을까? 학습을 할 때, 몇 일 동안 하…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 오늘은 너무 잠이 와서 낮잠을 좀 길게 잤다. 예전에는 계획대로 되지 않고 잠을 자면 스트레스를 많이 받았는데, 이제는 잠이 온다는 것 자체가 나에게 필요했다는 걸 알기에 스트레스받지 않는 것 같다. 그래도 잠을 자고 나니 개운하게 공부할 수 있어서 나름대로 계획을 전부 완료했다.(헬스를 안갔지만 🤪…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 1. 쏙쏙 들어오는 함수형 코딩에 오신 것을 환영합니다. 함수형 사고가 무엇인지 그리고 왜 함수형 사고가 더 좋은 소프트웨어를 만드려는 개발자에게 도움이 되는지 설명한다. 함수형 프로그래밍이란? 수학 함수를 사용하고 부수 효과를 피하는 것이 특징인 프로그래밍 패러다임 부수 효과 없이 순수 함수만 사용하는 프로그래밍 스타일 부수 효과 함수가 리턴값 이외에 하는 모든 일 리턴값이 필요해서 호출했지만 의도하지 않게 부수효과가 발생할 수 있다. ex) 이메일 보내기, 파일 읽기, 웹 요청하기 등 순수 함수 인자에만 의존하고 부수 효과가 없는 함수 같은 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 재진 환자 중심, 약 배송 금지 등의 조건으로 팬데믹 기간 중 비대며 진료보다 불편함 가중 의료기관의 진료 취소율마저 눈에 띄게 상승, 환자도 비대면 진료 서비스에 대해 회의적 산업계 “플랫폼 업체가 전부 문을 닫고 시장 자체가 아예 사라지지 않을까 걱정” 🗞 키워드 산업, IT, 의료산업 🔤 단어 정리 없음 🤔 내 생각 제대로 찾아본 적은 없지만, 원격의료에 대해서 내심 기대했었다. 회사를 다니던 시절, 아파도 도저히 병원에 갈 시간이 잘 나지 않아서 난처했던 기억때문이었다. 시간과 장소에 구애받지…

🧷 CS-Network 스터디 코드스쿼드 과정을 마치고 프론트엔드 개발자로서 알아야될 네트워크 지식을 채우기 위해 시작한 CS 스터디! Tech-Interview-Network를 참고하여 스터디를 진행하기로 했다. 2. HTTP 응답코드에 대해 설명해 주세요. HTTP 응답코드는 HTTP 요청에 대한 응답으로 요청의 처리 상태를 알려주는 코드로 클라이언트와 서버 간의 HTTP 통신이 복잡해짐에 따라 이를 간다나게 표현하기 위해 만들어졌습니다. 100번부터 500번대로 크게 5가지의 응답을 코드로 나타냅니다. 100번대는 이라는 의미, 200번대는 는 의미, 300번대는 는 의미, 400번대는 는 의미, 500번대는 는 의미입니다. 일반적으로 통신이 성공했을 때, 200번 그리고 클라이언트 측의 요청 리소스가 서버에 존재하지 않을 때의 404번을 자주 볼 수 있습니다. 1. 401 (Unauthorized) 와 403 (Forbidden)은 의미적으로 어떤 차이가 있나요? 401번은…

🧷 CS-Network 스터디 코드스쿼드 과정을 마치고 프론트엔드 개발자로서 알아야될 네트워크 지식을 채우기 위해 시작한 CS 스터디! Tech-Interview-Network를 참고하여 스터디를 진행하기로 했다. 1. 쿠키와 세션의 차이에 대해 설명해주세요. 먼저 쿠키와 세션은 모두 HTTP의 connectionless, stateless를 보완하기 위해 등장한 기술입니다. 단순하게 생각하면 쿠키는 클라이언트 측에 사용자 정보 등의 데이터를 저장하는 기술이고 세션은 서버 측에 데이터를 저장하는 기술입니다. 그렇기 때문에 서버의 과부하 면에서는 세션보단 쿠키가 유리하고 보안 면에서는 쿠키보단 세션이 유리합니다. 이 둘의 가장 큰 차이는 데이터가 유지되는 유효 시간 관리에 있습니다. 쿠키는 서버에서 쿠키를 만들 때 정한 유효시간 동안 계속 유지되지만 언제든지 클라이언트가 수정 및 삭제가 가능하다는 특징이 있습니다. 반면 세션은 클라이언트가 직접 데이터의 라이프사이클에 개입할 수 없…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 진짜 열심히 살고 있다. 뿌듯하고 보람차다. 더 계속 나아가고 싶고 더 많이 배우고 싶다. 이런 감정을 느끼고 적을 수 있음에 감사한 하루다. 🫧 오늘의 고민 각각의 reducer에서 초기 상태값을 전달하지 않고, combineReducers 후에 createStore할 때 초기 상태를 전달할 수 없…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 구글.오픈AI 출신 대거 영입한 xAI 트위터와 테슬라 데이터로 학습 도덕성보단 ‘인류에 대한 호기심이 많은 AI’를 만들려고 노력할 것 🗞 키워드 IT, AI, xAI, 일론 머스크 🔤 단어 정리 없음 🤔 내 생각 과연 xAI가 어떤 모습으로 시장에 등장할지 궁금하다. CEO란 직책치고는 어디로 튈지 알 수 없는 머스크가 생각하는 AI는 어떤 모습일까? 그리고 과연 챗GPT의 파급력이 이렇게 큰데, 이를 어떻게 뚫어내려고 하는지도 궁금하다. 사람이 편리하다고 느끼는 수준에서의 AI 기술은 분명 그 …

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 비가 많이 오는 날 조용히 노래 틀어놓고 코딩하는 건 참 즐겁고 행복하구나~ 🫧 오늘의 고민 ReactDOM.createPortal로 만든 component에 어떻게 복잡한 props를 전달할 것인가? 프로젝트 MVP를 어떻게 잡을 것인가? 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고 자식…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 점점 몰입하는 경험을 하다보니 넘 신난다. 공부하는 것도 재미있고 라이브러리 공식 문서 보는 것도, 코드 까보는 것도 재미있다. 물론 내 코드를 쓰는 건 더 재미있다. 아직 공부해야할 것들 투성이지만 하면서 점점 더 재미있고 알고 싶은 게 많아진다. 이제 어느정도 몰입은 할 수 있으니(더 몰입해야겠지…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 뭔가 많이 한 것 같으면서도 적게 한 기분..? 다행히 오늘 할 일을 체크한 기록이 있어서 자각할 수 있는 것 같다. 🫧 오늘의 고민 기존 confirm api 대신 modal component를 만들어서 사용하려 했다. 일단 구현은 했는데, state를 handle하는 부분을 어떻게 전달해야할지 고…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 과거에는 해외유학에 대한 수요가 많았다. 최근 한국이 선진국 반열에 오르면서 해외유학에 대한 수요가 줄어들었다. 한국 경제 성장의 원동력 중 하나였던 글로벌 마인드와 도전정신이 약화될 수도 있다는 우려 🗞 키워드 교육, 경제, 해외유학 🔤 단어 정리 없음 🤔 내 생각 오늘은 기사 자체가 흥미로워서 스크랩하는 것이 아니다. 그저 문제를 바라보는 관점에 대해서 생각해보게 되어서 스크랩을 했다. 이 기사의 골자는 는 것이다. 기사에서는 그 이유 중 하나를 라고 이야기하고 있다. 그리고 이런 과정으로 청년들…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 월요일이 시작되었다. 풀어지기 싫어서, 일부러 나서서 동료들과 아침 스크럼을 진행하는 모임을 만들었다. 조금 부담이 되기도 하지만, 이 부담감이 적당한 긴장감을 줄 수 있을 것이라 믿는다. 이제 시작이지만, 얼추 오늘 목표로 한 분량도 다 했고 운동도 하고 왔다! 그렇다고 방심하지말자! 이제 시작이니…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 급격하게 최저임금을 인상하기 시작했던 2019년부터 무인 편의점 수가 꾸준히 증가하기 시작 무인 편의점의 단점(절도 등)으로 인한 비용을 고려해도, 최저임금으로 나가는 금액을 훨씬 하회 🗞 키워드 경제, 최저임금, 무인편의점 🔤 단어 정리 없음 🤔 내 생각 최근 노사의 최저임금 인상이 화두가 되다보니 위의 기사가 눈에 띄었다. 2023년 기준 최저임금은 9,620원이다. 그리고 노사가 요구하는 내년도 최저임금은 1만2000원이다. 요즘 물가 상승을 고려해보면 어마어마하게 높은 수치는 아닌 것 같지만,…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 확실히 주말엔 편히 쉬고 싶어진다. 그러다가도 개발 생각에 다시 노트북 앞에 앉고… 그러길 반복한다. 그래도 다행인건 개발하는 순간과 시간들이 하기 싫은 행동을 하는 게 아니라는 점이다. 다만, 주말에도 좀더 몰입해서 개발했으면 좋겠다. 그게 아니라면 쉴 때, 개발관련 자기계발서를 읽어볼까 한다. 🫧…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 다녀온 엠티 후유증이 아직 남아있다… 그치만 확실히 계속 개발에 대한 생각이 나는 거 보면! 나는 개발자를 하기로 한 게 정말 다행인 것 같다! 🫧 오늘의 고민 router 구현하기. 정확히는 Browser router라고 하는 게 맞을 것 같다. 좀더 순수하게 JS로 구현했는데, 다시 TS로 구현토…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 예상보다 강도 높은 탄소배출 규제에 직면하게 된 해운사들 기존 2050년까지 2008년 대비 50%까지 줄이기로 했던 목표를 100%까지 끌어올리기로 2008년 해운 분야의 온실가스 배출량은 정점이었기 때문에 100% 감축은 사실상 ‘넷제로’를 의미 (참고)우리나라는 전체 수출입 물동량의 99.8%를 해상 운송에 의존하는 국가 🗞 키워드 환경, 경제, 탄소, 해운업 🔤 단어 정리 없음 🤔 내 생각 어릴 적, 무조건 환경을 좋게하는 일이 이로운 일이라고 생각했었다. 하지만 전공에서 환경을 배우고, 이전…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 옐런 미국 재무장관, 7월 6일 방중 예정 중국, 방중 하루 앞두고 반도체용 희귀금속 수출 통제 계획 발표 미국, 중국의 반간첩법 강화에 따른 미국인의 중국 여행 주의 안내 🗞 키워드 국제정세, 경제, 미국, 중국 🔤 단어 정리 없음 🤔 내 생각 요즘 바쁘게 개발 공부하느라 신문을 읽기만 하다가 오랜만에 스크랩을 한다.ㅎㅎㅎ 어제까지만 해도 그나마 미국과 중국이 협상을 통해 올바른 방향으로 나아가나 싶었는데, 역시나… 미국 장관급의 방중 이전부터 이렇게 서로 으르렁 대다니… 물론 서로 우선순위를 선점…

🚤 성장일지 6.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기. 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자 🌈 오늘의 감정 조금 피곤하지만 매우 매우 좋음! 내가 원하던 회사에 다녀와볼 수 있어서! 🫧 오늘의 고민 Array의 map 함수 구현 시, this에 대한 타입을 어떻게 지정할지? ☀️ 오늘의 실패 Array의 map 함수로 구현하는 방법… this를 써서 하고 싶은데 타입 에러가 난다. ✨ 오늘의 성공 일반 함수…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 들어가기에 앞서 이 글은 원티드에서 주관하는 프리온보딩 프론트엔드 챌린지 7월 직접 만져보는 Next.js 해부학 교실 - CSR / SSR with Next.js 에 제출할 사전과제를 기반으로 작성한 글입니다. 🗂️ CSR(Client-side Rendering)이란? 그리고 장단점 서버와의 최초 통신에서 HTML, CSS, JS를 응답받아온 후 JS의 코드에 따라 데이터만 요청하여 웹 페이지가 복잡해짐에 따라 매번 페이지마다 새로운 HTML을 받아오는 방식에서 벗어나 한번에 받아온 후 동작하는 CSR 방식이 많아졌다. 장점 유저와의 인터렉션에 따라 필요한 데이터만 요청하여 받아오기 때문에 부분적으로 빠르게 인터렉션할 수…

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 익숙함 그리고 반복의 중요성 두번째 협업 프로젝트를 진행했다. 첫번째 협업 프로젝트 때, 1주차 기획을 파악하고 스토리, 테스크를 뽑아내고 스택 및 컨벤션을 정하는 일이 쉽지 않았었다. 헌데 이번엔 그래도 한 번 해봤다고 뭔가 척척 진행할 수 있었다. 그리고 백엔드분들과 어떻게 소통해야하고 같은 프론트엔드 동료와 무엇을 해야할지 말하지 않아도 서로 알 수 있었다. 덕분에 1주차가 제일 힘들었던 첫번째 프로젝트와는 다르게, 이번 1주차는 생각보다는 쉽고 즐겁게 진행할 수 있었다. WAS의 구조가 잡히다. 다양한 구조가 있겠지만, 전체적인 웹 어플리케이션의 구조가 확실히 머리에 잡히게 되었다. 위의 구조이다. 아주 간단하고 쉬운 구조이지만, 그동안 나는 프론트가 담당…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 strict mode 켜두고 fetching data strict mode를 간단히 설명하면 컴포넌트를 2번 렌더링하게 하는 것이다. 이를 통해 렌더링 중에 발생하는 여러 side effect를 찾아낼 수 있다. 다만, 일반적인 개발 중에 렌더링이 2번 되기에 다소 귀찮은 문제가 발생한다. 예를 들면, data를 요청해서 받아온 후, 이를 state로 관리할 때이다. 해당 컴포넌트가 2번 렌더링되면서 요청을 2번 보내게 되고 자연스럽게 state는 2번의 데이터가 반영된다. 해서 공…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 Node.js 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 JS로 개발할 수 있도록 해주는 런타임 환경 즉, 브라우저 밖에서도 JS를 사용할 수 있는 환경이라는 의미 특정 브라우저에서의 JS api들을 제외시키고, HTTP와 파일 시스템 라이브러리들을 포함하여 더많은 전형적인 OS api들을 제공한다. express Node.js를 위한 빠르고 간편한 웹 프레임워크 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크 HTTP 통신…

🍉 여름 여름이 시작되는 게 느껴지는 요즘이다. 슬슬 아침 일찍부터 덥기 시작하고 밤이 되면 특유의 선선한 바람 냄새가 나기 시작한다. 계절마다 감성적이게 만드는 요소들이 있는데, 여름의 경우 선선한 바람이 아닐까 싶다. 프론트엔드로 개발공부를 시작한지도 어느덧 1년이 넘어갔다. 그 사이 나는 얼마나 성장했는가? 생각해보면 1년동안 한 거치곤 뭔가 부족한 거 같으면서도 이전에 비하면 훨씬 많이 성장했다는 생각도 든다. 이제는 정말 현업에 가서 사람들과 함께 서비스를 발전시키고 개발하고 싶어졌다. 를 계속 되새기면서 기억하자. 📈 개발자로서의 목표 프론트엔드 개발자 UX를 고려하는 프론트엔드 개발자 백엔드에 대한 이해도를 갖춘 개발자(추후에 풀스택까지 가능하도록) 지식을 빠르고 깊이있게 습득하는 개발자 어떤 게 중요하고, 어떤 게 중요하지 않은지 구분할 수 있어야 가능할 것 같다. 어떻게든 욕심내는 개발자 구현에 대한 욕심, 새로운 지식에 대한 욕심 등등 글을 잘쓰는 개발자 내가 무…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Managing State Reacting-to-input-with-state React는 선언형 UI 라이브러리 택시기사에게 목적지만 말하면 알아서 가는 것처럼, React는 상태에 따라 UI를 자동으로 업데이트 Thinking about UI declaratively 컴포넌트의 다양한 시각적 상태를 식별한다. 상태 변화를 촉발하는 요소를 파악한다. useState를 사용하여 메모리의 상태를 표현한다. 비필수적인 state 변수를 제거한다. 이벤트 핸들러를 연결하여 state를 설정한다. Step 1: Identify your component’s different visual states Displaying many visual states at once 컴…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 나는 왜 프로그래밍을 공부하는가? 오늘 맥스 마스터인 남세의 특강을 들었다. js, java, swift, rust로 직접 http를 구현하시는 라이브 코딩 수업이라고 알고 있었다. 헌데 남세가 전달하고자 하는 메세지는 따로 있었다. 라이브러리를 구현하는 모습을 보여주시면서 그동안 우리가 라이브러리 내부 구현도 까보지 않으면서 너무 신격화하듯이 사용하진 않았는지, 그리고 당신들은 왜 프로그래밍을 시작했는지를 물어보는 게 핵심 주제였다. 남세가 정말 대단한 개발자라는 걸 알고있지만,…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 axios 이전에는 axios를 커스텀 가능한 fetch 정도로 생각했는데, axios 공식문서에서 interceptor를 보고 깜짝 놀랐다. 뭔가 fetch와 Proxy 패턴(혹은 js의 Proxy 객체) 합친 것 같은데, 추후에 아주 간단하게라도 구현해봐야겠다. props drilling 아토믹 디자인으로 작은 단위의 컴포넌트들을 개발하고 있다. 거기에 styled-components를 적용하다보니, 컴포넌트의 props가 너무 많아지는 것 같다. 그러면서 자연스레 drillin…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 [트러블슈팅] 스토리북 자동 배포 시 에러 발생 chromatic과 github actions를 통해 스토리북 자동 배포를 했다. 헌데 계속 에러가 발생했다. 알고보니 github action script에서 chromatic이 제공하는 action 스크립트를 사용하면서 발생한 문제였다. 해서 직접 chromatic action 스크립트를 작성해서 해결 완료! 아토믹 디자인을 폴더구조에 적용하기 아토믹 디자인 패턴을 적용해보고 싶어, 훈딩과 함께 기획서에 있는 컴포넌트들을 분류했다.…

🎄 성장일지 5.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기! 🔑 오늘의 학습 키워드 아토믹 디자인 패턴 아토믹 디자인 패턴 아티클을 읽고 정리하면서 UI의 구조에 대해서 생각해볼 수 있었고, 좀더 나아가서 디자인 시스템에 대해서도 생각해볼 수 있었다. 만타인, 차크라, 머터리얼 아토믹 디자인 패턴을 읽다보니, 만타인, 차크라, 머터리얼에 대해서도 알게 되었다. 이것들은 아토믹 디자인 패턴을 적용한 라이브러리들이라고 보면 될 것 같다. 학습의 관점에서는 이 라이브러리를 사용하기보단, UI를 나눈 구조를 보고 참고하고 나만의 작은 라이브러리를 만들어볼 수 있으면 좋을 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 styled-components 이번에 새롭게 시작되는 프로젝트에서는 대표적인 라이브러리인 를 사용하기로 했다. 사실 내가 좋아하는 TailwindCSS와 비교했을…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 에 대한 고찰 이번 프로젝트에서 마지막 주차 때 무슨 코딩 기계 마냥 구현에 집중하다보니 깨달은 게 하나 있다. 리액트의 함수 컴포넌트에서 이 라는 녀석이 참 라면 …

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 이슈 트래커 프로젝트 5월 초부터 6월 초까지, 5월 한달은 정말 프로젝트말고는 기억이 나는 게 없다고 해도 과언이 아니다.(조금 오반가..?ㅎㅎ) 그만큼 집중했고 그만큼 열심히 임했다고 생각한다. 이 프로젝트를 통해서 얻은 게 정말 정말 많다. 추후에 내가 개발자로서 살아갈 때, 이 글을 웃으면서 볼 수 있기를..! 1. 협업하는 재미 프로젝트를 시작할 때 가장 크게 포커스를 맞췄던 건 이었다. 같은 프론트 개발자 동료와의 협업, 백엔드/iOS와의 협업하는 방법을 배우는 걸 가장 큰 목표로 삼았다. 그런데 이게 웬걸… 이 아닌 마저 알게 되었다. 처음엔 함께 발맞춰 개발한다는 것이 조금은 불편한 옷을 입은 기분이기도 했다. 스크럼, 그라운드 룰, 브랜치 전략, …

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Adding Interactivity 리액트에서는 를 모두 라고 한다. Responding to events React를 통해 JSX에 이벤트 핸들러를 추가할 수 있다. 이때, 이벤트 핸들러는 클릭, 마우스오, input에 초점 맞추기 사용자 상호작용에 의해 실행되는 콜백함수를 의미한다. State: a component’s memory 컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 이 때, 컴포넌트는 이런 변하는 내용을 하고 있어야 한다. React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다. 컴포넌트에 state를 추가하려면 useState 훅을 사용하면 된다. 훅들은 컴포넌트가 React 기능을 사용할 수 있게 해…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 테스트 코드 테스트 코드는 왜 작성할까? 테스트 코드를 작성하면 개발자는 코드를 더욱 안전하게 리팩토링할 수 있다. 테스트 코드를 작성하면 개발자는 나중에 코드를 더…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Describing the UI 리액트는 UI(User Interface)를 렌더링하기 위한 자바스크립트 라이브러리이다. UI는 버튼, 텍스트 그리고 이미지들과 같은 작은 단위로부터 구성된다. 리액트는 그 작은 단위들을 재사용 가능하고, 중첩 가능하게 결합할 수 있게 해준다. 웹 사이트에서부터 폰 앱들까지 화면에 있는 모든 것들은 컴포넌트로 분해할 수 있다. 이번 챕터에서 리액트 컴포넌트들을 만들고, 커스터마이즈하고 조건적으로 보여지게하는 방법을 배울 것이다. Describing the UI 텝의 요약 내용은 짧게 작성하고 넘어가겠습니다. 당신의 첫 컴포넌트 리액트 어플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 구성된다. 리액트 컴포넌트는 이다. 컴포넌…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 리액트 컴포넌트 구조 타입스크립트와 함께 리액트 컴포넌트의 구조(?) 혹은 컨벤션(?)을 작성하는 방법은 여러가지가 있는 것 같다. ex) React.FC을 이용한 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 부모 컴포넌트에서 fetch한 데이터를 자식 컴포넌트에게 전달하기 부모컴포넌트에서 api를 통해 data를 받아오고 이를 상태로 갖는다. 그리고 이 상태를 자식컴포넌…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 useState 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 React useState Hook 만들기 1. React의 useState 1) 의문갖기 useState를 호출하여 state와 setState를 가져온다. 500ms(0.5초)마다 setCount를 실행한다. 값이 1씩 증가한다. setCount가 실행되면 다시 렌더링이 실행된다. 렌더링이 실행되면 Counter가 다시 실행될 것이다. 어떻게 Counter…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 오늘은 한주동안 있었던 주요 트러블 슈팅들을 적어보려한다. 1. tailwindCSS 컨벤션 맞출 수 없을까? (해결) prettier-plugin-tailwindc…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 OAuth OAuth는 Open Authorization의 약자로, 인증을 위한 오픈 스탠더드 프로토콜이다. OAuth를 사용하면 웹, 앱, 데스크톱 프로그램 등 다…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 MSW(Mock Service Worker) MSW를 사용하여 아주 간단한 api를 구현하였다. MSW는 우리가 보내는 request를 가로채서 우리가 원하는 res…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 craco..?! craco의 약자는 Create React App Configuration Override의 약자이다. 말그대로 CRA를 사용하면서 기본적으로 제공…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 연구실 물품 관리 시스템 소프트웨어 여러 연구실에서 시약 등의 연구물품 관리가 부족해 어려움을 겪는 것을 지켜본 경험을 토대로 창업 “외부의 시선에 따라 움직이지말고, 스스로를 감동시키는 일을 하라” “내적 동기를 촉구하는 일을 스스로 찾아 실현시키길 바란다” 🗞 키워드 창업, 소프트웨어, 경험 🔤 단어 정리 없음 🤔 내 생각 세상에 창업을 해서 살아가는 사람들은 생각보다 많다. 우리가 지나가면서 보는 식당, 카페, 꽃집 등등도 모두 창업이니까.(자영업에 좀더 가까울 수도 있지만) 나는 개발자다. 그…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 tailwindCSS 전역 설정 프로젝트의 전역에서 사용될 폰트 그리고 폰트의 기본 색상을 정해주고 싶었다. 솔직히 처음엔 정말 정말 간단할 거라 생각했는데, 생각보…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 가상돔 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 가상돔(VirtualDOM) 만들기 1. 브라우저 로딩 과정 -> -> -> -> -> 위 과정이 진행 후, CSS나 JS를 통해 변화가 생길 경우 re-플로우(re-레이아웃) 또는 re-페인트 과정이 진행된다. 1. 파싱 DOM Tree HTML을 토대로 DOM Tree를 생성한다. Bytes: HTML을 바이트 단위로 읽는다. ex) Characters:…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 storybook 스토리북은 UI 컴포넌트를 개발하고 테스트하는 도구이다. UI 컴포넌트를 개발하면서 빠르게 테스트를 할 수 있고, UI 컴포넌트를 문서화할 수 있다…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 작성된 백로그를 활용해보자. 스토리: task1: (2h) task2: (2h) 위와 같이 task를 나눈 후에, 각자 task에 시간을 부여했다. 이후 이 시…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 백로그 작성하기 주어진 기획서를 토대로 백로그를 작성했다. 먼저 페이지 단위로 나눠서 각 페이지 별 유저의 행동 Story를 작성했다. 그리고 각 Story에 우리가…

🎄 성장일지 4.0 리 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 프론트엔드, 백엔드, iOS의 협업 드디어 협업 프로젝트가 시작되었다. 오늘은 개발은 일체하지 않았다. 팀원들간 인사를 하고 팀의 그라운드룰(스크럼, 깃 브랜치 …

🎲 집중이 되지 않을 때 무언가에 집중이 되지 않는 데에는 여러가지 이유가 있다. 때로는 휴일이라는 이유, 때로는 피곤하다는 이유, 때로는 날씨가 좋아서라는 이유까지… 그저 집중이 되지 않음을 이미 결과적으로 만들어두고 그에 맞는 자기합리화를 위한 여러 이유를 갖다 붙인다. 이게 꼭 나쁘다는 건 아니다. 다만 이런 자기합리화의 방식이 집중하지 않으려는 도피처가 되는 게 문제다. 이전의 나는 집중이 안될 때, 어떻게든 집중하려고 붙잡고 이 악물고 버티는 편이었다. 때로는 이 방법으로 결국 집중하여 원하는 일을 해내고 성취감을 느끼기도 했다. 그렇지만 이 방법은 뭔가 행복하지 않았다. 내 몸과 마음에서 보내는 신호를 철저히 무시한 채로 억지로 버티는 느낌이기 때문이다. 그래서 이제는 집중이 되지 않을 때는 후련하게 인정하고 적당히 내가 하고 싶은 일들을 찾아서 한다. 결과적으로 뭐가 더 좋다는 없다. 그저 이 과정에서 내 시간과 내 삶이 행복하다고 느끼는 방향으로 선택하고 그 뒤에 따…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 국내 첫 반려동물 전문그룹 반려동물 양육 인구 증가하며 관련 분쟁 꾸준히 증가 추세 동물관련 소송가액은 낮아서 아직은 수익보다는 공익 차원 🗞 키워드 반려동물, 법, 변호사, 공익 🔤 단어 정리 없음 🤔 내 생각 수많은 강아지 유튜브를 자주 보는 나로서는 정말 정말 반가운 소식이다. 내가 직접 키우진 않지만, 강아지들의 법적 지위가 올라간다는 것은 강아지들의 삶의 질이 더 좋아질 것이라고 생각하기 때문이다. 우리나라가 다른 유럽의 나라들에 비해서 반려동물에 대한 법이나 제도가 뒤쳐져 있는 것으로 알고…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 리액트 쿼리 리액트 쿼리를 아직 짧게 공부했지만… 너무 너무 마음에 든다. ㅋㅋㅋㅋㅋ 공식문서 내용을 아주 조금 살펴보자면 Toss out that granular …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 리액트 라우터 오늘은 열심히 리액트 라우터를 공부했다… 비교적 쪼그마한 라이브러리 주제에 생각보다 사용하기 복잡한 느낌… useNavigate, useHistory,…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 간단한 react todo app 만들기 강의에서 나오는 프로젝트 중 하나지만, 강의를 하나도 보지 않고 구현해보았다. 그러고나서 강의를 보면서 리팩토링을 하는데, …

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ onKeyDown in Korean 리액트에서 onKeyDown 이벤트를 사용하다가 한글 입력 시 이벤트가 두번 발생하는 문제가 있었다. 먼저 코드는 아래와 같다. 위 처럼 이벤트가 발생했을 때, 이벤트(e)의 key값이 인 경우에만 함수를 실행하도록 했다. 그런데 문제는 한글을 적고 를 입력하면 한글 한번, 그 한글의 끝 글자 하나가 또 입력되는 것이었다. 해서 위와 같이 이벤트를 콘솔로 찍어보았다. 아래는 만 입력 후, 를 눌렀을 때의 콘솔이다. 분명 과 만 했는데, event 객체는 3개가 찍혀있다. 3개의 객체를 좀더 자세히 살펴보자. 순서대로 객체의 이미지를 나열하면 뭔가 이상하다. 첫번째 과 …

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Get Started - Quick start 아래와 같은 것을 배울 수 있다. How to create and nest components - 컴포넌트 생성하는 방법 How to add markup and styles - 마크업과 스타일을 추가하는 방법 How to display data - 데이터를 표시하는 방법 How to render conditions and lists - 조건과 리스트를 렌더링하는 방법 How to respond to events and update the screen - 이벤트에 응답하고 화면을 업데이트하는 방법 How to share data between components - 컴포넌트 간 데이터를 공유하는 방법 Creating and nesting co…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 시장 전문가 및 정책가들 대부분 연내 금리인하는 없을 것이라고 예상 미국 은행 위기, 인플레이션 장기화, 러시아-우크라이나 전쟁 등 불확실성이 높기 때문 따라서 현금 및 우량채 등 다소 보수적인 투자 추천 🗞 키워드 미국, 경제, 투자 🔤 단어 정리 없음 🤔 내 생각 이 기사를 기억해둬야겠다. 과연 연내에 미국이 금리인하를 할 것인지, 아니면 금리인상을 할 것인지. 오히려 지금이 투자를 하기에 아주 좋은 시기라고 생각이 드는데, 어떤 확신이 있다기보다도 주위에서 투자 이야기를 하는 사람이 없다는 점 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 useEffect vs useMemo vs useCallback vs useRef vs React.Memo 이 묘하게 다른 훅 녀석들… 알고보면 굉장히 다른 목적과 …

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ useEffect vs useMemo vs useCallback vs useRef vs React.memo 훅들을 다시 복습하는데… 이 녀석들 정말 묘하게 아주 묘하게 다르다. 각각의 목적 그리고 이름에 담긴 의미, 활용을 간단하게 기록해두려 한다. useEffect 여기서 Effect란 를 의미한다. 리액트는 렌더링 결과물을 화면에 반영하는 것이 주목적이다. 이 때, 렌더링과 무관한 작업들을 라고 할 수 있다. 는 이러한 를 수행하기 위해 사용한다. 예를 들어 를 사용하여 요청을 보내거나, 를 남기거나, 를 설정할 수 있다. 위의 예시 코드에서 useEffect 내의 함수는 요청을 보내고, 함수를 반환한다. 이 …

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 동료들 오프라인으로 동료들과 함께 공부한지 2개월. 확실히 함께 옆에서 바로 소통하면서 배우니 도움이 많이 된다. 최대한 동료들에게 도움이 많이 될 수 있는 동료가 되자라는 목표와는 무색하게 내가 되려 배우는 게 많다. 지금 이렇게 동료들과 공부하듯이 개발자로 회사를 다닐 수 있다면 얼마나 행복하고 좋을까 생각이 많이 든다. 이런 좋은 자극들마저 하나하나 너무 소중하다. :) 프로젝트 설계 공부 저번 3월의 컨셉이 였다. 새로운 기술을 배우는 재미를 알게 되었지만, 한편으로는 새로운 것을 배우는 것에 집중한 나머지 코드 자체가 너무 지저분한 사단이 났다. 기획, 설계 등의 문제를 떠나서 내가 봐도 내 코드가 너무 지저분하고 리팩토링하기가 버거웠다. 그래서 이번 4…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🧐 고민 사항 1. 비동기로 받아온 data를 state로 사용하게 될 때, 어떻게 처리해야하는가? fetch를 통해서 받아온 data를 state로 혹은 props로 전달할 때, 계속 p…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 상태관리 시스템 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 상태관리 시스템 만들기 1. 중앙 집중식 상태관리 현대 프론트엔드 개발에서 제일 중요한 것은 어플리케이션의 규모가 커질수록 컴포넌트의 depth가 깊어지며 더불어 상태관리도 굉장히 어려워진다. 이 때, 상태를 위에서 아래로 하나하나 전달하지 않고 을 하면서 동시에 으로 다룰 수 있다면 어떨까? 참고: Redux 공식문서 2. Observer Pattern에 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🧐 고민 사항 🔑 오늘의 학습 키워드 특별 강의, 리액트 🥳 학습 내용 Q. 좋은 개발자란? 열린 마음을 갖고 학습 속도가 빠른 사람 타 학문에 비해서 컴퓨터 공학쪽은 새로운 게 너무 빨리…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🧐 고민 사항 🔑 오늘의 학습 키워드 리팩토링 🥳 학습 내용 리팩토링 성공?! 드디어… 몇일동안 혼자 끙끙거리던 리팩토링을 성공했다!!! 아주 간단한 Header만 기존과 비교해보자면 He…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🧐 고민 사항 1. [컴포넌트 리팩토링] 하위 컴포넌트들을 상위 컴포넌트에 element로 attach 후 setState 했을 때, 변경 사항이 반영되게 어떻게 하지..? 일단 리팩토링을…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🧐 고민 사항 1. 프로젝트에서 전역으로 관리할 필요가 있는 상태들만 flux 아키텍쳐 적용할지. 기존에 내가 생각했던 방향은 컴포넌트 별로 구성하되 각각의 컴포넌트가 MVC, 옵저버, F…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 웹 컴포넌트 만들기 1편을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 웹 컴포넌트 만들기 - 1 1. 컴포넌트와 상태관리 크로스 브라우징 웹 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오는 작업(호환성 해결) 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽으로 최적화 되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기 단순하게 말하…

🥳 나는 행복한가? 행복하다. 이 질문에 라고 답하기 힘든 시기도 있었는데, 그 때를 생각해보면 지금의 나는 정말 얼마나 행복한지 알고 있다. 원하는 공부를 하고 있는 이 시기, 내 옆에 있어주는 수많은 사람들 그리고 함께 공부하는 동기들까지..! 그 뿐 아니라 요즘은 그동안 나도 잘 몰랐던 자신에 대해서 알아가고 있는 것 같아서 더 행복하다. 나라는 사람의 장점과 단점을 명확히 알게 되었다. 장점은 더 부각하되, 단점은 감출 줄 아는 사람이 되었다. 이렇게 내 자신을 마주할 수 있게 되니 타인에 대해서도 싶은 마음이 길러지는 것 같다. 앞으로도 이만큼 이상으로 행복한 일들로 살아갈 수 있는 사람이 되어보자. 🧐 요즘의 고민? 고민이 있더라도 떨쳐내려고 노력하고 있기 때문에 아주 심각한 건 아니지만, 아무래도 지금의 공부와 관련된 고민들이 제일 크지 않을까 싶다. 일단 하고 있는 공부는 너무너무 나랑 잘맞고 욕심이 나고 재미있기에 그 자체가 고민이 되진 않는다. 다만, 이런 욕심이…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 렌더링 자식 컴포넌트 간 상태전달 1. 렌더링 시 동일한 html을 할당하고 다시 이벤트를 붙이는 식으로 해서 setState가 일어날 때마다 렌더링이 일어나게 했어…

🌕 보름칼럼 단순 기록보단 좀 더 양질의, 정리된 글을 쓰고자 시작하는 부담없이 매 보름 하나의 주제를 깊게 들여다볼 수 있는 기회가 되었으면 좋겠다. 가수 윤종신님이 월간 윤종신을 통해 꾸준히 음악을 내시는 것과 같이 보름칼럼을 적어보자! 보름칼럼 규칙 매일을 기록하는 성장일지보다 좀더 깊은 내용의 글을 작성할 수 있도록 하자. 너무 욕심부리지말고 하나의 주제(키워드)에 집중한다. 2주에 한 번 다듬어진 칼럼 형태의 글을 작성한다. 마감은 매주 일요일을 기준으로 한다. 📃 글또 8기 개발자들이 모여 함께 글을 쓰고 피드백하는 커뮤니티인 글또(글쓰는 또라이가 세상을 바꾼다.)에서 활동하게 되어 보름칼럼의 규칙은 글또의 규칙을 따르기로 한다. 2주마다 글을 작성하는 규칙은 동일하며, 그 마감 날짜는 아래와 같다. 마감 날짜를 체크하며 매번 글 작성에 대해 인지하도록 하자! 🚈 들어가기에 앞서… 매번 작은 프로젝트 때마다 리팩토링하는 게 쉽지 않았다. 그러다 공부를 하며 아키텍처,…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 7장. 인터페이스 인터페이스는 types alias로 정의된 객체 타입과 유사하지만 차별점 존재 더 읽기 쉬운 오류 메시지 더 빠른 컴파일러 성능 클래스와의 더 나은 상호 운용성 Type alias VS Interface 두 가지 모두 세미콜론과 쉼표 둘 다 가능하다. 인터페이스의 특징 속성 증가를 위해 병합이 가능하다. 클래스가 선언된 구조의 타입을 확인하는데 사용 가능하다. 일반적으로 인터페이스에서 타입 검사기가 더 빨리 작동한다. 내부적으로 더 쉽게 캐시할 수 있는 명명된 타입을 선언하기 때문이다. 이름 없는 객체 리터럴의 별칭이 아닌 이름이 있는 하나의 객체로 간주되므로 오류 메시지를 좀더 쉽게 읽을 수 있다. 읽기 전용 속성(readonly) 인터페이스에 정의된 객체의 속성을 재할당하지 못하도록 차단…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 Observer Pattern tsconfig 컴포넌트 별 상태 교환 4.14(금) 고민 사항 1. 기존 MVC 패턴 컴포넌트와 Observer 패턴 컴포넌트의 조화…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 Observer Pattern Flux architecture 4.13(목) 고민 사항 1. Observer Pattern과 Flux Architecture 이 둘 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 밀렸던 고민의 흔적들을 한번에 업로드해보기 4.10(월) 고민 사항 1. 점점 깊어지는 폴더구조… 어떻게 관리할까..? 위와 같이 폴더 하나 당 MVC 패턴으로 컴포…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 MVC 패턴 Model(Store) View Controller(내 기준 Component) Flux 패턴(아키텍쳐) Store View Action Dispatch…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 평균 자산이 323억인 슈퍼리치들 지난해 현금/예금 비중을 2배 이상 늘리고 주식 절반 수준으로 줄였다. 그럼에도 재테크 수단 우선순위는 주식, 부동산 MBTI 기준 슈퍼리치들은 T(이성적), J(계획적)의 비율이 높았다. 🗞 키워드 슈퍼리치, 투자, 주식, 부동산 🔤 단어 정리 없음 🤔 내 생각 위의 기사가 얼마나 통계적으로 유의미한지 따지고 싶지는 않다. 그저 기사를 보고서 느낀 점은 “이성적이고 계획적이며 외향적이고 현실적인 사람들이 부자가 될 확률이 높을 수 있겠다.” 정도 인 것 같다. 이런…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 5장. 함수 선택적 매개변수 선택적 객체 타입 속성과 유사하게 타입 애너테이션의 : 앞에 ?를 추가해 매개변수가 선택적임을 나타낼 수 있다. 선택적 매개변수는 반드시 마지막에 전달해줘야한다. 선택적 매개변수에는 기본적으로 undefined가 할당되기 때문에, 함수 내부에 유니언 타입이 추가된다. 나머지 매개변수 명시적 반환 타입 변수와 마찬가지로 타입 애너테이션을 사용해 함수의 반환 타입을 명시적으로 선언하지 않는 것이 좋다. 매개변수 목록이 끝나는 ) 다음 혹은 함수 선언의 경우 { 앞에 배치한다. 그외 반환 타입 void 함수가 어떤 값도 반환하지 않는 경우, void를 통해 반환 타입을 확인할 수 있다. 함수 타입을 선언할 때, void를 사용하면 함수에서 반환되는 모든 값이 무시된다. JS에서의 함수는…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 고민 사항 1. 부모 컴포넌트에 붙어있는 node를 state 변경에 따라 다시 랜더링해주기 위의 코드에서 B처럼 다시 붙이는 게 아니라, 이미 A에서 붙인 뒤에 s…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 고민 사항 1. 각 컴포넌트 별 스타일을 어떻게 입힐까? 각각의 MVC 패턴을 적용한 컴포넌트마다 독립적인 스타일을 적용하고 싶은데… 보통 react와 함께 쓰는 s…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 이미 push한 파일 다시 .gitignore로 처리하기 위의 명령을 실행해주고 에 무시할 파일 적은 뒤 다시 add, commit, push를 진행해주면 된다. i…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 패턴 설계해보기 이번 기회에 MVC 패턴을 component 방식에 적용해보고 싶어서(MVC도 제대로 배울 겸, component도 만들겸!) 어떻게 하면 효과적으로…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 OPEC(석유수출국기구)가 기습적으로 하루만에 원유 감산을 결정 때문에 국제유가 순간적으로 최대 8% 이상 급등 🗞 키워드 기름, 석유, OPEC, 사우디아라비아 🔤 단어 정리 없음 🤔 내 생각 곧 기름값이 오르겠다. 정말 어쩔 수 없는 부분이겠지만, 세계 경제에 막대한 영향을 미치는 유가의 의존성이 너무 OPEC에게 있는 것 같다. 이렇게 갑작스럽게 생산을 줄이는 것만으로도 유가가 8%나 급등하는 일이 일어나는 것을 보면… 🗞️ 신문스크랩 2.1 🌻 주요 기사 🗞 키워드 🔤 단어 정리 🤔 내 생각

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 1. 기획서에서 feature 뽑아내기 feature-list 뽑아보자 주어진 기획서를 통해서 하나하나의 작은 feature를 뽑아내는 게 고민이었습니다. 그러던 중…

🚪 월간회고 v1.0 너무나 빠르게 가는 시간을 조금이라도 뒤돌아보고자 작성하는 한달 단위의 회고 다른 카테고리들보다 아직 정해진 게 없다. 천천히 정리해나아가는 걸로! 최대한 러프하게 생각나는 핵심들을 적어보도록 하자! 교육과정 오프라인 시작 2달간의 온라인 CS 과정이 마무리되고 처음으로 오프라인에서 동료들과 함께 공부했다. 정말 정말 좋은 사람들을 만나서 정말 정말 행복하게 공부할 수 있었던 시간이었다. 개발만 배우는 것이 아니라, 함께 공부하고 학습하고 소통하는 과정을 배워나가는 기분이다. 개발자로서 서로 대화를 나누는 게 어떤건지 조금씩 알아가는 느낌! 새로움에 대한 두려움을 깨다. 오히려 즐거움으로! 이번 프로젝트에서 내 스스로에게 가장 크게 걸었던 미션이 하나 있다. 이번 미션에서는 기본보다 새로운 기술 스택에 대한 두려움을 없애는 걸 목표로 하는 것이다. 새로운 것들을 빠르게 익히면서 사용하느라, 고군분투하고 삽질하는 시간들도 많았다. 하지만 돌이켜보면 typescr…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 3장. 유니언과 리터럴 유니언(union): 값에 허용된 타입을 2개 이상의 가능한 타입으로 확장 내로잉(narrowing): 값에 허용된 타입을 하나 이상의 가능한 타입이 되지 않도록 좁히기 ⇒ 다른 프로그래밍 언어에서는 불가능하지만 TS에서는 가능한 코드 정보에 입각한 추론 유니언 주의할 점 위의 예시를 보면 유니언은 마치 ‘또는’(||) 같지만 객체의 개념에서는 한쪽이 아닌 모두 갖고 있는 프로퍼티, 메서드만 사용할 수 있기에 약간 && 느낌이 난다. ⇒ string | number을 객체의 개념으로 생각하면 이해가 되는 것 같다!!! 내로잉 말 그대로 타입을 좁힌다. 이 때, 타입 내로잉과 조건문을 함께 씀으로써 의 역할을 하게 할 수 있다. 위 말이 책에서 말하는 타입가드: “타입을 좁히는 데 사용할 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 Node.js, express 서버 리팩토링 위와 같은 흐름이 더 mongoDB와의 연결 및 express를 통한 서버를 띄우기의 흐름이 보이는 것 같아 수정하였다.…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 Node.js, express nodeJS: 크롬의 V8 자바스크립트 엔진을 가져와서 새롭게 탄생시킨 자바스크립트 런타임 환경. 주로 자바스크립트로 서버 개발을 하기…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 동기(synchronous)? 동시에 일어난다는 의미로, 여기서 동시에 일어난다는 것은 과 가 동시에 일어난다는 의미 앞의 코드가 아직 실행 중이라면 그 실행이 끝날…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 1장. 자바스크립트에서 타입스크립트로 자바스크립트 다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다. 하지만 자바스크립트는 로 충돌 가능성을 먼저 확인하지 않고 코드를 실행한다. 이런 자바스크립트의 자유는 재미를 주기도 하지만 안정성면에서는 위험 부담이 있다. JSDoc: 자바스크립트 소스 코드에 주석을 달기 위해 사용하는 마크업 언어 타입스크립트의 타입을 주듯이, JSDoc을 작성해두면 타입에 대한 힌트를 제공받을 수 있다. 그러나 잘못된 코드를 막을 수는 없다는 점 리팩터링 중 생긴 변경사항과 관련된 현재는 유효하지 않은 JSDoc 주석을 모두 찾는 건 어렵다. 다소 복잡한 객체를 설명하기 어렵다. https://poiemaweb.com/jsdoc-type-hint 타입스크립트…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 Module: commonjs vs esm CommonJS(cjs) 를 사용한다. CJS module loader는 동기적으로 작동한다. CJS에서는 ESM을 할 수 없다.(CJS는 을 지원하지 않기 때문이다.) CJS는 Tree-shaking(필요치 않은 코드와 사용되지 않는 코드를 삭제하여 JS 번들의 크기를 가볍게 만드는 기술) 적용이 어렵다. 이는 빌드 타임에 정적 분석을 적용하기 어렵고 런타임에서만 모듈관계를 파악할 수 있기 때문인데, 단순하게 생각하면 우리가 일반적으로 쓰는 코드처럼 require을 사용할 수 있기 때문이다.(동적으로 사용 가능하다.) ECMAScript Modules(ESM) 를 사용한다. ES…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ fetch VS axios 두 라이브러리 모두 JS 진영에서 통신을 위해 사용된다. 단순하게는 fetch가 좀더 예전 라이브러리, axios가 좀더 최신 라이브러리라고 생각해도 좋다. 비교하게 된 계기 그리고 fetch에서의 에러 처리 동료인 시저가 아래의 코드에서 왜 굳이 를 쓰고 나서 또 그 안에서 res.ok로 에러 처리를 하는건지 궁금해하였다. 얼핏 보면 가 굳이 있어야하나 싶었다. 어차피 로 에러 처리를 할텐데 굳이 또 조건문을 써줄 필요가 있을까? 하는 생각. 잘 생각해보면 이라는 건 HTTP를 통해 우리끼리 약속한 것이다. 즉, 300번이든 400번이든 함수 입장에서는 아무튼 비동기 처리가 완료되었으니 Pr…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 무한 캐러셀 구현하기 캐러셀의 내용들(주로 이미지)가 들어갈 컴포넌트를 만든다. 캐러셀 컨텐츠 컴포넌트를 만든다. 캐러셀의 하나의 영역이 지나가고 난 뒤, cont…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 마이크로소프트의 chat gpt에 맞서 구글에서는 공개 결과가 마음에 안들 때, 구글 검색 연결 가능 국내의 경우도 뤼튼의 챗 뤼튼, 카카오브레인의 다다음 등등 생성형 AI 출시 🗞 키워드 AI, 구글, 바드, 생성형 AI 🔤 단어 정리 없음 🤔 내 생각 알파고 이후로 AI가 이렇게까지 이슈가 된 적이 있었나 싶다.더군다나 우리가 사용할 수 있기에 알파고보다 더 크게 다가오는 것 같다. chat gpt의 등장은 연구, 개발이 중심이 되었던 AI 시장에 상업화라는 도화선 역할을 해준 것 같다. 빠르게…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 구독 서비스를 이용한 중고차 이용 구독 서비스를 통한 육아 서비스 편리함과 차별화를 내새워 구독 시장의 틈새를 집중 공략하는 스타트업 🗞 키워드 구독 서비스, 스타트업 🔤 단어 정리 없음 🤔 내 생각 스타트업이 구독 서비스를 통해 사업을 확장할 수 있는 배경에는 IT 기술이 있다고 생각한다. 그렇기에 규모가 작은 스타트업이 비교적 작은 비용으로 사업을 시작할 수 있을테니까. 구독 서비스를 통해 고객을 확보해두면 점차 다른 BM으로 전환할 때 유리한 고지를 선점할 수 있다. 구독 서비스 자체로 시장의 …

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 캐러셀 슬라이드쇼와 같은 방식으로 컨텐츠를 표시하는 UX 구성 요소 일반적으로 일정 시간에 따른 자동 재생 혹은 사용자가 수동으로 탐색하는 방식을 사용한다. 다양하게…

📦 잡동사니 하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니는 조선 후기 학자 이 편찬한 에서 유래된 말이다. 잡동산이는 의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다. 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣 🗂️ 캐러셀(Carousel) 슬라이드쇼와 같은 방식으로 컨텐츠를 표시하는 UX 구성 요소 일반적으로 일정 시간에 따른 자동 재생 혹은 사용자가 수동으로 탐색하는 방식을 사용한다. 다양하게 활용할 수 있지만, 보통 홈페이지에서 이미지, 제품 및 프로모션을 표시할 때 사용된다. 성능 캐러셀의 동작 방식만 생각해보면 페이지 렌더링에 많은 영향을 줄 것 같았는데, 생각보다 잘 구현된 캐러셀은 그 자체로는 성능에 미치는 영향이 매우 적거나 없다고 한다. (다만 캐러셀에 포함된 큰 미디어 자산이 영향을 줄 수 있다.) LCP(Largest Contentful Paint; 최대 콘텐트풀 페인트) 페이지가 처음으로 로드된 시점을 기준으로…

🎄 성장일지 4.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 (1.0)키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 (2.0)경험 위주로 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ (3.0)정해진 템플릿에 맞춰서 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1)230102부터 시작되는 학습에 관한 내용 추가 (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기! 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 브라우저의 렌더링 과정 JavaScript 실행 -> layout 계산 -> render tree -> paint -> composite 레이아웃 단계(리플로우) D…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 함께 일하는 사람들의 중요성 문제가 닥쳤을 때 더 많은 에너지를 쏟고 돌파해내는 실행능력, 문제해결력 지속적으로 시도하고 피드백을 받아 보완하여 성장하라 항상 현장에 답이 있음을 기억하라. 머리로만 생각하지 말자. 가치관, 열정, 실력 🗞 키워드 스타트업, 창업가, 가치관, 열정, 실력 🔤 단어 정리 엑셀러레이터: 주로 초기 스타트업의 성장을 위한 시드 투자, 연결, 판매, 멘토쉽, 교육, 그리고 성장을 가속화하기 위한 공개 피칭 이벤트나 데모데이까지 아우르는 프로그램 혹은 사람, 집단 🤔 내 생각 …

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 CSS 전처리기(CSS Preprocessor) 전처리기만의 문법을 더한 CSS 머듈 정도로 생각하면 된다. CSS가 갖는 불리한 점들을 보완하기 위함이며 대부분 CSS를 프로그래밍 언어처럼 사용할 수 있게 해준다.(변수, 함수, 조건문 등) 결국 C…

🌕 보름칼럼 단순 기록보단 좀 더 양질의, 정리된 글을 쓰고자 시작하는 부담없이 매 보름 하나의 주제를 깊게 들여다볼 수 있는 기회가 되었으면 좋겠다. 가수 윤종신님이 월간 윤종신을 통해 꾸준히 음악을 내시는 것과 같이 보름칼럼을 적어보자! 보름칼럼 규칙 매일을 기록하는 성장일지보다 좀더 깊은 내용의 글을 작성할 수 있도록 하자. 너무 욕심부리지말고 하나의 주제(키워드)에 집중한다. 2주에 한 번 다듬어진 칼럼 형태의 글을 작성한다. 마감은 매주 일요일을 기준으로 한다. 📃 글또 8기 개발자들이 모여 함께 글을 쓰고 피드백하는 커뮤니티인 글또(글쓰는 또라이가 세상을 바꾼다.)에서 활동하게 되어 보름칼럼의 규칙은 글또의 규칙을 따르기로 한다. 2주마다 글을 작성하는 규칙은 동일하며, 그 마감 날짜는 아래와 같다. 마감 날짜를 체크하며 매번 글 작성에 대해 인지하도록 하자! 🚈 들어가기에 앞서… JS로 보는 객체지향 - 1.객체편 JS로 보는 객체지향 - 2.상속합성편 처음 프로그래…

🌳 욕심과 행복 요즘의 내 삶은 딱 2가지로 표현되는 것 같다. 과 . 배움에 있어서 너무 욕심이 나고 그래서 행복하다. 아직 배울 것들이 많고 그것들에 대한 욕심이 크기에 행복할 여지가 많은 느낌이다. 지금 이렇게 생각 글을 적는 이유는 어떤 다짐이나 고민이 아니다. 그저 이 때, 정말 행복하게 열심히 공부하고 있던 내 자신을 기억하기 위함이다. 앞으로도 더 폭 넓게 열린 생각을 바탕으로 반드시 내가 원하는 것을 이루도록 하자. 🌳 욕심과 행복

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 지적 다양성을 보장하고, 자유로운 소통 활성화, 개개인의 독립성 존중, 서로 협혁하는 마음 없이 집단 지성은 작동하지 않는다. 배움에 있어 집단적, 사회적 분위기에 쉽쓸리지 않는 지적 독립성은 중요하다. 자칫하면 배움이 추종으로 변할 수 있다. 🗞 키워드 배움, 집단 지성, 동료, 비판, 자기 생각 🔤 단어 정리 홍위병: 중화인민공화국의 문화 대혁명 당시 조직된 극좌 대중운동의 구성원들 🤔 내 생각 아주 짧은 칼럼이지만, 배움이란 무엇인지 깊게 생각해볼 수 있는 좋은 글이다. 특히나 요즘 동료들과 함…

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 CSS Transition 속성을 활용해서 애니메이션 효과를 만드는 방법? 기준이 되는 태그에 의 형태로 스타일을 부여합니다. 그 다음, 어떤 이벤트(hover, event handler 등)에 따라 targetProperty의 값을 변경하는 스타일을…

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 컴포넌트 합성하여 더 큰 컴포넌트 만들기(feat. TS, Vanilla Extract) 먼저 아래와 같이 Base 역할을 해주는 component를 만들어준다. 이 component는 전달받은 html string을 element 형태로 갖고 있고 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 요즘 우리는 누구나 100세까지 산다는 것을 대수롭지 않게 생각한다. 왜 우리는 죽음을 두려워하는가? 토머스 제퍼슨(미국의 정신과 의사, 신학자) “우리 모두에겐 죽음이 무르익어 찾아올 때가 있습니다. 우리가 죽음으로써 또다른 성장을 이루어야할 바로 그때가 말입니다.” 🗞 키워드 100세 시대, 죽음, 죽음에 관하여 🔤 단어 정리 보왕삼매론: 원나라 말기 ~ 명나라 초기의 선승인 묘협 스님의 저서 ‘보왕삼매염불직지’ 중 제17편(십대애행: 열가지 큰 장애가 되는 행)의 구절을 가려뽑아 엮은 글. 즉,…

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 Vanilla Extract 그리고 TypeScript Sass, LESS와 같이 빌드 타임에 모든 스타일들이 발생하면서 동시에 타입스크립트와 함께 한다. Framework Agnostic, 즉 어떤 프레임워크에도 의존하지 않는다. 타입스크립트와 아주…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 SVB 파산 사태, 과거와는 전혀 다른 방식의 금융위기 SVB는 예금의 상당 부분이 최우량자산인 미국 국체임에도 금리 인상 충격을 견디지 못해 즉, 부실 자산 없이도 은행이 망할 수 있는 케이스 또한 디지털화로 빨라진 ‘뱅크런’ 속도 🗞 키워드 은행, 실리콘밸리 은행, 뱅크런 🔤 단어 정리 블랙스완: 일어날 것 같지 않은 일이 일어나는 현상 금융시장에서는 주로 금융시장을 뒤흔들 수 있는 예상치 못한 큰 사건을 말한다. 화이트스완: 과거 경험상 충분히 예측가능하고 예방할 수 있었으나 적절한 대응책을 마…

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 git stash a 브랜치에서 b 브랜치를 따고 로컬에서만 b 브랜치에 변경 사항이 발생하면 a 브랜치로 스위치가 가능하다. 이유: commit을 기준으로는 변경이 일어나지 않았고, 로컬에서 워킹 디렉토리에서만 변경이 있기 때문에 b에서의 변경사항 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 미국 정부가 SVB 파산에 따른 예금에 대해 전액 보증을 약속 또한 은행규제 강화 언급 한편, 미국 29위 시그니처은행도 파산 아직 완전히 끝난 게 아닌 연쇄 도산 지켜봐야할듯 금리 인상 빅스텝(0.5%포인트 인상)보다 베이비스텝(0.25%포인트 인상)될듯 🗞 키워드 은행, 실리콘밸리 은행, 파산, 스타트업, 시그니처은행 🔤 단어 정리 뱅크런: 은행이 어떤 손실에 의해 부실해지는 경우, 예금주들이 한꺼번에 돈을 찾아가는 대규모 예금 인출 사태 🤔 내 생각 미국 정부도 참 대단하다. 세금에 일체 의존하…

🎄 성장일지 3.2 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기! 🔑 오늘의 키워드 DOM api가 존재하는 이유 DOM Tree를 탐색하기 위해 JS로 탐색 알고리즘을 구현하면 너무 힘고 번거롭다. 해서 브라우저에서 DOM Tree를 탐색하기 위한 다양한 DOM api를 제공한다. textNode vs elementNode DOM의…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 미국 16위 은행인 실리콘밸리은행의 파산 2일만에 급격하게 일어난 파산으로 스타트업 위기 21년도 예금 1890달러, 대출 660억 달러로 유동성 과도화 스타트업 경영 악화에 인출 늘면서 인출 대응 위해 매도가능증권 매각 점차 뱅크런 조짐 발생 및 증자 실패 -> 파산 🗞 키워드 은행, 실리콘밸리 은행, 파산, 스타트업 🔤 단어 정리 뱅크런: 은행이 어떤 손실에 의해 부실해지는 경우, 예금주들이 한꺼번에 돈을 찾아가는 대규모 예금 인출 사태 🤔 내 생각 실리콘밸리은행(SVB)이 파산했다. 에어비앤비,…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 는 주로 언제 활용할까? 하위 요소들을 absolute로 주고 그 요소들의 기준을 잡을 때, 상위 요소에 사용한다. 와 의 차이는? : test 태그의 아래 있는 모든 div 태그들을 선택 : test 태그의 바로 아래 깊이에 있는 div 태그들을 선택 head 태그 안에 들어가는 태그들? title: 사이트의 이름…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 기존에는 기업의 거짓 친환경 광고에 대한 처벌 근거만 존재 환경부, 10월까지 경영 활동에 대해 처벌할 법적 근거가 생길 예정 기업 측 “녹색 전환을 위해 노력하고도 관련 마케팅에 제약이 생길 수 있어 부담” 🗞 키워드 환경, 환경부, 그린워싱, 규제, 법제화 🔤 단어 정리 없음 🤔 내 생각 기업에게 가장 근본적인 우선순위는 이다. 너무 당연하지만 생존을 해야 기업이 남아있기 때문이다. 한편 생존에 영향을 주는 변수는 매우 많다. 그 중 가장 직접적이고 우리가 이해하기 쉬운 요소는 바로 즉, 이다.…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 CSS BEM 다시 적용하기 형태로 모든 태그에 클래스 붙이기 html 전체적인 레이아웃 잡기 큰 틀 자체는 로 잡고 그 안에 좀더 구체적인 부분은 으로 잡자. 이게 효율적인건지는 모르겠지만, 일단 편하고 반응형으로 대응하기도 좋은 것 같다. 참고 CSS BEM 📝 요약 및 하루 간단 회고 예비군 다녀오느라 미션을…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 css에서 변수를 만들어서 사용하기 아래와 같이 에 변수를 설정해준다. 설정한 변수를 형태로 사용한다. box-sizing 설정 기본적으로 로 설정되어있다. content-box: width, height가 padding 내부의 content를 기준으로 한다. border-box: width, height가 con…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 주당 15만원, 총 1조 2500억 실탄 쏟아붓기로 최대 40% 지분 확보도 가능 하이브와의 경영권 분쟁 격화 🗞 키워드 SM, 카카오, 하이브 🔤 단어 정리 없음 🤔 내 생각 최근 카카오와 하이브의 SM 경영권 분쟁이 아주 핫하고 지저분하게 이뤄지고 있다.(사실 최근이라기에도 뭐하게 길어지고 있다.) 솔직히 말하면 카카오가 무슨 생각인지 잘 모르겠다. 처음엔 무심코 SM 인수 후 메타버스와 엮어서 사업을 확장해보려하는 정도라고 생각했다. 그런데 이렇게까지 무리해서 경영권을 차지하려는 것을 보면 뭔가…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 Pull Request 아직 변경 사항이 완료되지 않았고 리뷰 및 피드백을 받길 원할 때 설정한다. 작업을 공유하고 다른 기여자들로부터 피드백을 받을 수 있다. 변경 사항이 완료되기 전에 검토하여, 프로세스 초기에 잠재적인 문제를 파악할 수 있다. 아직 병합하면 안되는 PR임을 가시적으로 알 수 있다. 코딩 컨벤션…

🌳 cs16 과정을 마치며 현재 듣고 있는 교육의 cs 과정이 모두 마무리되었다. 약 2달동안 온라인으로 동기들과 함께하며 이전보다 5배 정도 성장한 것 같다. 물론 객관적인 수치는 아니지만 말이다.(ㅎㅎ) 컴퓨터의 전기적 신호가 어떻게 컴퓨터 구조에서 작동하는지, cpu와 메모리는 왜 존재하는지 등의 추상적인 흐름을 직접 코드로 구현해보며 감을 잡을 수 있었다.(코드는 좀 엉성하지만 🤪) 그리고 나의 최애가 되어버린 객체지향부터 함수형까지 프로그래밍의 패러다임을 재미있게 배워 볼 수 있었다.(객체지향은 사랑입니다. 🥰) 다음으로 운영체제(OS)가 어떻게 각 프로세스들을 관리하고 얼마나 많은 일들을 해내는지 알 수 있었고 네트워크 과정에서는 어떻게 수많은 컴퓨터들이 서로 데이터를 보내고 소통할 수 있는지 배울 수 있었다.(네트워크도 내 최애 파트가 되었다. 🥳) 아, 그리고 과거부터 사람들이 데이터를 효율적으로 저장하기 위해 얼마나 노력했는지 느낄 수 있었던 자료구조부터, 백엔드의…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 퇴직한 중소기업 인력을 전 직장의 프리랜서 형태로 연결 기업 인력난 덜어주고, 중장년의 재취업에 도움되며 윈윈 🗞 키워드 중장년, 재취업 🔤 단어 정리 없음 🤔 내 생각 틈새. 성공과 실패의 유무를 떠나서, 어떤 시스템의 틈새를 본 스타트업을 좋아한다. 물론 기업에게 있어 돈이 우선이기에, 대부분은 돈을 벌기 위한 틈새를 노린다. 돈을 벌 수 있는 틈새와 더불어 사회적인 문제까지 해결할 수 있는 틈새가 좋다. 위 기사의 기업들이 대표적인 선례가 아닐까? 40, 50대의 명예퇴직 후 다시금 프리랜서 형…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 git 형상 관리 도구(=버전 관리 시스템) 중 하나 개발자의 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개 소프트웨어 SVN보다 많은 장점이 있어 요즘엔 거의 Git을 사용한다. SVN(=SubVersioN): 중앙 서버에 소스코드와 히스토리를 저장 Git: 소스코드를 여러 개발 로컬 PC와 저장…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 p179. 스태틱, 프로토타입, 인스턴스 메서드 예제 + Quiz 1, 2) Quiz1) 위의 코드에서 새로운 객체(인스턴스) test2를 선언하면 test2는 어떤 메서드(들)를 갖고 있나요? 예상답안 Quiz2) test2에서 스태틱 메서드에 접근할 수 있는 방법이 있을까요? 예상답안 p182. Quiz 3) 클…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 기존 산업과 IT(플랫폼)의 갈등이 더 격화될 전망 최근 로톡사태를 더불어 보이지 않는 갈등 🗞 키워드 IT, 플랫폼, 기존 산업과의 갈등 🔤 단어 정리 비화하다: 어떠한 일의 영향이 직접 관계가 없는 다른 데에까지 번지다. 🤔 내 생각 무언가 새로운 변화의 흐름을 맞이하는 건 쉬운 일이 아니다. 플랫폼과 기존 산업의 갈등 또한 마찬가지다. 그렇지만 이건 억지로 막는다고 해결될 문제가 아니다. 말 그대로 시대의 흐름이다. 마치 인간이 뛰어다니다가 말을 타게 되고, 말을 타고 다니다가 차를 타게 된 것…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 데이터베이스 데이터의 집합, 흔히 DB(DataBase)라고 부른다. 일반적으로 그냥 라고 하면 보통 관계형 데이터베이스를 말한다. 또한, 엄밀히 DB는 데이터 저장소를 의미하고 우리가 사용하는 MySQL, MariaDB, MongoDB 등은 이다. 어댑터 서로 다른 전기, 기계 장치를 연결해서 작동할 수 있도록 만…

🌕 보름칼럼 단순 기록보단 좀 더 양질의, 정리된 글을 쓰고자 시작하는 부담없이 매 보름 하나의 주제를 깊게 들여다볼 수 있는 기회가 되었으면 좋겠다. 가수 윤종신님이 월간 윤종신을 통해 꾸준히 음악을 내시는 것과 같이 보름칼럼을 적어보자! 보름칼럼 규칙 매일을 기록하는 성장일지보다 좀더 깊은 내용의 글을 작성할 수 있도록 하자. 너무 욕심부리지말고 하나의 주제(키워드)에 집중한다. 2주에 한 번 다듬어진 칼럼 형태의 글을 작성한다. 마감은 매주 일요일을 기준으로 한다. 📃 글또 8기 개발자들이 모여 함께 글을 쓰고 피드백하는 커뮤니티인 글또(글쓰는 또라이가 세상을 바꾼다.)에서 활동하게 되어 보름칼럼의 규칙은 글또의 규칙을 따르기로 한다. 2주마다 글을 작성하는 규칙은 동일하며, 그 마감 날짜는 아래와 같다. 마감 날짜를 체크하며 매번 글 작성에 대해 인지하도록 하자! 🚈 들어가기에 앞서… JS로 보는 객체지향 - 1.객체편 JS로 보는 객체지향 - 2.상속합성편 처음 프로그래…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 글을 읽고도 무슨 의미인지를 모르는 젊은 층 급증 ‘심심한 사과’, ‘사흘’, ‘무운’ 등의 표현을 몰라 유아 시절부터 스마트폰, 유튜브 등 디지털 기기와 영상 매체 노출 영향 문해력을 키우는 가장 쉽고 효과적인 방법은 신문 읽기 🗞 키워드 문해력, 신문 읽기 🔤 단어 정리 무운: 전쟁의 승패에 관한 운수 🤔 내 생각 흔히 ‘무운을 빈다.‘라는 표현을 사용하곤 하는데, 그냥 대충 잘하고 오길 기원하는 정도로만 알았다. 위와 같은 뜻이 있는 줄은 이제 알았다. 내가 처음 신문을 읽게 된 계기는 이전에 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 도커로 mysql 컨테이너 띄우고 ts로 간단하게 연결하는 과정 복기 먼저 docker를 웹에서 다운로드 받는다.(본인의 OS에 맞게 잘 받아야한다.) 도커 버전 확인 docker를 통해 mysql 이미지를 가져와서 컨테이너를 띄운다. 이 때, 원하는 환경변수를 설정하는 건 덤이다! 3307포트로 root 비번은 1…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 2022년 12월 1일 오픈AI가 공개한 대화하는 AI 챗봇 5일만에 하루 이용자 100만명 돌파, 월간활성이용자수(MAU) 1억명 초과 한계로는 2021년까지의 사건들만 인지하고 있다는 점, 데이터베이스 유지비 및 업데이트에 막대한 비용 Chat GPT 포함 AI 생산물에 대한 저작권 문제 🗞 키워드 AI, Chat GPT 🔤 단어 정리 월간활성이용자수(Monthly Active User; MAU): 30일의 기간 동안(한달 동안) 앱과 상호 작용한 사용자 수 🤔 내 생각 개발 공부를 하면서 생각해…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 데이터베이스 데이터의 집합, 흔히 DB(DataBase)라고 부른다. 일반적으로 그냥 라고 하면 보통 관계형 데이터베이스를 말한다. 또한, 엄밀히 DB는 데이터 저장소를 의미하고 우리가 사용하는 MySQL, MariaDB, MongoDB 등은 이다. SQL 의 약자로, 데이터베이스에게 질문하듯이 사용하는 이다. SH…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 4. 콜백함수 일시: 2월 19일 22시 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제 🏀 기술책 스터디 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 ch4. 콜백 함수 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제 참고 코어 자바스크립트 - 4.콜백함수 📝 요약 및 하루 간단 회고 제주도…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 연준 매파들의 빅스텝 언급 경제지표 긍정적 해석에 찬물 🗞 키워드 미국 증시, 빅스텝 🔤 단어 정리 없음 🤔 내 생각 이제 이런 상황에 크게 영향받지 않기로 했다. 하루하루 급변하는 방향성이 오히려 혼란을 주는 느낌..? 누구도 예측할 수 없고 알 수 없는거지만 너무 손바닥 뒤집듯이 미국 증시에 대한 흐름이 변하는 것 같다. 그냥 참고만 하자! 🗞️ 신문스크랩 2.1 🌻 주요 기사 🗞 키워드 🔤 단어 정리 🤔 내 생각

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 Status Code 상태 코드로 클라이언트의 요청에 대한 서버의 응답 상태를 나타낸다. 1xx: 요청이 수신되어 처리되고 있다.(사실상 받을 일이 거의 없다.) 2xx: 요청 정상 처리 완료 3xx: 요청을 완료하기 위해 추가적인 행동이 필요함을 의미한다. 4xx: 클라이언트 측 오류. 즉, 요청에 있어서 오류가 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 DNS 의 약자 단순하게 우리가 요청한 URI(혹은 URL)에 대해 해당하는 IP 주소를 찾아주는 시스템 사람 이름에 따라 전화번호를 찾을 수 있는 전화번호부와 비슷한 기능을 한다. Socket 프로세스가 네트워크를 통해 서버로 어떤 요청을 전송할 때, 즉 어떤 응답을 받기 위한 실제적인 창구 역할을 한다. 데이터를…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 diagonal_difference time_conversion number_line_jumps save_the_prisoner 참고자료 해커랭크 - diagonal_difference 해커랭크 - time_conversion 해커랭크 - number_line_jumps 해커랭크 - save_the_prisoner …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 2시간 동안 돌아가며 3명까지 만날 수 있는 소개팅 방식 동시에 서로 호감 가져야 연락처 공개 🗞 키워드 소개팅, 앱 🔤 단어 정리 없음 🤔 내 생각 2시간 동안 3명의 남녀가 각각 파트너를 이뤄 산책, 빵 만들기, 와인 마시기를 하며 소개팅을 한다. 심지어 서로 파트너를 돌아가면서 마음에 드는 사람을 찾을 수 있다. 이게 가능한 이유는 소개팅 앱 덕분이다. 일단 이런 니즈가 있는 사람들을 모을 수 있고, 가장 큰 문제가 될 수 있는 개인정보 또한 동시에 서로 호감을 갖게 되면 서로에게 공개되도록 한…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 캐시 정책 브라우저가 어떻게 캐시를 관리할지 정하는 것 기본적으로 네트워크 상에서 무언가를 요청하고 응답받는 것은 느리고 큰 비용이 든다. 때문에, 모든 브라우저는 한번 응답받은 적이 있는 데이터에 대해 저장해두고 이후 동일 한 데이터 호출 시 요청하지 않고 캐시에서 가져온다. 이런 캐시의 수명(유지시간)을 결정하는…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 미국 카네기멜런대 컴퓨터 과학 전공, 미국 마이크로소포트 출신의 창업기 경험을 살려 해충 박멸 회사 창업 🗞 키워드 컴퓨터공학도, 창업 🔤 단어 정리 없음 🤔 내 생각 국내에서 머물 당시, 바퀴벌레가 나와 박멸 서비스를 알아보던 중 가격이 너무 비싼 것이 의아하여 직접 창업하셨다고 한다. 시장이 어떻게 형성되어있는지 확인하기 위해 직접 새벽 6시부터 방역을 다니고 밤 늦게도 방역을 다니셨다고 한다. 거기서 업계(도메인)에 대해 이해도를 높이고 시장 가능성을 찾았다. IT를 이용한 창업에는 크게 2가지…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 비동기(async, await)를 활용하여 input을 받는 receiver 만들기 참고자료 없음 📝 요약 및 하루 간단 회고 오늘은 새로운 방식으로 학습을 시도해보았다. 평소처럼 키워드, 개념부터 정리하기보다 무작정 구현에 뛰어들었다. 생각보다 구현하면서 배우는 게 많았고 신선한 느낌이었다..! 전부 다 구현한 건…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 코로나19 이후 20대 청년층의 편의점 창업이 꾸준히 증가 통상 퇴직한 50대가 창업하던 것과는 다른 양상 취업 문이 좁아진 것과 직업관에 대한 변화가 주된 이유로 꼽힌다. 🗞 키워드 편의점, 청년, 20대 사장님 🔤 단어 정리 없음 🤔 내 생각 직업을 바라보는 청년층들의 기준이 변하고 있다. 그렇다면 왜 변하는걸까? 나는 크게 2가지라고 생각한다. 첫 번째, 우리나라의 성장기에 열심히 일하시고 교육에 대한 기반을 마련해주신 부모 세대들 덕분이다. 우리나라가 살기 좋아지면서 다양한 가치관을 정립할 수…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 3. this 일시: 2월 12일 20시 Quiz 1 p79. class의 this 생각해보기 예상 답안 test 객체 undefined - 함수로서 호출했으므로 전역 객체일 것 같지만, class는 es6에 도입되어 기본적으로 가 적용되기 때문입니다. call, apply, bind 메소드 Quiz 2 p83. 예제 3-18-(1) 예상 답안 2가지 Quiz 3 p87. 예제 3-25 1. 예상 답안 2. 예상답안 Quiz 4 p93. 개념 + p77. 예제 3-12-(2) 1, 2. 예상 답안 3. 예상 답안 🏀 기술책 스터디 Quiz 1 p79. class의 this 생각해보기…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 동기화 프로세스 또는 스레드들이 수행되는 시점을 맞추고 서로 알고 있는 정보가 일치하게 하는 것 크게 순서 개념의 동기화가 있고 공유 자원에 한번에 하나만 접근하게 하는 개념의 동기화가 있다. 동기화 방법은 크게 뮤텍스, 세마포어, 모니터 등이 있다. 비동기 입력 비동기적으로 입력을 받는 것으로 적절한 함수를 호출하…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 기존의 검색 엔진 시대가 끝나고 창의성 엔진 시대가 온다. 인공지능 서비스를 얼마나 잘 활용하는지도 개인의 경쟁력 학습, 업무 등에서 개개인의 활용도가 곧 경쟁력이 될 것 🗞 키워드 투자, 시장 금리 하락, 긴축 마무리 🔤 단어 정리 머니마켓펀드(Money Market Fund; MMF): 하루만 투자해도 수익을 얻을 수 있는 초단기 수시입출식 실정배당상품. 주로 증권사를 통해 판매된다. 🤔 내 생각 음… 과연 어떨까? 일단은 한은의 금리 인상 종료 기대감에 일어나는 현상같은데, 좀더 두고 지켜봐야할…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 스케줄링 운영체제(OS)가 프로세스들에게 공정하고 합리적으로 CPU 자원을 배분하는 것 스레드 하드웨어적 스레드: 코어 하나가 동시에 처리하는 명령의 단위 소프트웨어적 스레드: 프로그램 하나에서 독립적으로 실행되는 단위 이벤트 처리 이벤트 단위의 병렬 처리 단일 스레드에서 비동기적으로 작업을 수행하기 위해 이벤트를 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 타입스크립트 vs 타입스크립트 타입스크립트 컴퓨터 구조 복습 멀티 스레드 여러 스레드로 프로세스를 동시에 실행하는 것 TCB 스레드의 정보를 포함하는 운영 체제 커널의 데이터 구조 컨텍스트 이동(문맥 전환) 기존 프로세스의 문맥(컨텍스트)를 백업하고 다른 프로세스를 실행하기 위해 문맥(컨텍스트)을 PCB로부터…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 타입스크립트(자바스크립트) 에러 핸들링 컴퓨터 구조 및 CPU 복습 제어장치, ALU, 레지스터 참고자료 책 📝 요약 및 하루 간단 회고 오늘은 뭔가 정신없이 지나갔다. 구현보단 책을 보며 개념을 다시 잡는 하루였다. 내일 제대로 개념 잡고 확실하게 스케줄러를 구현해볼 것이다!!! 오늘의 잘한 점 이전에 공부했던 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 스케줄링 CPU는 하나인데 동시에 실행되어야 할 프로세스는 여러 개이기 때문에 이를 지원하는 방법 여러 프로세스가 작동할 때, 어떤 시점에 어떤 프로세스에게 자원을 할당할지 결정하는 방식 스케줄링 방법에 따라서 CPU(프로세서)를 할당받을 프로세스를 결정하게 된다. 그러므로 스케줄링 시스템의 성능에 직/간접적인 영향…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 기존의 검색 엔진 시대가 끝나고 창의성 엔진 시대가 온다. 인공지능 서비스를 얼마나 잘 활용하는지도 개인의 경쟁력 학습, 업무 등에서 개개인의 활용도가 곧 경쟁력이 될 것 🗞 키워드 AI, ChatGPT, 경쟁력 🔤 단어 정리 없음 🤔 내 생각 AI가 사람의 모든 것을 대체할 수는 없다. 거창하게 AI(Artificial Intelligence)라는 이름을 붙였지만, 결국 인간이 활용할 수 있는 하나의 프로그램이다. 엑셀, 파워포인트, 워드 등의 작업 도구를 잘 다루면 개인의 경쟁력이 올라가는 것처럼…

🌕 보름칼럼 단순 기록보단 좀 더 양질의, 정리된 글을 쓰고자 시작하는 부담없이 매 보름 하나의 주제를 깊게 들여다볼 수 있는 기회가 되었으면 좋겠다. 가수 윤종신님이 월간 윤종신을 통해 꾸준히 음악을 내시는 것과 같이 보름칼럼을 적어보자! 보름칼럼 규칙 매일을 기록하는 성장일지보다 좀더 깊은 내용의 글을 작성할 수 있도록 하자. 너무 욕심부리지말고 하나의 주제(키워드)에 집중한다. 2주에 한 번 다듬어진 칼럼 형태의 글을 작성한다. 마감은 매주 일요일을 기준으로 한다. 📃 글또 8기 개발자들이 모여 함께 글을 쓰고 피드백하는 커뮤니티인 글또(글쓰는 또라이가 세상을 바꾼다.)에서 활동하게 되어 보름칼럼의 규칙은 글또의 규칙을 따르기로 한다. 2주마다 글을 작성하는 규칙은 동일하며, 그 마감 날짜는 아래와 같다. 마감 날짜를 체크하며 매번 글 작성에 대해 인지하도록 하자! 🚂 들어가기에 앞서… 보름칼럼의 첫 주제로 어떤 글을 작성해야하나 많은 고민을 했습니다. 하루하루 배운 내용을…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 5. 클로저 일시: 2월 3일 20시 클로저 MDN: 함수(inner)와 그 함수가 선언될 당시(outer)의 lexical environment의 상홍관계에 따른 현상 에서 선언한 를 참조하는 를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 가 사라지지 않는(가비지 콜렝팅되지 않는) 현상 Quiz1) p119. 예제 5-3. 말로 설명해보기 bind() call, apply와의 차이 Quiz2) p127. 예제 5-8. 말로 설명해보기 Quiz3) p128. 예제 5-9. 화살표 함수로 변경해보기 public, private, protected 찾아보기 정보 은닉 = …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 오픈AI, 한달 20달러 요금 출시 실제 사용자들, 1~2일 걸릴 문서 작업 5초만에 작성 단, 무분별한 정보를 토대로 하므로 정보신뢰성의 문제 🗞 키워드 AI, ChatGPT 🔤 단어 정리 없음 🤔 내 생각 ChatGPT. 요즘 정말 화제가 되고 있는 AI 챗봇이다. AI는 아니지만, 어릴 적 문자를 보내면 답장을 보내주는 프로그램이 있었다. 당시 사람(알바)이 하나하나 답하거나 매크로 형태로 보내는 게 아니라 정말 사람처럼 대화가 가능한 게 나오면 재미있을 거라 생각했다. 딱 그 때 생각했던 게 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 함수 합성 함수형 프로그래밍에서 잘게 나누어진 순수함수들을 조합하는 방법 고차함수 함수를 인자로 전달받는 함수 함수를 반환하는 함수 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 이용하여 반환한다. 자바스크립트에서 함수는 이기에 가능하다! 커링(Currying) 커링은 f(a, b, c)처럼 단일 호출로 처리…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 최대한 함수형 프로그래밍으로 알고리즘 문제 풀기 기존에 풀었던 알고리즘 문제를 다시 풀 기회가 생겼다. 다시 푸는 김에 타입스크립트 + 함수형 프로그래밍을 최대한 지키면서 풀어보기로 했다. 프로그래머스 - K번째 수 새로운 풀이 기존 풀이 프로그래머스 - 이상한 문자 만들기 새로운 풀이(커링 함수 사용) 기존 풀이 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 모나드 수학의 범주론에서 사용되는 구조로 Haskel, Scala에서 이를 프로그래밍에 적용 비동기 연산 처리 => Promise가 사실 Monad의 일종 값이 미래에 존재하거나 값이 null인 경우를 모델링할 때 Monad를 사용한다. flatMap() map() 메서드와 동일하되 그 뒤에 각 원소 별로 flat(…

📚 Monad란 무엇인가? 이 글은 Monad란 무엇인가?를 시청 후 개인 공부 및 정리용으로 작성한 글입니다. Scala(Scalable Language) 사용자가 언어를 확장하면서도 원래 언어가 지원하는 것처럼 사용 가능 Functional Language 함수가 1급 계층 변수 불변 타입클래스 패턴 매칭 Currying Monad? 수학의 범주론에서 사용되는 구조로 Haskel, Scala에서 이를 프로그래밍에 적용 map()을 단순하게 배열의 원소에 어떤 함수를 적용하고 그 반환값으로 새로운 배열을 만든다고 생각하면 고통이 시작된다. 모나드를 이해하는 데 이렇게 생각하는 건 좋지 못하다! (자바스크립트에서 flatMap()은 먼저 map을 하고 이후에 flat을 해주는 역할) Monad는 어떤 경우에 필요한가? 비동기 연산 처리 => Promise가 사실 Monad의 일종 값이 미래에 존재하거나 값이 null인 경우를 모델링할 때 Monad를 사용한다. Monad의 정의(발…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 순수함수(Pure Function) 부수 효과(side effect)가 없는 함수. 어떤 함수에 동일한 인자를 주었을 때, 같은 값을 반환하는 함수 즉, 우리가 수학에서 배우던 함수의 개념 불변성(Immutability) 변하지 않는 성질 자바스크립트에서 원시 타입은 기본적으로 불변성을 갖는다. 객체는 기본적으로 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 가상화폐 APT(앱토스), 한달새 5배 상승 실제 부동산과 관련 없지만 아파트와 이름 비슷해 한국서 인기 가격 고점 가능성 한국 업비트에서만 거래량의 30%가 나오고, 하루 거래량 1조원을 넘기기도… 🗞 키워드 가상화폐, APT(앱토스), 부동산(?) 🔤 단어 정리 APT(앱토스): 메타(전 페이스북) 출신(?) 코인으로, 메타가 자체 코인을 개발하려 했던 ‘리브라 프로젝트’가 취소되면서 해당 개발자들이 별도로 개발한 가상화폐 🤔 내 생각 이 기사를 통해 더욱더 확고해졌다. 현재의 가상화폐는 인간 욕…

🌕 보름칼럼 단순 기록보단 좀 더 양질의, 정리된 글을 쓰고자 시작하는 부담없이 매 보름 하나의 주제를 깊게 들여다볼 수 있는 기회가 되었으면 좋겠다. 가수 윤종신님이 월간 윤종신을 통해 꾸준히 음악을 내시는 것과 같이 보름칼럼을 적어보자! 보름칼럼 규칙 매일을 기록하는 성장일지보다 좀더 깊은 내용의 글을 작성할 수 있도록 하자. 너무 욕심부리지말고 하나의 주제(키워드)에 집중한다. 2주에 한 번 다듬어진 칼럼 형태의 글을 작성한다. 마감은 매주 일요일을 기준으로 한다. 📃 글또 8기 개발자들이 모여 함께 글을 쓰고 피드백하는 커뮤니티인 글또(글쓰는 또라이가 세상을 바꾼다.)에서 활동하게 되어 보름칼럼의 규칙은 글또의 규칙을 따르기로 한다. 2주마다 글을 작성하는 규칙은 동일하며, 그 마감 날짜는 아래와 같다. 마감 날짜를 체크하며 매번 글 작성에 대해 인지하도록 하자! 관심 주제(생각날 때마다 적어두기) 23.02.12 / 주제: 다짐 23.02.26 / 주제: 23.03.1…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 2. 실행 컨텍스트 일시: 1월 29일 19시 실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행 실행 컨텍스트 구성 방법: 전역공간, eval() 함수, 함수 구성하는 방법은 오로지 최상단의 공간(전역공간)은 코드 내부에서 별도의 실행이 없어도 브라우저가 자동으로 실행하여 전역 컨텍스트를 만든다.(anonymous) 콜 스택의 가장 위(마지막) 실행 컨텍스트가 쌓이는 순간이 현재 코드에 관여하게 되는 시점 실행 컨텍스트 객체 3형제…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 타타타타타타타입스크크크크크크크립트 처음 자바스크립트 언어 특유의 자유로움 때문에 너무 좋았다. 헌데 타입스크립트는 뭔가 시퍼런 게, 그 자유로움에 찬물을 붓는 느낌이라 막 호감이 가진 않았던 거 같다. 생각보다 복잡하기도 하고 일일히 타입을 지정해주어야 하는 게 아주 큰 장점으로 느껴지진 않았다.(규모가 굉장히 작은…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 미국보다 빠르게 금리인상중단 선언한 캐나다 연준보다 더 발빠르게 금리인상을 했던 BOC라서 더 주목 연준이 BOC를 뒤따를지 그 귀추가 주목된다. 🗞 키워드 경제, 연준, BOC, 금리인상중단 🔤 단어 정리 BOC(Bank Of Canada): 캐나다 중앙은행 🤔 내 생각 몇 일전까지는 생각보다 금리 인상을 쉽게 멈추진 않을 것 같았다. 그러나 슬슬 생각보다 경제가 안정기에 빨리 접어들면서 금리 인상이 많이 약해질 것이라는 의견이 많다. 21년도와 같은 경제 시장은 아니더라도, 좀더 원활하게 현금이…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 XML Extensible Markup Language로 데이터를 정의하는 규칙을 제공하는 다목적 마크업 언어 주로 다른 종류의 시스템, 특히 인터넷에 연결된 것들끼리 데이터를 쉽게 주고 받을 수 있게 할 목적으로 만들어졌다. 토큰 프로그래밍 언어에서 더 이상 나눌 수 없는 기본적인 언어요소(가장 작은 요소들) 하나…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 일급 객체 일급 시민이란 어떤 혜택을 받는 게 아닌, 사용할 때 다른 요소들과 아무런 차별이 없다는 의미 모든 일급 객체는 함수의 실질적인 매개변수가 될 수 있다. 모든 일급 객체는 함수의 반환값이 될 수 있다. 모든 일급 객체는 할당의 대상이 될 수 있다. 모든 일급 객체는 비교 연산을 적용할 수 있다. 자바스크립…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 책임과 역할 책임 객체가 수행하는 로직 또는 행동 객체가 어떤 요청에 대해 대답해 줄 수 있거나, 적절한 행동을 할 의무가 있는 경우 ‘무엇을 알고 있는가?’ / ‘무엇을 할 수 있는가?’ 로 구분된다. 역할 객체가 수행하는 책임의 집합 재사용 가능하고 유연한 객체지향 설계를 하게 해준다. 📝 요약 및 하루 간단 회…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 객체지향 프로그래밍(Object-Oriented Programming; OOP) 프로그래밍에서 필요한 데이터를 추상화시켜 로 만들고 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법 객체지향 프로그래밍 그림 클래스 (자바스크립트)객체를 생성하기 위한 템플릿이자 방법 중 하나. 객체를 만들어 내기 위한 설계도…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 장애인을 위한 각종 소프트웨어의 등장 접근성 기술 🗞 키워드 소프트웨어, 장애인, 접근성 기술 🔤 단어 정리 접근성 기술(Accessibility Technology): 가족이나 전문 돌봄 인력의 도움 없이도 장애인들이 일상적 자립을 가능하게 해주는 기술 🤔 내 생각 장애인을 위한 기술들이 발전하고 있다. 내가 관심이 가는 부분은 그들을 위한 UX/UI 파트이다. 장애인분들마다 갖고 있는 장애가 다르기에, 그에 맞는 편리하고 효율적인 사용자 경험을 제시할 수 있으면 좋을 것 같다. 아무래도 이런 서비…

🌳 나의 삶의 지도 어릴 적부터 공부를 곧잘 했고 나름 선한(?) 가치관을 갖고 자랐다. 초등학생 시절, 내 세상의 전부는 가족들과 친구들이었다. 그러던 중 생각지도 못한 전학을 연달아 2번이나 가게 되면서 많이 힘들었던 기억이 있다. 아마 이때의 경험이 순둥순둥하던 나를 민감한 사춘기 청소년으로 만든 게 아닐까 싶다. 다행히 겁이 많은지라, 크게 엇나가는 일은 없었고 그저 매우 예민한 중학생 시절을 보냈다. 어느 새 사춘기를 지나, 남고에 진학하여 좋은 친구들을 많이 만나고 가고싶은 대학과 전공 그리고 하고 싶은 삶의 방향을 정하기 시작했다. 그 당시에는 깊게 공부하여 세상을 좀 더 이롭게 바꿀 수 있는 과학자가 되고 싶었다. 그래서 순수 자연 계열 전공을 선택하게 되었다. 그렇게 운이 좋게도 제일 원했던 대학의 학과에 입학할 수 있었다. 대학 생활을 하며 공부 외적으로도 생각보다 다양한 활동들에 눈을 뜨게 되었다. 사진 동아리를 통해 행사 전시회, 개인 전시회도 열어보고 봉사…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 캐시 메모리 CPU의 처리속도와 메모리의 접근 속도 차이를 줄이기 위해 사용하는 고속 Buffer Memory 캐시는 주기억장치(Memory)와 CPU 사이에 위치, 자주 사용하는 프로그램과 데이터를 기억 처리속도가 거의 CPU의 속도와 비슷 캐시 메모리를 사용하면 메모리에 접근하는 횟수가 줄어들게 되어 CPU의 처…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 전산 파일 손상으로 미국 전국적 항공편 마비 해킹 가능성은 낮은 것으로 판단 항공 교통 시스템의 취약성 확인 🗞 키워드 미국, 항공, 마비, 소프트웨어 🔤 단어 정리 없음 🤔 내 생각 파일 손상 하나로 미국 항공편이 약 10,000편이 지연되거나 취소되는 사태가 발생했다. 이 사건 자체에 초점을 맞추기보단, 지금 우리가 사는 이 현대에서 소프트웨어의 영향력이 얼마나 큰지에 대해 집중하면 좋을 것 같다. 물론 우리의 손에 쥐어지는 것들((단순하게 표현하자면 하드웨어라고 하자)이 중요하지 않다는 것은 아…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 패딩(바이트 패딩) 바이트 패딩(Byte Padding)이란 패딩: 속, 충전재 / 불필요하게 넣은 군더더기 좀더 직관적인 설명을 위해 자바 코드를 이해해보자(아주 간단함) 위 클래스의 크기는 단순하게 char(1byte) + int(4byte) => 5byte이다. 하지만 결과적으로는 8byte가 나온다. 위의 …

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 조직을 관리하는 스킬보다 리더의 마인드셋이 먼저 리더십은 리더가 의 문제 주목받는 리더십 마인드: 정직과 겸손 한 번에 모든 것을 바꾸기보단, 조금씩 나아지려는 시도가 필요하다. 🗞 키워드 조직, 리더, 리더십, 정직, 겸손 🔤 단어 정리 없음 🤔 내 생각 따르고 싶은 리더는 어떤 사람일까? 물론 이 질문은 사람마다 다른 대답이 돌아올 것이다. 누군가는 자신과 비슷한, 누군가는 자신에게 없는 모습을 리더에게 바랄 수 있기 때문이다. 하지만 확실한 것은 대다수의 사람들은 에 대해 긍정적인 대답이 되는 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 컴퓨터 구조 중앙처리장치(CPU), 기억장치(RAM; Memory), 기타 입출력장치(I/O)로 구성되어있다. 각 장치는 시스템 버스로 연결되어있다. CPU 중앙처리장치. 컴퓨터 시스템을 통제하고 프로그램의 연산을 실행 및 처리한다. 제어장치(CU), 연산장치(ALU), 레지스터 그리고 이 3개를 연결해주는 버스(회…

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 미국 경제 연착륙 기대 확산 달러화 약세(생각보다 미국 경제 불황이 심하지 않을 거 같으니, 안전자산인 달러 가격이 하락하는 것) 달러값이 떨어지면서 원화값이 상대적으로 강세 🗞 키워드 미국, 경제, 달러, 원화 🔤 단어 정리 없음 🤔 내 생각 22년 10월 1일 약 1430원 대였던 원화값(달러당)이 현재 1월 10일 기준으로 약 1240원대에 진입했다. 왜 일까..? 아무리 미국 경제가 나쁘지 않다고 이야기를 하지만, 그래도 아무튼 나빠지는 건 어느정도 예상하는 거 아닌가..? 아니, 정확히 말…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 기억장치 기억장치는 크게 SSD(Storage), RAM(Memory), CPU(CACHE, REGISTER)로 나눠지며 뒤로 갈수록 속도가 빠르고 가격이 비싸다. 즉, SSD에 프로그램들이 저장되어있고 이 프로그램을 실행시키면 RAM에 올라가게 된다. 이 때, 프로그램의 여러 명령어들이 CPU로 전달되어 처리된다.…

🌳 아침형 인간 교육이 시작된지 1주일. 함께 공부하니 재미있고 의지가 생기니 신난다. 특히, 스스로 아침형 인간을 다짐하고 잘 지키고 있어서 기분이 좋다. 개발은 배우면 배울수록 끝이 없고 나의 모자란 부분이 많이 느껴지는 것 같다. 가끔은 해결이 안되면 골치 아프기도 하고 어려워하기도 하지만, 그 특유의 성취감과 재미가 있다. 함께 배우고 아는 것을 나누는 것이 얼마나 중요한지 깨닫고 있다. 지금 이 스케쥴에 더 잘 적응하면서 따로 공부하는 부분들도 열심히 하자! 올해는 정말 나에게 의미가 있고 중요한 한 해가 될 것이다. 반드시 의미있는 서비스에 기여하는 개발자가 될 것이다. 🌳 아침형 인간

🗞️ 신문스크랩 2.1 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. (v2.1 추가) 기사의 핵심 키워드를 추가해보자. 🌻 주요 기사 작년 4분기 VC투자 이전 년도에 비해 반토막 경기 침체에 따른 펀딩 및 투자 축소, 출자자(LP) 등 펀드 투자자 모집이 어려워짐, 기업공개(IPO)와 인수/합병(M&A) 등 회수 시장 악화 🗞 키워드 스타트업, 투자, 위축 🔤 단어 정리 없음 🤔 내 생각 이런 기사를 보면 기분이 솔직히 좋지는 않다. 나는 의미있는 서비스를 개발하는 스타트업에 취업하고 싶기 때문이다. 그럼에도 이 기사를 스크랩하는 이유는 2가지이다. 첫 번째, 를 생각하기 위함이다. 오히려 이런 시기를 견디고 나아가는 스타트업들만…

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 Storage, Memory, CPU Storage: 디스켓, CD, HDD, SDD와 같은 저장소. 용량이 크고 비교적 가격이 싸다. 자료를 하는 용도. 컴퓨터를 꺼도 남아있다. Memory: 흔히 RAM이라고 부르는 메모리. 용량이 작고 컴퓨터를 종료하면 데이터가 사라진다. 데이터를 빠르게 할 수 있다.(가져올 …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 백준 입력 받기 Vscode에서 과 설정 vscode 맨 아래 보통은 라고 되어있는 부분을 로 변경하면 줄 변경 방식이 바뀐다. LF(Line Feed): 로 줄 변경 CR(Carriage Return): 로 줄 변경 CRLF(Carriage Return Line Feed): 로 줄 변경 윈도우는 CRLF 방식, …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 가상 머신(Virtual Machine)과 우분투 리눅스(Ubuntu Linux) 가상 머신: 물리적 컴퓨터의 디지털 버전. 우리가 사용하는 현실의 컴퓨터가 있고 가상으로 그 컴퓨터를 구현한 것이 가상 머신이다. 가상 머신에서 가상 머신을 돌리는 것도 가능하다.(비효율적이지만) 한편, JVM(JAVA Virtual …

🎄 성장일지 3.1 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가 🔑 오늘의 키워드 VScode 자체적으로 debugging 툴을 제공한다. (왼쪽 세로 툴 바 4번째 위치) breakpoint: 중단 지점. 실행 모드가 아닌 디버그 모드에서 프로그램을 중지하게 되는 지점의 표시이다. 보통 코드 줄번호 왼쪽 여백을 클릭하면 빨간색 원과 함께 breakpoint가 지정된다. step over: 화살…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 남자 높이뛰기 세계 1위 우상혁 도전에 앞서 우상혁이 외치는 “할 수 있다, 올라가자” ‘무엇이든 할 수 있다는 강한 목표 의식’ 🔤 단어 정리 없음 🤔 내 생각 동양인으로서, 우리나라 사람으로서 육상 부문 세계 1위는 정말 쉽지 않은 일이다. 이전에 우상혁 선수의 경기를 티비로 본 적이 있다. 짧은 시간이지만 그의 눈에는 즐거움과 설렘 그리고 할 수 있다는 자신감이 비추었다. 움츠려드는 것이 아니라, 긴장하는 것이 아니라, 마치 두근거리는 무언가를 앞둔 사람처럼 빛나보였다. ‘무엇이든 할 수 있다는 강한 목표 의식’. 어쩌면 뻔하디 뻔한 말처럼 보인…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 신한은행, 2023년부터 ‘조건 없는’ 이체 수수료 전면 무료화 한용구 신임 신한은행장 “이익을 냈던 부분을 사회에 환원하는 차원에서 이체 수수료 면제 아이디어 제시했다.” 🔤 단어 정리 없음 🤔 내 생각 기사를 보고 ‘응? 이체 수수료 혁명..? 수수료 면제 아이디어를 제시했다?‘라고 혼잣말로 중얼거렸다. 그 동안 내가 사용해왔던 카카오뱅크, 토스 등 핀테크기반 은행들의 송금 무료는 무엇이란 말인가. 물론 기존 보수적인 은행들 사이에서 이런 행보는 ‘약간 파격적’일 수 있다. 또한, 매일경제라는 경제신문에서 홍보성 기사를 낼 수도 있다. 하지만 솔직…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 자바스크립트 fetch(비동기 통신) async, await 기존 로컬 프로젝트 리팩토링 📝 요약 및 하루 간단 회고 어느 정도 자바스크립트를 능숙하게 다룬다고 생각했다. 그러면서도 항상 promise나 비동기쪽은 아무래도 혼자서는 사용할 일이 많지가 않아서 낯설었다. 이번 기회에 fetch를 통해서 서버에 요청을 하고 요청받은 데이터를 어떻게 다루는지 감이 잡히는 것 같았…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 SNS 시장 포화에 따라 점점 비슷해져가는 서비스 인스타그램의 스토리, 유튜브의 쇼츠, 틱톡의 숏폼 심지어 하루 중 랜덤하게 알림이 울리면 2분 이내에 셀카를 찍는 것으로 유명한 비리얼의 컨셉도 따라하는 중 🔤 단어 정리 없음 🤔 내 생각 어떤 분야의 시장이 성장함에 따라 다양한 컨셉의 서비스 혹은 기업들이 등장한다. 하지만 현재의 SNS는 타깃 연령이 다른 느낌일 뿐, 그 서비스 자체의 개성은 점차 사라져가는 것 같다. 수요가 많은 서비스를 적당한 모방(?)을 통해 견제하고 따라가는 것은 필요하다고 생각한다. 다만, 그 기업이 갖고 있는 가치관과 기…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 자바스크립트 utils 따로 빼기 localStorage 상태관리(자바스크립트) 📝 요약 및 하루 간단 회고 마치 리액트를 쓰는 것처럼 바닐라 자바스크립트로 프로젝트를 진행하니 재미있다. 그리고 리액트의 소중함을 더욱더 느끼고 있다. 또한, 꾸준히 리팩토링하는 게 얼마나 중요한지 체감 중이다. 처음에 ‘여기서 더 리팩토링할 게 있나..?’싶지만, 결국엔 또 더 보기 좋고 효…

📚 나카지마 사토시 - 오늘, 또 일을 미루고 말았다. 마이크로소프트에서 윈도우95, 98, 인터넷 익스플로러3.0 등을 기초 설계한 프로그래머, 나카지마 사토시의 ‘오늘, 또 일을 미루고 말았다.‘에 대한 요약 및 후기 시간의 힘 미완이지만 제 시간에 완성하는 것이 느리지만 완벽한 것보다 낫다. 프로그래머에게 있어 100점은 있을 수 없다. 70~80점을 만들고 계속 수정해나가는 것이다. 완벽하지 않게 전체적인 프로토타입을 그려라. 절대 완벽을 추구하지 말아라. 주어진 마감일보다 더 앞서 자신만의 마감일을 정하라. 마감일을 골인 지점이라고 생각하면 안된다. 복잡한 문제를 해결하기 위해 작은 단위를 분할/분해하여 생각한다. 결정을 내려야할 사항에 대해서는 빠르게 결정한다. 시간관리법 시간관리법은 하기 싫은 일을 줄이기 위한 것이다. 결국 좋아하는 일에 더 많은 시간을 쏟기 위한 방법이다. 언제나 마감을 지킬 수 있는 방식으로 일한다. 반드시 고쳐야할 생각 ‘마감 = 노력하면 어떻게…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 카카오 전면 재택근무 해제, 2023년 3월부터 사무실 출근 기본 원칙 업무 상황 고려하여 탄력적 재택근무 운영 지난 10월 카카오톡 블랙아웃 사태에 따른 조치로 보인다. 🔤 단어 정리 없음 🤔 내 생각 재택근무는 말 그대로 ‘집에서 일할 수 있는 근무형태’를 의미한다. 재택근무가 널리 시행된 배경은 크게 2가지가 있을 것 같다. 코로나 사태 IT의 발전 - IT기업들의 재택근무 선도, 재택근무를 위한 소프트웨어의 발전 등등 포함 그렇다면 과연 재택근무는 정말 유용한가? 아니, 정확히는 우리나라의 재택근무는 유용한가? 다시, 우니라나의 재택근무는 기업…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 얼굴 클로즈업 사진 10~20장으로 다양한 그림체의 초상화 200장을 그려주는 AI 앱 ‘Lensa’ 본심을 숨길 줄도 아는 것으로 드러나고 있는 챗봇 AI ‘ChatGPT’ 사용자들의 입력 데이터를 토대로 현재도 계속 학습하며 진화 중 🔤 단어 정리 없음 🤔 내 생각 Lensa는 모르지만, ChatGPT의 경우 워낙 화제가 되고 있어서 알고 있었다. 심지어 코드를 입력하고 리뷰 요청을 하면 리뷰도 해준다. 과연 AI가 이 있을까? 개인적으로는 아직은 멀었다 혹은 불가능하다 이다. 여기서 의 기준이 참 애매한데, 보통 AI(인공지능)을 떠올리면 마치 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 20~26세 거의 온종일 게임에 몰입할 만큼 게임중독자였던 ‘김작가TV’ 김도윤 창피하다던 아버지의 말에 정신차려 스무 살이 넘으면 스스로 자신의 인생을 책임져라 🔤 단어 정리 없음 🤔 내 생각 특정 인물의 성공 신화를 담아서, 아는 유튜버라서가 아니다. 그저 마지막 기사의 내용이 와닿았고 새기고 싶어 스크랩했다. 남들보다 인생이 뒤쳐졌기 때문에 더욱 치열하게 달려왔고, 잡히지 않는 꿈과 목표에 지나칠 정도로 집착했던 것 같아요. 어느 순간부터 거창한 목표를 세우는 대신 ‘오늘 열심히 살자’가 인생의 지향점이 됐습니다. 하루하루 최선을 다하면 어느 순…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 자바스크립트 코드 작성 전 설계(feat. 수도코드) 리팩토링 📝 요약 및 하루 간단 회고 곧 시작될 교육을 위해 자바스크립트 기본을 한 번 점검하고 있다. 리액트를 알기 전에는 바닐라 자바스크립트로 코드를 작성하는 게 자연스럽고 쉬웠는데… 뭐 얼마나 됐다고 이렇게 어색한지 참… 변경사항만 말해주면 어느정도는 척척(물론 이것도 완벽하게는 아니지만)해주는 리액트와는 다르게, …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 머스크의 트위터 인수 후, 독선적 경영 및 성과 부진 테슬라 주가 전망 줄줄히 하향 월가에선 “트위터 경영 손떼라” 🔤 단어 정리 없음 🤔 내 생각 이번 기사에는 정보의 함정이 있어서 스크랩했다. 기사 내용 중 “실제로 머스크가 트위터 인수를 마무리한 지난 10월 27일 주당 225.09달러였던 테슬라 주가는 19일 149.87달러까지 내려앉으며 33% 폭락했다.”라는 내용이 있다. 머스크의 트위터 인수가 테슬라 주가를 떨어지게 하는 역할을 했을 수는 있지만, 저 말만 놓고 보면 다른 변수들은 무시한 채 오로지 트위터 인수만으로 테슬라 주가가 떨어진 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 일론 머스크 트위터 최고경영자가 자신의 사임 여부를 묻는 투표를 본인의 트위터 계정에 올렸다. 19일 투표 마감 결과 약 1750만명 참여, 약 57%가 찬성 트위터 인수 직후의 경영 방식에서 대혁신을 추구하며 대대적인 인권 감축에 대한 비난의 목소리때문인 것으로 추측 이 투표글에 따른 머스크의 사임 가능성때문인지 장 전 테슬라 주가 5% 상승하기도 함 🔤 단어 정리 없음 🤔 내 생각 이걸 sns의 순기능이라고 해야할까..? 해당 sns의 최고경영자가 본인의 사임 유무를 당사의 서비스를 통해 물어본다. 이것 자체도 파격적인데, 이 영향으로 그의 타사 …

🌳 항상 행복하게 생각하자 정말 역대급으로 힘든 장염에 걸렸다. 새벽에 힘들어서 혼자 화장실에 가서 속을 게워내고, 정말 몇 분마다 화장실을 가야했다. 그런 와중에 내가 교육받고 싶은 기관의 결과가 나오는 날이라 계속 메일을 확인했다. 그리고… 최종 합격 메일을 받았다!!! 계속 아파서 누워만 있다가 기다리던 합격 메일을 받으니 정말 몸이 금방 나아가는 기분이었다. 지금 이 글을 쓰는 시점에는 다행히 정말 많이 나았다. 오늘도 하루종일 죽만 먹었지만, 처음 아팠던 날에 비하면 뭐… 지금은 날아갈 것 같다. 교육이 시작되는 건 2023년 1월 2일이기에 그 때부터 열심히 블로그에 기록을 남기려고 한다. 정말 즐겁게 좋은 사람들과 개발자로서 성장할 수 있는 기간이 되었으면 좋겠다. 더군다나 이 교육은 아예 프로그래밍을 처음 시작하는 사람들이 아닌 약 6개월 정도는 학습을 한 사람들을 대상으로 선발한다.(그만큼 내 개인적으로는 테스트도 참 특이하고 어려웠다. 재미도 있었지만 ㅎㅎ) 즉,…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 최근 5년간 총 1만 5000명이 고독사(5년 사이 40% 증가) 이 중 남성이 1만 2143명으로 80.6% 차지하며 절반인 48.7%가 50, 60대 🔤 단어 정리 없음 🤔 내 생각 고독사. 사람이 주위에 아무도 없는 상태에서 혼자 죽는 것을 말한다. 고독사가 꼭 스스로 목숨을 끊는 행위를 말하는 것은 아니지만, 그 누구도 옆에 없이 생을 마감한다는 것 자체가 너무 슬픈 것 같다. 에픽하이의 에어백이란 노래 중 이런 가사가 있다. 이 가사를 보면서 텍스트만으로도 이렇게까지 외로움을 표현할 수 있다는 게 소름이 돋았다. 고독사하는 사람들의 수를 줄…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 폴더 구조 라우터(Routes, Route) 코드 스플리팅(@loadable/component) Emotion(CSS in JS) 📝 요약 및 하루 간단 회고 저번 주 감기 걸린 채로 3일 간 과제를 했더니, 코드를 보는 게 약간 질렸다. 해서 어쩌다보니 일주일 동안 매일 알고리즘 문제만 풀고 책 조금만 보는 것으로 약간의 휴식기(?)를 가졌다. 오늘부터 다시 강의도…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 21세기 두 개의 혁명: 인공지능혁명, 장수혁명 인생 전체를 설계하는 간단한 세 가지 방법 자기 설명서: 나의 장점, 나의 좋은 습관, 내가 행복할 때, 내가 하고 싶은 것을 25개씩 적어보기 100년 인생달력: 왼쪽과 오른쪽에 각각 50년씩 나누어 나의 역사를 기록해본다. 추후 오른쪽 빈 공간(미래)를 보면 동기부여가 된다. 인생 비전서: 열 줄 남짓한 간단한 내용으로 앞으로 내 인생을 어떻게 살아가고 싶은지, 무엇을 성취하고 싶은지 기록해본다. 🔤 단어 정리 없음 🤔 내 생각 아무래도 경제 신문을 보다보니, 자연스레 경제 분야로 관심을 많이 갖게 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 경기 침체의 공포가 있음에도, 월가 큰손들은 긴축 통화정책 기조 바뀔 것으로 예상하고 경기 민감주 투자 비중 상승 최근 고용, 소비지출 지표에서 인플레이션이 완화되고 있다는 징후로 인한 것으로 판단 재닛 옐런 미국 재무장관 “내년에는 인플레이션이 상당히 내려갈 것” 🔤 단어 정리 헤지펀드: 고수익을 노리는 고액 자산가들의 투자를 받는 폐쇄형 펀드 뮤츄얼펀드: 시장지수나 은행이자율보다 조금 더 높은 수익을 원하는 누구나 가입할 수 있는 개방형 공모 펀드 🤔 내 생각 항상 경제의 미래 흐름을 보기 위해서는 돈이 어디로 움직이는지 봐야한다고 했다. 위 기사…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 잠재 GDP와 실제 GDP의 차이를 통한 각 나라의 경제 대응 분석 한국과 미국의 긴축 기조에서의 미묘한 차이점 GDP 갭률 = (실제 GDP - 잠재 GDP) / 잠재 GDP * 100 🔤 단어 정리 잠재 GDP(국내총생산): 한 경제의 물적, 인적 자원을 총동원해 물가 상승의 압력 없이 달성할 수 있는 생산가치 잠재 GDP > 실제 GDP: 경제가 자원을 효율적으로 이용하고 있지 못하다.(금리를 내려야한다.) 잠재 GDP < 실제 GDP: 경제가 과열 상태이다.(금리를 올려야한다.) 🤔 내 생각 각 국가 별 금리 정책을 정말 이해하기 쉽게 쓴 기사…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 카톡 대화방에 궁금한 정보를 바로 검색할 수 있는 기능 추가 오픈채팅방과 뉴스, 정보 큐레이션 카카오뷰를 태그로 연결하여 커뮤니티 확대 최근 대규모 서비스 장애에 따른 신뢰도 하락을 반전하기 위한 전략으로 보인다. 🔤 단어 정리 숏폼: 짧은 영상 컨텐츠(ex. 유튜브 쇼츠) 🤔 내 생각 이번 카카오톡의 업데이트는 단순히 UI만을 개선하는 것이 아니다. 더 나은 UX를 추가함으로써 더 다양한 비즈니스 모델도 중간중간 들어갈 수 있을 것 같다. 가령 현재 카카오톡의 프로필은 단순히 상대의 사진을 확인하는 정도인데, 이번 업데이트를 통해 프로필 상에서만 소…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 미국 월가의 가물들이 일제히 내년 경기 침체 가능성을 경고 인플레이션발 소비 침체가 본격화될 것이라는 우려 미국의 기준금리가 내년 5%대로 오른 뒤 2024년에야 인하 가능성을 기대할 수 있다는 분석 🔤 단어 정리 긴축: 양적완화와 대비되는 말로, 지갑을 닫고 씀씀이를 줄인다는 의미. 긴축재정에서 재정은 곧 정부의 씀씀이를 의미하므로 긴축재정은 정부가 지갑을 닫고 씀씀이를 줄인다는 의미이다. 다시 말해, 1년에 도로를 10군데 뚫고 학교를 10개 세웠다면 긴축재정으로 도로를 3군데 학교를 2개만 세우는 것 🤔 내 생각 역시… 저번 파월의 발언은 곧바로…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 자바스크립트 과제 타입스크립트 Partial, Pick, Omit 📝 요약 및 하루 간단 회고 아니… 자바스크립트 과제를 진행 중인데, 1단계는 그럭저럭했는데 2단계 문제가 정말 미쳤다… 그 뒤에 3단계도 미리 봤는데… 이건 뭐..? 일단 문제 자체가 정말 신선해서 재미있긴한데, 아직 정확히 어떻게 구현해나가는 게 좋을지 고민 중이다. 좀만 더 힘내서 불태워 보자..! 이 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 세계 금리 인상과 경기 부진 등의 여파로 유동성 한파가 거세지면서 숫자로 증명되는 투자(수익성)를 선호하는 기조 지난달 국내 스타트업 투자 총액은 약 6700억, 최저치였던 9월 3800억에 비하면 높으나 3월 2조 2000억를 넘나들던 때와 비교하면 저조 그나마 창업 1~2년 차의 초기 스타트업은 참신한 아이디어로 시드 투자는 가능, 그러나 이미 한두 번 투자를 받았던 곳들은 추후 수익성 여부에 대한 잣대로 심사 매출이 잘 나와도 BEP가 맞지 않으면 투자받기 어렵다. 🔤 단어 정리 BEP(Break-Even Point): 손익분기점. 일정 기간 수…

🌳 몸이 건강해야, 정신도 건강하다. 최근에 기존에 쓰던 VScode에서 JetBrain 사의 Webstorm을 사용해보고 있다. 원래는 유료인데, 대학교 메일을 사용하니까 1년 무료로 사용 가능하다! 아무래도 그 동안 사용하던 VScode의 단축키나 Extension들에 익숙해져있어서 조금 적응하는데 시간이 필요할듯하다. 그래도 기본적인 단축키는 구글링해서 쓰다보니 괜찮은 거 같다. Webstorm으로 갈아타본 이유는 별다른 건 아니고 하는 호기심이었다. 또, 개인적으로 공부하는데 도움을 많이 받고 있는 제로초님도 Webstorm을 사용하고 있어서 더 크게 호기심이 생긴듯 하다. 아직 크게 할 부분은 없지만ㅋㅋㅋ 그래도 패키지 버전에 마우스를 올리면 알아서 버전도 보여주고 가장 최근 것인지 체크도 해주고 여러모로 유용한 기능들이 많은듯하다. 또, 생각보다 VScode보다 커스터마이징하는 부분이 되게 세세하고 되게 잘되어있다. 이전에 혼자 VScode 테마를 하나하나 지정해서 만…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 1 ~ 11월, 개인투자자 약 3130억원(4185kg) 금 순매도 코로나 터졌던 2020년 4220억원 어치의 금을 쓸어담았던 개인투자자들이 은행 예금 상승에 따라 금을 매도 하기 시작한 것 예금과 금 모두 안전자산에 속하지만, 금은 이자가 붙질 않으니! 반면 금과 돈을 보관하는 개인용 금고시장을 얼어붙었다. 다만 기준금리 인상과 함께 예금금리(수신금리)가 뛰지만, 대출금리도 오르면서 기업의 자금 조달이 어려워지는 점 문제 🔤 단어 정리 없음 🤔 내 생각 기준 금리가 오르면 어떻게 될지 개인, 은행, 기업의 입장에서 생각해보자. 먼저 개인은 다소 …

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 cra없이 프로젝트 환경 설정 아직 typescript까지 적용된 react-project 세팅은 조금 어렵넹… 📝 요약 및 하루 간단 회고 프로젝트에 들어가기에 앞서, CRA(Create React App)없이 웹팩, 바벨 등의 패키지를 이용해서 프로젝트 환경을 구성해보았다. 실제로는 cra를 사용하는 게 훨씬 편하겠지만, 그래도 직접 eslint, prettier…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 올해 4회 연속 자이언트스텝으로 금리를 팍팍 올리던 매파 파월이 갑자기 비둘기파로 돌변 ‘과도한 긴축을 원하지 않는다’며 금리 인상 속도 조절 공식화 최근 고용지표 악화가 주된 요인으로 분석됨 또한, 코로나19 정책에 항의하는 중국의 시위에 대해 방역당국이 봉쇄 완화에 나서는 점도 투자 심리를 올림 🔤 단어 정리 자이언트 스텝: 기준금리 0.75% 포인트 인상 빅 스텝: 기준금리 0.5% 포인트 인상 🤔 내 생각 솔직히 믿을 게 못된다. 그 동안의 행보로 충분히 증명되고도 남았다. 지금 당장은 파월의 발언 하나하나가 경제 분위기를 좌우할 수 있어도, …

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 useLayoutEffect, useTransition, useDeferredValue 리덕스 리덕스는 그 자체로 상태관리 라이브러리.(리액트와 무관하게) 리덕스는 단방향, 함수형 프로그래밍의 철학이 많이 담겨 있다. store, action, dispatch, middleware, reducer의 개념 및 순환 📝 요약 및 하루 간단 회고 리액트 강의 복습을 마무리…

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 금융사, 자금 확보를 위해 경쟁적으로 수신금리 인상 작년 하반기부터 은행의 자율권이란 명목하에 기준금리 인상분이 대출금리에 고스란히 반영 🔤 단어 정리 수신금리: 우리가 은행에 예금할 때 적용되는 금리. 우리 입장에서는 예금이지만, 은행 입장에서 보면 고객으로부터 이자(금리)를 쳐서 대출을 받은 것이 된다. 그래서 수신이라는 말을 하고, 이 때 고객에게 주는 금리를 수신금리라 칭한다. 🤔 내 생각 확실히 요즘 예금 금리가 가파르게 오르고 있다. 이 말은 얼핏 들으면 좋아보이지만, 그만큼 은행이 자금 확보가 어렵다는 의미. 즉, 경제 상황이 좋지 않다는…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 react-router, react-router-dom v5와 v6의 차이 router BrowserRouter, HashRouter Link, Routes, Route, useLocation, dynamic routing 📝 요약 및 하루 간단 회고 리액트의 라우터는 눈속임이다. 실제로 서버에 요청을 보내는 도메인 주소가 아니라는 점.(물론 서버에서 해당 라우터로 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 미 긴축 속도조절 낙관론에 대해 연은 총재들 신중론 강조 아직은 물가 정점이 아니다.(즉, 아직 인플레를 잡기 위한 금리 인상 기조를 가져가야 한다.) 🔤 단어 정리 명목 금리: 화폐 1단위를 일정 기간 동안 빌리는 대가로 지불한 화폐액으로서, 이자를 원금으로 나눈 값 인플레이션을 고려하지 않은 금리. 예를 들어 100만원을 은행에 예금했더니 1년 뒤에 10만원을 받을 수 있다고 하면 명목금리는 10%가 된다. 실질 금리: 명목금리에서 물가상승률을 뺀 것.(물가상승률을 고려한 것) 위의 예시에서 만약 1년동안 물가가 5% 상승했다면 나는 10만원을 받…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 Context API 최적화 useMemo와 memo 📝 요약 및 하루 간단 회고 흠… 아직 확실히 성능 최적화하는 건 쉽지 않다. 단순히 memo와 useMemo뿐 아니라 뭔가 명확하게 하는 감이 안온다. 그저 기계처럼 자식컴포넌트는 memo로 감싸주고 적당히 렌더링마다 재실행 안시킬 함수 반환값에는 useMemo, 함수는 useCallback 등의 방법은 어딘가 …

🗞️ 신문스크랩 2.0 기존 티스토리 블로그에서 매일 작성하던 신문 스크랩을 다시 시작하기로 했다. 개발자는 문제를 해결하는 사람이다. 그러니 항상 세상에서 일어나는 일(문제)에 관심을 가져야 한다. 인상깊은 기사의 헤드라인을 적고 모르는 단어에 대한 정리, 그리고 내 생각을 간단하게 덧붙이는 것으로 가볍게 시작해보자. 🌻 주요 기사 최근 국내 4대 가상자산 거래소에서 위믹스의 상장폐지로, 가상화폐의 증권성 논란 확산 가상화폐를 증권으로 볼 것인지 아닌지 -> 증권성이 인정되면, 가상화폐 또한 현재의 주식과 같은 규제를 받게 된다. 증권으로 봐야하는 이유 특정인 발언에 가격이 크게 출렁인다는 점 주식처럼 상장폐지 제도는 있음에도 투자자 보호 조치는 전무하다는 점 🔤 단어 정리 증권: 재산적 가치가 있는 문서(권리를 증명한 문서) 하위 테스트(Howey Test) 대규모 오렌지 농장을 운영하던 하위컴퍼니라는 회사가 진행한 농장 분양 사건에 대해 미국 정부가 투자 여부를 판단하기 위해…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 Context API를 통한 props drilling 방지 useReducer 활용 심화 타입스크립트 공변성과 반공변성(그리고 이변성, 불변성) 오버로딩(더 깔끔한 건 옵셔널) 📝 요약 및 하루 간단 회고 Context API를 통해 전역에서 상태를 관리하는 게 편리하긴 하다. 물론 컴포넌트 깊이가 깊지는 않아서 이 정도겠지만, 훨씬 큰 프로젝트에서는 더 빛을 발할…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 복습 타입스크립트 lib.es5.d.ts 분석 forEach, map, filter 제네릭 분석 forEach, map, filter 타입 직접 만들기 타입 분석 및 만드는 건 작은 것부터 시작해서 만들어가고 이후 코드 작성 중 발생하는 에러에 대해서 대응해주는 식으로 작성한다. 📝 요약 및 하루 간단 회고 오늘은 복습데이로, 일주일 간 공부한 내용을 다듬고 정리했다…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 useReducer 리덕스의 reducer를 리액트에서 구현한 훅스 관리할 state, setState가 너무 많아지게 될 때, 이를 편리하게 하나의 state 객체로 관리하게 해준다.(약간 클래스 컴포넌트의 state를 닮았다.) state를 변경할 때 dispatch(setState 느낌)로 변경하고, 이 때 dispatch가 action객체를 넘기면, reduc…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 setTimeout, setInterval 등은 꼭 컴포넌트 삭제 시 제거할 것(componentWillUnmount, useEffect의 return) 반복문을 기점으로 자식 컴포넌트를 만들어 사용한다. useMemo vs useCallback (vs useRef) 차이 기억하기 훅스들의 순서는 중요하다. 또한, 정말 가능하면 조건문/반복문/함수 내에 훅스들을 넣지…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 PureComponent 클래스 컴포넌트의 라이프싸이클 componentDidMount: 렌더링 직후, 비동기 요청을 하기 위해 주로 비동기 요청에 사용 componentDidUpdate componentWillUnmount: 컴포넌트 제거 직전, 비동기 요청을 제거하기 위해 사용 함수 컴포넌트에서의 라이프싸이클 useEffect 활용 이벤트 함수 전달 시, 고차함수…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 useRef의 활용 input의 ref를 통해, 직접 DOM 요소를 선택할 때 setTimeout, clearTimeout과 같이 변화에 따른 화면 랜더링은 원치 않을 때 단, 항상 .current를 통해 값을 get, set한다는 것 주의! JSX에서도 if, for문 작성하는 법?! 함수 내에서는 if, for가 사용가능하다는 점을 이용 -> 즉시실행함수 활용 그…

🌳 일상 행복한 사람이 가장 똑똑한 사람이라고 했다. 얼핏보면, 배보다 배꼽인 느낌이다. 왜냐하면 사람마다 다르겠지만 보통은 을 좀더 상위의 목표로 두고 나아가기 때문이다. 누군가는 그러기위해 돈을 열심히 벌 수도 있고, 누군가는 열심히 지적 욕망을 채울 수도 있고, 또 누군가는 그 외의 정말 많은 다른 일들을 붙잡고 살아갈 수 있다. 그렇지만, 이 말은 나에게 있어서는 참 큰 의미로 와닿았다. 여기서 말하는 똑똑함이란 지적인 풍요로움을 말하는 것이 아니다. 이 의 의미가 아닐까 생각한다. 즉, 이 세상을 아름답게 볼 줄 알고 긍정적으로 사고하며 좋은 것들을 더 많이 느낄 수 있다면(나에게 있어, 이 말은 어떤 고난도 이겨낼 수 있는 치트키같은 느낌이기에 행복이라 생각한다.) 이 아닐까? 물론 쉬운 이야기는 아니다. 쉬운 이야기나 할거면 이런 생각, 고민을 할 필요도 없어진다. 이게 이유가 되나 싶긴 하지만 그렇기에 행복해지려 한다. 행복이 목표가 아니라 수단이 되는 느낌이라 재미…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 state가 참조형(배열, 객체 등)일 시, 불변성 유지 컴포넌트 리랜더링 조건 state가 변하는 경우 props가 변하는 경우 부모 컴포넌트가 변하는 경우(주로 이 경우에 성능 저하가 발생) 부모 컴포넌트 변경에 따른 자식 컴포넌트 리랜더링 막기 클래스 컴포넌트: shouldComponentUpdate, PureComponent 함수 컴포넌트: React.memo…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 모듈 시스템 차이 : commonJS 와 ES2015 JSX map에서의 key의 의미 redux와 context의 관계 타입스크립트 일반 함수와 메서드/콜백에서의 void 의미의 차이 as type 활용 any란 tsc에게 타입 컴파일을 그만두라고 하는 것과 같다.(쓰지말자!) 타입 가드 📝 요약 및 하루 간단 회고 확실히 타입스크립트는 공부할수록 조금 복잡한 것도…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 함수 컴포넌트는 클래스 컴포넌트보다 뒤에 생긴 게 아니라는 점(훅스가 등장하기 전에는 state가 없는 컴포넌트 제작에 종종 사용됨) useRef()를 직접 DOM에 접근할 수 있게 해준다고 생각하면 조금 이해가 쉽다. Node.js는 백엔드, 서버만 쓰는 게 아니다. 그저 자바스크립트 런타임(실행) 환경 그 이상 이하도 아니다. create-react-app을 함부…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 프로젝트 주제 설정 및 관련 주제 api로 데이터 받아오기 리액트 class component와 function component react 17 vs 18 랜더링되는 JSX 부분의 함수를 따로 컴포넌트의 메서드로 작성하는 게 좋은 이유(가독성, this바인딩 문제, 랜더링 효율성) setState에서 콜백으로 인자를 전달하는 것의 장점(리액트의 batch, 가독성) 타입스…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 cypress e2e test(너무 재미있다) 리액트 class component, function component 그리고 v17 vs v18 📝 요약 및 하루 간단 회고 인터넷 강의를 들으며 독학을 시작하기로 했다. cypress를 통해 간단한 e2e 테스트 하는 법을 배웠다. 정말 간단한 테스트지만, 어떻게 테스트 코드가 작동하고 이뤄지는지 알 수 있었다. 아직 TDD…

📚 하루만에 Cypress로 작성하는 JS E2E 테스트 코드 이 글은 메이커준-하루만에 Cypress로 작성하는 JS E2E 테스트 코드를 수강 후 작성한 글입니다. 강의와 직접적인 관계가 있는 정보는 최대한 배제하였습니다. 간단한 예제를 통해 어떻게 Cypress를 다루는지, 왜 테스트 코드를 작성해야하는지 등에 대해 정리해보겠습니다. E2E Test란? 테스트의 약자로 말그대로 사용자의 중심에서 어플리케이션의 처음부터 끝까지 그 흐름을 테스트하는 소프트웨어 테스트 방법 중 하나입니다. E2E 테스트를 통해 실제 유저 시나리오를 시뮬레이션하고 이를 통해 어플리케이션 구성 요소의 통합 및 데이터의 무결성을 검증할 수 있습니다. Cypress는 뭘까? 개발자는 Cypress를 통해 E2E 테스트를 훨씬 편하게 구현하고 다룰 수 있습니다. 어플리케이션 내에서 유저가 취할 수 있는 다양한 행동 방식과 그 결과값을 테스트 코드로 작성하고 검증함으로써, 테스트에 들어가는 시간을 매우매우…

🌳 결심 오랜만에 적는 일상 기록. 요즘 공부에 대한 생각이 많아졌다. 정말 즐겁게 공부하고 있는지, 내가 원하던 방향이 맞는지. 그리고 오늘 그 결정을 어느정도 정하게 된 것 같다. 어떤 선택이든 후회할 수도 있지만, 결국 그 때의 나는 최선의 결정을 내리는 건 변함없다. 어떤 결정에 대해서 두렵거나 후회가 될 때, 를 인정하고 받아들이면 한결 마음이 편해진다. 그러니 그런 점을 인정하고 그 때 그 때마다의 내 선택을 믿어주자. 🌳 결심

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 무작정 컴포넌트 개발해보기 🔨 프로젝…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 디자인 시스템 프로젝트 컴포넌트 개발 알고리즘 문제 풀기(해시테이블) 📝 요약 및 하루 간단 회고 일단 멘토님께 조언을 얻은대로, 디자인은 다른 정리된 것들을 참고하고 스토리북을 통해 간단한 컴포넌트부터 개발해보는 것을 목표로 하기로 했다. 스토리북 공식문서가 친절하게 잘 되어있어서 따라가며 개발 중이다. 헌데 이 때, react 18버전과의 호환 문제로 test가 되지 않…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 디자인 시스템 UI 정리 알고리즘 문제 풀기(스택) 자바스크립트 비동기 처리 복습 📝 요약 및 하루 간단 회고 를 생각하던 중 기본적인 UI 종류에 대해서도 모르는 것 같아, 한번 정리해보았다. 확실히 글로 정리를 해두는 게 도움이 된다. 스택이나 큐를 구현하고 이를 통해 문제를 풀었다. 생각보다 잘 되진 않았지만, 결국엔 풀었당 ㅎㅁㅎ 후… 리액트 공부를 하던 중, 비동기…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 그래서 무엇부터 해야할까? 이제 디자…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 디자인 시스템 피그마 토큰 스택, 큐 📝 요약 및 하루 간단 회고 디자인 시스템의 필요성에 대해서 확실하게 느낄 수 있었다. 또한, 쉽지 않은 프로젝트라는 것도 알았고 생각보다 많은 기업들에서 디자인 시스템에 대한 니즈가 있다는 것도 알게 되었다. 디자인 시스템은 다른 서비스와는 다르게 사내의 구성원을 위한 것임을 알도록 하자. 연결리스트를 통해서 스택과 큐를 구현하는 방법…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 디자인 시스템 아토믹 디자인 시스템 📋 주요 내용 요약 디자인 시스템 : 서비스를 구성하는 UI의 각 컴포넌트에 대한 디자인과 기능에 대한 명세서 아토믹 디자인 시스템 : 원자, 분자, 조직, 템플릿, 페이지와 같이 컴포넌트를 더 잘게 쪼개서 디자인 시스템을 구축하는 방법론 디자인 시스템을 구축해놓으면 서비스의 UI가 통일되고, 개발자와 디자이너의 협업 시 소통이 원활하게 …

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 디자인 시스템이란? 재사용 가능한 U…

📚 NAVER D2의 이 글은 브라우저는 어떻게 동작하는가?를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀 브라우저의 주요 기능 유저가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 자원은 보통 HTML 문서이고 떄로는 PDF, 이미지, 기타 등등일 수 있다. 브라우저는 웹 표준화 기구인 W3C에서 정한 명세에 따라 HTML, CSS를 해석하여 표시한다. 브라우저의 기본 구조 브라우저의 주요 구성 요소 사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼 등 요청 페이지를 보여주는 창을 제외한 나머지 부분 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어 렌더링 엔진: 요청한 콘텐츠를 표시.(HTML 요청시 HTML과 CSS를 파싱하여 화면에 표시) 통신: HTTP 요청과 같은 네트워크 호출에 사용됨. UI 백엔드: select/input 등의 기본적인 위젯을 그린다. OS UI를 사용 자바스크립트 해석기: 자바스크립트 …

📚 Taniarascia의 getting-started-with-react 이 글은 Taniarascia의 getting-started-with-react를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀 리액트란? 리액트는 자바스크립트 라이브러리이다.(프레임워크가 아니다.) 리액트는 페이스북(현 메타)에서 개발된 오픈소스 프로젝트이다. 리엑트는 프론트엔드에서 User Interface(UI)를 제작하기위해 사용된다. 리액트는 MVC(Model View Controller) 어플리케이션에서 View를 담당한다. 리액트의 가장 중요한 측면은 당신이 당신만의, 재사용가능한 HTML 요소인 를 빠르고 효과적으로 만들 수 있다는 것이다. 또한 리액트는 와 를 사용하여 데이터의 저장과 조작을 유연하게 할 수 있다. 리액트 앱 만드는 방법 npm과 yarn 모두 리액트 어플리케이션 제작을 지원한다. 기본적으로 index.html 내부에 id가 root인 div …

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 challengers 디자인 시스템 📋 주요 내용 요약 기존 challengers 프로젝트 진행에 앞서, 전반적인 컴포넌트에 대한 디자인 시스템을 구현해보기로 결정했다. 📝 하루 간단 회고 프로젝트를 진행하며 프론트엔드 파트가 아닌 백엔드 파트에서 애를 많이 먹었다. strapi를 통해 간단하게 api를 짤 수 있긴 하지만, 프로젝트에 사용될 데이터 테이블을 짜려고 하니 생…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 challengers 프로젝트 common 컴포넌트 제작 📋 주요 내용 요약 간단한 Button 컴포넌트부터 처음엔 조금 헷갈렸던 SearchBar 컴포넌트 등 여러 컴포넌트를 작업했다. 📝 하루 간단 회고 흠… 확실히 주말이라 그런가 좀 쉬엄쉬엄 공부했다 ㅠㅠ 이런 날도 있다고 생각은 하지만, 좀더 열심히 임했으면 좋겠다!!! 무엇보다 한번 빠지면 즐기면서 할 수 있었으면…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 🔑 오늘의 키워드 리액트 강의 완강! 프로젝트 기획 수정 📋 주요 내용 요약 로컬스토리지, 리액트 쿼리, 노드 찍먹 프로젝트 로직이 내 스스로 잘 납득이 안되니, 뭔가 시작이 잘 되지 않았다. 해서 기획을 좀더 명확히 하는 작업을 했다. 📝 하루 간단 회고 로컬스토리지에 대해서 대략적으로만 알고 있었는데, 확실히 프로젝트에 사용할 수 있을 정도로 익힌 것 같다. 리액트 쿼리는… 이게 어떤 의…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 리액트 강의 집중 📋 주요 내용 요약 리액트에서 전환 애니메이션, Context API, react-redux-toolkit 📝 하루 간단 회고 휴… 오늘은 예비군 다녀오느라 공부시간이 평상시보단 길지 못했다. 그래도 다녀와서 리액트에서 className에 대한 상태로 애니메이션 만드는 것, context API로 상태 공유하기, redux를 통한 상태 관리에 대해서…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 리액트 강의 집중 📋 주요 내용 요약 useEffect, styled-components, axios, UI 컴포넌트 활용하기 📝 하루 간단 회고 오늘은 하루 날 잡고 리액트 강의만 열심히 들었다. 확실히 새로운 걸 배우는 게 재미있다. 물론 복습 겸이기도 하지만, 일단 재미있으니 됐다. 지금처럼 재미있게 공부하자!! 🎄 성장일지 3.0 🔑 오늘의 키워드 📋 주요 내…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 알고리즘 리팩토링 프로젝트 axios, react-query 세팅 멘토링 📋 주요 내용 요약 알고리즘 함수 재사용성 올리기, 프로젝트 서버 상태 관리 위한 세팅, 멘토링 📝 하루 간단 회고 좀더 혼자서 자라날 수 있는 개발자가 되도록 하자. 멘토링을 통해 많은 것을 배우고 얻어가면서도 스스로 성장할 수 있도록 하자. 그리고 멘토님께서 말씀하신 것처럼 너무 어렵게 생각…

🌕 F-lab 멘토링 기록 ❔ 리액트를 왜 사용할까? 컴포넌트 단위의 코드 작성 : UI를 구성하는 개별적인 뷰 단위인 컴포넌트 단위로 코드를 작성하고 이런 컴포넌트들을 조합하여 어플리케이션 개발이 가능해집니다. 유지보수 및 재사용성이 상승한다는 장점이 있습니다. JSX(JavaScript + XML)와의 조합 : 자바스크립트의 확장 문법으로서 리액트와 함께 쓰였을 때, 코드의 가독성과 생산성을 높인다는 장점이 있습니다. Virtual DOM : 가상돔을 통해 유저 인터렉션이 있을 때마다 직접 Real DOM을 조작하지 않습니다. 따라서 직접 DOM을 조작하여 랜더링했을 때의 비효율성을 개선할 수 있습니다. 물론 위의 특징들이 리액트만의 특징으로 보기는 어려울 수 있지만, 위의 개념들을 성공적으로 적용한 프론트엔드 라이브러리라고 볼 수 있습니다. ❔ 가상 DOM이란? 가상 DOM을 조작한다는 것은 무슨 의미인지? 실제 DOM이 아닌 리액트에서 구성한 가사의 DOM입니다. 가상 DO…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 알고리즘 1문제 프로젝트 기획 추가 고민 strapi, MySQL 연동 및 테스트 독서 멘토링 내용 정리 📋 주요 내용 요약 어제 못풀었던 문제를 드디어 풀었다!!! 좀더 리팩토링해보자!! 프로젝트 디자인 및 기획을 계속 고민하는데, 생각보다 시간대비 진전이 없는 게 아쉽다. 그래도 잘 될 것이다! mongoDB로 진행하려했는데, strapi v4부터는 mongoD…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 react 복습 프로젝트 기획 피드백 strapi, msw에 대한 공부 알고리즘 2문제(1문제 풀다 풀다 못풀었다 ㅠ) 📋 주요 내용 요약 react 클래스 컴포넌트 가볍게 공부(사실상 이제는 함수 컴포넌트를 사용하니), react-bootstrap(사실 사용 안하는 게 좋을 거 같다) 기획에 대한 피드백 후… 한문제를 거의 2시간 붙잡았는데, 이상하게 될듯말듯 안됐…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 react 복습 프로젝트 기획 완성(내 기준) 알고리즘 2문제 📋 주요 내용 요약 input 다루는 방법, state는 가능하면 동적인 ui를 위해 사용하고 그 state를 활용하는 컴포넌트들의 최상위 컴포넌트에 정의할 것 아주 똑같이는 아니더라도, 어느정도 간소화한 챌린져스를 구현하는 것으로 기획은 마무리했다.(추후 보완하면서 개발 진행해야될듯) 오랜만에 아스키 코…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 react 복습 프로젝트 기획 추가 알고리즘 2문제(스택 사용) 📋 주요 내용 요약 state, props, event handle에 대해서! 특히, event에 변수 전달하는 부분 프로젝트 페이지 및 이벤트 단위 별로 화면 구성 만들기 스택을 사용한 중복 알파벳 제거 📝 하루 간단 회고 조금씩 리액트스럽게 코드를 짜는 법을 익혀가는 것 같다. 또, 프로젝트를 기획하…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 공부한 것, 할 것 정리!!! eslint react version 에러 해결 react 복습 멘토링 질문 정리 📋 주요 내용 요약 간단한 에러 해결 리액트 복습! 📝 하루 간단 회고 오늘 공부한, 공부할 내용들을 쭈욱 전부 정리해보았다.(파워 J) 정리하고나니 속이 다 시원하고 지금 현재 어디에 선택과 집중을 해야할지 보이는 것 같아서 기분이 좋다. 성격이 성격이니…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 styled components 적용 eslint, prettier 설정 및 에러들 📋 주요 내용 요약 yarn berry에 styled components, eslint, prettier 적용 📝 하루 간단 회고 오늘은 멘토링날이었다. 리액트 관련 질문들과 프로젝트에 대한 질문에 대답을 정말 많이 못했다…😇 그래도 이번 프로젝트가 개인적으로 난이도가 높아서, 멘탈이…

🎄 성장일지 3.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성하자 🔑 오늘의 키워드 yarn berry(feat. npm, yarn v1)와 수많은 에러들 깃허브 레포지토리 로컬 init 이슈(pull, push 이슈) 📋 주요 내용 요약 yarn을 통해 typescript 기반의 react app을 만들고, yarn berry로 마이그레이션하며 겪은 경험들 npm vs yarn v1 vs yarn v2(berry)에 대한 간단한 이야기도 녹여서 깃…

🌃 새벽 감성 요즘 이 시간까지 깨어있는 일이 자주 있다. 원래는 나름 아침형 인간이라고 자부하고 살았었다. 개발 공부때문인지, 그냥 체질이 조금 바뀐건지는 모르겠지만 확실히 새벽만의 집중력이 있는 것 같다. 솔직히 지금은 그렇게 감성적인 건 아니고, 그냥 앞으로 블로그를 좀더 알차고 의미있게 운영하고 싶어서 글을 적게 됐다. 어떻게 하면 좀더 깔끔하고 의미있는(모든 글들이 의미가 있겠지만) 글을 담을 수 있을까? 일단 확실한 것은 한 번 싹 정리를 해볼 생각이다. 아직 대략적인 느낌만 오는데, 아마 좀더 심플하고 깔끔하게 바꾸지 않을까 싶다. 매일 작성했던 성장일지는 좀더 아주 간단하게 작성할 수 있는 템플릿을 만들 것 시작하지 못한 에 대한 템플릿을 잡아서 작성 시작해볼 것 이렇게만 해서 타이트하게 작성해볼까… 생각만 하지말고 바로 그냥 적용해보자. 기대하시라, 블로그 개편!!! (참고로 나름 v3) 🌃 새벽 감성

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 개발에 앞서 테오가 4일차에 보내주신 메일에 너무 좋은 내용들이 많아서 기록해둔다. 웹 서비스에 완성은 없다. 언제나 미완성인 상태로 업데이트를 할 수 있는 형태를 취하게 된다. 티저와 데모 사이트를 먼저 오픈하고 그럴듯하게 돌아가는 Tour(Demo)를 만들어, 실제 서비스를 릴리즈하고 고도화하는 과정을 겪게 된다. 자동차를 만든다고 할 때, 부품 하나하나를 추가하면서 아직 굴러가지 못하는 상태가 아니라 먼저 굴러가는 보드를 만들고 자전거가 되고 자동차가 되듯!!!!! 시작은 허술하고 미비할 수 있지만, 일단 그 기능이 돌아가게…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 아이스 브레이킹 시작에 앞서서, 테오가 준비해주신 질문으로 간단한 아이스 브레이킹을 진행했다.(정말 사소해보이지만, 이런 작은 장치들이 팀원 간의 화합을 도와주는 것 같다.) 이라는 주제로 각자 발표를 진행했다.ㅋㅋㅋㅋㅋ 팀원들이 생각하는 다양한 개발자의 모습도 재미있었고 서로의 그림을 꾸며주고 더해주는 게 웃겼다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나의 그림은 돌에서 금을 채취하듯이, 개발자는 코드를 통해 금(좋은 서비스)을 만든다는 컨셉이다. 팀원들의 낙서로 금덩이가 꿀벌처럼 되어버렸지만ㅋㅋㅋㅋㅋ 너무 유쾌하고 재미있는 시간이었다. 😉 실…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 지도 그리기 좋은 협업이란 무엇일까? 협업을 위해 서로의 생각을 맞추고 합의하기 위한 방법으로 함께 지도 그리기를 진행했다. 각자 생각 써보기(타이머 사용) 중요한 점들 마구마구 하이라이트 적은 내용을 바탕으로 돌아가면서 발표한다. 모두의 생각을 듣고 나서 생각들을 시각화한다. 서로의 생각에 반박 혹은 너무 빠르게 결정/정리하지 않고 더 살을 붙여나가는 작업을 한다. 위의 방법을 토대로 크게 , 에 대해 이야기를 나누었다. 이 내용들을 토대로 공통된 키워드만 쏙쏙 뽑아보았다! 😶‍🌫️ 화면 별로 구성해보기 이제 정말 대략적으로 UI,…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 모임 전 안내 메일 위와 같이 협업을 위한 그라운드 룰과 간단한 일정을 안내받고 시작한다! 😆 첫 모임 약 40~50명의 인원이 모여, 각자 작성한 아이디어를 바탕으로 투표를 진행한다! 개인 프로젝트를 할 때 피그마는 종종 사용했지만, 피그젬을 통해 함께 아이디어를 기획하고 협업하는 과정이 너무 재미있었다. 최종적으로 아이디어를 6개 선별하고 각자 투표를 통해 어떤 아이디어를 구현하고 서비스해보고 싶은지 결정하여 최종팀을 결성하게 된다. 아이스 브레이킹 타임!!! 서로를 소개하고 인사하며 알아가는 시간을 가질 수 있…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 🤑 메인 페이…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 😂 MV*패턴…

😇 공부하는 사람 후… 요즘 열심히 스프린트로 공부를 하고 있다. 싶다가도 일주일 전의 나, 한달 전의 나를 생각해보면 정말 많이 성장하고 배웠고 알게 되었다는 게 실감이 난다. 정말 계단식으로 성장하고 있다. 신기하게도. 무언가를 배움에 있어서 멘토의 존재는 생각보다 크고 생각보다 중요하게 느껴진다. 단순히 지식을 전달함에 있어서보다, 내가 가려는 길을 먼저 가본 사람이 멘토이기에 배우고 알 수 있는 게 많은 것 같다. 이를 토대로 정말 좋은 개발자(솔직히 아직 가 뭔지는 모르겠지만)로 성장하고 싶다. 그리고 이를 발판 삼에 더 큰 세계에서 공부하고 내가 현재 행복할 것이라 믿는 길을 뛰어가고 싶다. 가을이 왔다. 매일 반팔/반바지로 편하게 공부하러 다녔는데, 이제는 이렇게 입으면 저녁에 제법 쌀쌀하다. 공부하는 게 바빠서 그런지, 이번 가을은 딱히 싶은 생각이 안든다. 은근 가을 타면서 여러 생각, 감정을 곱씹게 되는 것도 좋은 경험인데, 공부하는 지금은 가을 타지 않는 게…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 ❔ 옵저버 패턴이란 옵저버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용된다. 발행/구독 모델로 알려져 있기도 하다. 좀더 단순하게 생각하면 이다. B는 A를 구독함으로써 , A에서 어떤 이벤트를 발행할 때 B의 상태가 변경되게끔 하는 디자인 패턴이다. A는 Observable, Subject 등으로 불리고 Model이 그 역할을 한다. B는 Observer이며 View에 해당한다. 옵저버 패턴을 이용해 해결하려는 상태 변경? 한 객체의 상태가 변경되었을 때, 이 객체에게 의존하고 있는 모든 객체들에게 상태 변경에 대해 알리면서 동시에 어떤 행동을 취하게 하는 것 : 두 객체가 상호…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 http란 무엇일까? 그리고 https와 차이는? 의 약자로 인터넷에서 hyper text를 교환하기 위한 통신 규약으로 80번 포트를 사용하고 있다. 클라이언트는 로 요청을 보내고 서버는 80번 포트에서 요청을 받는다. 즉, 주소창에 을 검색하면 우리가 타이핑하지 않아도 앞에 http 또는 https가 붙게 되는데, 이 말은 즉 google 도메인 주소에 80번 포트로 접속하겠다는 의미이다. 그러면 비로소 html 문서를 서버가 보내주게 된다. 허나 http는 평문 데이터를 전송하는 프로토콜이기 때문에, http를 통해 중요한 개인정보(비밀번호, 주민등록번호 등)을 주고 받게 되면 외부에 노출될 가능성이 있다. 이런 문제를 해결하기 위해 등장한 것이 , https이다. https는 기존의 http에 가 추가된 프로토콜이다. 를 사용하고 네트워크 상, 제 3자가 정보를 볼 수 없도록 암호화를 지원하고 있다.…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 🤩 개발 환경…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤮 drag & drop 드디어 드래그 앤 드랍이다. 솔직히 프로젝트 처음 시작 때, 웹 컴포넌트에 대해 이해하려고 노력할 때만 해도 ‘드래그 앤 드랍은 구현하기 힘들겠다’ 생각했다. 처음엔 아예 API없이 구현을 해보려했을나, 뭔가 그 느낌은 좀 알겠는데… 계속 시도해보다가 깔끔하게 API를 이용하여 구현해보자 마음 먹었다. 근데 웬걸, API를 통해 구현하는 것도 쉬운 일이 아니었나…! 이 모든 어려움의 원흉은 Shadow DOM 자식이었ㄷ…(물론 컴포넌트를 얼마나 잘 나누고 역할을 부여하는 …

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 이벤트 루프, 매크로/마이크로 테스크 큐 eventLoop-taskQueue 자바스크립트는 싱글 스레드 기반의 언어이지만, 구동되는 환경(브라우저, Node.js)는 여러 스레드를 제공한다. 이 때, 구동 환경과 자바스크립트 엔진을 연동하기 위해 사용되는 장치가 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 태스크 큐에 전달하고 콜스택이 비었을 때, 콜스택으로 전달한다. 매크로 테스크 큐: DOM, setTimeout 등의 비동기 처리 콜백함수가 담기는 큐 자료구조 마이크로 테스크 큐: Promise, async 등의 비동기 처리 콜백함수가 담기는 큐 자료구조 코드 실행 우선 순위: 콜스택(메인 스레드, 자바스크립트 엔진) > 마이크로 테스크 큐 > 매크로 테스크 큐 위 코드의 실행 순서: A E C D B Variable Environment와 Lexical Environment Variable Envir…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤪 컴포넌트 로직 먼저 들어가기에 앞서 컴포넌트를 나눈 부분을 다시 보자면, 크게 아래와 같이 나누었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolbar.js: 메모에 대한 조작을 하는 툴바 부분 todoNote.js: 툴바 조작에 따라 메모를 입력할 수 있는 input 부분 todoList.js: 메모 전체를 감싸고 있는 부분 todoItem.js: 메모 컴포넌트 🧭 todoNote…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤪 컴포넌트 로직 먼저 들어가기에 앞서 컴포넌트를 나눈 부분을 다시 보자면, 크게 아래와 같이 나누었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolbar.js: 메모에 대한 조작을 하는 툴바 부분 todoNote.js: 툴바 조작에 따라 메모를 입력할 수 있는 input 부분 todoList.js: 메모 전체를 감싸고 있는 부분 todoItem.js: 메모 컴포넌트 지금 다시 생각해보…

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 😇 컴포넌트 설계 하… 개인적으로 이 단계가 진짜 막막하고 어려웠다. 컴포넌트를 설계하는 방법은 정말 다양한데, 일단 기본적으로 눈에 보이는 UI를 기준으로 나눠보자 마음먹었다. 위와 같이 UI를 생각하고 header, main 그 내부 항목들을 쪼갤 수 있는대로 컴포넌트를 나눠보았다. 결과적으로 아래와 같이 컴포넌트를 나눌 수 있었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolb…

🪴 성장일지 2.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 get-shit-done 프로젝트한다고 바빠서 성장일지를 몇일 쓰질 못했다. 성장일지에서는 프로젝트를 하면서 배운 것들을 간단하게 남기고 따로 project 태그로 자세히 정리할 예정이다. 목표 웹 컴포넌트를 통한 UI 구현 웹 컴포넌트 지난 몇 해 동안 수많은 자바스크립트 프레임워크(라이브러리)가 등장했다.(앵귤러, 뷰, 리액트 등등) 이런 프레임워크들은 다양한 문제를 편하게 해결할 수 있게 해주었지만, 덩치가 크기에 앱이 무거워지고 프레임워크에 종속된 코드를 생산하게 한다. 즉, 웹 컴포넌트는 이런 프레임워크도 좋지만 을 이…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 폴리필(polyfill)이란? 바벨: 새로운 문법을 사용해 코드를 작성하면 트랜스파일링을 통해 구 표준을 준수하는 코드로 변경 폴리필: 새롭게 추가된 함수나 메서드는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용이 가능하다. 즉, 이렇게 변경된 표준을 준수할 수 있도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 내용을 메꿔주는 역할을 하는 것이 폴리필! 폴리필에서 core-js란? 기존 폴리필 라이브러리들 @babel/polyfill 전역공간에 폴리필을 채워 넣기 때문에 전역공간의 오염으로 폴리필 충돌 가능성이 있다. 브라우저에서 이미 구현된 폴리필까지 전부 번들에 포함되어있어 크기가 커지는 단점 번들 크기는 커지지만 실행 시에는 브라우저에서 미구현된 문법만 실행하기 때문에 빠르다는 장점 바벨 7.4버전부터 depeciated됨 @babel/plugin-transform-runtim…

🪴 성장일지 2.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 get-shit-done 목표 webpack을 통한 개발 환경 설정 더 깊고 다양하게 적용해보기 web component를 염두에 두고 프로젝트 구성하기 🪴 성장일지 2.0 get-shit-done

🪴 성장일지 2.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 반응형(feat. media query) 하나의 css 템플릿 내에서 media query를 통해 특정 조건(기기의 종류, 화면 크기 등등)에 맞는 스타일을 적용하는 방법 사용 방법 (1) html link에서 조건을 주고 그 조건에 맞는 css 파일을 적용하기 (2) css의 media query 자체를 이용하기 flex - grow와 shrink flex-basis 얼핏보면 width와 유사하다. flex-direction에 따라서 주축에 해당하는 부분의 길이를 결정한다. 부모 태그 아래에 자식 태그가 있을 때, 자식 태그…

🪴 성장일지 2.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 jaybnb 목표 일정 버튼 클릭 시, 헤더 부분 확대 및 변화 달력 모달에 화살표 버튼을 추가하고 버튼 클릭 시 달력 넘기는 기능 체크인 및 체크아웃 날짜 선택 시, 헤더 부분에 해당 날짜 표출 체크인 및 체크아웃 날짜 선택 시, 그 사이 날짜들에 대해 시각적 표현 추가 SCSS css bem에 맞게 작성을 잘하면, SCSS의 &를 활용하기 정말 용이해진다! JavaScript 아직 모듈화를 통해 프로젝트를 관리하는 부분이 어렵다. 달력 생성에 필요한 날짜 객체들을 만들어주는 calendar.js 그리고 여러가지 화면을 조작하는…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 DOM이란? Document Object Model의 약자로 HTML 문서의 계층 구조와 정보를 표현하고 이를 제어할 수 있는 API(프로퍼티, 메서드)를 제공하는 트리 자료구조 SPA란? Single Page Application의 약자로 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것 과거 웹 사이트의 규모가 작을 때, 어떤 요소를 클릭 시 서버에서 매번 전체 html 파일을 전송해주었다. 그러나 점점 웹 사이트의 규모가 커지면서 요소 하나를 변경하기 위해 전체를 보내는 것이 너무 비효율적 그래서 등장한 것이 SPA에서 SEO가 동작하기 어려운 이유? 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현(Client Side Rendering; CSR)하기 때문에 자바스크립트를 읽지 못하는 검색 엔진에 대해서는 크롤링이 되지 않아 문제가 발생한다…

🪴 성장일지 2.0 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자 jaybnb 목표 숙박 일정 선택 시 달력 모달 창 생성 CSS(SCSS) 습관적인 width, height % 작성 -> 추후 미디어 쿼리를 통해 화면에 맞는 설정을 따로 하도록 하자 flex를 통한 배치가 너무 익숙 굳이 float을 이용하지는 않아도 되지만 position(static, relative, absolute, fixed, sticky)에 대한 개념 확실히 기억하자 또한, grid 배치가 더 깔끔한 구간엔 grid를 사용하는 것도 종종 연습하자 Date 객체 모달 창 외부 클릭 시 닫힘 간단하게 모달창과 같은 위치…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 jaybnb 목표 홈 메인 화면 html 완성 scss 학습 및 적용 SCSS SASS(Syntactically Awesome Style Sheets) SCSS(Sassy CSS) CSS는 그렇게 복잡한 언어가 아니지만, 프로젝트의 규모가 커지고 복잡해질수록 CSS 유지 보수가 어려워지게 된다. 이러한 과정에서 SASS와 SCSS가 등장하였다. 위의 풀네임을 보면 알 수 있듯이 둘 다 기존의 CSS 문법을 더 어썸하고 멋지게 만든 것이다.ㅋㅋ SASS가 등장하고 SASS3부터 SCSS가 등장하였는데, 기존의 CSS 문법과의 유사성 덕분에 현재는 SCSS가 더 범용적으로 사용된다. 🪴 성장일지 jaybnb SCSS

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 jaybnb 오늘은 프로젝트 시작에 앞서, 개발 환경을 세팅하고 깃허브 브랜치부터 커밋메세지 convention을 공부했다. 솔직히 프로젝트 세팅이 뭐 얼마나 복잡할까 생각했는데, 생각보다 깊이 들어가니까 알아두면 좋은 내용들이 정말 많았다. package.json(npm init 시 생성) webpack.config.js(웹팩 설정 후 따로 만들어줘야한다.) 일반적으로 프로젝트 생성 시 에서는 작업하지 않는다. : 제품으로 출시 가능한 브랜치. 개발 작업이 아닌 배포 이력을 관리하는 브랜치로 사용한다. : 개발 작업을 위한 브랜치로 각 기능에 맞는 새로운 branch를 잡고 develop에 merge하면서 진행한다. : aaa라는 기능을 개발…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 jaybnb 아주 짧은 프로젝트이지만, 에어비앤비 웹 페이지의 첫 화면을 클론하는 프로젝트를 진행한다. 이 프로젝트에서 배울 수 있는 것은 간단한 UI를 구성하는 것과 일정 선택 부분!!! 특히 달력을 만드는 부분에 초점을 맞추고 진행할 예정이다! .gitignore 깃은 우리의 프로젝트의 버전을 관리할 수 있는 툴이다. 깃허브는 그렇게 관리되는 프로젝트(코드)를 전 세계 사람들과, 혹은 협업하는 사람과 공유할 수 있게 해주는 아주 유용한 도구다. 이 때, 우리가 작업한 파일들 중 혹은 등의 이유로 깃허브에는 반영되지 않았으면 하는 파일들이 있을 수 있다. 이런 파일들을 지정하고 관리해주는 것이 이다. 깃허브 저장소 생성 후 로컬에 파일을 생성한…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 프로토타입 체인 프로토타입: 자바스크립트의 기반이 되는 개념으로 각 함수의 상위 객체를 참조할 수 있는 프로퍼티 프로토타입 체인: 어떤 객체의 프로토타입 또한 프로토타입을 갖고 있으며 이를 통해 스코프 체인 처럼 상위 프로토타입을 참조하며 프로토타입이 갖고 있는 메서드를 활용할 수 있는 방법 클로저와 정보은닉 클로저: 어떤 함수의 변수를 참조하는 내부 함수가 외부로 전달될 때, 참조된 그 변수가 메모리에서 제거되지 않는 현상 불변성 불변성: 객체가 최초로 생성되었을 때의 값이 변하지 않고 유지되는 것 -> 메모리 영역에서 값을 변경할 수 없다는 의미 원시형은 데이터를 할당할 때, 데이터를 메모리에 저장하고 그 주소를 변수에 할당 이후 같은 변수에 새로운 데이터를 재할당하게 되면, 그 새로운 데이터에 대한 메모리가 새롭게 생기고 그 주소를 변수에 할당한다. 즉, 데이터 자체가 바뀌는 것이 아니라 새로운 공…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 BEM(Block__Element—Modifier) 각 요소들에 CSS를 더 체계적이고 편리하게 관리하기 위한 방법론(약속) 가 아니라 에 맞춰 이름을 짓는다. 요소에 id는 쓰지 않으며 오로지 class만을 이용한다. B(Block): 재사용이 가능하고 기능적으로 독립적인 페이지 컴포넌트, 즉 어딘가에 종속되지 않고 그 자체로 사용할 수 있는 단위 E(Element): 블록을 구성하는 단위, 자신이 속한 블록 내에서만 의미를 가지기에 의존적인 형태. 즉, 블록처럼 똑 떼서 다른 곳에 사용할 수 없음. M(Modifier): 블록이나 엘리먼트의 속성을 담당. 생긴 게 조금 다르거나 기능이 조금 다르게 동작하는 것을 구분할 때 사용. 장점 클래스네임만으로…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 바벨(Babel)과 웹팩(Webpack) 바벨 현재 많은 브라우저들이 대부분 ES6를 지원하고 있다. 하지만 그 위의 버전과 제안 단계에 있는 ES.NEXT는 아무래도 브라우저가 지속적으로 따라가기 힘들다. 이를 해결하기위해 최신 버전의 자바스크립트 코드를 ES5 버전의 코드로 바꿔주는 것이 이며 이를 이라고 한다. 웹팩 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(혹은 여러개)의 파일로 번들링하는 역할을 한다.(모듈 번들러) 즉, 자바스크립트 파일들을 각 기능이나 목적에 맞는 모듈들로 구성 후 다시 이 모듈들을 하나로 합쳐주는 작업을 도와주는 것이 또한 여러 개의 자바스크립트 파일을 하나로 번들링해주기 때문에 HTML 파일에…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 물리 계층(OSI의 1계층) 물리 계층 0과 1만으로 이루어진 비트열을 전기 신호로 변환하기 위해 존재하는 계층 컴퓨터와 네트워크 장비를 연결 및 서로 간에 전송되는 데이터를 전기 신호로 변환하는 계층 전기 신호 종류 아날로그 신호: 파형(물결 모양)으로 주로 전화 회선, 라디오 방송 등에서 사용되는 신호 디지털 신호: 막대 모양으로 컴퓨터의 0과 1 비트열을 전달하기 위해 사용되는 전기 신호 랜 카드 네트워크를 통해 데이터를 송수신할 수 있도록 메인 보드 내에 있는 랜 카드 혹은 별도의 랜 카드를 사용 네트워크 전송 매체 전송 매체란 로 크게 유선과 무선으로 구분 트위스트 페어 케이블(유선) 일반적으로 흔히 이라 부르는 케이블 케이블의 양쪽 끝에는 라…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 모듈 모듈: 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각, 일반적으로 자바스크립트는 주로 웹페이지의 보조로서 탄생한 언어이기 때문에, 일반적으로 모듈 기능을 갖고 있는 언어와 다르게 모듈 기능이 존재하지 않았음 물론 클라이언트 사이드의 자바스크립트에선 를 이용하여 여러 js 파일을 로드할 수는 있지만, 파일마다 독립적인 파일 스코프(모듈 스코프)가 없이 그냥 하나의 자바스크립트 파일처럼 작용함 즉, 엄연히 기능적으로 파일이 구분되어있고 그 파일(모듈)을 불러와서 사용하는 모듈화가 아니었음 ES6모듈(ESM) ES6에서 추가한 클라이언트 사이드 자바스크립트 모듈 기능 export 모듈 내부에서 선언한 모든 식별자는 기본적으로 해당 모…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 함수형 프로그래밍 함수형 프로그래밍은 프로그래밍 패러다임 중 하나로 이다. 순수함수 동일 한입력에 대해 항상 같은 값을 반환하는 함수 함수의 실행이 프로그램의 실행에 영향을 끼치지 않는 함수 함수 내부에서 인자의 값이나 프로그램 상태를 변경하는 가 없는 함수 흔히 우리가 생각하는 외부값을 참조하고 바꾸고, 인자의 값을 변경하는 가 아닌 를 떠올리면 이해하기 좋다. 수학에서의 함수 ex) 처럼 인자 x, y에 대해 어떤 변경없이 동일한 인자에 대해 동일한 결과를 반환하며 애초에 수학적 함수에서 는 개념 자체가 없다. 즉, 이것이 순수함수 비상태, 불변성 함수형 프로그래밍에서의 데이터는 변하지 않는 을 유지해야한다. ⭐ 데이터의 변경이 필요한 경우, 원본 …

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 실행 컨텍스트 자바스크립트는 컴파일 언어의 장점을 취한 인터프리터 언어이다. 자바스크립트 코드는 평가() 단계와 실행() 단계로 나누어져있는데, 평가 단계 후 코드 실행을 위한 환경 정보를 모아놓은 객체를 형성한다. 즉, 코드 실행을 위한 환경 정보를 모아놓은 객체가 이다. 기본적으로 전역 코드에 대한 전역 실행 컨텍스트를 생성하고, 함수의 호출 시 함수의 선언부를 기준으로 실행 컨텍스트를 생성한다. 콜스택(실행 컨텍스트 스택) 스택 자료구조 형태로 실행 컨텍스트가 저장되는 구조이다. 최상단에 위치한 실행 컨텍스트부터 처리하며 콜스택을 비워나간다. 즉, 코드의 실행 순서를 관리한다. 렉시컬 환경 현재 실행 컨텍스트에서 선언된 식별자(변수, 함수, 클래스…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 함수형 프로그래밍이란?(feat.불변성) 프로그래밍의 패러다임 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하여 코드를 어떻게 작성할지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서 새로운 방식으로 생각하는 법을 배우고, 이를 바탕으로 코드를 작성할 수 있다. 명령형 프로그래밍: 무엇(what)을 할 것인지보다 절차지향 프로그래밍: 수행되어야할 순차적인 처리 과정을 포함하는 방식 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현하는 방식 선언형 프로그래밍: 어떻게(how) 할 것인지보다 함수형 프로그래밍: 순수 함수를 조합하여 프로그램을 만드는 방식 [보충 필요] 옛날 브라우저에서는 어떻게 최근 코드를 사용 가능할까? 바벨(Babel)을 사용한다. 바벨은 ES6이후의 코드를 이전 JavaScript 엔진에서 실행할 수 있는 코드로 변환해주는 무료 오픈소스 Java…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 일급 객체 자바스크립트의 함수는 라고 한다. 일급 객체란 무엇일까? 무명의 리터럴로 생성할 수 있다.(즉, 런타임에 생성이 가능하다.) 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용 가능하다. 자바스크립트의 함수는 위 조건을 모두 만족하므로 이다. 말 그대로 함수를 객체와 동일하게 사용할 수 있다는 의미이다. 다만 함수는 호출이 가능하고 일반 객체에는 없는 함수 고유의 프로퍼티를 소유할 수 있다. 프로토타입 자바스크립트는 기반 언어이다. 그래서 프로토타입이 정확히 뭘까? 사전적 의미로는 의 의미를 지닌다. 비유를 해보자면 어떤 객체의 유전 정보같은 느낌이다. 대표적으로 생성자 함수에서…

🙃 블로그 방향성 매일 매일 공부한 내용을 정리하는 느낌으로 블로그를 시작했으나, 점점 시간이 갈수록 조금 단순한 정보 나열이 되어가는 게 아닌지 생각이 든다. 아주 큰 개편은 아니더라도, 약간의 변화를 줘야할 필요가 있다고 느낀다. 현재 성장일지와 같은 항목을 통해 매일매일 공부하는 기록을 남기되, 일주일에 한 번씩 들어가는 칼럼 느낌의 글을 작성해보는 방향을 생각 중이다. 방향이 잘 정해지고 나면 훨씬 더 효율적이고 의미있는 글을 쓸 수 있을 것이다. 추가로 글 검색 기능에서 제목뿐만이 아닌 내용에서도 검색이 되게 하는 것도 추가해봐야겠다. 🙃 블로그 방향성

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 객체 리터럴 객체란 뭘까 하나의 값만 나타내는 원시 타입과 다르게 객체는 다양한 타입의 값을 하나의 단위로 합쳐놓은 복합적인 자료구조이다. 또한 자바스크립트의 함수는 이기에 값으로 취급할 수 있다. 일급 객체란? 변수에 할당할 수 있다. 다른 함수를 인자로 전달받을 수 있다. 다른 함수의 결과로 리턴될 수 있다. 객체는 크게 와 로 구성된다. 조금 단순하게 생각하면 프로퍼티는 을 나타내고 메서드는 이라고 생각할 수 있다. 아래 예시처럼, 자동차라는 객체를 만들었을 때 그 안에는 자동차가 움직인 distance(프로퍼티)가 있고 그 거리를 증가시키는 함수인 move(메서드)가 있다. 약간 어떤 특정 값과 기능을 가진 로봇을 만드는 기분..? 이라 생각하면…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 표현식과 문 값: 식이 평가되어 생성된 결과 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(코드) 자바스크립트에서의 3도 단순히 3이 아닌 숫자 리터럴 3 의 개념으로 인지하자 표현식: 특정한 값으로 평가될 수 있는 문(명령문) 문: 프로그램을 구성하는 기본 단위, 최소 실행 단위; 명령문; 데이터 타입 - 객체 자바스크립트는 객체 기반의 언어로, (숫자형, 문자형, 불린형, null, undefined, Symbol 6가지 이외는 전부 객체) 데이터 타입은 곧 를 의미 데이터 타입이 필요한 이유 값을 저장할 때 확보해야할 를 결정하기 위해 값을 참조할 때 한번에 읽어야할 를 결정하기 위해 메모리에서 읽은 2진…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 ECMAScript ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말한다. ECMA-262에서는 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 등의 핵심 문법을 규정 각 브라우저 제조사는 ECMAScript 사양을 준수하면서 브라우저에 내장되는 자바스크립트 엔진을 구현 자바스크립트는 크게 베이스가 되는 ECMAScript와 실행 환경에 따른 클라이언트 사이드 WEB API를 아우른다. 자바스크립트가 단일 쓰레드이지만 어떻게 비동기 처리가 가능한지가 이와 관련있다. 추후 이벤트 루프와 테스크 큐와 함께 자세히 다뤄볼 예정 특징 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로서 또한, 개발자가 별도의 컴…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 프로토타입(remind) 자바스크립트의 기반이 되는 개념으로 어떤 생성자 함수의 메서드를 담고 있는 특별한 객체 이 생성자 함수를 통해 instance를 만들게 되면 instance는 라는 객체를 통해 생성자의 prototype 객체를 참조하고 그 메서드를 사용할 수 있음 사실 보다 를 사용할 것을 권장 는 생략 가능한 프로퍼티 -> 자바스크립트 언어를 창시한 브랜든 아이크가 정한 것으로 이해의 영역이 아님! 그냥 그렇구나 하면 됨 메서드 오버라이드 스코프 체이닝과 마찬가지로, 같은 이름의 메서드가 여러 곳에 있을 때 가장 가까운 곳에서 그 메서드에 접근 Object 모든 생성자 함수에 의해 생성된 객체들은 prototype이라는 프로퍼티 자체가 ‘Ob…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 데이터 타입(remind) 원시형: 숫자형, 문자형, 불린형, null, undefined, Symbol 참조형: Object(객체) 원시형의 불변성: 데이터 영역에서 한번 저장된 데이터의 값 자체는 변경되지 않기 때문 참조형의 가변성: 객체 내의 프로퍼티(변수) 영역은 참조하는 데이터값의 주소가 바뀔 수 있기 때문 불변객체: 객체이면서 불변성을 갖게 하는 방법, 즉 복사하였을 때 깊은 복사가 가능하게 하는 방법 실행 컨텍스트(remind) 실행 컨텍스트: 코드가 실행되기 위한 환경 정보를 담은 객체로, 함수가 호출될 때 만들어진다. VariableEnvironment EnvironmentRecord(초기값) OuterEnvironmentReferen…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 Obsidian 개발과 직접 관련있는 부분은 아니지만, 기존 여러 메모를 을 사용하고 있었는데 속도 면에서 너무 답답하여 메모 앱을 고려하던 차에 이라는 앱을 발견! 일단 기본적인 기능은 무료라는 점과 완벽한 마크다운을 지원하고 속도 또한 굉장히 빠르다! 그리고 굉장히 큰 장점인 제텔카스텐(메모 작성법)을 활용하기에 최적화되어있는 메모앱이라는 점! 나에게 맞는 앱을 찾아서 사용해보고 공부하는 재미도 중요한 것 같다! 좀더 자세한 사항은 앱에 익숙해지고 기록해보자 🥝 🪴 성장일지 Obsidian

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 클라이언트 및 서버 간 통신(feat. JS, JQuery, Python, flask, Ajax) 예제 코드(라이브러리나 프레임 워크를 호출하는 코드는 생략) 코드 자체 단순한 예시 코드로 이 코드 자체에 집중하기보단 어떻게 클라이언트(프론트)와 서버(백)이 서로 통신하는지 감을 잡을 수 있게 하자! 🪴 성장일지 클라이언트 및 서버 간 통신(feat. JS, JQuery, Python, flask, Ajax)

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 클래스 자바스크립트는 프로토타입 기반 언어이기에 의 개념이 존재하지 않음 ES6부터는 클래스 문법이 추가되었으나, 사실상 이것도 프로토타입을 기반으로 하는 부분들이 있음 class: 집단, 집합으로 공통의 속성을 모아놓은 추상적인 개념 ex) 음식, 과일 instance: 구체적인 예시; class에 의해 구체적, 실체적으로 구현된 개체 ex) 바나나, 사과 클래스의 상하 관계 음식 이란 클래스와 과일 이란 클래스가 있을 때, 음식이 과일의 superclass이고 과일은 음식의 subclass가 됩니다. 즉, 하위 클래스에서 상위 클래스를 가리킬 때, super를 사용하는 이유입니다. 프로토타입 체이닝(Remind) 앞서 으로 특정 생성자의 protor…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 ⭐⭐⭐ 프로토타입 개념 자바스크립트는 클래스 기반 언어가 아닌 : 생성자(Constructor)가 갖는 프로퍼티로, 해당 생성자의 method가 담긴 객체(object) : new 연산자로 생성자를 호출해서 만들어진 인스턴스(instance)가 갖는 프로퍼티로, 생성자의 prototype을 참조하는 객체 new 연산자로 Constructor를 호출하면 instance가 만들어지고, 이 instance의 생략 가능한 프로퍼티인 는 Constructor의 을 참조함 프로토타입 체인 어떤 데이터의 프로퍼티 내부에 다시 프로퍼티가 연쇄적으로 이어진 것 이 체인을 따라가며 객체를 검색하는 것을 이라고 함 메서드 오버라이드 스코프 체인에서처럼, 특정 인스…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 참조형 타입이 불변형과 다른 부분 참조형에서도 마찬가지로 데이터 영역 자체는 불변이지만, 객체 내의 프로퍼티에 해당하는 변수 영역에서는 데이터를 가리키는 주소값이 바뀜. 이런 점을 가변성이라고 함. 얕은 복사와 깊은 복사의 차이 얕은 복사 : 객체의 바로 아래 단계의 값만 복사 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사 environmentRecord 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨(처음부터 끝가지 순서대로 훑음) 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언함 함수 자체, var로 선언된 변수의 식별자 호이스팅(feat.environmentRecord) 코드가 실행되기 전에 environmentRecor…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 참조형 타입이 불변형과 다른 부분 참조형에서도 마찬가지로 데이터 영역 자체는 불변이지만, 객체 내의 프로퍼티에 해당하는 변수 영역에서는 데이터를 가리키는 주소값이 바뀜. 이런 점을 가변성이라고 함. 얕은 복사와 깊은 복사의 차이 얕은 복사 : 객체의 바로 아래 단계의 값만 복사 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사 environmentRecord란? 호이스팅과의 연관성? environmentRecord 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨(처음부터 끝가지 순서대로 훑음) 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언함 함수 자체, var로 선언된 변수의 식별자 호이스팅 코드가 실행되기 전에 environmentRecord에 환경에 속한 코드의 변수명을 모두 알고 있음 ‘이 덕분에 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다’해도 문제가 없음 이런…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 콜백 함수 다른 코드의 인자로 넘겨주는 함수 콜백 함수를 넘겨받은 코드는 필요에 따라 적절한 시점에 콜백 함수를 실행(콜백 함수의 을 넘기는 것) 콜백 함수 예시 일반적인 코드는 사용자(유저)가 호출 주체이면서 제어권을 가지는 반면, 콜백 함수는 특정 코드에게 제어권을 넘겨줌 콜백 함수 예시2 위와 같이 콜백 함수의 종류에 따라 넘겨줘야하는 인자가 제각각 제어권을 갖는 함수 혹은 메서드가 어떤 인자를 어떻게 받아서 어떻게 활용하는지 꼭 확인해야함 또한, 일반적으로 를 생략할 경우 콜백 함수는 전역 객체(window)를 바인딩 예시1의 setInterval, setTimeout은 애초에 thisArg를 인자로 넘겨줄 수도 없음 콜백 함수 예시3 addEv…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 ⭐⭐⭐ this 2nd bind 메서드 call 메서드와 유사하지만, call 메서드는 객체와 인수를 받아 바로 호출하는 반면 bind의 경우 해당 객체 혹은 인수를 받은 함수를 반환 메서드 내부에서 함수 호출 시 메서드의 this를 바라보게 하기 ➕ 콜백함수를 인자로 받는 메서드 중 일부는 this로 지정할 객체를 인자로 같이 받음 🪴 성장일지 🌳 키워드 ⭐⭐⭐ this 2nd bind 메서드

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 ⭐⭐⭐ this this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정(ThisBinding) 실행 컨텍스트가 생성되는 건 언제? -> 함수를 할 때 즉, this도 함수를 호출 시 결정됨 전역공간에서의 this -> window(전역객체) 함수로 호출 시 this : 전역 객체(window)를 가리킴 메소드로 호출 시 this : .메소드에서 를 가리킴 ⭐ 메소드 내에서의 함수 호출 시 콜백함수에서의 this : 콜백함수의 제어권을 가지는 함수 마음(그 함수에 따라 제각각) 생성자 함수 내부에서의 this : -> 명심할 것! 명시적으로 this를 바인딩하는 방법(고의로 this를 바인딩하기) call 메서드 apply 메서드 이들을 활용하는 방…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 연산자 단항 연산자 활용 : Number()와 같은 기능 쉼표 연산자 논리 연산자 || : truthy한 값이 있으면 반환, 없으면 제일 끝값 반환 && : falsy한 값이 있으면 반환, 없으면 제일 끝값 반환 ?? : null, undefined가 아니면 반환, 없으면 제일 끝값 반환 null vs 0 배포 과정 AWS EC2 활용 Filezilla 도메인 설정해보기(feat. 가비아) 실행 컨텍스트 실행 컨텍스트 : 코드 실행을 위한 환경 정보를 저장해둔 객체 VariableEnvironment environmentRecord(snap shot; 초기값) outerEnvironmentReference(snap shot; 초기값) LexicalE…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 Flask 파이썬 웹 프레임워크로, 서버를 구동하기 위해 필요한 여러 기능들을 제공 flask 서버를 만들 때 보통 아래와 같은 폴더 구조를 가짐 .venv : 가상환경 폴더 static : 이미지, css 등을 담아두는 폴더 templates : HTML 파일을 담아두고 불러오는 폴더 app.py : flask 서버 구동 파일 app.py의 가장 기본적인 코드 GET과 POST GET 통상적으로 데이터를 요청 시 URL 뒤에 ?(query)를 붙이고 그 뒤에 key=value 형태로 전달 ex) google.com?q=사막 POST 통상적으로 데이터를 , , 요청 시 GET처럼 URL에 보이는 것이 아닌 HTML body에 key:value 형태로 전달 🌟클라이언트(Front)와 서버(Back)🌟 …

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 패키지 모듈(기능들의 묶음)을 모아놓은 것으로, 이런 패키지의 묶음을 라이브러리고 함. 일반적으로 패키지와 라이브러리는 혼용해서 사용 가상 환경(Virtual Environment) 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해서 따로 배포 패키지들을 설치 및 업그레이드할 수 있게 해주는 실행 환경 프로젝트마다 사용하는 패키지는 다르고, 그 버전이 다르기도 함. 컴퓨터 한 대에서 여러 프로젝트를 진행 시, 각 프로젝트마다 가상 환경을 만들고 필요한 패키지를 선택적으로 구성하여 활용할 수 있음 requests 패키지 웹 스크레이핑(scraping) feat.bs4 웹 스크레이핑이란 웹 페이지에서 원하는 부분의 데이터를 수집해오는 것을 의미 🔴 크롤링(crawli…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 jQuery JavaScript로 HTML 요소들을 더 편리하게 조작하기 위한 라이브러리 어떤 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것(라이브러리) 사용하기 전 import 해주어야함 제이쿼리의 단점 순수 자바스크립트보다 현저히 느린 속도 코드가 간결해보이지만, 되려 코드관리가 더 어려운 경우가 많음 더 자세한 내용은 jQuery 공식문서 참고! Ajax 의 약자로, JavaScrip와 SML을 이용한 비동기적 정보 교환 기법(비동기적인 웹 어플리케이션을 제작 시 사용하는 웹 개발 기법) JavaScript를 이용해서 비동기로 데이터를 주고받는 기술을 총칭 XML이라고 명시되어있지만, 사실상 요즘엔 거의 JSON을 다룸 jQuery를 임포트하면 사용할 수 있습니다.(단, jQuery sl…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 ⭐ 구조 분해 할당 객체에서 객체 내부의 속성과 할당하는 변수명이 같을 때 아래와 같이 표현할 수 있습니다. 마찬가지로 배열은 그 순서를 지키는 선에서 아래와 같은 표현이 가능합니다. ⭐ 이벤트 버블링 이벤트 버블링이란 이벤트가 발생할 때, 부모 태그에도 동일한 이벤트가 발생하는 현상을 말합니다. 마치 거품이 위로 상승하는 것과 같아 버블링이라고 표현합니다. parentNode, children every와 some 배열의 내장함수로 배열의 값들에 대한 평가(boolean)을 반환 🪴 성장일지 🌳 키워드 ⭐ 구조 분해 할당 ⭐ 이벤트 버블링 parentNode, children every와 some

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 브라우저와 최소한의 상호작용을 하는 함수 alert prompt confirm 모달 창 : 위의 함수를 실행했을 때 나오는 작은 창으로 모달 창이 떠있는 동안은 class 사용법 여러 개의 태그를 묶어줄 때 태그에 특정한 역할을 부여할 때 자바스크립트에서 class 다루기 Date reduce 함수 reduce는 단순히 덧셈을 위한 함수가 아님! 훨씬 더 강력한 기능을 가짐. reduce에 대한 이해를 바로 할 것! 정말 활용도가 높은 함수! 🪴 성장일지 🌳 키워드

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 BigInt 자료형 길이에 상관없이 정수를 나타낼 수 있습니다. 외의 값들을 표현 가능 typeof 특이사항 Math는 수학 연산을 제공하는 내장 객체이기 때문 null은 본래 null이라는 본연의 자료값이 있지만, 과거의 오류로 객체로 나옴. 하위 호환성 문제로 그대로 남겨둠. alert가 함수는 맞지만, 함수의 자료형은 객체. 이도 마찬가지로 과거의 오류이며 하위 호환성 문제로 그대로 남겨둠.(오히려 실무에서 유용하게 사용되기도 함) setInterval과 setTimeout을 멈추는 방법(feat.아이디) 아이디는 타이머에 대한 반환값으로 이 값을 통해 타이머를 취소할 수 있음.(반드시 같은 함수여야함) 단, setTimeout의 경우 비동기 함수가 종료되기 전에 취소를 해야 의미가 있음. add…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 var와 let 차이 var : 함수 스코프 -> 함수를 경계로만 접근 여부가 달라짐 let : 블록 스코프 -> 블록(함수, if, for, while 등등 {} 형태)를 경계로 접근 여부가 달라짐 클로져 함수와 함수 바깥에 있는 변수 간의 참조 관계 var와 비동기 함수가 만나면 클로져 문제(스코프와 관련)가 발생 🪴 성장일지 🌳 키워드

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 변수와 상수 변수 : 이름이 있는 , 으로 선언 상수 : 값이 변하지 않는 변수, 로 선언 동기와 비동기 동기 : 코드의 순서(위에서 아래, 왼쪽에서 오른쪽)대로 작동하는 개념 비동기 : 동기의 반대말로 순서와 상관없이 작동하는 개념 ex) setTimeout, document.addEventListener 등등 🪴 성장일지 🌳 키워드

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 그리드 시스템 그리드 시스템은 의미 그대로 마치 바둑판같은 격자를 만들어 그 격자를 조율하여 자리를 만들고 컨텐츠를 배치하는 방법입니다. 정적 그리드, 동적 그리드, 반응형 그리드 모두 float 속성으로 그리드 레이아웃을 구성해왔습니다. 그러나 float 속성은 문서 내부에 이미지 등을 띄워 출력하기 위해 만들어진 속성입니다. 어쩌다보니 이를 레이아웃에 활용하게 되다보니 20년이 넘는 세월동안 사용하게 되었습니다. 🙃 그리드 레이아웃 위와 같은 이유로 CSS3에서 아예 레이아웃을 구성할 때 사용할 수 있는 display 키워드로 와 를 추가하였습니다. 그리드 레이아웃에 관해 간단한 동작들을 아래 코드와 함께 보도록 하겠습니다. 문자열로 배치하기 grid-template-areas 속성과 grid-area 속성을 조합하면 문자열을 통해 …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. Appendix A - 부트스트랩 부트스트랩은 트위치에서 제공하는 웹 페이지 디자인 프레임워크입니다. 부트스트랩을 사용하여 반응형 웹 페이지를 쉽고 빠르게 만들 수 있습니다. 부트스트랩은 2가지 방법으로 제공됩니다. 자바스크립트와 스타일시트 파일을 다운로드해서 사용 개요 아래의 코드를 에 넣어줍니다. 레이아웃 1. Fixed 레이아웃 고정된 너비를 사용하는 레이아웃입니다. 화면의 크기를 바꿔도 컨텐츠의 크기가 변하지 않습니다. 네이버 다음과 같이 class를 “container”로 지정해주면 fixed 레이아웃이 만들어집니다. 또한, 부트스트랩의 기본 화면 너비는 960px이고 너비가 그 아래로 줄어들면 로 동작합니다. 여기서 정적(Fixed) vs 동적(Fluid)와 반응형은 다른 개념입니다. 반응형은 특정 화면 크기에 대해서 다른 …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS 추가 규칙과 반응형 웹 CSS3로 넘어오면서 반응형 웹을 위해 많이 사용되는 것이 규칙(@-rule)입니다. 반응형 웹을 사용하여 데스크탑 전용 웹 페이지와 모바일 전용 웹 페이지를 따로 구분해서 만들지 않아도 됩니다. 사용자가 사용하고 있는 기기의 종류에 따라서 다른 형태의 화면을 보여주는 방법입니다. (반응형 웹과는 반대로 따로 만드는 웹을 적응형 웹이라고 부릅니다.) @import 규칙 CSS 파일에서 다른 CSS 파일을 추가하는 방법입니다. link보다 좀더 깔끔합니다. @font-face 규칙 로컬에 있는 폰트 파일을 통해 폰트를 만드는 규칙입니다. @media 규칙 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙입니다. 최근 HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙입니다. …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 변환(transform) 변환이란? HTML5가 등장하면서 플래시같은 플러그인 없이 웹 브라우저에 3차원을 구현할 수 있게 되었습니다. 그 방법은 2가지가 있습니다. 자바스크립트를 사용한 WebGL ✅ 2차원 변환 웹 브라우저를 바라보는 유저의 시선을 기준으로 방향이 X축, 방향이 Y축입니다. 또한, 방향으로 Z축을 추가하면 3차원 변환을 구현할 수 있습니다.(Z-index를 떠올리시면 됩니다.) 🎖️ transform에 입력하는 키워드 순서에 따라서 같은 키워드들을 적어도 다른 결과물이 나올 수 있습니다. 즉, 순서에 따라 다른 변환이 구현되기도 합니다. 3차원 변환 translate3d(, , ): 특정 크기만큼 이동합니다. scale3d(, , ): 특정 크기만큼 확대 및 축소합니다. rotate3d(, , ): 특정…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 변형과 애니메이션 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. CSS 변형(transition)을 사용하면 화면에 애니메이션(animation)을 구현할 수 있습니다. 또한, CSS3 변형과 React, Vue.js와의 결합을 통해 더 다양한 애니메이션을 구성할 수 있습니다. 변형(transition) 속성 CSS3에서 움직임을 구현하는 방법에는 크게 transition(변형)과 animation(애니메이션) 속성으로 나누어집니다. 변형 속성을 한번에 나타내면 다음과 같이 적을 수 있습니다. 키 프레임과 애니메이션(animation) 속성 변형(transition)과 속성 및 키워드의 차이가 있을 뿐, 양식이 거의 비슷합니다. 애니메이션 속성을…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 소셜커머스 메인 페이지 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 📕 정리 와 를 이용하여 body 태그 중앙 정렬하기 자손 태그에 적용 시, 부모 태그에 적용하기 자손 태그에 속성 적용 시, 부모 태그에 적용하기 스프라이트 이미지와 에 대한 이해 🍎 들어가기에 앞서 📖 1. 소셜커머스 메인 페이지 📕 정리

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 태블릿PC 레이아웃(동적 너비 레이아웃) 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 기존에 width와 margin을 이용하여 중앙 정렬하던 것과 다르게 화면의 너비에 따라 레이아웃이 동적으로 바뀌는 형태입니다. 📕 정리 중요한 내용 동적으로 너비가 변하는 레이아웃 형태 🍎 들어가기에 앞서 📖 1. 태블릿PC 레이아웃(동적 너비 레이아웃) 📕 정리 중요한 내용

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 스마트폰 레이아웃 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 최근에는 HTML, CSS, Javascript를 활용해 네이티브 애플리케이션을 만드는 , 등의 기술이 활성화되었습니다. 이와 같은 방법으로 애플리케이션을 만들면, 아이폰 및 안드로이드 등의 애플리케이션을 따로 개발할 필요가 없이 모든 OS에서 실행할 수 있다는 장점이 있습니다. 👍 📕 정리 중요한 내용 뷰포트 meta 태그 스프라이트 이미지 nav 만드는 방법 overflow와 float 속성 활용 display 속성과 table 키워드 활용 ::before 선택자를 사용하여 수직선 생성하기 ➕ 글자 감추기 : Ellipsis(생략)하는 기술 화면이 작은 기계에서는 글자가 잘릴 수 있습니다…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 웹 페이지 레이아웃 레이아웃 관련 챕터의 경우 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 📕 정리 중요한 내용 레이아웃을 단위로 생각하기 레이아웃 초기화 코드 width와 margin을 사용하여 중앙 정렬하기 absolute와 relative 사용 그리고 height를 통한 영역 확보 overflow와 float을 사용해서 레이아웃 나누는 방법 🍎 들어가기에 앞서 📖 1. 웹 페이지 레이아웃 📕 정리 중요한 내용

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 스타일 속성 기본 CSS3 단위 크기 단위 em 단위는 배수를 나타내는 단위입니다. 입니다. 가시 속성 display 속성 은 마치 inline처럼 한줄로 배치되면서 동시에 block처럼 width, height, margin(상하좌우에 대해서 모두)을 갖습니다. 🌵 은 따로 width, height을 갖지 않고 margin에 대해서도 좌우로만 적용이 가능합니다. visibility 속성 은 태그를 보이지 않게 만듭니다. 🚗 보이지 않게만 만들 뿐 그 자리에 존재합니다!(과는 다릅니다.) 박스 속성 box-sizing 속성 width와 height 속성이 차지하는 범위를 지정합니다. : content를 기준으로 width, height을 지정합니다. 즉, 태그가 차지하는 크기를 구하려면 padding, border, margi…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 선택자 기본 CSS 선택자란 CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능으로 해당 태그에 우리가 원하는 스타일 또는 효과를 적용할 수 있습니다. 전체 선택자 HTML 문서 안에 있는 모든 태그를 선택할 때, 전체 선택자를 사용합니다. 전체 선택자를 사용하면 html 태그부터 head, title, style, body 태그까지 모두 선택합니다. 속성 선택자 특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 기본 속성 선택자 문자열 속성 선택자 의 경우 속성값이 뒤에 오는 값으로 되는 태그를 선택합니다. 의 경우 속성값이 뒤에 오는 값으로 나는 태그를 선택합니다. 후손 선택자 & 자손 선택자 아래의 코드에서 div 태그를 기준으로 바로 한 단계 아래에 위치한 태그(, , )를 이라고 부르고 자손 태그를…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. HTML5 개요 웹의 역사 월드 와이드 웹(World Wide Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간을 의미합니다. 인터넷은 전 세계를 연결하는 국제 정보 이고 웹은 그 위에서 작동하는 로 서로 구분되는 개념입니다. 플러그인 웹 브라우저의 경쟁으로 웹은 엄청난 속도로 발전했습니다. 웹 표준을 지정하는 W3C가 그 속도를 따라가지 못했을 정도였습니다. 이에 불만을 느낀 기업들이 을 만듭니다. 플러그인은 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법입니다. 웹 2.0의 시대 인터넷은 점점 사용자끼리 뭉쳐 새로운 콘텐츠를 개발할 수 있는 공간으로 발전합니다. 이렇듯 다른 사용자와 함께 새로운 콘텐츠를 창조할 수 있게 된 시대를 웹 2.0 …

👋 소개 안녕하세요, 프론트엔드 개발자를 꿈꾸며 공부하는 제이든입니다. 그 동안 티스토리 플랫폼을 이용해 블로그를 운영해오다, Gatsby 및 Github pages를 활용해보고싶어 이렇게 개인 블로그를 시작하게 되었습니다. 👍 앞으로 공부하며 기억해둬야할 자산들을 이곳에 공유하고 기록하려 합니다. 또한, 아직 많이 부족하지만 블로그도 더 가꾸어 나가도록 하겠습니다. 감사합니다. 😄 혹시 이전 블로그가 궁금하시다면 Jayden’s LifeTrip을 방문해주세요. 👏 👋 소개