서버 = 백엔드, DB 라고 생각했던 사람, 나야 나 🙋🏻‍♀️... 그래도 프론트엔드 개발자로 입사하고, 백엔드 개발자들과도 얘기해보면서 백엔드 개발이 서버와 DB 다루는 거구나 라고 이해하게 되었다. 그런데 Next.js 공부를 하면서 접한 서버 사이드 렌더링... 이 서버도 그 서버야? 하는 의문이 들었다. 그리하여 찾아보고 정리하는 포스팅! 서버란? 서버 : 클라이언트의 요청에 응답하는 프로그램 요청에 따라 html, css, js 등 정적 파일을 보내주는 프론트엔드 서버와, DB 데이터를 보내주고 연산하는 백엔드 서버로 나눌 수 있다. 프론트 서버 주로 정적 리소스(static resources)를 다루는 데 사용된다. 정적 리소스는 서버 측에서 동적으로 생성되는 게 아니라, 이미 저장되어 있는..

한 프로젝트를 시작하기 전 미리 잡아둬야할 부분 정리- 1. 스타일링 CSS 1. 폰트 제일 먼저 사용할 폰트 정하기 주로 웹폰트를 많이 사용하므로 먼저 링크 가져오기. 2. css 초기화 브라우저가 기본으로 가지고 있는 css 속성들 초기화 시키기 3. SCSS 세팅 - 변수 - mixin - 클래스 - 미디어쿼리 2. 공통 컴포넌트 구성 1. 상태관리 세팅 ReactRouter reducer, onCreate, onRemove, onEdit 만들기 2. 프로젝트 state context export const DiaryStateContext = React.createContext(); 컴포넌트 트리를 컨텍스트의 프로바이더로 감싸주고 데이터를 밸류로 전달. 일기 데이터를 관리하는 앱 컴포넌트의 데이터 ..

미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..

(지난 내용에서 이어집니다) 그래도 좀 더 확신이 필요해서 주위의 조언을 구했어요. IT 전혀 모르는 친한 친구들에게 대강의 직무를 설명해주었더니 웹퍼블리싱이 더 잘 맞을 것 같다고 했고, 웹기획자인 지인은 업무 내용과 제 성향을 고려해서, 개발자인 지인은 공부해야할 내용과 향후 취업과정을 고려해 만장일치로 웹퍼블리싱을 추천해주었어요. 그래서 그 전에 알아봤던 내용은 다 접고, 구직자 과정 웹퍼블리싱 쪽으로 다시 알아보기 시작했어요. 제가 원하는 훈련 조건은 1. 평일 낮 시간대 2. 접근성 (강남/잠실/종로) 3. html/css 등 웹 언어 4. 일러스트 (포토샵은 이미 할줄 알기 때문에) 였어요. 막상 검색해보니 커리큘럼이 제대로 나와있지 않은 학원이 대부분이라 교재 위주로 확인했는데, 사실 지금 ..