우테코
-
이렇게 우테코 레벨 1이 마무리되었다. 시간이 정말 빨리 지나간 거 같다. 마지막 주에서는 미션을 마치고 레벨 1을 돌아보기를 했는데 그때 적어놓은 것들을 기억이 사라지기 전에 정리해보려고 한다. 8주간의 이야기를 정리하니 매우 길 예정이다. 연극으로 시작한 우테코 🪐 이제와 돌아보니 연극은 정말 별개 아니였다. 기억도 가물가물할 정도인데 그땐 인생의 흑역사가 될까 봐 그렇게 걱정했는지 모르겠다. 우리 조도 요즘 하는 말이 그 연극 덕분에 조끼리 더 친해졌던 거 같다고 한다. 나도 동의한다. 수치스러운 경험을 공유하니 왠지 모를 동료애가 더 생겼달까.. 🚗 자동차 경주로 미션 시작 자동차 경주 미션 자체는 프리코스 내용과 크게 다른게 없었던 거 같다. 하지만 페어와 함께 해야 하다 보니 초반에 세팅하는 ..
[우테코 6기] 레벨 1 돌아보기 회고 📌이렇게 우테코 레벨 1이 마무리되었다. 시간이 정말 빨리 지나간 거 같다. 마지막 주에서는 미션을 마치고 레벨 1을 돌아보기를 했는데 그때 적어놓은 것들을 기억이 사라지기 전에 정리해보려고 한다. 8주간의 이야기를 정리하니 매우 길 예정이다. 연극으로 시작한 우테코 🪐 이제와 돌아보니 연극은 정말 별개 아니였다. 기억도 가물가물할 정도인데 그땐 인생의 흑역사가 될까 봐 그렇게 걱정했는지 모르겠다. 우리 조도 요즘 하는 말이 그 연극 덕분에 조끼리 더 친해졌던 거 같다고 한다. 나도 동의한다. 수치스러운 경험을 공유하니 왠지 모를 동료애가 더 생겼달까.. 🚗 자동차 경주로 미션 시작 자동차 경주 미션 자체는 프리코스 내용과 크게 다른게 없었던 거 같다. 하지만 페어와 함께 해야 하다 보니 초반에 세팅하는 ..
2024.04.12 -
나란 사람은? 나는 혼자서 모든 걸 해결해야 한다는 생각이 강하다. 좋게 말하면 본인 일에 책임감이 강하다. 나쁘게 말하면 스트레스를 받아도 주변에 이야기하지 않는다. 어떤 문제는 주변 사람들과 이야기하면 더 쉽게 해결될 수도 있다. 해결은 안 되더라도 도움을 얻을 수 있다. 혹은 위로라도. 누군가는 자신의 고민을 방송에 나와서 수만 명에게 공유하기도 한다. 아니면 가까운 이에게 넌지시 이야기해 볼 수도 있다. 하지만 난 그 쉬운 걸 못 한다. 왜 고민을 사람에게 잘 공유하지 못할까? 아무래도 초라한 모습이나 부끄러운 모습을 보여주기 싫은 거 같다. 그걸 약점이라고 생각하는 거 같다. 우테코에서의 나는? 새로운 환경이라고 해도 사람은 크게 변하지 않는다. 오히려 본인이 원래 어떤 사람이었는지 더 잘 보여..
[우테코 6기] 유연성 강화하기 - `나`나란 사람은? 나는 혼자서 모든 걸 해결해야 한다는 생각이 강하다. 좋게 말하면 본인 일에 책임감이 강하다. 나쁘게 말하면 스트레스를 받아도 주변에 이야기하지 않는다. 어떤 문제는 주변 사람들과 이야기하면 더 쉽게 해결될 수도 있다. 해결은 안 되더라도 도움을 얻을 수 있다. 혹은 위로라도. 누군가는 자신의 고민을 방송에 나와서 수만 명에게 공유하기도 한다. 아니면 가까운 이에게 넌지시 이야기해 볼 수도 있다. 하지만 난 그 쉬운 걸 못 한다. 왜 고민을 사람에게 잘 공유하지 못할까? 아무래도 초라한 모습이나 부끄러운 모습을 보여주기 싫은 거 같다. 그걸 약점이라고 생각하는 거 같다. 우테코에서의 나는? 새로운 환경이라고 해도 사람은 크게 변하지 않는다. 오히려 본인이 원래 어떤 사람이었는지 더 잘 보여..
2024.04.11 -
벌써 레벨 1의 마지막 미션이 끝났다. 우테코 첫 등교가 엊그제 같은데 벌써 마지막이라니 믿기지가 않는다. 이번 영화 리뷰 미션은 비동기 통신이 핵심인 미션이었다. 학습 목표를 따라서 이번 미션에서는 API 통신을 처리할 때 고려해야 하는 다양한 문제를 직접 경험해 보면서 해결 방법을 고민해 보는 시간을 가졌다. ✅ 베포 사이트 영화 리뷰 웹앱 📍 학습 목표 step 1 API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 step 2 상세 정보 조회, 별점 매기기 UI/UX 개선 하기 step 1 step1에서는 메인 페이지에서는 인기순으로 정렬된 페이지를 그리고 검색을 했을 때는 검색된 결과물을 보여주는 결과 페이지가 있었고 모든..
[우테코 6기] 레벨 1 마지막 - 영화 리뷰 웹앱 미션 회고 ❗️벌써 레벨 1의 마지막 미션이 끝났다. 우테코 첫 등교가 엊그제 같은데 벌써 마지막이라니 믿기지가 않는다. 이번 영화 리뷰 미션은 비동기 통신이 핵심인 미션이었다. 학습 목표를 따라서 이번 미션에서는 API 통신을 처리할 때 고려해야 하는 다양한 문제를 직접 경험해 보면서 해결 방법을 고민해 보는 시간을 가졌다. ✅ 베포 사이트 영화 리뷰 웹앱 📍 학습 목표 step 1 API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 step 2 상세 정보 조회, 별점 매기기 UI/UX 개선 하기 step 1 step1에서는 메인 페이지에서는 인기순으로 정렬된 페이지를 그리고 검색을 했을 때는 검색된 결과물을 보여주는 결과 페이지가 있었고 모든..
2024.04.04 -
오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
[JavaScript] debounce, throttle 개념 정리오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
2024.04.03 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. 동기 처리와 비동기 처리 일반적인 함수 호출 ⇒ 함수 호출 → 함수 코드 평가 → 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택 (콜 스택) 에 푸시 → 함수 코드 실행 → 종료 시 콜 스택에서 팝 돼서 제거됨 함수가 실행되려면 함수 코드 평가에서 생성된 함수 실행 컨텍스트가 실행 컨텐스트 스택에 푸시 → 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (싱글 스레드 방식) : 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미함. == 한 번에 하나의 태스크만 실행할 수 있음 그래서 작업이 오래 걸리는 태스크를 실행하게 ..
[딥 다이브 스터디] 42장 비동기 프로그래밍*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. 동기 처리와 비동기 처리 일반적인 함수 호출 ⇒ 함수 호출 → 함수 코드 평가 → 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택 (콜 스택) 에 푸시 → 함수 코드 실행 → 종료 시 콜 스택에서 팝 돼서 제거됨 함수가 실행되려면 함수 코드 평가에서 생성된 함수 실행 컨텍스트가 실행 컨텐스트 스택에 푸시 → 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (싱글 스레드 방식) : 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미함. == 한 번에 하나의 태스크만 실행할 수 있음 그래서 작업이 오래 걸리는 태스크를 실행하게 ..
2024.04.03 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); 생성자 함수 (constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. const strObj = new String('Lee'); // String 생성자 함수에 의해 String 객체 생성 생성자 함수에 의한 객체 생성 방식의 장점 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러개 생성하려면 매번 같..
[딥 다이브 스터디] 17장 생성자 함수에 의한 객체 생성*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); 생성자 함수 (constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. const strObj = new String('Lee'); // String 생성자 함수에 의해 String 객체 생성 생성자 함수에 의한 객체 생성 방식의 장점 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러개 생성하려면 매번 같..
2024.04.01 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 틀린 부분이 있을 수 있습니다. 프로퍼티란? 자바스크립트에서 "프로퍼티(Property)"는 객체(object)의 특징이나 상태를 나타내는 값(value)을 가리키는 이름-값 쌍(name-value pair)을 의미합니다. 이러한 프로퍼티들은 객체의 특정한 기능을 정의하거나 객체의 상태를 나타내는 데 사용됩니다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트(속성)를 기본 값으로 자동 정의합니다. → 프로퍼티의 상태 프로퍼티의 값 (value) 값의 갱신 가능 여부 (writable) → false 시 값 변경 X 열거 가능 여부 (en..
[딥 다이브 스터디] 16장 프로퍼티 어트리뷰트*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 틀린 부분이 있을 수 있습니다. 프로퍼티란? 자바스크립트에서 "프로퍼티(Property)"는 객체(object)의 특징이나 상태를 나타내는 값(value)을 가리키는 이름-값 쌍(name-value pair)을 의미합니다. 이러한 프로퍼티들은 객체의 특정한 기능을 정의하거나 객체의 상태를 나타내는 데 사용됩니다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트(속성)를 기본 값으로 자동 정의합니다. → 프로퍼티의 상태 프로퍼티의 값 (value) 값의 갱신 가능 여부 (writable) → false 시 값 변경 X 열거 가능 여부 (en..
2024.04.01 -
package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
[JavaScript] dependencies와 devDependencies의 차이 정리package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
2024.03.18