자바스크립트의 7가지 데이터 타입Number, String, Boolean, undefined, null, Object, Symbol변경 불가능한 원시 타입, 변경 가능한 참조 타입이 있다 원시 타입은 한번 생성하면 값을 바꿀 수 없다 흔히 많이 사용하는 String, Number을 +로 연결하는 것은 새로운 메모리 공간에 변경된 값을 저장하는 것이다 암묵적 형변환자바스크립트 엔진은 표현식을 평가할 때, 코드 문맥에 부합하도록 암묵적으로 타입 변환을 실행한다 암묵적 형변환은 형변환 된 변수값을 재할당하는 것이 아니라 변환된 변수를 평가를 위해 한번 사용하고 버린다즉, 기존 원시값을 사용해 새로운 타입의 원시값을 생성하는 것이다! String1. 템플릿 리터럴 (``)문자열 안에 변수, 표현식을 쉽게 포함..
브라우저 렌더링 과정 (Critical Rendering path)critial rendering path는 브라우저에서 화면이 보여질 때까지의 과정을 말한다브라우저에서 html의 문서를 다운로드 후, 페이지를 렌더링 하기까지의 과정을 살펴보자 크게 4가지 과정으로 이루어진다1. DOM +CSSOM 트리 생성2. Render 트리 생성 3. Layout4. Painting 1. DOM + CSSOM 생성 (브라우저 렌더링 엔진이 파싱)브라우저 렌더링 엔진이 html 문서를 파싱하여, 해석하기 위한 노드 객체로 변환된 객체 트리인 DOM 트리를 생성한다 CSS도 마찬가지로 파싱하여 CSSOM 트리를 생성한다DOM (Document Object Model)CSSOM (CSS Object Model) 2. ..
리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트!이 둘의 차이가 정확히 뭔지 모른채 그게 그거지 했었다 리액트 컴포넌트(React Component)UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록, 즉 함수다리액트 컴포넌트가 반환하는 것이 리액트 엘리먼트이다function MyComponent() { return Hello, World!;} 리액트 엘리먼트(React Element)컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 객체이다 즉, 컴포넌트가 렌더링하는 모든 UI 정보를 가진 객체이다 그리고 React DOM는 엘리먼트들을 모아 Virtual DOM을 만들고, 업데이트 전 Vir..
프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데vite에서는 작동이 안된다 문서에서 시키는 대로 했는데 안됨찾아보니 vite는 설치 방법이 약간 달랐다 1. 공식 문서 방법역시 공식 문서에 있었다installation에는 없고, 검색어로 vite를 입력해야 나온다 기존 tailwind 설치 이외에도 2가지의 패키지를 설치한다npm install -D tailwindcss postcss autoprefixer Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com 2. 기존 방법 + vite.config 수정1번 방법을 찾기 전에 다른 방법을 찾아서 적용했다 이..
1. 오늘 새로운 팀에 적응하는 시간을 가짐한달동안 같이 갈 팀원들이랑 소통하는 시간을 가짐첫 느낌은 좋은 것 같다 ㅎㅎ 2. 리액트 수준별 수업 OT를 들음재밌겠다..!!튜터님 성향 상 확실히 많은 걸 배울 수 있을 것 같다아 조낸 열심히 해야지,,ㅋㅋ 아 근데 쫄려ㅠ아냐 쫄지마쫄리는데 쫄지마(?) 3. 리액트 강의를 들음개념 정리할 겸 쭉 듣고 있다이거 다 듣고 프로젝트 해야지 4. 개인 프로젝트 세팅 완료필수 요구사항, 주관식 질문 등 정리했다vite로 하니까 프로젝트 세팅은 금방했다 (딱히 더 할 것도 없음)yarn create vite todolist --template react
프로젝트 후기1. 얼마만에 순수 바닐라로만 개발을 했는지,,역체감 들었다단순하게 로딩 후 데이터를 가져오는 것도,, 아 useEffect쓰고 싶다! useContext쓰고 싶다 !! ㅋㅋ 2. 나는 항상 초반 계획을 꼼꼼하게 세우지 못해서 프로젝트 중간에 삐걱거림이 발생한다예를 들면 파트 분배가 치우쳐지거나, 컨벤션을 지키지 못하거나 등 불편하다면 불편한 상황들이 발생한다,,(근데 나만 불편해?)다들 자기 파트를 개발하는 것도 벅차하는 것 같아서하드코딩을 제한하고, 더 나은 방법을 요구하자고 말했지만 이게 '내가 상대방의 수준/힘듦을 생각하지 않고 요구하나?" 라는 생각이 들었다결국은 구현하는 방식을 제한하지 않았다 혼자하면 마음가는대로 선택하고, 실패하면 돌아가고하는 게 쉬운데그럼 나만 힘든게 아니니까..