Learnd in Camp

어떤 UI도 그릴 수 있는 CSS 지식자바스크립트 능력 및 알고리즘 풀이 능력리액트, 그래프ql 등 최신 기술 스택 활용 능력포트폴리오100% 프론트엔드 개발 지식 + 20% 백엔드 지식프론트엔드 HTML CSS JS Typescript라이브러리 : React.js,

https://velog.io/@creyon0215/2023.-3.-13-TIL3월 13일 기본적으로 공부했던 내용에 더해JSX는 JavaScript XML의 약자로, React에서 사용되는 문법. JSX는 React 컴포넌트에서 UI를 작성할 때 사용되며,

https://velog.io/@creyon0215/2023.-3.-14-TIL 위 링크의 import, export 내용에 더해

Git은 분산형 버전 관리 시스템(VCS, Version Control System) 프로젝트의 코드 변경 이력을 추적하고 조정하기 위해 사용 파일이나 폴더의 변경 내역을 추적하고 저장소(Repository)에 저장할 수 있다. 이를 통해 여러 개발자가 동시에 작업할

프로그램 실행 중, 예기치 않은 상황에서 발생하는 오류예외 발생시, 프로그램이 종료되거나 예상치 못한 결과를 출력할 수 있음.\-> 이를 방지하기 위해 예외 처리가 필요예외 처리에 쓰이는 문법예외가 발생하지 않았을 시, catch 뒤의 코드는 실행되지 않는다.catch

