Homile

📌 맥북을 구매하고 내일 배송이 오는 날이라 두근두근 했다!! 페어분께서 애플 스토어에 가셔서 보내주신 사진과 팁을 주셔서 너무너무 좋았다!! 맥북프로 2015 13인치 백라이트가 마지막으로 나오는 버전을 사용했는데 리액트를 돌리기 시작하니까 버벅거리기 시작해서 너무 불편해서 고민하면서 찾아보다가 결국 맥북에어 m1 16기가를 구매를 했다 내일 오는데 세팅은 언제하지?....라는 생각이 들었다. 📗 오늘 학습한 내용 JavaScript 동기 비동기 callback promise async/await github sshkey 코드스테이츠 강의 전 세팅 다시해보기 React props 컴포넌트의 속성 읽기 전용 데이터 stats 사용자가 알아서는 안되는 컴포넌트를 내부적으로 사용하는 것(은닉) SPA(sin..

📌 비동기를 처음 들어가는 날이다.. 비동기가 어려운 부분이라고 알고 있는 만큼 더욱 열심히 해야겠다! 📗 오늘 학습한 내용 JavaScript 동기 일이 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다. 비동기 데이터를 가져오는 데 까지 대기하는 시간을 없애기 위해서 사용한다. setTimeout callback 함수에 매개변수로 전달된 함수이다. promise 콜백과 하는 일은 같지만 콜백지옥을 해결하기 위해 코드를 조금 더 간결하게 작성하기 위해 나옴. resolve: 결과 값 출력 reject: 에러 결과 출력 promise 메서드 then: 정상적으로 실행될 경우 값 출력 catch: 에러가 발생할 경우 출력 finally: 성공 유무에 상관없이 마지막 값 출력 promi..

📌 프로토타입의 구조에 대해서 조금 더 자세히 알게 되었고, 📗 오늘 학습한 내용 JavaScript 프로토타입 체인 부모 역할을 하는 프로토타입 객체에 접근 할 수 있다. 객체의 값이 존재 하지 않는다면 부모의 프로토타입 객체를 차례로 검색한다. 객체에 없는 값이나 메서드를 접근할 때 프로토타입 체인이 발생한다. 모든 프로토타입 객체의 종점은 Object.prototype이다. . prototype: 해당 객체의 프로토타입 객체에 접근할 수 있다. __proto__: 해당 객체의 부모 객체를 순차적으로 검색 할 수 있다. 전 날 프로토타입에 대해선 학습했지만 체인이라는 말이 들어가니 이어준다는 뜻 같았다. 조금 학습한 내용이 맞다면 모든 객체의 최상위 프로토타입 객체는 Object이고, __proto_..

📌 우리가 사용하고 있는 JavaScript는 객체지향 언어인데 이것의 뜻과 사용법에 대해 자세히 학습하는 시간이 되어 좋았다!! 📗 오늘 학습한 내용 JavaScript 객체지향 클래스와 인스턴스 클래스: 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀 인스턴스: 각각의 고유한 속성과 메서드를 갖는 것 new키워드와 생성자 함수 객체지향 프로그래밍 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 객체로 그룹화 시킨다. 장점: 생산성 향상, 유지보수의 우수성, 재사용성 단점: 개발, 실행 속도 저하, 코드 작성 난이도 상승 4가지 주요 개념: 캡슐화, 추상화, 상속, 다형성 프로토타입 모든 객체들이 메서드와 속성들을 상속 받기 위한 템플릿이며, 객체를..

📌 오늘은 고차함수에 대해서 학습하는 날이었다. 고차함수에서 자주 쓰이는 메서드인 filter, reduce, map에 대해서 직접 사용해서 문제를 풀어보는 것을 했는데 아직 메서드를 사용하는데 익숙하지 않았던 것 같다. 조금 더 익숙해져보자! 📗 오늘 학습한 내용 JavaScript 고차함수 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수 일급객체 변수에 할당 할 수 있다. 다른 함수의 전달인자로 전달될 수 있다. 다른 함수의 결과로서 리턴 될 수 있다. 콜백함수 함수의 전달인자로 전달되는 함수 메서드 filter map reduce flat flatmap concat 고차함수가 어렵다는 것은 익히들어 알고 있었다. 하지만 메서드를 조금만 잘 쓰거나 문제를 해결할 때 한문장씩 끊어서 풀다..

Section1 회고 프로트엔드 개발자로서 진로를 다잡고 코드스테이츠를 처음 들어와 진행했던 세션이었던 만큼 초반에 나와 약속했던 꾸준히하기, 늦지않기, 페어와 소통하기 등을 잘 지켰던 것 같아서 조금은 뿌듯하다. ✅ 목표 연봉 3600만원 이상의 개발자 되기 네이버 코딩테스트 및 면접 통과하기 나만의 웹 페이지를 기획, 구성, 구현 해서 히트치기 😃 페어프로그램 처음 페어분과 만났을 때는 긴장도 하고 어떻게 대화를 이어가야 하는지에 대해 걱정이 많았는데 처음부터 좋은 분을 만나게 되어 후에 페어분들과도 원활하게 소통을 해왔던 것 같다. 페우분들과 진행 할 때 내가 놓치는 부분을 잡아주는 것이 좋았으며, 내가 알고있는 지식을 전달할 수 있는 능력을 기르게 된 것이 가장 큰 수확이다. 이것은 면접에서 약한..

Local Storage란? 브라우저 내 데이터를 가지고 있는 저장소 sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다. Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다. 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다. Local Storage 사용법 로컬 스토리지 내 데이터 저장 객체 형태로 저장 된다. // key value localStorage.setItem('minwoo', 'cho'); 로컬 스토리지 내용 가져오기 const name = localStorage.getItem('minwoo'); 로컬 스토리지 내용 삭제 loca..

📌 첫 솔로프로젝트를 하면서 구현하지 못하였던 부분을 추가적으로 작업을 시작하는 날이다. 미니 해커톤이라고 이름은 명칭되어 있지만 우리가 알고있는 해커톤이 아닌 그냥 작업한 것을 다른 분들에게 보여주고 설명해주는 자리였다. 📗 오늘 학습한 내용 Local Storage 브라우저의 Local Storage에 데이터를 저장하여 새로고침, 브라우저 다시열기 등과 같은 일이 생겨도 저장된 값을 변화하지 않고 화면에 출력할 수 있도록 한다. 문자열로만 저장이되기 때문에 문자열이 아닌 다른 값으로 사용할 때에는 형식을 변경해주어야 한다. localstorage.setItem('키', 값): 로컬 스토리지에 저장 JSON.parse(localstorage.getItem('키'): 조회 localstorge.remov..

📌 대망의 첫 솔로 프로젝트를 하는 날이니 만큼 예측했는데 내가 예측한 것과는 너무 다르다... 데이터를 가지고 github의 discussion을 html, css, js로 구현하는 프로젝트였다... 열심히 하자!! 📗 오늘 학습한 내용 HTML CSS JavaScript DOM 이벤트 핸들러 Local Storage 브라우저의 Local Storage에 데이터를 저장하여 새로고침, 브라우저 다시열기 등과 같은 일이 생겨도 저장된 값을 변화하지 않고 화면에 출력할 수 있도록 한다. 문자열로만 저장이되기 때문에 문자열이 아닌 다른 값으로 사용할 때에는 형식을 변경해주어야 한다. Session Storage Local Storage와 방식은 같지만 브라우저를 닫는 경우 데이터가 삭제되는 것이 다르다. Pa..

📌 갑작스러운 비가 내려 시원하게 하루를 시작할 줄 알았지만 아직 몸살이 낫지 않아서 추웠다.... 그리고 정규표현식에 대해 다시 학습하는 계기가 되는 날이었다. 📗 오늘 학습한 내용 회원가입 폼 유효성 검사 JavaScript 정규표현식 RegExp Github 아고라스테이츠 클론 작업해보기 Mini Hackathon Final에 대해 알아보기 정규 표현식에 대해 학습을 추가적으로 진행하였다. 어떻게 사용하고 어디에서 사용하는 지를 정확하게 알아야 효율적으로 코드를 작성 할 수 있다고 생각했기 때문이다. 다음날 있을 아고라스테이츠 클론을 작업해보았다.또한, 금요일에 있는 미니 해커톤에 대해서 어떤것인지 한번 찾아 보았는데 2~3명이 모여서 하나의 주제를 가지고 간단한 페이지를 개발을 하는 것이라고 했다..