🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크 🔥🔥Q.자바스크립트의 특징은 무엇인가요? (싱글 스레드), 싱글 스레드와 멀티 스레스의 장단점은 무엇인가요? 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다. 또한, 자바스크립트 엔진은 기본적으로 하나의 쓰레드에서 동작합니다. 하나의 쓰레드(= 싱글 stack)에서 동작한다는 의미는 동시에 하나의 작업만 할 수 있다는 것을 의미합니다. 싱글 스레드의 장점은 스레드 간의 자원 공유가 없기 때문에 그에 대한 동기화에 대해 신경쓰지 않아도 되는 점과 스레드 간의 context switching이 일어나지 않으므로 오버헤드를 방지할 수 있다는 점입니다. 단점은 여러개의 cpu를 활용할 수 없습니다. 멀티스레드의 장점은 프로세스의 자원과 상태..
React.memo는 함수형 컴포넌트를 최적화할 수 있다. (클래스형에는 적용되지 않음) 사용방법은 아래와 같이 해당 컴포넌트를 react.memo로 wrap해주면 된다. import React from 'react'; import MyParagraph from "./MyParagraph'; const DemoOutput = (props) => { console.log('demooutput Running'); return {props.show ? "this is new!" : ""} }; export default React.memo(DemoOutput); //리액트 메모를 원하는 해당 컴포넌트에 wrap한다. 😎memo의 역할은 무엇인가요? React.memo는 인자로 들어간 컴포넌트에 어떤 props..

전반적으로 필요한 상태가 아니라 해당 컴포넌트에만 필요한 상태관리는 리덕스가 아니라 useState를 사용하는 것이 맞다. 기본 리덕스 용어 state (상태) - 앱을 구동하는 소스, 특정 시점의 앱 상태를 나타냄 view - 현재 상태를 기반으로 화면에 보이는 UI, 해당 상태를 기반으로 렌더링됨-> UI는 새 상태를 기반으로 다시 렌더링된다. action - 사용자 입력을 기반으로 앱에서 발생하는 이벤트 및 상태에서 업데이트를 발생시킨다. -> 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소가 있는 경우, 특히 해당 구성 요소가 app의 다른 부분에 있는 경우 단순성이 무너질 수 있다. JS의 객체와 배열은 기본적으로 모두 변경 가능하다.(mutable) 하지만 리덕스의 리듀서(reducer)..
CRA 없이 리액트 프로젝트 세팅하기 terminal( 저는 bash 임 ) 에서 현재 경로에 폴더 만드는 명령어 : mkdir mkdir myfolder 폴더가 생성됐으면 해당 경로로 이동하는 명령어: cd 파일 혹은 폴더명 -> 여기서 폴더명을 전부 쓸 필요없이 앞쪽만 쓰고 Tap 키를 누르면 아래와 같이 매칭되는 폴더명이 자동완성된다. cd myfolder/ myfolder 내부에 폴더 2개(src, public)를 동시에 만드는 커맨드 mkdir -p src public 리액트 프로젝트를 만들어줬으니 초기화해준다. 초기화 명령어 yarn init -y -> 이렇게 해주면 package.json 파일이 생기는데 우리가 CRA를 통해서 리액트 프로젝트를 만들고 yarn start 커맨드를 통해 프로젝..
🍕 Build your own, custom HTML Elements 리액트 프로젝트 src폴더의 Index.js는 처음으로 실행되는 파일이다. : 여기서 react-dom에서 ReactDom을 임포트하고 있다. 이 말은 react-dom이라는 서드 파티 라이브러리에서 ReactDom이라는 객체를 임포트한다는 뜻 public 폴더의 index.html 이 유일하게 브라우저에 표시되는 화면이다. 리액트가 SPA이기 때문에 그 유일한 하나의 html이 바로 이 친구다. 그러면 컴포넌트(Component)가 뭐야? 리액트 컴포넌트는 결국 자바스크립트 함수(Function)이다!! 컴포넌트는 JSX로 쓰여진 html코드를 반환하는 함수이다. 또한, HTML,JS,CSS의 조합이다. import "./App.cs..
nvm 은 node version manager의 축약어로 말 그대로 노드의 버전을 관리해주는 도구입니다. node.js를 설치하기 이전에 nvm을 깔아야하기 때문에 기존에 있던 node.js를 삭제해주고 nvm을 깔아주었습니다. nvm을 설치하기위해서 cmd로 들어가 설치하기 위한 명령어를 입력하는데 제 컴퓨터의 user경로가 C:\Users\한글이름> 로 돼있어서 나중에 저 한글이름이 cmd창에서 제대로 출력되지않고 깨지더군요. 또한, nvm를 설치할 때 한글을 인식하지 못해서(PC명에 특수문자나 공백) 또는 권한 문제라는 판단이 들었습니다. 그래서 관리자 권한으로 cmd를 열어 nvm을 설치해주고 nvm의 설치경로 역시 C드라이브 아래에 폴더를 새로 생성하여 바로 아래에 넣어주었더니 해결되었습니다...
JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 8가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. -> 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 타입 언어'라고 부른다. 데이터 타입 (primitive type, object type) JS 언어의 타입은 크게 원시 값과 객체로 나뉜다. *원시 값- 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다. Primitive types : 문자열이든 숫자든 한 가지만 표현할 ..

🍕HTML recap HTML(Hypertext Markup Language)은 마크업 언어이다. 마크업? 마크업은 말 그대로 표시하는 것이다. 웹 페이지에는 그림도 있고, 글도 있고 표도 있고, 여러가지 요소가 있다. "여기는 글자 영역이고 여기는 이미지 영역이다!" 라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는 것이 HTML 이다. 안녕 -> 등은 엄밀히 말하면 tag가 아닙니다. 우리는 이것들을 요소(element)라고 부른다. tag는 요소를 만들 때 사용하는 이 꺽쇠 기호를 뜻합니다. 🐱👤DOM(문서객체모델)? -DOM은 html 단위 하나하나를 '객체로 생각'하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위 어떤 값을 가지고 있을 겁니다...
- Total
- Today
- Yesterday
- float 레이아웃
- text input pattern
- && 셸 명령어
- 프리온보딩 프론트엔드 챌린지 3월
- aspect-ratio
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- tilde caret
- grid flex
- 항해99프론트후기
- fs모듈 넥스트
- 타입스크립트 DT
- 항해99추천비추천
- 원티드 프리온보딩 FE 챌린지
- 틸드와 캐럿
- 부트캠프항해
- 형제 요소 선택자
- ~ ^
- is()
- nvm 설치순서
- getStaticPaths
- reactAPI
- 항해99프론트
- 원티드 3월 프론트엔드 챌린지
- getServerSideProps
- 프리렌더링확인법
- D 플래그
- Prittier
- nvm경로 오류
- 타입스크립트 장점
- 원티드 FE 프리온보딩 챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |