px, em, rem 차이를 알아보자

1. px px은 고정적인 단위이지만, 전세계의 1cm가 동일하듯이 모든 1px이 같은 것은 아니다. 픽셀은 모니터 해상도에 따라 고정적인 크기로 설정된다. 모니터가 바뀌지 않는 한, 브라우저에서는 절대적인 고정값으로 한번 설정된 크기는 변하지 않으므로 반응형 웹 구현이 아닌 경우 사용하는 것이 좋다. 2. em 가변적인 단위. 폰트 사이즈를 기준으로 계산된다. em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다. 상위 요소의 폰트 사이즈를 상속 받을 수 있다. px 보다는 반응형에 적합하지만, 상위 요소의 사이즈가 바뀌거나 뎁스가 깊어질수록 사이즈를 관리하기 어렵다. em 단위는 아래 예시처럼 계산된다. html { font-size: 10px; } body { font-size: 15px; }..

→2022.12.18

Web/React

리액트 훅은 왜 조건문 안에서 쓸 수 없을까?

그 동안 리액트훅을 사용할 때 리액트 컴포넌트 함수의 최상위에서 훅을 항상 호출해서 사용했기 때문에 너무나 당연하게 조건문이나 반복문 안에서 사용할 생각을 하지 않았다. 하지만 왜 그렇게 하는 것인지에 대해 생각해보지 못했고, 오키 질문에도 나처럼 궁금해 하시는 분들이 계신 거 같아 이번 기회에 정리해서 함께 공유하면 좋을 거 같다. 실제로 현재 진행중인 프로젝트에서 조건문 안에 useEffect 훅을 호출하면 아래와 같이 린트 에러가 발생한다. 에러 메세지를 읽어보면, 리액트 훅은 렌더링 시 반드시 동일한 순서로 불려야 하기 때문에 조건적으로 호출되면 안된다고 말하고 있다. 실제 리액트의 공식문서에서도 리액트 훅과 관련된 규칙으로 다음과 같이 안내되어 있다. - 반복문, 조건문 혹은 중첩된 함수 내에서..

→2022.12.13

Web/Svelte

리액트와의 비교를 통해 살펴본 Svelte의 특징

광복절인 오늘, 오랜만에 글을 적는다. 요즘 진행하는 프로젝트의 기술 스택이 스벨트라, 새롭게 학습하면서 느꼈던 점들을 리액트와 뷰와의 비교를 통해 설명하고자 한다. 해당 글은 특히 스벨트의 관점에서 바라보는 글이다. 먼저 스벨트의 개념에 대해 알아보자. Svelte(스벨트) 스벨트는 개발자 Rich Harris에 의해 2016년에 출시된 오픈 소스 프론트엔드 웹 프레임워크이다. 리액트와 달리 가상돔을 사용하지 않는 것이 큰 특징이며, 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상됐다. 스벨트는 라이브러리나 프레임워크가 아닌 컴파일러이다. 리액트나 뷰와 같은 다른 프레임워크들은 모두 런타임 환경에서 실행되기 때문에 프레임워크를 돌리기 위한 엔진이 소스코드에 포함돼 있지만 스벨트는 빌드 타임에 소스코드..

→2022.08.15

Web

웹 서버(web server)와 웹 애플리케이션 서버(web application server)의 차이

1. Web Sever와 WAS의 개념 Web Server(웹 서버) 웹 서버는 소프트웨어와 하드웨어로 구분되며 하드웨어는 Web 서버가 설치되어 있는 컴퓨터이며 소프트웨어는 클라이언트로부터 HTTP 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램이다. 여기서 정적 컨텐츠는 HTML, CSS 및 이미지 파일 등이 해당된다. 웹 서버는 클라이언트로부터 HTTP 요청을 받으면 해당 요청이 정적 컨텐츠만 필요한 경우 WAS를 거치지 않고 정적 컨텐츠를 클라이언트로 제공한다. 반면 동적 컨텐츠 요청인 경우 해당 요청을 WAS로 보내서 WAS로부터 받은 결과값을 클라이언트에게 응답한다. 웹 서버의 예시 : Apache, Nginx, IIS 등 WAS(Web Application Server) 애플리케이션을 ..

