일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 모던 자바스크립트 딥다이브
- 인프런 자바스크립트 알고리즘 문제풀이
- 프로그래머스 K_Digital Training 프론트엔드
- 우테캠 회고록
- KDT 프로그래머스 데브코스 프론트엔드
- 모던 자바스크립트 Deep Dive TIL
- useRef 지역 변수
- react customHook 예시
- frontend roadmap study
- react 프로젝트 리팩토링
- 백준 js
- Vue3
- 투포인터알고리즘 js
- KDT 프로그래머스
- 프로그래머스 데브코스
- 프로그래머스 K_Digital Training
- TypeScript 문법 소개
- 백준 node.js
- Frontend Roadmap
- K_Digital Training
- useEffect return
- 개발자 특강
- Vue3 Router
- 모던 javascript Deep Dive
- 프로그래머스 데브코스 프론트엔드
- 머쓱이
- 프로그래머스 데브코스 프론트엔드 TIL
- 리팩토링 회고
- 모던 자바스크립트 TIL
- 모던 자바스크립트 Deep Dive
- Today
- Total
목록전체 글 (254)
프론트엔드 개발자의 기록 공간
CSS Architecture CSS는 자유도가 높은만큼 까다롭고 어렵습니다. 이러한 특성 때문에 종종 기대했던 결과가 나오지 않는 경우가 많습니다. CSS를 계획적으로 구축되지 않았다면 프로젝트가 확장될 때 깨지거나 무너질 가능성이 매우 높습니다. 따라서 견고한 CSS 아키텍처의 기반은 프로젝트가 확장될 때 가장 중요한 요소가 됩니다. 대표적인 예 협업 시 사람마다 다른 코드 구조 및 정의 서로 다른 네이밍 규칙 CSS 우선순위 문제 복잡해지는 선택자 등 CSS Architecture 종류 OOCSS(객체 지향 CSS) BEM(블록 요소 수정자) SMACSS(Scalable and Modular Architecture for CSS) OOCSS (Object Oriented CSS) 객체 지향에 따라서..
Package Managers 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. npm npm(node package manager)은 자바스크립트 패키지 매니저입니다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다. Node.js 생태계의 앱스토어나 플레이스토어 같은 역할을 합니다. npm 레지스트리에는 640,000개가 넘는 패키지가 포함되어 있으며, 패키지는 의존성(dependencies) 및 버전을 추적할 수 있도록 구성됩니다. package.json package.json은 프로젝트 정..
HTTPS 월드 와이드 웹에서 정보를 주고 받을 수 있는 프로토콜 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜 HTTP는 암호화하지 않은 평문 데이터 전송이므로,데이터 노출 및 변조의 위험이 있다. HTTPS HTTPS는 TLS/SSL인터넷 암호화 통신 프로토콜을 사용하여 암호화를 통해 평문 데이터 문제 해결한다. (무결성 보장) TLS 는 SSL의 업데이트 버전이라고 이해 서버에서 HTTPS 프로토콜 사용을 위해 SSL 인증서를 CA기관으로부터 발급 받는다. 80번 port를 사용하는 http와 달리 https는 443번 port를 사용한다. HTTPS 동작 과정 클라이언트(브라우저)가 서버로 최초 연결 시도를 함 서버는 SSL 인증서를 브라우저에게 넘겨줌 브..
지인의 소개로 미래산업과학고등학교에 개발자 특강을 다녀왔습니다. 고등학생들에게 특강은 처음이라 무엇을 준비해야 하는지 막막했지만, IT특성화고 특성상 IT관련 대학 진학을 생각하는 학생들이 많았기 때문에, 제가 고등학생 시절 대학 입시를 준비하면서 겪었던 고민들을 정리하기 시작했습니다. 또한, 사전 질문지를 통해 학생들이 어떤 고민과 질문이 있는지 미리 파악했습니다. 정리한 고민들을 토대로 내가 "고등학생으로 돌아간다면"이라고 생각하고 "나는 이렇게 했을 것 같다"라는 주제로 준비했습니다. 또한, 쏘카에 몸을 담고 있어서 회사 소개와 더불어 쏘카에서 어떤 일을 하고 어떤 식으로 일하는지 예시를 통해 현업에 대해서도 소개했습니다. 특강을 진행하면서 학생들의 반응이 조용하길래 "내가 준비한 것이 도움이 되지..
무한 스크롤은 많은 데이터를 세분화하여 필요시에 데이터를 요청해서 받아오면서 성능을 극대화한다. react+typeScript에서 무한 스크롤을 구현하는 방법을 useHook으로 관리하여 사용하는 법을 소개할 것이다. Intersection Observer API Intersection Observer API는 대상 요소가 상위 요소 또는 최상위 문서의 뷰포트 와 교차하는 변경 사항을 비동기식으로 관찰하는 방법을 제공합니다. 따라서 Scroll 이벤트를 걸어서 스크롤 할 때마다 함수가 실행되는 스크롤 이벤트보다 훨씬 성능이 좋다. 파일 구성 useObserver (무한스크롤 useHook) Item (무한스크롤하는 개별 요소) Main (Item List를 생성하는 상위 컴포넌트) useObserver...
4번째 프로젝트도 2주간 진행됐다. 주제는 카페 키오스크 주문 서비스였는데, 운동을 좋아해서 헬스 키오스크 컨셉으로 프로젝트를 진행했다. 프로젝트 주요 기능은 키오스크 주문 시스템처럼 카테고리 별 상품이 존재하고, 상품을 클릭하면 상품 정보와 함께 부가적인 옵션과 수량을 선택할 수 있다. 선택된 상품은 장바구니 리스트에 보이고 최종적으로 결제를 누르면 결제 내역과 함께 결제가 진행된다. 프로젝트 후기 이번 프로젝트에는 큰 제약이나 요구사항이 없었다. 프론트는 React + TypeScript, 백엔드는 Nest.js + TypeORM으로 개발을 진행했다. 환경 세팅 이번 프로젝트에서는 React, Nest를 사용하는데, 별도로 배포를 진행했어야 했기 때문에 프로젝트 폴더를 어떻게 구상할까 고민하다가 다른..
다 끝나고서야 정리하는 3~4주차 3번째 프로젝트... 3번째 프로젝트는 2주간 "가계부 서비스" 프로젝트였다. 페이지는 크게 수입, 지출 리스트를 볼 수 있는 메인 페이지, 달력 차트로 내역을 볼 수 있는 페이지, 차트로 내역을 볼 수 있는 페이지를 개발하는 것이었다. 프로젝트 후기 FE 요구사항 객체 활용 프로그래밍 Model 과 View 역할을 나누고 옵저버 패턴을 활용해서 적용한다. history API 와 라우팅 대 분류에 해당하는 메뉴에 대해서 history API 를 적용해서 page routing 을 시도한다. Fetch API와 Promise 패턴 catch 를 활용한 에러처리를 한다. 서버와 통신을 하는 동안 loading indicator 를 노출한다. 차트 개발 Canvas, SVG..