전체 글 (9) 썸네일형 리스트형 CSS 작성 시 팁 모음 프로젝트를 진행하며 css 작성 시에 헷갈렸던 부분들, 여러 팁들을 모아놓으려고한다. 오랜만에 작성하게 될 경우에도 헤매지 않도록..!피그마피그마를 통해 화면 레이아웃을 만들 때는 전체적인 마크업부터 분석한다. 큰 덩어리를 나누고 해당 부분을 어떤 속성을 이용해 배치할지 정한 후 작업을 시작하는 것이 좋다. (예를들어 와이어프레임을 봤을 때 일정한 간격의 세 덩어리가 있다면 해당 덩어리들을 flex 속성으로 설정한 후 gap을 이용해 간격을 적용한다.) 전체적인 레이아웃을 잡고 내용을 넣은 후에는 디테일적인 부분들을 챙기는 것이 좋다. 검색엔진 최적화를 위한 적절한 태그 사용, 버튼의 성격에 따라 클릭이 가능한 범위를 다르게(메뉴는 padding을 적용해 주변까지 클릭 가능하게 하고 정확한 클릭이 필요한.. [기타] ctrl + / 로 주석처리가 안될 때 vscode 및 기타 다른 환경에서 코드를 작성할 때 ctrl + / 키로 주석을 쉽게 추가/제거 할 수 있다. 하지만 갑자기 주석처리가 안된다면..?어느날부터 갑자기 ctrl + /를 입력하면 해당 부분의 코드가 지워지고 / 만 남게되었다. 이 때 해결방법은 다음과 같다!1. ctrl + shift를 누른 상태에서 shift 만 손을 떼어준다. (ctrl은 누르고 있어야함)2. 화면 오른쪽 아래에 '자판배열' 창이 뜨면 Microsoft 입력기를 눌러준다. 쉽게 해결!! [DB] 데이터와 데이터베이스 이 글에서는 데이터와 데이터베이스, 그리고 RDBMS를 활용할 수 있는 SQL 문법까지 다룬다. 이 글에서 다룬 SQL 문법은 아주 기본적인 내용들이며 ALTER, CONSTRAINT 등의 추가적인 SQL 문법들을 더해 갈 예정이다.데이터: 현실 세계에서 수집된 단순한 사실과 값들의 집합.정보: 데이터를 특정 목적에 의해 해석하거나 가공한 결과물. 데이터를 통해 정보를 추출하는 것이 목적. 데이터베이스: 데이터들의 집합. 조직 안에서 여러 사용자와 응용 프로그램이 공동으로 사용하는 데이터들을 통합, 저장, 운영한다.필요성파일 처리 시스템의 한계: 데이터 종속성, 데이터 중복, 데이터 무결성의 문제가 발생한다.데이터베이스의 장점: 실시간 접근성, 지속적인 변화 처리, 동시 공유, 내용에 대한 참조 등의 특.. [Node.js] Express.js와 Methods Express.jsExpress.js는 Node.js 환경에서 서버 애플리케이션을 구축하기 위한 간결하고 유연한 웹 애플리케이션 프레임워크다.간결함과 유연성: 간결한 코드로 강력한 웹 애플리케이션과 API를 구축할 수 있게 해준다. 개발자가 원하는 방식으로 애플리케이션의 구조를 설계할 수 있는 유연성을 제공한다.미들웨어 지원: 미들웨어는 요청(request)과 응답(response) 사이에서 특정 작업을 수행하는 함수다. Express.js는 다양한 미들웨어를 쉽게 추가하고 사용할 수 있다.라우팅: URL 경로에 따라 HTTP 요청을 처리하는 강력한 라우팅 기능을 제공한다. REST API를 구축할 때 매우 유용하다.템플릿 엔진 지원: 다양한 템플릿 엔진을 쉽게 통합할 수 있어, 동적인 HTML 페이지를.. [React] SPA와 Routing SPA vs MPASPA (Single Page Application)SPA는 단일 HTML 페이지로 구성된 웹 애플리케이션이다. 사용자가 페이지를 탐색할 때마다 전체 페이지를 다시 로드하지 않고, 필요한 부분만 동적으로 업데이트한다. MPA (Multi Page Application)MPA는 여러 HTML 페이지로 구성된 웹 애플리케이션이다. 사용자가 페이지를 탐색할 때마다 새로운 페이지가 서버에서 로드된다. 전통적인 웹 애플리케이션 방식이며, 각 페이지는 독립적으로 로드되고 렌더링된다. SPAMPA장점첫 로드 이후 페이지 간 이동 시 빠른 반응 속도.페이지 리로드 없이 부드러운 전환 효과.서버로부터 필요한 데이터만 가져오고, 클라이언트 측에서 렌더링.각 페이지가 독립적인 URL을 가져 SEO에 유리.. [React] React를 들어가며... React는 이론보단 사용법을 아는 것이 조금 더 중요하다. React의 이론 관련 내용은 이 블로그에 추가하는 방식으로 작성하는 것이 좋겠다. ReactReact : Meta (구 페이스북)에서 만든 Java Script UI 라이브러리 React 탄생 배경갈수록 어렵고 복잡해지는 UI데이터 제한을 신경써야하는 모바일의 등장파일 관리의 어려움컴포넌트 기반 아키텍처의 등장이런 상황에서 React는 컴포넌트 기반 아키텍처를 도입하여 UI를 모듈화하고 관리하기 쉽게 만들었다. HTML, CSS, JS는 페이지를 이동할 때마다 페이지의 모든 자원을 다시 불러오기 때문에 자원 소모가 너무 크다는 단점이 있기에 SPA의 개념을 도입하여 페이지의 전체를 다시 렌더링하는 것이 아니라 변경이 필요한 부분만 업데이트하여.. [JS] Promise와 이벤트루프 Promise는 개발자들도 정확하게 이해하고 사용하는 사람이 많지 않을 정도로 어려운 개념!! Promise명령의 실행을 지연시킬 수 있는 기능이다. Promise는 세가지 상태를 가진다.Pending: Promise가 생성되고 아직 완료되지 않은 초기 상태Resolved: Promise가 성공적으로 완료된 상태. 이 경우에는 결과 값이 포함되어있으며, .then()으로 처리된다.Rejectd: Promise가 실패한 상태를 나타난다. 이 경우에는 실패 이유를 나타내는 에러가 포함되어있으며, .catch()로 처리된다. Promise의 특징Promise는 new 키워드를 사용한 생성자 함수로 정의한다. 이때 등록된 함수는 동기적으로 동작하며, .then, .catch에 해당하는 부분이 비동기적.. [JS] 동기, 비동기 들어가기 전...자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 차례대로 실행한다. (1차선 도로와 같음)스레드 : 하나의 프로세스 안에서 독립적으로 실행되는 실행 단위.프로세스 : 시스템에서 실행 중인 프로그램 자바스크립트 제어 흐름 동기적(Synchronous) 제어 흐름 - 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는다. - 코드의 흐름과 실제 제어 흐름이 동일하다. - 싱글스레드 환경에서 메인 스레드를 긴 시간동안 점유하면 프로그램을 멈춘다. ex) 무한 루프 비동기적(Asynchronous) 제어 흐름 - 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행한다. - 코드 흐름과 실제 제어 흐름이 다르다 - 비동기 .. 이전 1 2 다음
