본문 바로가기 메뉴 바로가기

공부 기록일지📚

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

공부 기록일지📚

검색하기 폼
  • 분류 전체보기 (387)
    • Frontend (278)
      • CSS, HTML (50)
      • CSS 프레임워크 (5)
      • JavaScript (114)
      • TypeScript (22)
      • react.js (49)
      • Next.js (9)
      • jQuery (8)
      • WIL😎 (20)
    • 코딩테스트 (27)
      • 알고리즘 & 자료구조 개념 (18)
      • 연습문제 (9)
    • 프로그래밍 (77)
      • Node.js (6)
      • Python (3)
      • 유용한 사이트 | 정보 (16)
      • Git, Github (24)
      • 정리하지 못한 내용 (3)
      • CS 지식 (25)
    • private (1)
      • interest (0)
      • 자격증 (1)
  • 방명록

Frontend (278)
[FE면접] 질문 모음 01

🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크 🔥🔥Q.자바스크립트의 특징은 무엇인가요? (싱글 스레드), 싱글 스레드와 멀티 스레스의 장단점은 무엇인가요? 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다. 또한, 자바스크립트 엔진은 기본적으로 하나의 쓰레드에서 동작합니다. 하나의 쓰레드(= 싱글 stack)에서 동작한다는 의미는 동시에 하나의 작업만 할 수 있다는 것을 의미합니다. 싱글 스레드의 장점은 스레드 간의 자원 공유가 없기 때문에 그에 대한 동기화에 대해 신경쓰지 않아도 되는 점과 스레드 간의 context switching이 일어나지 않으므로 오버헤드를 방지할 수 있다는 점입니다. 단점은 여러개의 cpu를 활용할 수 없습니다. 멀티스레드의 장점은 프로세스의 자원과 상태..

Frontend/WIL😎 2022. 8. 16. 03:22
[React | hooks] react.memo()로 불필요한 재평가 방지하기

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..

Frontend/react.js 2022. 7. 12. 20:15
[Redux toolkit] #1 리덕스 툴킷 정리

전반적으로 필요한 상태가 아니라 해당 컴포넌트에만 필요한 상태관리는 리덕스가 아니라 useState를 사용하는 것이 맞다. 기본 리덕스 용어 state (상태) - 앱을 구동하는 소스, 특정 시점의 앱 상태를 나타냄 view - 현재 상태를 기반으로 화면에 보이는 UI, 해당 상태를 기반으로 렌더링됨-> UI는 새 상태를 기반으로 다시 렌더링된다. action - 사용자 입력을 기반으로 앱에서 발생하는 이벤트 및 상태에서 업데이트를 발생시킨다. -> 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소가 있는 경우, 특히 해당 구성 요소가 app의 다른 부분에 있는 경우 단순성이 무너질 수 있다. JS의 객체와 배열은 기본적으로 모두 변경 가능하다.(mutable) 하지만 리덕스의 리듀서(reducer)..

Frontend/react.js 2022. 6. 30. 21:44
[TIL] 20220604 리액트 프로젝트 세팅(CRA 사용 x), 가상 DOM

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 커맨드를 통해 프로젝..

Frontend/WIL😎 2022. 6. 4. 16:51
[React JS] 리액트 state관리 방법

🍕 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..

Frontend/react.js 2022. 5. 26. 02:31
[nvm] 윈도우에서 nvm 설치시 cmd 오류 해결

nvm 은 node version manager의 축약어로 말 그대로 노드의 버전을 관리해주는 도구입니다. node.js를 설치하기 이전에 nvm을 깔아야하기 때문에 기존에 있던 node.js를 삭제해주고 nvm을 깔아주었습니다. nvm을 설치하기위해서 cmd로 들어가 설치하기 위한 명령어를 입력하는데 제 컴퓨터의 user경로가 C:\Users\한글이름> 로 돼있어서 나중에 저 한글이름이 cmd창에서 제대로 출력되지않고 깨지더군요. 또한, nvm를 설치할 때 한글을 인식하지 못해서(PC명에 특수문자나 공백) 또는 권한 문제라는 판단이 들었습니다. 그래서 관리자 권한으로 cmd를 열어 nvm을 설치해주고 nvm의 설치경로 역시 C드라이브 아래에 폴더를 새로 생성하여 바로 아래에 넣어주었더니 해결되었습니다...

Frontend/WIL😎 2022. 5. 21. 01:17
[JavaScript] JS언어의 특성 총정리

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 8가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. -> 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 타입 언어'라고 부른다. 데이터 타입 (primitive type, object type) JS 언어의 타입은 크게 원시 값과 객체로 나뉜다. *원시 값- 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다. Primitive types : 문자열이든 숫자든 한 가지만 표현할 ..

Frontend/JavaScript 2022. 5. 20. 17:24
[HTML , CSS] 개념 recap

🍕HTML recap HTML(Hypertext Markup Language)은 마크업 언어이다. 마크업? 마크업은 말 그대로 표시하는 것이다. 웹 페이지에는 그림도 있고, 글도 있고 표도 있고, 여러가지 요소가 있다. "여기는 글자 영역이고 여기는 이미지 영역이다!" 라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는 것이 HTML 이다. 안녕 -> 등은 엄밀히 말하면 tag가 아닙니다. 우리는 이것들을 요소(element)라고 부른다. tag는 요소를 만들 때 사용하는 이 꺽쇠 기호를 뜻합니다. 🐱‍👤DOM(문서객체모델)? -DOM은 html 단위 하나하나를 '객체로 생각'하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위 어떤 값을 가지고 있을 겁니다...

Frontend/CSS, HTML 2022. 5. 20. 17:21
이전 1 ··· 13 14 15 16 17 18 19 ··· 35 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • 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 프리온보딩 챌린지
more
«   2025/07   »
일 월 화 수 목 금 토
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
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바