→2022.06.05

Web

SSR과 CSR 비교하기

🗨️ SSR(Server Side Rendering) 전통적인 MPA(Multi Page Application)의 렌더링 방식, 브라우저(클라이언트)가 데이터 요청 시 브라우저 -> 프론트 서버 -> 백엔드 서버 -> 데이터베이스를 거쳐 데이터베이스에서 HTML 문서를 가져온 후 브라우저에 화면을 렌더링 하는 방식이다. 클라이언트 측에서 페이지 이동 및 클릭으로 요청이 발생할 때마다 서버에 요청하여 전체 HTML 문서를 다시 가져오기 때문에 변화하지 않는 부분까지도 다시 렌더링 되고, 잦은 서버 요청으로 부하가 일어나는 등의 비효율성을 초래한다. SSR은 첫 화면에서 기존 데이터가 존재하는 HTML 문서가 있기 때문에 검색 엔진이 색인을 생성하고 크롤링할 수 있어 SEO에 좋다. 사용자 인터랙션이 많지 ..

→2022.03.17

Web/React

리액트의 라이프사이클(Life Cycle)에 대해 알아보자

✔️라이프사이클이란? 리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다. 라이프사이클을 생성, 업데이트, 제거 총 세 가지 단계로 나눌 수 있고 각 단계마다 메서드가 존재한다. 총 9가지 메서드가 있으며 각 단계별 메서드에 대해 간단히 알아보려 한다. 참고로 클래스형 컴포넌트에서만 사용 가능하다. 아래 그림을 참고하자. 🗨️마운..

→2022.03.12

Web/React

JSON Server 사용하여 React 프로젝트 만들기 (with Heroku 배포)

제가 이번에 진행했던 프로젝트에선 json server를 셋팅하고 비동기 데이터 처리를 위한 커스텀 훅을 구현하는 역할을 맡았습니다. 프로젝트를 진행하며 json server을 활용했던 과정을 공유하고자 합니다. 0. JSON Server란? JSON Server은 mock data(json 파일 형태)를 가지고 가짜 API 서버를 만들어 실제로 통신할 수 있도록 백엔드 역할을 대신 해주는 것입니다. 해당 서버는 프론트엔드 개발 환경에서 테스트 용도 등으로 사용하는 것으로 실제 프로덕트에서의 서버 역할을 대신해주지는 못합니다. 아래 공식문서를 참고하세요🤠 npm 공식문서 json-server Get a full fake REST API with zero coding in less than 30 secon..

→2022.02.09

Web/Django

[Django] 장고 템플릿 언어의 문법을 살펴보자.

