얼음저장소

다섯번째 수업을 진행하였다. 이번 수업은 과제에 적용해야하는 Next.js 를 비롯하여 SPA, SSR/CSR 그리고 SEO 에 대한 수업을 듣게 되었다. Next.js 는 듣기만 들어보고 실제로는 써본적이 없었기 때문에 단순히 라이브러리처럼 설치하여 사용하면 되는건가? 라는 생각을 했었는데, 실제로 사용해보니 그냥 CRA 를 사용하는 것과 많은 부분이 달랐다. 이번 과제는 두개의 기업 과제 중에 선택해야 했는데 우리 팀은 그 중에 많이 적용해보지 못했던 스크롤 애니메이션이 많이 들어간 과제를 선택하게 되었다. 게다가 이번 과제에서는 E2E Test 를 구현해야한다는 조건이 있었다. 써보지 못한 프레임워크(Next.js)에다가 써보지 못한 E2E 테스트 툴(Cypress)을 3일 안에 적용해야했기에 현실..

Reducer 란? 액션을 주면 그 액션이 적용되어 달라진 결과를 만들어 줌 (안달라질 수도 있음) 함수이다. Pure Function : 같은 인자를 주었을 때 항상 같은 값이 나와야 함 Immutable⇒ 리듀서를 통해 상태가 달라졌음을 리덕스가 인지하는 방식이기 때문 : 기존의 상태와 업데이트된 상태가 각각 다른 객체여야함 형태 function 리듀서(previousState, action) { return newState; }​ 액션을 받아 스테이트를 리턴하는 구조 인자로 들어오는 previosState 와 리턴의 newState 는 다른 참조를 가지도록 해야한다. 예제 코드 // action.js export const ADD_TODO = "ADD_TODO"; function addTodo(to..

리덕스의 액션이란? 액션은 객체(Object)이다. 두가지의 형태가 있다 // type 1 {type: 'TEST'} // payload 없는 액션 // type 2 {type: 'TEST', params: 'hello'} // payload 있는 액션 필수 프로퍼티는 type 하나이며, type은 보통 문자열(string)이다. 액션은 스토어에 전달이 되면 스토어의 상태를 변경하는데 사용된다. 리덕스의 액션 생성자 (Action Creater) 액션을 생성하는 함수를 액션 생성자라고 한다. 함수를 통해 액션을 생성하여 액션 객체를 리턴해주는 함수이다. createTest(’hello’); // {type: ‘TEST’, params: ‘hello’} 와 같은 구조다. 리덕스의 액션의 역할 액션 생성자를..

🥺 프로젝트 시작! 네 번째 프로젝트를 진행하였습니다. 이번 프로젝트는 처음으로 TypeScript 를 사용하고 또한 figma 에 작성된 디자인과 가이드에 따라 구현해야 하는 과제였습니다. 또한 json-server 를 이용하여 mock 데이터로 화면에 보이도록 설정해주는 부분도 필요했습니다. 내 거친 TS 지식과 불안한 눈빛과 함께 첫 타입스크립트 기반 프로젝트를 시작하였습니다. 필터나 토글을 선택하여 조건에 맞는 견적 요청 카드를 보여주는 페이지를 구현하는 것이 목적인 과제입니다. 크게 파트를 나누자면 필터 섹션, 카드 섹션, 네비게이션 섹션 (그 외 배포 설정 등..)으로 나눌 수 있었습니다. 이번 과제부터 팀원분의 사정으로인해 저희 팀이 3명(ㅠㅠ)이 되어버렸는데 다행히도 파트가 크게 세 개로 ..

