Tec1知

Intro Intro 더보기

FE React 개발자를 위한 Svelte 알아보기 지난 포스트에서 다룬 SolidJS처럼 Signal 패턴을 베이스로 한 프론트 엔드 기술 스택인 Svelte에 대해 알아보았다.SolidJS 떄와 동일하게 공식 문서와 실제 코드 구현을 병행하며 핵심 개념을 검증하는 데 초점을 두었고,특히 React와의 비교를 위주로 학습했다. Svelte 5 (Runes Mode) + TypeScript + Tailwind CSS구조 · 반응성 · 이벤트 · Store 학습 튜토리얼이 저장소는 Svelte 5 (Runes Mode) 환경에서TypeScript 및 Tailwind CSS를 함께 사용하며,프론트엔드 실무 관점에서 필요한 핵심 개념과 반응성 수단을 단계별 예제로 학습하기 위한 목적의 튜토리얼 프로젝트입니다.모든 예제 코드는 재현 가능하도록 SvelteKit ..
FE SolidJS 알아보기 & SPA 설계 가이드 SolidJS를 독학하며 직접 실습한 내용을 정리한 기록공식 문서와 실제 코드 구현을 병행하며 핵심 개념을 검증하는 데 초점을 두었고,실무 관점에서 자주 사용되는 패턴 위주로 정리를 했다.모든 예제 코드는 재현 가능하도록 GitHub 저장소에 정리되어 있으며,각 항목별 실습 파일을 통해 흐름을 따라가며 확인할 수 있다.🔗 실습 예제 githubSolidJS-Tutorial GitHub Repository GitHub - cpcpcool/SolidJS-tutorial: React 개발자를 위한 SolidJS Front API와 SPA 설계관련 튜토리얼React 개발자를 위한 SolidJS Front API와 SPA 설계관련 튜토리얼. Contribute to cpcpcool/SolidJS-tutorial..
FE React Hook Form에 대하여 - Controlled / Uncontrolled 개념과 register 리액트 개발을 하면서 폼을 다양한 방식으로 구현해봤다.수동으로 각 필드를 useRef의 current로 인풋 값들을 관리하거나, React Hook Form의 useForm, useFieldArray를 Yup과 함께 써보면서 어떤 원리로 내부동작이되고 코드가 이렇게 간결해지는지 알아보았다.useForm의 register를 중심으로 파고들다보니 먼저 리액트 컴포넌트의 Controlled / Uncontrolled 개념부터 알아야 했다.1. Controlled 컴포넌트전통적인 React 폼 패턴이다.const [value, setValue] = useState(""); setValue(e.target.value)}/>이 방식의 특징입력 값의 소유자는 React state다키를 한 글자 입력할 때마다state..
CS OSI 계층 모델 (OSI 7 Layer) 정리 정보처리기사 준비를 하며 필기/실기 할 것 없이,네트워크 학습 파트에서 대문처럼 자주 보이는 'OSI 7계층 모델' 에 대해 핵심을 정리하며, 머리에 잘 새겨보려고 한다. 먼저 OSI 계층 모델이란.OSI(Open Systems Interconnection, 개방형 시스템 상호 연결).국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나눠서 설명하는 모델 네트워크 통신의 복잡한 프로세스를 간단한 계층으로 분리하여 계층적인 접근으로 네트워크가 작동하는 방식을 설명하는 모델로 모든 네트워크 / 프로토콜과 기술방식과 맞아 떨어지는 것은 아니나 관련 기술을 탐구하기 전에 네트워킹 원리를 배울 수 있는 훌륭한 출발점 역할을 할 수 있다. (+ 또한 실무적인 네트워크 장애..
FE TypeScript의 공변성(Covariance)과 반공변성(Contravariance) TypeScript 타입 시스템을 깊게 보다 보면 반드시 마주치는 개념이 있다.바로 공변성(Covariance) 과 반공변성(Contravariance) 이다.처음 접하면 추상적이고 헷갈리지만,사실 이 개념들은 전부 “타입을 안전하게 대체하기 위한 규칙” 에서 출발한다.이 글에서는왜 이런 개념이 필요한지TypeScript에서 실제로 어떻게 동작하는지함수 타입에서 왜 방향이 갈리는지를 중심으로 정리한다.타입 시스템과 서브타이핑TypeScript의 타입 시스템은 기본적으로 서브타이핑(subtyping) 을 기반으로 한다.Dog extends Animal이 관계가 의미하는 바는 단순하다.Dog는 Animal이 할 수 있는 모든 것을 할 수 있다따라서 Animal이 필요한 곳에 Dog를 써도 안전하다이 “대체 ..
FE 바닐라 JS(JavaScript)와 제이쿼리(jQuery) 학원을 다닐 때 커리큘럼이 백엔드 위주였어서 node.js / express / 리액트(React) 등을 포함한 js파트는 찍먹만 했고 2023.10.31 - [응용SW 개발 (React)/필기일지] - 231030 [응용SW개발] 리액트 SPA 실습 231030 [응용SW개발] 리액트 SPA 실습[23.10.30] 60일차 [DB 연동 응용SW 개발] - SPA React 실습 - antd(Ant-design) 수정 . useEffect() 인수에 따라 어느 타이밍이 되는지 스터디 . 왜 두번씩 출력되는 지 스터디 . 메뉴 짝수 홀수 마다 세팅왜다른지rey-dvlp.tistory.com이외 [FRONT-END] 메뉴 글 등 팀 프로젝트 때도 jsp와 thymeleaf 템플릿으로 프론트를 구현해서 js..
DB 오라클 DB와 GROUPING / GROUPING_ID / ROLLUP 기존에는 MySQL을 기반으로 DB를 사용하고 데이터를 관리하는 프로젝트들을 진행했었는데, 새로 오라클 (Oracle) DB를 학습하는 시간을 가졌다. MySQL과 기본적인 문법은 비슷했지만, MySQL에선 간단하던 auto_increment를 SEQUENCE를 통해 설정해야 하는 등의 차이가 있었다. 또 Workbench가 아닌 DBeaver (디비버)를 활용해서 작업했는데, 단축키는 조금 달랐지만 WorkBench보다 가독성이 좋고 구분이 편했다. 점포 월별 매출 소계와 합계를 구하는 쿼리를 작성하며, Grouping / Grouping_id / Rollup 함수를 사용하고 오라클의 NVL 등에 대해서도 추가 학습했다. ** 추후 프로시저를 포함한 PL/SQL 문법에 대해서도 학습할 예정
BE MVC Pattern과 MVC1, MVC2 Model 마찬가지로 스스로 정리했던 MVC 패턴과 MVC 모델을 복기 [ MVC Pattern ]: 클라이언트 계층 [표현 계층]에서 Dispatcher Servlet을 통해 Controller(& handlerMapping)로 Model과 View에 접근하고, Servlet내 ViewResolver를 통해 특정 위치의 View 파일에 접근(찾아가는) 디자인 패턴 방식M (Model) / V (View) / C (Controller)Model : 어플리케이션의 데이터, 정보, DB 등 사용자가 원하는 데이터 제공View : 사용자의 요청을 화면으로 출력Controller : 사용자 요청과 관련된 동작, 흐름을 처리, 제어(Model, View) [ MVC 모델 ] MVC패턴의 실제 동작되는 모델유형 1. ..
BE Spring(프레임워크)의 request process 학원 다니던 시절 스스로 이해를 위해 정리했던 스프링의 req리퀘스트 프로세스를 다시 한 번 정리하며 복기하며 공부 ** [스프링 프레임워크는 외장 Tomcat을 사용] WAS(Tomcat) 안에 여러개의 Application(프로젝트)을 관리/ server.xml (설정 파일을 보면) path="" path="/ver1"(=Context) 이면 spring-ver1(=Application(프로젝트))를 찾아가라 >> 위와 같이 외부에서 URL로 해당 프로젝트(spring-ver1)에 요청이 오게되면 1. webapp의 web.xml로 먼저 찾아가 2. DispatcherServlet(class)으로 servlet(servlet-context.xml)을 찾아간다. +) web.xml에서 특정..
CS CS 지식 채우기 한 스푼 (네트워크) 비전공으로 학부 때 배우지 못한 전공 지식을 채우기 위한 비정기적 포스팅 1 ** 네트워크: 네트워크는 노드들이 링크로 연결되어 리소스를 공유하는 집합 노드 : 서버, 라우터, 스위치 등 네트워크 장치링크 : 유선 / 무선 * 처리량과 지연 시간좋은 네트워크란 많은 처리량을 처리할 수 있으며 지연 시간이 짧고 장애 빈도가 적으며 좋은 보안을 갖춘 네트워크를 말한다.처리량(throughput)링크를 통해 전달되는 단위 시간당 데이터양을 말한다.단위로는 bps를 쓴다. 초당 전송 또는 수신되는 비트 수라는 의미다.처리량은 사용자들이 많이 접속할 때마다 커지는 트래픽, 네트워크 장치 간의 대역폭, 네트워크 중간에 발생하는 에러, 장치의 하드웨어 스펙에 영향을 받는다. ** 대역폭 : 주어진 시간 동안 네트워크..

티스토리툴바