본문 바로가기

Personal Posting/Web

forEach vs map forEach와 map은 Dart에서 컬렉션을 탐색하는 데 사용되는 메서드로, 각각의 사용 목적과 반환 값에 차이가 있다. forEach: List numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) { print(number * 2); }); 사용목적 - forEach는 컬렉션의 각 요소에 대해 특정 동작을 수행하고자 할 때 사용된다. - 주로 컬렉션을 반복하면서 각 요소에 대해 일련의 작업을 수행하고 싶을 때 활용된다. 반환 값 - forEach는 반환 값이 없다. void를 반환하며, 각 요소에 대해 주어진 동작이 실행된다. map: List numbers = [1, 2, 3, 4, 5]; List doubledNumbers = numbers.map((num.. 더보기
CSR vs SSR Client Side Rendering에 익숙해져있던 나에게 생소한 개념으로 다가왔던 SSR에 대해 정리할겸 각각의 차이점을 정리해보기로 했다. CSR(Client Side Rendering)과 SSR(Server Side Rendering)는 웹 애플리케이션에서 페이지를 렌더링하는 두 가지 주요 방식이다. CSR (Client Side Rendering) 1. 개념 클라이언트 측에서 렌더링이 이루어지는 방식 초기에는 서버에서 빈 페이지를 받아오고, 클라이언트에서 JavaScript를 사용하여 동적으로 컨텐츠를 렌더링 2. 프레임워크 React: 브라우저에서 JavaScript가 실행되어 가상 DOM을 조작하고 UI를 업데이트 3. 장점 빠른 초기 로딩: 최초에 필요한 HTML만 받아오기 때문에 초기 로.. 더보기
클라우드 컴퓨팅 용어 정리 IaaS, PaaS, SaaS, DaaS IaaS(Infrastructure as a Service) 가상 서버, 스토리지, 네트워크 등의 인프라를 클라우드에서 제공하는 서비스입니다. 개발자는 IaaS를 이용하여 서버나 스토리지를 프로비저닝하고, 이를 사용하여 애플리케이션을 만들고 배포할 수 있습니다. 이 모델에서는 사용자가 자유롭게 인프라를 제어할 수 있으며, 유연성과 확장성이 높습니다. 예를 들어, Amazon Web Services (AWS)와 Microsoft Azure와 같은 서비스가 IaaS의 예입니다. IaaS에서는 클라우드 호스팅 IT 인프라스트럭처를 온디맨드 방식으로 액세스합니다. 여기에는 서버, 네트워킹 리소스, 스토리지 용량, 시각화 기능 등이 포함됩니다. 고객은 온프레미스 하드웨어와 비슷한 방식으로 IT 인프라스트럭처를 프.. 더보기
CSS 레이아웃 (Display, Position) 헷갈렷던 용어 개인정리 position static : 기본적인 옵션. relative : 부모태그 위치를 기준으로 움직임 absolute : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 값을 주는 순간 부모의 위치를 기준으로 움직임 부모의 포지션이 static이 아닐때만 적용됨. 즉, static이면 그 위의 부모를 기준으로 움직이게 됨. fixed : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 항상 최상위 태그를 기준으로 움직임. 스크롤을 무시함 sticky : 스크롤을 무시함 display 예를 들어 div는 블록개념인데, span은 인라인개념이므로 내용이 채워지면 그만큼 확장이 된다. (컨텐츠 자체만을 꾸밈) 하지만 이를 display 옵션을 통해 block, 또는 i.. 더보기
Ant Design Customize Theme 현재 제작하고 있는 git portfolio 페이지 제작 중 Ant Design으로 쓰면 좋을것 같은 부분이 있어 적용을 했다. 그런데 기본으로 사용할 경우, 내가 만든 페이지 크기에 비해 비율이 작아 좀더 크게 보였으면 하는 바람이 있었다. 예전에 React로 챗봇을 만들 때 확인했던 방법인데, 정답은 Ant Design 공식 홈페이지 Development 메뉴에 있는 Cuttomize Theme 이다. import { Button, ConfigProvider } from 'antd'; import React from 'react'; const App: React.FC = () => ( ); export default App; 즉, ConfigProvider를 import한 후, 내가 사용하려는 컴포넌.. 더보기
github 포트폴리오 제작기 다사다난했던 나의 개발경력을 남에게 어필하기 위한 포트폴리오의 제작 필요성을 느끼게 된 요즘, 구글검색을 해서 확인한 결과 github 포트폴리오를 이용하는 게 좋다고 판단했다. 우선 github 또는 지킬에서 원하는 템플릿을 선택 후, 이를 깃헙에서 fork 한 다음 http://jekyllthemes.org/ Jekyll Themes jekyllthemes.org 가장 중요한 건, 이 페이지를 내 깃헙에서 로딩할 수 있게 [내 유저명].github.io로 세팅하는 것이었다. 하지만 이는 이전에 라임이 Spelling Bee 퀴즈 프로그램을 돌릴 서버를 찾던 와중 발견했던 github 자체 서버 돌리기와 동일한 방식이었으니... 난관에 봉착한 순간, 떠오르는 생각 차라리 내가 Figma로 내 포트폴리오.. 더보기
RESTful 정리 REST란: REpresentational State Transfer의 약자로서 이미지, 동영상, DB 자원 등 모든 자원에 URI를 부여해서 사용하는 것. 즉 자원들을 이름 등의 정보로 표현함으로써 해당 자원을 정의하고 이 자원에 대한 상태를 주고 받는 개념 짧게 정리하면 자원(Resource)의 표현(Representation)에 의한 상태 전달 (RESTful: REST 개념으로 구현하는 방법론) 1. 자원(resource)의 표현(representation) 자원 : 해당 프로그램이 사용하는 모든 리소스 ex) 문서, 데이터, 코드 등 자원의 표현: 그 자원을 표현하기 위한 이름 ex) DB의 학생 정보를 자원이라고 보면 ‘students’는 자원의 표현으로 볼 수 있다. 2. 상태(정보) 전달 .. 더보기

티스토리툴바