설 주가 지나고 세번째 주가 되었습니다. 이번 주에 TypeScript 로 프로젝트를 진행해야 했기 때문에 지난주에 TypeScript 를 이용하여 간단한 todolist 를 만들어보았습니다. 하지만 완전히 적응 하기에는 아직 멀은것 같아 TypeScript 로 바로 프로젝트를 진행하기 어렵지 않을까 했습니다. 하지만 이번 수업에서 TypeScript의 도움이 될만한 부분을 잘 설명해주셔서 도움이 많이 되었던 것 같습니다. 이번 글에서는 TypeScript 의 기본 개념과 특징에 대해 작성하고, 프로젝트 후기는 2편에 작성하도록 하겠습니다. 👉 TypeScript 를 시작하기 전에 관련 면접 질문 생각해보기 - TypeScript 특징은? - TypeScript 도입의 장점/단점은? - 스크립트 언어와 ..

보호되어 있는 글입니다.

글꼴 h, p 태그 등은 reset.css 를 적용하면 설정들이 사라진다 font-style 글자의 기울기 nomal : 기울기 없음(기본값) italic : 이탤릭체 oblique : 기울어진 글자 font-weight 글자의 두께 nomal, 400 : 기본 두께 (기본값) bold, 700 : 두껍게 bolder : 상위(부모) 요소보다 더 두껍게 lighter : 상위(부모) 요소보다 더 얇게 100 ~ 900 : 100 단위의 숫자 font-size 글자의 크기 16px : 기본값 단위 : px, em, rem 등 단위로 지정 % : 부모요소의 폰트 크기에 대한 비율 smaller : 부모요소보다 작은 크기 larger : 부모요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 ..

너비(width, height) 박스모델에서 사용 auto (기본값) : 브라우저가 자동으로 너비를 계산 단위 : px, em, vw 등 단위로 지정 Inline 요소 (span ...) 포함된 콘텐츠 크기만큼 자동으로 줄어듬 (auto) width, height 를 지정할 수 없음 Block 요소 (div ...) 가로 : 부모요소의 크기만큼 자동으로 늘어남 세로 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬 max-width, max-height 요소가 커질 수 있는 최대 가로/세로 너비 none : 최대 너비 제한 없음 (기본값) 단위 : px, em, vw 등 단위로 지정 auto : 여기선 크게 중요하게 쓰이지 않음 min-width, min-height 요소가 작아질 수 있는 최소 가로/세로 너비..

https://ko.parceljs.org/ 0. Bundler 란? 프로젝트를 진행하다보면 여러가지 패키지를 설치하게 되는데 이런 패키지들은 개발할때만 사용되고 최종적으로 컴파일 후에는 html, css, javascript 파일만 남아야 한다. 때문에 이런 패키지들을 html, css, javascript 로 변환시켜 주는것이 번들러의 역할이다. 번들러가 모든 패키지들을 변환시킬 수 있는 것은 아니다. 예로 SCSS 를 설치하면 SASS 로 변환을 하는데 따로 설치할 필요는 없고 SCSS 를 설치할 때 같이 설치된다. 그리고 번들러는 이 설치된 SASS 를 통하여 변환을 시켜주는 역할을 하는 것이다. 그 중 Parcel 은 구성 없는 단순한 자동 번들링이 지원되어 소/중형 프로젝트에 적합한 번들러이다..

부모 요소의 스타일이 자식요소에도 적용이 된다 모두 적용되는 것은 아니고 대부분 글자/문자 관련 속성들이 적용된다 (font-style, font-weight, ...) 강제 상속 부모요소가 있고, 자식요소가 있을때 수정이 필요한 경우 자식요소의 값을 고치지 못하는 경우가 생길 수 있다. 상속이 자동으로 안되는 부분들을 강제로 상속시킬 수 있 이때 속성값을 inherit 으로 지정하면 부모 요소의 값을 따라간다. 선택자 우선순위 점수가 높은 선언이 유리함 (명시도, 중요도) 점수가 같으면 가장 마지막에 해석된 선언이 우선됨 not 은 점수계산 하지 않음 ID 선택자 : 100점 Class 선택자 : 10점 태그 선택자 : 1점 전체 선택자 : 0점 인라인 선언 : 1000점 !important : 999..