- 전체보기(97)
- JavaScript(16)
- React(15)
- CSS(4)
- next.js(3)
- nextjs(3)
- 스택(2)
- memoization(2)
- vite(2)
- Token(2)
- docker(2)
- CSR(2)
- SSR(2)
- 큐(2)
- routing(1)
- function(1)
- ci(1)
- Immutable(1)
- undefined(1)
- prevProps(1)
- fp(1)
- 웹브라우징(1)
- virtual DOM(1)
- destructuring assignment(1)
- regular expression(1)
- hooks(1)
- letter-spacing ,word-spacing(1)
- sql(1)
- blog(1)
- swr(1)
- 자료구조(1)
- text align(1)
- OOP(1)
- apollo(1)
- http(1)
- DNS(1)
- process(1)
- SPA Router(1)
- mutable(1)
- assign(1)
- Javascript & Typescript(1)
- recursion(1)
- DeepCopy(1)
- export/import(1)
- lazyload(1)
- cascading(1)
- MPA(1)
- router(1)
- useRouter(1)
- Shallow Routing(1)
- preload(1)
- hosting(1)
- csrf(1)
- throttle(1)
- debounce(1)
- HistoryAPI(1)
- null(1)
- text overflow(1)
- sessionStorage(1)
- useEffect(1)
- event loop(1)
- shallowcopy(1)
- 덱(1)
- node.js(1)
- pagination(1)
- domain(1)
- JAVASCRIPTS(1)
- PromiseAll(1)
- conditional rendering(1)
- Stateprev(1)
- observable(1)
- Generic(1)
- hoisting(1)
- inheritance(1)
- CssBox(1)
- template literals(1)
- XSS(1)
- https(1)
- 원시형과참조형(1)
- JWT(1)
- const(1)
- let(1)
- var(1)
- font family(1)
- HOCHOF(1)
- OptimisticUi(1)
- Container and Presentation(1)
- before(1)
- font-size(1)
- async/await(1)
- 연결리스트(1)
- React.state(1)
- entries(1)
- ClosureFunction(1)
- values(1)
- filter&map&every(1)
- cd(1)
- useRef(1)
- this(1)
- 마크업(1)
- Class Component Functional Component(1)
- html(1)
- localstorage(1)
- yarn start(1)
- binding(1)
- responsive design(1)
- after(1)
- CSS font(1)
- css selector(1)
- infinite scroll(1)
- currying(1)
- Markdown(1)
- tryCatch(1)
- spa(1)
- nosql(1)
- Java(1)
- cookie(1)
- state&Lifecycle(1)
- slice(1)
- ssg(1)
- rendering(1)
- object.keys(1)
- State Lifting(1)
- Browsers(1)
- String.prototype.slice()(1)
- flatten(1)
- 권한분기(1)
- datastructure(1)
- ES6(1)
- mobx(1)
- redux(1)
- unflateen(1)
- reactjs(1)
- contextAPI(1)
- scope(1)
- git(1)
- typescript(1)
- React.props(1)
Next.js로 마크다운 블로그 만들기
원티드 온보딩 수업중 과제가 주어졌다. Next.js로 마크다운으로 작성한 블로그를 정적 페이지(SSG)로 작성해주세요.사실 나는 이미 나만의 블로그를 만들기 위해 따로 Next.js + Nest.js 로 구성된 웹블로그를 만들고 있는 와중에 내가 전혀 경험해보지 못한
Vite React useRouter Hook 만들기
History API 를 이용한 Router 구현하기 \[클릭]이전에는 History API 를 통해서 SPA Router 를 구현해 봤다. window.history.pushState() 함수를 사용하여 새로운 브라우저 히스토리 항목을 추가하고, 이를 통해 URL을
React와 History API 사용하여 SPA Router 구현하기
이번에 Vite를 이용하여 React + Typescript 프로젝트를 처음 생성해 봤다.yarn create vite 프로젝트 명 --template react-tsnpm create vite@latest 프로젝트 명 --template react-ts이번 원티드 7
Next.js CSR ,SPA , SSR , Next.js 프로젝트에서 yarn start 에 대해
1\. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.2\. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
Java 와 Javascript
나는 웹 프론트엔드 개발자로서 공부를 꾸준하게 하고있지만 어느덧 Javascript 는 Java 에서 부터 파생되어 나온 언어인가? 뭐지? 하면서 의문점이 들었다.JavascriptJavascript 는 웹 개발 분야에서 사용되는 프로그래밍 언어로, 웹 페이지에서 동적
스택 / 큐 개념에 공부한걸 적어두자!
스택 스택- 개념 데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(abstract Data Type) 혹은 추상 자료형이라고합니다. 데이터를 집어넣을 수 있는 선형(linear) 자료형입니다. 나중에 집어넣은 데이터가 먼저 나옵니다
자바스크립트 Javascript 문자열 자르기
자바스크립트 를 공부하며 간단한 알고리즘을 풀면서 이런 유형에는 이러한 메서드를 알고있으면 편리하겠다는 생각에 벨로그에 간단하게 정리를 하고싶어졌다.Javascript 문자열 자르기 간혹 자바스크립트 를 공부하면서 간단한 예제를 보고 실습하는 단계에서 바로 적용단계 까
연결리스트 를 공부하며 개념정리해보기
연결리스트 연결리스트 이전에 배열의 장점과 단점에 대해서 먼저 알아두면 좋다! 배열의 장점: 읽기, 쓰기와 같은 참조에서는 0(1) 의 성능을 가진다. 배열의 단점: 크기 예측이 힘들기 때문에 메모리 낭비가 발생할수도 있다. 데이터 삽입,삭제가 비효율적이다. 배열의
Docker 를 알면 우리가 편하다?
Docker 를 사용해서 배포하는 이유 우리가 서버를 돌리기 위해서는 먼저 환경이 갖춰져야 합니다. 새로 컴퓨터를 샀다거나 또는 새로 일하는 환경이라고 가정해봅니다. 그럼 컴퓨터에 우리 혹은 회사에서 개발 환경이 전부 똑같이 만들어줘야합니다. 이를 위해 Node
자료구조에 대해 스스로 공부한내용정리 해보자!!
자료구조 자료구조를 배우는 이유 데이터를 체계적으로 저장하고, 효율적으로 활용하기 위해 자료구조를 사용한다. 대부분의 자료구조는 특정한 상황에 놓인 문제를 해결하는 데에 특화되어져 있다! 많은 자료구조를 알아두면 ,특정 문제를 해결하는데 큰 도움이 된다. 이것은 문
CSS font 아는듯 모르는듯 한번더 이해를 튼튼!
CSS 폰트 사이즈 프로퍼티 font family web font font-weight font -variant 프로퍼티 line - height 프로퍼티 letter-spacing ,word-spacing 프로퍼티 text-align 프로퍼티 text
CSS 적용 , 우선순위 및 상속!
요소간에는 부모와 자식관계가 있고 , 상속은 부모 요소의 프로퍼티 값을 자식 요소가 물려받는걸 의미!생산성을 높일 수 있는 기능이지만 ,실제 코드 작성시에는 복잡한 상속관계로 복잡도가 올라갈수있다. 코드로 확인해보자 p태그의 color 프로퍼티 값은 span태그에도
CSS BOX 에 대해 이 시점 필히 알아두면 좋은것들
1.CSSBoxmodelwidth / height 프로퍼티2.1 max-width / max-heightmax-width , max-height css 속성은 요소의 최대 너비 / 최대 높이를 설정합니다. width 속성의 사용값이 자신의 값보다 커지는걸 방지!high
여태 놓치고 있던 css 셀렉터 2
4) 후손 셀렉터 부모 태그 안에 있는 모든 하위 태그를 하위 요소 , 후손 요소라고 부름부모 태그 안에 있는 모든 태그 중에 selector2 를 선택ex)5) 자식 셀렉터 : > 로 표시부모 태그 (selector1) 안에 있는 바로 다음 레벨의 태그 중에 sele
여태 놓치고 있었던 Css selector
1)class selector .클래스명으로 선택 (.)을 앞에 붙여야 아이디인지를 구분할수 있다. 2)attribute ( 속성) selector (속성): attr 속성을 가지는 모든 태그 3) CSS selector 조합 태그 , 아이디 ,클래스 selec
HTML 태그 모음 & 요약정리
HTML 에 대한 지식이 부족한턱에 시메틱 태그나 어떻게 이뤄지는지에 대한 기본적인 지식을 놓친게 너무 많아서 다시 복습한다는 생각을 갖고 인프런에서 강의를 구입후 다시 생각 정리겸 잊지 않기 위해서 블로그에 작성을 해두기로 했다. HTML5 기본 탬플릿 코드 이해
[Javascript] Scope
scope 는 직역하면 "범위"라는 듯이다.JavaScript에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다.!식별자(변수)를 찾기 위한 규칙!이라고도 한다.위 예제에서 x가 두번 선언되었는데 , Javascript 는 각 x가 어떤 값을 가지는지 어떻
[Javascript] function 함수
함수 호출에 의해 실행되는데 한번만 호출할 수 있는 것이 아니라 여러번 호출할 수 있다.동일한 작업을 반복적으로 수행해야 한다면(동일한 구문을 계속해서 중복해서 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율!이러한 특성은 코드의 재사용이라는 측면에서 매
JWT(JSON Web Token ) ?
JSON Web Token (JWT) 은 웹 표준 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안전성 있게 전달해준다.수많은 프로그래밍 언어(C,Java,Python,C++,CJWT Token은 해당 토
[JS] JavaScript의 document.location 속성 및 위치 개체에 대한 완전한 가이드
객체는 브라우저의 Window 탭에 있는 현재 DOM 문서와 관련된 속서을 가진 전역 객체 입니다.document.location읽기 전용 속성은 현재 문서의 URL 에 대한 정보인 개체를 반환 하고 Location URL 을 변경하고 로드하는 메서드를 제공합니다. 읽