프론트엔드 4

리액트 기본 게시판 개발 : 1. 아키텍처 정의

일단 시작하기에 앞서, 이 토이 프로젝트를 왜 시작하게 되었느냐 하면...리액트에 대해서 공부는 해보고 싶은데, 기존에 리액트 홈페이지에 나와있는 예시만 구현한다고 해서 리액트를 이해한다고 할 수 없고,실제 찾아가며 적용을 해볼 수 있는 개발을 진행해보고자 실행하게 되었다.또한, 조금씩 구현해가면서 한 챕터씩 리액트 자습서를 습득해가고자 이 토이 프로젝트를 시작하고자 한다. 일단, 구현 시작에 앞서, 아키텍처의 정의는 아래와 같이 진행하기로 하였다.구현 도중에 아키텍처가 변경이 된다면 이 글도 함께 수정하겠다.일단 이번에는 React 배우기에 중점적인 프로젝트임으로, 백은 기존에 쓰던 익숙한 Java, Spring Boot, MyBatis, Postgresql을 사용하기로 했다.여기서 새로 배우는 것이 ..

반응형 웹 적용기 : 3. 디바이스별 CSS 입히기

이 글은 '반응형 웹 적용기' 시리즈로, 바로 이전에는 반응형 웹을 구현하기 위해 디바이스별 해상도를 확인해보았다.이전의 글을 확인하고 싶다면 아래의 링크를 통해 확인하길 바란다.2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기 반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기이전 포스팅에서는 반응형 웹과 적응형 웹의 장단점에 대해 알아보았다.이전 포스팅을 보고 싶다면 아래를 클릭하여 이동하시길 바란다.2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 1.lemonnc.tistory.com 디바이스는 크게 스마트폰, 태블릿, 데스크탑 3개의 기종을 생각해서총 5가지의 화면(스마..

반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기

이전 포스팅에서는 반응형 웹과 적응형 웹의 장단점에 대해 알아보았다.이전 포스팅을 보고 싶다면 아래를 클릭하여 이동하시길 바란다.2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 1. 반응형 웹의 이해 반응형 웹 적용기 : 1. 반응형 웹의 이해이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.반응형 웹 VS 적응형 웹일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았lemonnc.tistory.com 이번 편에서는 본격적으로 반응형 웹을 HTML과 CSS를 통해 적용하기 위한 필요사항을 알아보자.미디어 쿼리(media query)란?반응형 웹은 뷰포트(viewport:화면의 해상도)너비에 따라 유연하게 컨텐츠를..

반응형 웹 적용기 : 1. 반응형 웹의 이해

이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.반응형 웹 VS 적응형 웹일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았다.반응형 웹 디자인감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식.반응형 웹 디자인을 사용하면 웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰 화면 표출.CSS 미디어 쿼리(맞춤형 스타일 시트)를 이용해 사용자가 사용하는 기기의 특성을 검사하여 웹사이트에서 자체 렌더링.적응형 웹 디자인브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형정적인 레이아웃을 불러오기 때문에 디자이너가 다양한 화면 너비에 맞춰 별도로 디자인 작업을 수행하야 한다는 불편함 존..