프론트엔드(18)
-
Nextjs 기본부터 알아보자 1
What is Next js and Why? The React Framework for production React의 “common problems” 를 해결해주는 프레임워크 이다. react의 "common problems"는 SPA로 이루어진 웹앱의 단점이다. Client Side Rendering 서버에서 한 페이지만 받고 클라이언트에서 렌더링을 하는 방식 기존 리액트 app의 방식 페이지간 이동이 발생하지 않음 : route 방식 seo 검색 엔진 최적화에 불리 Server Side Rendering 서버에서 클라이언트에게 전송 후 렌더링하는 방식 페이지간 이동(새로고침)이 발생 seo 검색 엔진에 유리 next js는 CSR방식의 리액트 앱을 SSR로 전환시켜주는 역할 브라우저 렌더링부터 CS..
2023.03.06 -
바닐라javascript로 spa(single page application)개발하기
날짜: 2023년 3월 3일 생성일: 2023년 3월 3일 오후 2:51 태그: 프론트 엔드 이 글을 쓰는 이유? 데브 매칭 대비하기 위해 지난해 진행했던, 과제 테스트 해설을 보고 학습한 내용을 정리하려고 합니다. 출제 내역을 보면 SPA(Single Page Application)을 순수 자바 스크립트로 개발하는 문제가 주로 출제 됐습니다. 그렇기 때문에 자바스크립트의 문법을 응용하면서 문제해결을 위해 어떤 문법이 필요한지 알아보겠습니다. 저도 처음부터 알고는 있었지만, “이 문법을 이런식으로 응용해서 사용하면 되는구나” 를 많이 깨달았습니다. 컴포넌트 만들기 SPA는 컴포넌트를 기반으로 개발을 하기 때문에 원래 html의 노드요소들을 Class를 통해서 동적으로 생성해줘야 한다. 따라서 index...
2023.03.03 -
react router v 6.4 체험기
날짜: 2023년 2월 25일 생성일: 2023년 2월 25일 오후 5:12 태그: 프론트 엔드 원티드 프리온보딩 사전 과제를 하면서 react router v6.4에서 좀 많이 바뀐듯한 react router를 사용해봤다. https://reactrouter.com/en/main Home v6.8.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com r..
2023.02.27 -
상속(Inheritance), 합성(composition) 과 리액트
날짜: 2023년 2월 24일 태그: 프론트 엔드 개발을 진행하다 보면 중복되는 코드와 빈번히 재사용하는 코드를 볼 수 있다. 중복되는 코드를 분리해서 재사용하면 차후 유지보수에도 도움이 되고, 남이 볼 때 쉽게 코드를 파악할 수 있다. 상속과 합성은 객체지향 프로그래밍에서 널리 사용되는 코드 재사용 기법이다. 상속 상속이란? 상속(Inheritance)은 객체들 간의 관계를 구축하는 방법이다. 이 때 객체를 상속받는 객체 클래스는 자식, 상속된 객체는 부모 클래스이다. 클래스 상속을 통해 자식 클래스는 부모 클래스의 자원을 물려 받게 되며, 부모 클래스와 다른 부분만 추가하거나 재정의 함으로 써 기존 코드를 쉽게 확정 할 수 있다. class Animal { // #는 private 접근 제한자 #ag..
2023.02.25 -
sheet JS 사용해 보기
생성일: 2023년 1월 11일 태그: 프론트 엔드 😊 의영님 업무 기록을 엑셀 파일로 뽑아 주면 좋을것 같아요… 한창 외주 개발 미팅 중에 늘 들었던 말이다. 이제 아웃 라인이 거의 다 완성이 됐으니 진짜 건들여야 할 때가 온것이다. JS 에서 엑셀을?? 말도 안되는 소리로 들리신다면 크나큰 착각입니다. 업무 내역이나, 판매량, 모든 통계 자료에서 쓰이는 엑셀은 개발프로그램과 당연히 뗄레야 뗄 수 없는 관계 인 것이다. 그럼 당연히 ! 엑셀용 라이브러리가 있겠지 라고 찾아보게 됐다… Sheet JS SheetJS Community Edition | SheetJS Community Edition 역시 구글 신은 답을 내려 주셨다! sheetjs라고 js 프로그램에서 엑셀 파일을 내보내거나 가져올 수 있게..
2023.01.11 -
Core Redux concepts
Core Redux concepts how does redux work Central Data (state) Store one store - entire state use in Components → subscription store need update state ⇒ Reducer Function (Mutate Store Data_) (not useReducer( )) → Components never directly manipulate the store data Component Dispatch Action Action is Forwarded to Reducer Function
2022.03.03