CSS3 Flexible Box [배경] 오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구로 float, position 속성을 사용하였다. 무난하지만 어떤 점에서는 제한적이라 확실히 단점이 있습니다. 예를 들어, 아래와 같은 요구 사항을 달성하기 어렵거나 불가능합니다. [float, position이 구현 불가능한 요구 사항] 부모 요소 내부에 포함된 블록 컨텐츠를 세로로 중심부에 맞추기 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 비와 높이를 똑같은 크기로 점유 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택 flexbox는 위와 같은 문제를 해결하고 레이아웃을 만드는데 편의..
[정의] CSS-in-JS는 스타일 정의를 css나 scss파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 기법이다. [사용 배경] 기존 웹 사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 컴포넌트 기반 개발 방법의 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있다. inline-style과의 차이점? CSS-in-JS는 컴포넌트 안에 css를 정의하는 인라인 스타일과 비슷하지만 인라인 스타일은 지양하는 것이 좋습니다. [inline style의 단점] CSS 속성의 중복, 재사용성이 떨어진다. 의사 클래..
면접 준비를 하면서 정말 생각보다 너무 많이 모른 채로 무작정 코드를 작성했구나 반성하게 된다. 면접 질문 중 리액트 선정 이유에 대해서 설명하였는데 리액트의 단방향 데이터 바인딩 덕분에 흐름을 파악하기 쉽다는 장점을 들었을 때 팀원 중에서 "리액트는 그러면 단방향 데이터 바인딩만 하고 양방향은 안되냐"는 질문을 하셨다. 내가 알기론 양방향 데이터 바인딩이 되지만 주로 단방향 데이터 바인딩인 것으로 알고 있어서 제대로 대답하지 못했다! 또한, 데이터 바인딩과 이벤트 전파에 대한 추가 질문을 던지셨는데 내가 생각했던 리액트의 단방향 데이터 바인딩은 state를 props로 내려주는 것만 생각하고 있었어서 이벤트와 직접적으로 연관이 있는 줄은 몰랐다. (이건 제대로 찾아봐야 할 거 같다 데이터 바인딩에서 "..
https://42place.innovationacademy.kr/archives/9784 AWS S3, CloudFront로 리액트(프론트) 배포하기 0. 들어가기 전에 0-1. 사전 준비 체크 리스트 리액트 프로젝트가 cra 나 vite 를 통해 리액트 프로젝트가 이미 만들어져있어야 합니다.aws 계정을 미리 만들어 둡니다.처음이라면 branch 를 따거나 fork 42place.innovationacademy.kr https://leehwarang.github.io/2022/09/11/frontend-deploy.html 배포 하면서 배우는 CSR(React)과 SSR(Next.js) - 이화랑 블로그 배포 하면서 배우는 CSR(React)과 SSR(Next.js) CSR(Client-Side Re..
⭐리액트의 클래스형 & 함수형 컴포넌트 ? 리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있습니다. 둘의 가장 큰 차이점은 상태값과 LifeCycle을 가질 수 있느냐 없느냐 입니다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다. 함수형 컴포넌트는 이 모든 일을 할 수 없습니다. 하지만 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다. LifeCycle Method는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. *컴포넌트 라이프 ..
REST (Representational State Transfer) API 먼저 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. RESTFUL API란 REST의 원리를 따르는 API를 의미합니다. 하지만 REST기법을 사용했다 하여 모두가 RESTful 한 것은 아닙니다. REST API의 설계 규칙을 올바르게 지킨 API만이 RESTful하다 말할 수 있으며 모든 CRUD 기능을 POST로 처리 하는 API 또는 URI 규칙을 올바르게 지키지 않은 API는 REST API를 ..
목차 useRef Hook ref가 하는 일, 예시 제어 컴포넌트와 비제어 컴포넌트 useEffect Hook useEffect 의 종속성(의존성 배열) 예외 사항 side Effect 가 무엇인가? clean-up 함수를 통해 디바운싱(debouncing)구현하기 [전제조건] 리액트 hook이기 때문에 당연히 함수형 컴포넌트(클래스형) 안에서만 사용할 수 있습니다. ref는 참조(reference)를 뜻합니다. 리액트에서는 ref 라고 부릅니다. useRef는 어떤 값이는 저장할 수 있는 자바스크립트 객체이다. 리액트가 렌더링할 때마다 동일한 객체를 넘기기 때문에 값이 변경되어도 리렌더링이 발생하지 않는다. ref 가 하는 일 ? 다른 DOM 요소에 직접 접근해서 그것들로 작업할 수 있게 해준다. ( ..
Basic Rules 최대한 타입은 좁은 범위로 작성 타입 추론을 적극 활용할 것 타입스크립트에서 타입을 빼면 올바른 자바스크립트 코드여야 한다. 타입 명시 자리를 잘 알고 있어야 한다. 원시타입 명시할 때, 대문자가 아니라 소문자로 써야한다. string과 String은 다르다. 💛콜론 뒤에 타입, 타입 별칭(에일리어스), body가 없는 function, 제네릭, 인터페이스, as, enum, declare, readonly 등은 TS코드에서 JS코드로 변환 시 사라진다. Implicit Types vs Explicit Types (암시 타입 vs 명시 타입) 암시 타입(Implicit Types)은 타입스크립트에게 해당 데이터의 타입을 추론할 수 있도록 타입을 명시하지 않는 방법을 말한다. (TS가..
- Total
- Today
- Yesterday
- grid flex
- 항해99프론트후기
- getServerSideProps
- 항해99프론트
- Prittier
- getStaticPaths
- 틸드와 캐럿
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- is()
- 프리렌더링확인법
- fs모듈 넥스트
- tilde caret
- aspect-ratio
- 항해99추천비추천
- text input pattern
- 원티드 3월 프론트엔드 챌린지
- ~ ^
- 타입스크립트 DT
- && 셸 명령어
- 원티드 프리온보딩 FE 챌린지
- float 레이아웃
- 타입스크립트 장점
- D 플래그
- 원티드 FE 프리온보딩 챌린지
- 부트캠프항해
- nvm경로 오류
- nvm 설치순서
- 형제 요소 선택자
- 프리온보딩 프론트엔드 챌린지 3월
- reactAPI
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |