이번주 회고는 4F 기법으로 작성해보았다. - 메모어 회고 방법 예시- Vallista님 2022년 상반기 회고 Fact1. SPA 일기예보 앱프로젝트 세팅이전에 자바스크립트로 프로젝트를 구축할 때, webpack과 babel을 활용했었다. 공식문서를 보고 따라가면 어렵지 않게 세팅할 수 있는데 빌드 툴인 vite를 활용하면 명령어 한 줄로 빠르게 세팅 할 수 있음을 알고 있어 큰 고민 없이 vite로 프로젝트를 세팅했다. 라우터 구현처음에 설계할 때 라우터에 필요한 것은 라우터 정보, navigate 메서드, url로 들어왔을 때 대응이라고 정의했다. history API에 대해 다시 리마인드 하고 구현했다. 동적 라우팅 기능 추가서울의 일기예보 페이지 경로를 /weather/:name 형식으로 바꾸면..
이번 주에 한 것유닛테스트에 대해 공부하고 과제에 적용 (jest 사용)숫자 업앤다운 게임 콘솔 view에서 웹 브라우저로 전환 🔗 링크목표 설정브라우저 DOM, Event, Event Loop, Critical Rendering Path 등 공부 지난 주 개선점어떤 개발자가 되고 싶은지, 어떤 환경에 들어가고 싶은지, 내가 부족한 점이 무엇이고 어떻게 채워나갈 것인지 고민할 것세 개 중에 마지막 것만 했다. 내가 관심있는 회사들의 채용공고, 블로그, 면접 후기 같은 것을 보고 객관적으로 내가 필요한 경험이 무엇인지 찾고자 했다.아래 세 개가 내가 뽑아낸 것이다. 2, 3번은 이전 회사에서의 경험으로도 어필할 수 있겠지만 조금 더 자신있게 나 이런 사람이에요! 말할 수 있도록 조금 더 경험을 쌓으면 좋..
이번 주에 한 것자바스크립트 프로토타입, 클래스 개념 공부숫자 업앤다운 게임 리팩토링 (도메인과 UI 로직 분리, 기능 추가) 지난주 개선점을 잘 수행했나?과제 수행 목적에 대한 고민하기 (구현에만 집중할 것이 아니라)이론 공부 시, 스스로 질문하고 답해보기과제를 진행하면서 틈틈이 이 과제를 왜 해야 하는지, 왜 이런 요구사항이 나왔는지 고민을 했다. 도메인과 UI 로직에 대한 고민을 해보라는 게 가장 큰 목적이었다고 생각한다. 도메인 로직을 분리해 놓으면 여러 View에서 재사용하기 좋다. 각 각의 역할은 주요 데이터 관리 및 기능 정의, 사용자와의 상호작용이므로 신경 써야 하는 부분이 분리되어 유지보수도 용이할 것이라고 생각했다. 그 외에는 학습한 클래스 개념을 직접 사용해 보며 체득시키기 위해, 기..
회고목적멘토링을 더 잘 받기 위해, 공부와 과제를 잘 수행했는지 부족한 점이 있으면 어떻게 개선할지 찾기 위해. "나" 보고서. 내가 어떻게 했을 때 공부가 잘 되는지 등을 찾기 위해 이번주는 좋은 것과 나쁜 것이 무엇이 있었나요?숫자 업앤다운 게임 과제를 기간 안에 수행한 것이 좋았다.여행과 약속으로 멘토님과 과제 PR 핑퐁을 한 번 밖에 못한 것이 아쉬웠다. 이번주 진행했던 학습/개발 내용은 무엇이었나요?자바스크립트 개념 학습 - 비동기 (콜백함수, promise, async/await), 클로저, this과제 - 숫자 업앤다운 게임 가장 기본적인 동작 구현 가장 고민을 했던 부분은 무엇이었나요?1. 공부 방법지난 주에 코어 자바스크립트만 읽고 공부했더니 개념 이해도가 부족했다고 느껴서 이번에는 m..
한 것코어 자바스크립트 1~2장 (데이터 타입, 실행 컨텍스트 부분) 공부가상 이력서 만들면서 학습 목표 스스로 설정하기 느낀점책 붙들고 대학교 때 시험 준비하듯이 공부 했더니 이해를 확인하는 질문에 대답을 잘하지 못했다. 또, 질문의 의도를 파악하기 어려웠다. 불변성, 불변 객체 부분 공부할 때 개념을 깔끔하게 이해하지 못했는데 얼추 아는 지식이기 때문에 대답을 잘 할 수 있을 거라고 생각했는데 그렇지 않았다. 불변에 대한 개념 정리를 더 확실히 해야겠다고 느꼈다.화, 수, 목, 총 3일 시간을 내서 공부 했는데 화요일에는 주로 금요일 모의면접 때 털리면 어떡하지? 나 못하는 것 보고 멘토님께서 실망하시면 어떡하지 이런 말도 안되는 고민과 생각을 하느라 시간을 보냈다. 화요일에 일일 회고를 하면서 내일..
리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자 React에서 데이터를 fetch하고 로딩중인지 에러가 발생했는지를 판별하고 그에 맞는 UI를 보여주는 작업은 자주 반복되는 일이다. 이번에 회사에서 React 18로 업그레이드 하면서 일부분에 이것을 선언적으로 작성할 수 있게 도와주는 Suspense를 도입했다. 이 글에서는 Suspense가 무엇인지 알아보고 실제로 적용하는 예시를 보여주려고 한다. Suspense란? React에서 제시한 동시성 컨셉과 관련된 것이다. Suspense는 비동기적으로 데이터를 불러오거나 컴포넌트를 dynamic import할 때 발생할 수 있는 지연 시간을 더 효과적으로 관리할 수 있도록 도와준다. Suspense를 활용하면 비동기 로직을 컴포넌트의 상위 ..
SPA란? 참고 개요 WEB API로 제공되는 HashChangeEvent, History를 활용해 브라우저 이동을 감지하거나 조작할 수 있다. HashChangeEvent 페이지 내 특정 위치로 스크롤할 때 사용되는 API이다. URL에 붙은 해시값(#)의 변경을 감지할 수 있다. 예시) function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.addEventListener("hashchange", locationHashChanged); History 브라우저의 세션 히스토리를 조작할 수 있게 해주는 API이다. 글로벌 객체인 history로 접근 가능하다. back, ..
목적 개발 내용을 바로 확인할 수 있는 환경 소스 관리가 쉬운 환경 일관된 코드 스타일을 유지할 수 있는 환경 (extra) 타입스크립트를 사용할 수 있는 환경 폴더를 생성하고 프로젝트를 만들어주자. npm init -y 1. eslint, prettier 설정 eslint와 prettier 세팅을 먼저 해보자 eslint는 일관된 코드 스타일을 가져가기 위해 사용한다. prettier는 eslint와 다르게 indent, tabSize 등을 통일시켜 코드를 보기 좋게 만드는데 도움이 된다. eslint 먼저 eslint 관련 의존성을 설치해보자 npm i -D eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plug..
(2022.05.17) 회사에 들어와서 사용하기 어려웠던 React hook 3개에 대해 내가 이해한 언어로 정리해보려 한다. 3개월 가까이 React-Native를 다루며 hook에 대해 어느정도 안다고 생각했는데 막상 글을 쓰기 위해 자료를 더 찾고 정리를 해보니 아직 잘 모른다는 것을 알게 되었다. 제가 이해한 내용을 정리하고 3개월 정도 뒤에 다시 보면서 빈 구멍을 메울 용도로 작성되었습니다. 오개념이 있을 수 있습니다. 잘못된 내용이 있다면 이야기해주시면 감사하겠습니다. useLayoutEffect와 useEffect 리액트 공식문서에서는 useLayoutEffect를 이렇게 설명한다. useEffect와 기본적으로 하는 역할은 같지만 모든 DOM mutation (변형) 이후 paint하기 전..
(2021.11.22) 유난히 이번 달에 여러 이벤트들이 생겼다. 스스로 생각을 정리하기 위해 글을 쓴다. 🧹 클린코드 자바스크립트 리뷰어, 리뷰이 활동 1️⃣ 참여계기 지금 듣고 있는 국비교육에서는 풀스택을 배우고 있다. html,css,js를 한 주에 걸쳐 간단하게 배우고 react, redux 위주로 프론트엔드 기술을 배우고 프로젝트에서도 해당 기술들을 사용했다. 리액트로 개발을 하면서 내가 자바스크립트 활용 능력이 부족하다고 느끼던 와중 넥스트스텝 메인에 클린코드 자바스크립트 코스가 오픈 예정이라 해 알림신청을 해뒀다. 이 시기에 자바스크립트 관련해서 스터디던 강의던 다 해보려고 했었다. 그러다가 어쩌다보니 해당 코스에 참가하게 되었다! 정말 좋은 기회라는 생각이 들어 일정이 바빴지만 참가를 결정..
기술면접 대비로 운영체제의 메모리 파트를 돌아보며 자주 물어보는 질문에 대한 답을 정리했습니다. Q. 프로세스에 할당되는 메모리의 각 영역을 설명해보세요 코드 - 실행 파일을 구성하는 명령어들이 적재되는 메모리 영역 / 프로그램 소스 코드를 저장한다. 읽기 전용 영역이므로 프로세스가 함부로 변경할 수 없다. 데이터 - 프로그램에 필요한 전역변수, 정적변수를 저장한다. 스택 - 함수 호출에 필요한 스택 프레임과 지역변수를 저장한다. 스택은 각 프로세스가 메모리에 로드될 때 크기가 고정되어 런타임에 스택의 크기를 바꿀 수 없다. (컴파일 타임에 크기가 결정되는 것이다.) 힙 - 프로그래머가 관리하는 공간으로 메모리를 동적으로 할당하고 해제할 수 있다. c언어의 malloc()이나 calloc()에 의해 생성..
(2021.10.27) 엘리스 AI트랙 2기 데이터 분석 프로젝트를 마친 후, 느낀점들을 정리했다. 지워져서 다시 씀 🚀 첫 팀 프로젝트 학부 때는 혼자 혹은 최대 3명까지 함께 과제, 프로젝트를 수행해왔다. 이번엔 총 5명으로 프론트엔드, 백엔드, 데이터분석 파트로 역할을 나눴는데 이렇게 많은 인원과 프로젝트를 한 건 처음이라 설레기도 했고 걱정이 되기도 했다. 기존 알고리즘 스터디를 같이해왔던 두 분, 새로 알고리즘 스터디에 들어오신 분, 그리고 프로젝트를 시작하면서 모집한 한 분. 이렇게 팀원이 구성되었다. 알고리즘 스터디장을 맡고 있었던 내가 팀장을 이어서 맡게 되었다. 주제는 OTT와 배달 두 개가 있었는데 평소에 OTT를 4개나 쓰고 있었어서.. 이들의 차이점이 있다는 것을 알고 있었고 흥미로..
