일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 알고리즘
- computerscience
- html/css/js
- DFS
- 국비지원취업
- 자바스크립트
- js
- github
- 호이스팅
- 코테
- CS
- 야놀자
- CSS
- 프론트엔드개발자
- KAKAO
- 부트캠프
- 너비우선탐색
- LinkSnap
- 백준
- nodejs
- 컴퓨터공학
- BFS
- 컴퓨터과학
- Javascript
- 그리디
- 국비지원
- 패스트캠퍼스
- cpu
- git
- 코딩테스트
- Today
- Total
목록FrontEnd (161)
My Boundary As Much As I Experienced
라우팅 Next js에서는 File system을 기반으로 라우팅이 된다. File system은 pages폴더 아래 있어야하며 src/pages/ 와 pages/ 가 있다면 후자가 우선순위. slug 파일 wild card처럼 다양한 값을 받을수 있는데, 하나의 파일로 여러 파일을 대체할 수 있다. 1. [slug] pages / category / [slug].js; // http://www.~~~~.com/category/:slug 와 같음 2. [...slug] 단 한개의 route를 커버하는게 아니라 하위 route를 모두 커버 가능하다. 나중에 useRouter의 query메소드로 가져오면 배열을 반환받을 수 있다. pages / category / [...slug].js; // http://..
요새 넥스트JS에 대해 배우면서 CSR vs SSR vs SSG에 대한 비교해보았다. 그런데 CSR과 SSR은 쉽게 구분이 가지만 SSR과 SSG을 구분하는건 조금 어려웠다. 'SSG는 빌드 시 정적 컨텐츠를 미리 만들어둬서 이 파일들만 단순히 반환하기 때문에 SSR보다 서버호출 비용이 낮으며 성능도 좋다.'라는데... '어쨌든 SSG라도 사용자에게 만들어 둔 정적 컨텐츠를 줘야하는거잖아? SSG로 만들든 SSR로 만들든 똑같은 크기의 사이트를 사용자에게 제공해준다면 크게 성능차이가 있나? 조립해두고 주는 거 vs 요청받고나서 조립하는거의 시간 차이는 있겠지만, 결국 보내는 데이터양의 비용은 똑같지 않나?' 라는 의문점이 들었다. 그런데 SSG의 장점이 잘 발휘되는 시점은 캐싱을 잘 해뒀을 때였다. SS..
들어가며... 회사에서 React Native를 처음 배우기 시작했다. React랑 거의 유사한 개발 경험을 제공한다고 하더니.. 생각보단 다르다! 일단 태그부터 다르다. div라던가 styled-components와 작별을 하게 됐다. (RN환경에서도 styled-component나 emotion을 사용할수는 있다고는 하나 사수님께서 말하길 모바일에서 별로 성능이 좋진 않다고 한다.) 사실 '태그'라고 부르는 것조차 조금 잘못된 느낌이다. React Native 공식문서에 보면 코어 컴포넌트라고 부른다고 한다. 리액트 네이티브에서 스타일링 하는 법 & 코어 컴포넌트의 기본 속성 리액트 네이티브는 css파일을 쓰지 않는다. 웹이 아니기 때문! 기술 면접 때 계속 말하던 DOM 파싱하고 CSSOM 파싱하고..
오늘 알게 됐는데, { [Date.now()]: { text: "" } } 처럼 Date.Now()같이 동적인 값을 객체의 key로 설정하고 싶을 때 대괄호로 묶는다. TypeScript에서 객체의 타입 지정해줄 때 { [key]: value }같은 형식으로 하는게 TypeScript 문법인 줄 알았는데 ES6 문법이었다🫢 사용 사례1. Date.now()처럼 겹칠 수 없는 id값을 동적으로 key값으로 부여할 때 const addToDo = (text: string) => { const item = { [Date.now()]: text }; setToDo({...toDo, item}); } 사용 사례2. 인덱스 같은 부분을 지속적으로 증가시켜 key로 할당할 때 const prefix = 'prop';..
클래스 컴포넌트란?클래스 컴포넌트는 React에서 사용되는 컴포넌트의 한 종류이다.이전에는 주로 클래스 컴포넌트가 주류였지만, 최근에는 함수형 컴포넌트와 훅을 이용한 상태 관리가 더욱 표준적으로 쓰인다. 클래스 컴포넌트는 render() 메서드를 포함하여 여러 생명주기 메서드를 사용할 수 있다는 특징이 있다.(임의로 메서드를 추가하는 것도 가능하다.) 함수형 컴포넌트에서는 hook로 이런 주기를 조작할 수 있으나 그 자유도는 클래스형보다 낮다. 클래스 컴포넌트의 특징- React.Component 클래스를 상속받아서(extends하여) 정의된다.- render() 메소드로 view로직을 처리함- 생명주기 메서드를 사용할 수 있음 라이프 사이클 메서드의 분류라이프사이클 메서드의 종류는 총 9가지이지만 크게..
들어가기 전 토막 상식 보통 클래스 안의 정보들은 프로퍼티가 아니라 필드라고 한다. 계속 프로퍼티라 부르고 있었는데 클래스 문법 복습하면서 다시 알게 되었다. _가 붙는 필드는 무엇인가? class Counter { constructor() { this._count = 0; // _count는 내부적으로 사용되는 프로퍼티 } increment() { this._count++; } getCount() { return this._count; } } const counter = new Counter(); counter.increment(); console.log(counter.getCount()); // 외부에서는 getCount를 통해서만 _count에 접근할 수 있음 JavaScript 클래스 문법에서 _..
*본 내용은 모던 자바스크립트 딥다이브의 class부분을 요약정리한 내용입니다. * (*텍스트)는 제가 주석을 단 부분입니다. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var person = (function(){ // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person...
프록시(Proxy)란? 클라이언트와 서버 사이에서 데이터를 전달해 주는 서버. 웹 캐시 기능이 있는 경우가 많으며, 방식에 따라 프론트의 IP주소를 숨기거나(포워드 프록시), 서버의 IP주소를 숨기거나(리버스 프록시) 할 수 있다고 한다. 공부하게 된 계기 이번 기술면접에서 CORS에러가 날 때 어떻게 해결할거냐는 질문을 받았다. 예전에 '빨리 잡아'라는 숙박 어플 만들 때 나를 고생시켰던 CORS에러.. 그 당시 백엔드 개발자가 프론트 origin을 whitelist에 추가하면서 해결했던 경험이 기억이 났다. '이를 해결하려면 클라이언트와 서버가 기본적으로 동일한 오리진이거나 아니면 허용된 오리진을 설정해야됩니다. 그러니 서버개발자에게 화이트리스트에 프론트엔드 오리진을 추가해달라고 요청할 것입니다.' ..
자바스크립트의 Set 자료구조는 한 마디로 '중복을 허용하지 않는 배열'이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일 값 중복 가능하다. 불가능하다. 요소 순서에 의미가 있다. (index) 있다. 없다. 인덱스로 요소에 접근 가능하다. 가능하다. 불가능하다. 아래는 Set 객체의 기본적인 사용법(생성, 추가, 삭제, 특정 인자 존재 여부 체크, 사이즈 체크 방법)들이다. Set 객체의 생성 아래와 같이 생성자의 인자로 아무 것도 넘기지 않으면 빈 세트가 만들어진다. const set = new Set(); // Set(0) {size: 0} 또한 아래와 같이 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어진다. const numSet = new S..
MSW란?Mock Service Worker의 준말이다.이때 Service Worker는 앱의 백그라운드에서 실행되는 브라우저가 제공하는 기능이다.브라우저와 앱의 중간에서 이벤트를 listening하고 있는 존재라고 보면 된다.(PWA나 Firebase Cloud Message같은 기능들을 구현해보려고 했던 개발자들은 사용해본 경험이 있을 것이다.) Mock이란 단어에서 알 수 있듯이, MSW는 브라우저의 백그라운드에서 비동기 api통신 호출을 가로채서 가짜 응답을 해주는 Proxy의 역할을 한다. 왜 필요한가? 백엔드에서 API를 아직 주지 않았을 때, api 명세서대로 객체를 생성하여일단 호출 받았다 치고 화면 구현해본 경험이 다들 있을 것이다.그러나 이런 방식으로 모사하는건 마크업을 확인하는 용도로..