오늘은 장고만이 가지는 장고 내부 언어의 문법을 살펴보겠다👵 장고 템플릿 언어 파이썬의 변수 및 문법을 HTML 문서 안에서 사용할 수 있게 장고에서 지원하는 언어 따라서 기존 HTML, 파이썬과 조금씩 다르다. 변수는 {{ 변수 }} : 띄어쓰기는 불허용. _ 와 대소문자를 이용해서 표현 해줌. 또한 ' . ' 을 이용해서 변수의 속성으로 접근 가능 e.g.) {{ article.headline }} 필터 | 파이프 : 필터를 적용해 변수에 효과를 줄 수 있음. 장고에서는 약 30개의 필터 제공 e.g.) {{ article.pub_date|date:"F j, Y" }} 태그 {% Tag %}: 일반적으로 if문, for문 등에 쓰이며 장고에서는 약 24개의 기본 태그 제공 e.g.) {% for at..

→2020.12.03

Web/Django

[Django] 장고는 무엇일까? with ORM(Object-Relational Mapping)

💂‍♀️그 동안 배우고 프로젝트 때도 활용했던 장고, 오늘부터 조금씩이라도 정리해보려고 한다.💂‍♂️ Django Django란 무엇일까 웹을 `쉽고 빠르게` 만들 수 있도록 도와주는 웹 프레임워크 `Python 기반 웹 프레임워크`, 풀스택 프레임워크이다. 일반적으로 파이썬을 웹 사이트 구축에 쓴다면 django 또는 flask를 사용한다. 주요 특징 MVC 패턴이 아닌 MTV 패턴을 사용 -> Model, Template, View ORM 기본 제공 이는 아래에서 자세히 다뤄보자. DBMS의 경우 SQLite를 사용 Django Admin을 통해 관리자 페이지로 간편하게 CRUD를 할 수 있게 해줌 로그인, DB, 관리자 기능 등 기본적으로 제공하는 기능들이 많기 때문에 이를 잘 익혀서 사용만 하면 ..

→2020.12.02

Web/Vue.js

[Vue.js] Vuetify 사용방법

프로젝트에서 프론트엔드 역할을 맡아 Vue.js로 작업하고 있다. 그래서 Vuetify를 공부하며 열심히 활용하고 있는 중이다. 처음에 뭔지 하나도 모르다가 직접 사용해보니 굉장히 편하다고 느꼈다. 디자인적 요소는 깔끔한 편이라 나처럼 디자인 요소를 꾸미기 힘들어 하는 사람에게 뷰티파이를 적극 추천한다. 1. Vuetify 시작하기(설정 방법) vue-cli를 사용해 vuetify 패키지를 vue프로젝트에 추가하기 🔵 cli 사용해 vue프로젝트 생성한 후에 해당 프로젝트로 이동해서 vuetify를 add 하기 * 프로젝트 진행 도중에 추가하게 되면 폴더 구조가 바뀔 수 있으니 가급적 프로젝트 시작할 때 추가하기 명령어=> vue add vuetify 🔵 plugins/vuetify.js가 생성되고, m..

→2020.08.02

Web/Vue.js

[Vue.js] 네 번째 정리(props, emit)

0. 부모와 자식 간에는 단방향 바인딩만 가능하다(단방향 데이터 흐름) -> why? 자식은 부모의 데이터에 접근하거나 데이터를 변경할 수 없어야 한다. (데이터 흐름이 꼬일 수 있기 때문이다) 단지 이벤트만 보낼 수 있다. 자식은 커스텀 이벤트를 방출하면 부모는 이벤트를 리스닝(@)하여 어떠한 행동을 한다(함수 실행 등) 1. props & emit - 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다. - 컴포넌트 통신 규칙은 각 컴포넌트가 독립성은 유지하면서 데이터 흐름이 규칙적이게 하기 위함 - props는 부모에서 자식으로 데이터를 전달하기 위해 사용 - emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤..

→2020.07.13

Web/Vue.js

[Vue.js] Dynamic Route Matching(동적 라우트 매칭)

해당 유저의 마이페이지에 url로 접근하는 경우 동일한 url 패턴을 보이게 된다. 예를 들어 /user/yeji 또는 /user/deokgi 처럼 비슷한 패턴의 url이 동일한 컴포넌트에 매칭되는 경우 동적 라우트 매칭을 사용한다. 동적 세그먼트는 콜론(:)부터 시작해서 작성하는데 예를 들었던 /user/yeji, /user/deokgi 에서 yeji, deokgi 처럼 바뀌는 부분이다. 나는 인스타 클론코딩을 할 때 유저 페이지에 동적 라우트 매칭을 사용했다. 아래는 인스타 클론 코딩에서 사용한 동적 라우트 매칭👇 // router- index.js에 경로 설정 Vue.use(VueRouter) const routes = [ { //dynamic route matching path:'/:usernam..

→2020.07.11

티스토리툴바