🚤 성장일지 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를 다루…

🚤 성장일지 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가 변경될 때마다 콜백을 실행하려고 를 사용했는…

🚤 성장일지 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를 지원한다…

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

🚤 성장일지 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 말 그대로 클라이언트 즉,…

🚤 성장일지 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 방식은 빌드 시점에 미리 페이지를 렌더링하여 정적인 페…

🚤 성장일지 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)에게 도메인 주소…

🚤 성장일지 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에서는 기본적으로 활성화되어있다.) 과…

🚤 성장일지 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…

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

🚤 성장일지 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 통신과 다르게 양방향으로 진행되는 통신 웹소켓 기…

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

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

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

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

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

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

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

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

🚤 성장일지 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하는 부분을 어떻게 전달해야할지 고…

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

🚤 성장일지 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로 구현토…

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

🎄 성장일지 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 통신…

🎄 성장일지 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)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자! 🔑 오늘의 학습 키워드 에 대한 고찰 이번 프로젝트에서 마지막 주차 때 무슨 코딩 기계 마냥 구현에 집중하다보니 깨달은 게 하나 있다. 리액트의 함수 컴포넌트에서 이 라는 녀석이 참 라면 …

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

🎄 성장일지 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를 받아오고 이를 상태로 갖는다. 그리고 이 상태를 자식컴포넌…

🎄 성장일지 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를 사용하면서 기본적으로 제공…

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

🎄 성장일지 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의 협업 드디어 협업 프로젝트가 시작되었다. 오늘은 개발은 일체하지 않았다. 팀원들간 인사를 하고 팀의 그라운드룰(스크럼, 깃 브랜치 …

🎄 성장일지 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 만들기 강의에서 나오는 프로젝트 중 하나지만, 강의를 하나도 보지 않고 구현해보았다. 그러고나서 강의를 보면서 리팩토링을 하는데, …

🎄 성장일지 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 이 묘하게 다른 훅 녀석들… 알고보면 굉장히 다른 목적과 …

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

🎄 성장일지 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…

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

🎄 성장일지 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…

🎄 성장일지 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도 만들겸!) 어떻게 하면 효과적으로…

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

🎄 성장일지 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)? 동시에 일어난다는 의미로, 여기서 동시에 일어난다는 것은 과 가 동시에 일어난다는 의미 앞의 코드가 아직 실행 중이라면 그 실행이 끝날…

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

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

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

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

🎄 성장일지 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 형태로 갖고 있고 …

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

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

🎄 성장일지 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의…

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

🎄 성장일지 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…

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

🎄 성장일지 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) 클…

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

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

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

🎄 성장일지 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.콜백함수 📝 요약 및 하루 간단 회고 제주도…

🎄 성장일지 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 …

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

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

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

🎄 성장일지 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(프로세서)를 할당받을 프로세스를 결정하게 된다. 그러므로 스케줄링 시스템의 성능에 직/간접적인 영향…

🎄 성장일지 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(…

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

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

🎄 성장일지 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) 프로그래밍에서 필요한 데이터를 추상화시켜 로 만들고 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법 객체지향 프로그래밍 그림 클래스 (자바스크립트)객체를 생성하기 위한 템플릿이자 방법 중 하나. 객체를 만들어 내기 위한 설계도…

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

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

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

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

🎄 성장일지 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: 화살…

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

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

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

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

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

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

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

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

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

🎄 성장일지 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…

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

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

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

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

🎄 성장일지 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 세팅 멘토링 📋 주요 내용 요약 알고리즘 함수 재사용성 올리기, 프로젝트 서버 상태 관리 위한 세팅, 멘토링 📝 하루 간단 회고 좀더 혼자서 자라날 수 있는 개발자가 되도록 하자. 멘토링을 통해 많은 것을 배우고 얻어가면서도 스스로 성장할 수 있도록 하자. 그리고 멘토님께서 말씀하신 것처럼 너무 어렵게 생각…

🎄 성장일지 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)에 대한 간단한 이야기도 녹여서 깃…

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

🪴 성장일지 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 그리고 여러가지 화면을 조작하는…

🪴 성장일지 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 깃은 우리의 프로젝트의 버전을 관리할 수 있는 툴이다. 깃허브는 그렇게 관리되는 프로젝트(코드)를 전 세계 사람들과, 혹은 협업하는 사람과 공유할 수 있게 해주는 아주 유용한 도구다. 이 때, 우리가 작업한 파일들 중 혹은 등의 이유로 깃허브에는 반영되지 않았으면 하는 파일들이 있을 수 있다. 이런 파일들을 지정하고 관리해주는 것이 이다. 깃허브 저장소 생성 후 로컬에 파일을 생성한…

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 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에 대해 어떤 변경없이 동일한 인자에 대해 동일한 결과를 반환하며 애초에 수학적 함수에서 는 개념 자체가 없다. 즉, 이것이 순수함수 비상태, 불변성 함수형 프로그래밍에서의 데이터는 변하지 않는 을 유지해야한다. ⭐ 데이터의 변경이 필요한 경우, 원본 …

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

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

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

🪴 성장일지 책 의 내용에 자극받아 시작하는 소박한 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다! 🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명 콜백 함수 다른 코드의 인자로 넘겨주는 함수 콜백 함수를 넘겨받은 코드는 필요에 따라 적절한 시점에 콜백 함수를 실행(콜백 함수의 을 넘기는 것) 콜백 함수 예시 일반적인 코드는 사용자(유저)가 호출 주체이면서 제어권을 가지는 반면, 콜백 함수는 특정 코드에게 제어권을 넘겨줌 콜백 함수 예시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 등등 🪴 성장일지 🌳 키워드