Headwing

Hoisting JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN - 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되는 것이다. 자바스크립트 엔진은 런타임 이전에 소스코드의 평가 과정을 거치면서 소스코드를 실행할 준비를 하는데, 이때 자바스크립트 엔진은 변수 및 함수 선언..

1. DOM, CSSOM생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다 → 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. (html이 여기서 파싱된다) DOM Tree와 CSSOM Tree가 만들어진다. 2. Render Tree생성: DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. 3. Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스..

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. 즉 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. CRUD Operation이란 CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 REST에서의 CRUD Operation 동작 예시는 다..

이번주차는 캘린더 페이지의 기술적인 부분을 완료하고, 지금껏 미뤄온 css작업을 완성하는데 심혈을 기울였다. 그 과정에서 input창이나 모달창 그리고 커뮤니티 디자인이 대폭 수정되었다. 메인페이지는 위와 같이 수정되었다. 사실상 거의 90% 이상 완성되었다고 해도 무방하다. 메인의 상단에 있는 월급날 D-day는 근무지가 두 개 이상인 경우 슬라이더로 넘겨서 볼 수 있도록 하였다. 근무지 추가를 통해 근무지 카드를 만들고 근무지 카드의 오른쪽 상단의 점3개 버튼을 눌러 수정 및 삭제 드롭다운이 나타나면 수정을 할 수 있는 수정페이지로 넘어가거나 근무지를 삭제할 수 있도록 하였다. 수정 부분에서 근무지 이름이나 월급일처럼 현재 카드의 색상 역시 어떤 색상인지 알 수 있도록 하는 부분을 추가하면 좋을 것 ..

이번주는 그래도 저번주였던 실전 1주차에 비해 새로운 기술에 대해 적응한 것을 바탕으로 많은 것을 이뤄냈던 주차였다. 타입스크립트와 리액트 쿼리 사용에 보다 능숙해진 상태에서 진행을 하니 생각보다 빠르게 진도를 나갈 수 있었다. 1주차에 했었던 검색기능을 보완하였고, 메인 기능 중 하나인 달력 일정 관리 기능을 80% 이상 완성할 수 있었다. 달력 기능의 경우 여러가지로 복잡한 로직들이 있어서 본격적으로 기능구현을 시작하기 전에 백엔드 사람들과 디자이너님이 알기 쉽게 나름대로 플로우 차트를 만들어보았다. Figma Created with FigJam www.figma.com 1. 달력 - 일정 관리 기능 - 달력 틀 만들기 가장 먼저 달력 자체를 어떻게 만들어야 할지를 몰라 구글링을 많이 했었다. 여러가..

1주일 늦게 쓰는 12월 5주차 WIL이다ㅎㅎㅎ 변명이지만 12월 4주차부터 5주차까지 정말 눈코뜰새 없이 코딩만 했다. 일주일중 딱 하루 쉬는 일요일은 또 휴식을 취하느라 바빴다. 그래서 1월이 되고 1주일이 더 지나서 쓰는 WIL이다. 항해 7주차에 해당하는 클론 코딩을 진행하였고, 우리조는 인스타그램을 클론 해보기로 하였다. 항상 스마트폰으로 써서 몰랐던 인스타그램의 UI들을 많이 알게 되었다. 특히나 모달창이 매우 많다는 것이다. 모달창이 한두개가 아니라 너무 많아서 portal이 아닌 그냥 컴포넌트로 모달창을 만들다 보니 어려운 점이 많았다. 그치만 또 나름대로 성공적으로 잘 완료하였다. 아래는 우리조의 최종적인 구현을 담은 유튜브 영상이다. 최대한 UI를 똑같이 구현하려고 노력하였다. 1. 모..

이번주에는 실전프로젝트를 본격적으로 시작하였다. 시작하고 나서 호기롭게 우리조는 지금까지 해왔던 리덕스를 쓰지말고 리액트 쿼리를써보자고 결정하였고, 또한 타입스크립트를 배워서 사용하기로 하였다. 문제는 지금까지 리액트 쿼리와 타입스크립트를 한번도 쓴 적도 배운 적도 없다는 것이었다! 그래서 지난 주 주말까지 계속 헤맴의 연속이었다가 이번주에 오면서 다소 적응이 되면서 다행히 1주차 스코프를 완벽하진 않지만 대략적으로 완성할 수 있었다. 그런데 디자이너와 협업하면서 아직 와이어프레임 조차 다 완성되지 않아서 css 작업은 전혀 되지 않았다. 디자인이 확정되지 않았으므로 확정되고 나서 한번에 몰아서 하는 게 나을 것 같다. 1. 로그인 / 회원가입 기능 : react-hook-form, 카카오 소셜 로그인 ..

내가 짜야하는 게시판 구조는 들어가자마자 보이는 전체 게시판 /board 자유게시판 /board/free 알바고민 게시판 /board/partTime 대타 구해요 게시판 /board/cover 이었다. 여기서 들어가자마자 보이는 전체게시판에서 select의 option을 변경하여 다른 게시판으로 페이지가 넘어가는 것이다. 이 부분은 nested router와 Outlet을 사용하여 처리해주었다. 또한 전체게시판 페이지에서 const boardMatch = useMatch("/board”);를 사용하여 boardMatch가 null이면 전체게시판이 아니라는 것이므로 null이 나오도록하고 boardMatch가 null이 아닐 시 전체게시판이므로 전체게시물에 해당하는 게시물 카드들이 나오도록 하였다. + 리..