Template Literal 은 ES6(ES2015) 에서 새롭게 추가된 문자열 표기법 이다.기존의 문자열 표기법 : 작은 따옴표(') 나 큰 따옴표(") 사용해 문자열 표기Template Literal : 백틱을 사용해 문자열 표현(\`).멀티 라인 문자열 지원기존

Async, Await

== vs === , null vs undefined, let&const&var

1\. ES62\. Differences between JavaScript and NodeES6(ECMAScript 2015) : JavaScript언어의 6번째 버전, 2015년에 발표됨.다양한 기능 추가 & 개선된 문법let, const 키워드 추가화살표 함수 사용

스코프전역 스코프지역 스코프호이스팅Scope는 프로그래밍에서 변수와 함수의 접근가능한 범위를 나타낸다. 간단히 말하면 스코프는 변수나 함수가 어디서부터 어디까지 유효한지를 결정한다.변수의 스코프는 해당 변수가 선언된 위치에서부터 그 변수가 포함된 블록({})내부이며,

HTTP Status Code: 간단히 설명하면 client 의 요청에 대한 응답의 결과(서버)를 세 자리의 번호로 나타내는 것이다.100번대 코드 : 정상 수신, 작업 지속해 100 : continue ; 문제없이 진행 중. 클라이언트가 요청 계속하거나 완료한 경우

라우터 객체와 라우팅 라우터 객체 : 페이지 이동과 관련된 기능을 가지고 있는 객체 A 페이지 -> B 페이지 : "B페이지로 라우팅한다" const router = useRouter() router.push("이동할 페이지") 자주 사용하는 라우터 객체 기능

js에서는 위에서부터 차례대로 실행 => 데이터 요청 & 응답 받을 동안 화면에 그려질 데이터의 내용 : undefined -> 첫 화면이 그려지는 시기에 데이터 불러오면서 에러 발생 -> 화면을 미리 그려놓고 데이터를 그려주기 위해 조건부렌더링조건부렌더링의 종류삼항

props 컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어진다. 이를 연결하는것이 바로 props(부모 컴포넌트가 자식 컴포넌트에 물려주는 변수/함수) 함수를 공유하는 방법!!!// 자식이 부모에게 넘길 수는 없다.(단방향 관계) 부모 컴포넌트가 props

Destructuring Assignment ? 구조분해 할당은 무엇일까? 가장 기본적인 개념을 살펴보면 자바스크립트의 문법으로 배열혹은 객체 에서 value & property를 각각 분해해 별도의 변수에 담을 수 있도록 하는 것이다. 배열에서 구조 분해 할당의

Filter ?map?every?filter는 array에 적용할 수 있는 메서드로 array의 elements 를 이름처럼 filtering하는 기능을 담고 있다. 개념은 배열의 모든 요소를 순회하면서 주어진 함수로 각 요소를 판별해 true를 반환하는 요소만으로 새

웹 애플리케이션에서 페이지 간의 전환을 가능하게 하는 라이브러리 보통, 웹 사이트나 애플리케이션에서 주소창에 입력한 URL 경로에 따라 해당하는 페이지를 렌더링한다. React에서는 React ROuter를 사용하면 React컴포넌트 기반으로 라우팅을 정의하고, URL

Intro : JavaScript V8 engine?JIT compilerComponentsRuntime System상호 운용성Outrov8엔진은 구글에서 개발한 오픈 소스 자바스크립트 엔진으로 C++로 작성되어 주로 구글 크롬, node.js에서 사용된다. V8은 자

react데이터의 흐름은 상위에서 하위로 전달하는 하향식, 단방향 데이터 흐름이다.장점은 기능 변경 사항에 대한 코드 수정이 적어지고 복잡하지 않아 코드의 흐름을 알기 쉽다. 그러나 단점 또한 존재한다.단방향 데이터 흐름의 경우, 위의 구조에서 자식1의 state를 자

객체&배열 복사(객체 복사, 스프레드 연산자, 깊은 복사, lodash, 배열 복사)복사? 얕은 복사(Shallow Copy) & 깊은 복사(Deep Copy)복사의 기본 개념복사본의 값 변경, 재할당원본aaa 변하지 않고 복사본인 bbb의 값만 변함 객체의 복사복사

\-INTRO\-PAGINATION?\-INFINITE-SCROLL?\-Commonalities&Differences Between PAGI&INFIN Pagination과 infinite Scroll은 모두 웹 페이지에서 컨텐츠를 보여주는 방식이다.페이지 처리 방법의

CLASS(.bind(this))Class 컴포넌트의 생명 주기(life cycle)함수형 컴포넌트의 life CycleuseEffect(componentDidMount, componentDidUpdate, componentWillUnmount), useEffect

개념 : 데이터를 담아두는 저장소담아두는 방식 : SQL, NoSQLaxios나 apollo-client처럼 백엔드에도 데이터베이스와 통신을 돕는 툴이 있고 이 툴은 담아두는 방식(SQL, NoSQL) 에 따라 달라짐 -> 툴 역시 ORM(object document

this와 binding의 개념은 class component를 사용할 때 등장한다. 함수를 만들어 바인딩시켜준다는 개념이야 함수형 컴포넌트를 사용할 때도 onClick함수를 만들어 해당하는 버튼에 바인딩 시켜주는 등 자주 등장하지만 this는 class compone

검색과 디바운싱 & 쓰로틀링

useRef

Shallow Routing

Object.keys() 메소드는 객체의 속성 이름을 배열로 반환하며 객체의 속성 중에서 열거 가능한(enumerable) 속성만 반환한다.이런 객체에서 속성 이름을 배열로 반환하려면 Object.keys() 메소드를 사용한다.Object.values() 메소드는 객체

정규 표현식(Regular Expression)은 문자열을 처리하기 위한 특별한 표현 방법이다. 특정한 규칙을 가진 문자열 패턴을 찾거나 바꾸기 위해 사용된다. 정규 표현식은 문자열의 패턴을 일반화시켜 표현하는 방법으로, 문자열의 검색, 추출, 대체, 분리 등의 작업을

state(변수) : 새로고침 시 초기화 로컬 스토리지는 HTML5부터 추가된 브라우저 저장소 기능으로, 사용자의 로컬 컴퓨터에 데이터를 저장한다. 로컬 스토리지에 저장된 데이터는 브라우저가 닫혀도 계속해서 유지된다. 로컬 스토리지는 쿠키와 세션보다 더 많은 데이터를

ContextAPI, Redux, MobX, SWR는 상태 관리 라이브러리 혹은 패턴으로 React 프레임워크에서 사용되는 대표적인 상태 관리 방법이다.(State)Context API는 React에서 기본적으로 제공하는 상태 관리 방법 중 하나이다. Context A

권한분기(스택, 큐, 스코프 체인, 클로저, 호이스팅)함수를 리턴하는 함수 HOFHOC(Higher Order Component)&withAuth로그인 인증 이후에는 이에 따른 권한 분기가 이루어지는데 작게는 로그인을 한 사람과 하지 않은 사람부터 로그인에 등급을 매기

React에서의 커링(Currying)은 함수형 프로그래밍 기법 중 하나로, 여러 개의 인자를 가지는 함수를 더 작은 단위의 함수로 분리하여, 인자를 하나씩 적용해 나가면서 원래 함수의 결과를 얻는 기법이다.커링을 사용하면, 인자를 더 적게 받는 함수를 만들어내는 것이

재귀 함수, 콜백

flatten, unflatten의 개념flatten, unflatten의 예시 JSX, TSX가 아닌 곳(파이톤 등)에서 flatten, unflatten은 다차원 배열의 차원을 조작하는 방법 중 하나이다. Flatten은 다차원 배열을 1차원 배열로 바꾸는 작업이며

TokenXSSCSRF참고 https://velog.io/@creyon0215/2023.-4.-19React는 웹 애플리케이션의 구축을 위한 자바스크립트 라이브러리로 보안 문제(특히 로그인-액세스 토큰부터)를 충분히 고려해야 한다. 보안 문제의 해결책은 다양하

any vs unknownany : 어떠한 타입이 입력되어도 전부 허용하는 타입, 요소에 any를 부여하면 사실상 타입스크립트가 아닌 자바스크립트를 사용하는 것이나 마찬가지unknown: 개발자에게 주의를 주는 용도, 연산에 오류가 발생할 수 있음을 경고타입 정리1)

위는 3분짜리 타이머코드 순서대로 라면 함수의 끝 부분의 ‘끝’ 콘솔보다 setTimeout 안에 있는 콘솔이 먼저 실행되어야 할 것 같은데, 순서가 뒤집혀 있다.검증을 위해 setTimeout을 0초로 바꾸어 다시 한 번 실행해 보자. 콘솔이 찍히는 순서에는

Observable

Performance Optimization

reduce()

Domain, DNS, Hosting

SPA vs MPA

SEO SSR SSG CSR

HTTP vs HTTPS, Secure

도커의 개념

미디어쿼리, 반응형 웹, 반응형 디자인

after Git-flow) Trunk Based Development, CD, CI