하고자 하는것노션 콜아웃이 테두리가 둥그렇게 지정되어있어서 영역을 나눠서 표현하기 좋은데 콜아웃 안에서 좌우로 영역을 나누는 것이 안되어서 찾아본 기능!프로세스1. 넣고자 하는 페이지 안에서 페이지를 만든다.2. 페이지 안에서 column으로 구성해준다.3. 해당 페이지를 전환을 클릭하여 콜아웃이나 제목이나 아무거나로 변경해준다. (그냥 해당 페이지를 선택해서 ctrl + shift + 1 을 눌러도된다 꼭 1 아니여도 왠만하면 다 됨)적용된 모습 후기콜아웃 안에서 영역을 나누고싶어서 찾아본 기능인데 콜아웃 뿐만이 아니라 다되네, 근데 나중에 노션 업데이트하면서 제공해줄 기능일듯?~?
어떤 것이 궁금한지 도메인 (IP 주소에 매핑되는 텍스트 문자열) 대신에 IP 주소에 직접 SSL 인증서를 적용하여 배포할 수 있는가. 왜 궁금한지 많은 사이트들이 회사 브랜드명으로 도메인을 갖고 있는데 사내 메일로 IP로 배포되고 HTTPS인 웹사이트를 보았고 도메인이 아닌데 HTTPS 적용이 되어 있는 게 궁금하였다. 기존에 IP 도메인으로만 배포하는 경우를 보지 못해서 권장되지 않는구나라고 판단을 했는데, HTTPS://123.123.123.123 같은 도메인을 보니 HTTPS가 어쨌든 보안을 위한 것인데 왜 IP가 아닌 도메인만 가능할 거라고 생각했을까라는 의문이 들었다. SSL 인증서 사는 게 힘든 건가? Yes, 불가능한 게 아니라 발급해주는 곳을 찾기 힘들다는 것! ..
웹 클라이언트 사용자가 web 접근하는 프로그램 일반적으로 웹 브라우저: Chrome, IE, Safari 등웹서버 ⭐ 클라이언트로부터 HTTP 요청을 받아들이고 HTML, CSS 같은 웹 페이지를 반환하는 컴퓨터 프로그램 정적 컨텐츠를 제공하는 서버 정적 컨텐츠: 단순 HTML, CSS, JavaScript, Image, 동영상 등 동적 요청은 WAS에게 요청해 받아온다. 동적 컨텐츠 요청을 받으면 WAS에게 해당 요청을 넘겨주고 WAS에서 처리한 결과를 클라이언트에게 전달해주는 역할도 한다. 웹 서버 프로그램: 아파치 http서버, 엔진엑스(nginx)WAS (Web Application Server) ⭐ HTTP 프로토콜을 통해 사용..
어떤 것이 궁금한지 Server Side Rendering(SSR) 페이지에서도 lazy loading이 필요할까? 왜 궁금한지 SSR은 서버에서 HTML을 생성하여 클라이언트로 보내기 때문에 초기 렌더링 속도가 빠를 것 같은데, lazy loading으로 한 번 더 최적화할 필요가 있는지 의문이 생김. lazy loading이란? 최초에 모든 모듈을 가져오지 않고, 필요한 경우에만 클라이언트(브라우저)에서 모듈을 로드하여 네트워크 트래픽을 줄이고 초기 렌더링 속도를 향상시키는 기술. 필요한 상황 페이지 크기 최적화: 서버에서 클라이언트로 전송하는 HTML의 크기를 줄이고, 필요한 리소스만 브라우저에서 로드하여 초기 렌더링 속도를 더욱 향상. ..
어떤 것이 궁금한지모든 컴포넌트를 lazy loading한다면 어떤 결과가 나올까?왜 궁금한지 React로 개발 시 어차피 클라이언트에서 렌더링이 이루어져 SEO가 중요하지 않다면, 초기 로딩 속도를 더 빠르게 하기 위해 모든 컴포넌트를 lazy loading해도 괜찮지 않을까 궁금하다. lazy loading이란? 필요한 모듈만 동적으로 로드하여 초기 로딩 속도를 개선하고 네트워크 트래픽을 줄이며, 사용자 경험을 향상시키는 방법입니다. 초기 렌더링 시 모든 모듈을 가져오지 않고, 실제로 필요한 순간에만 로드합니다.장점 초기 로딩 시간 감소: 초기 로딩 시 필요한 최소한의 리소스만 로드하여 초기 렌더링 속도를 개선. 네트워크 효율성: 사용자가 필요한 컴포넌트만 로드하므로 네트워크 ..
어떤 것이 궁금한지 Next.js에서 미들웨어를 사용하여 서버 측에서 페이지 접근을 막는 것이 좋을지, 클라이언트 컴포넌트를 사용하여 클라이언트 측에서 페이지 접근을 막는 것이 좋을지 고민된다. 왜 궁금한지 (상황) 서버와 클라이언트 모두 구현 가능하지만, 최선의 방법을 선택하기 위해 각 접근 방식의 장단점을 비교하고 싶다. 미들웨어 사용 장점 보안 강화: 서버에서 직접 관리하므로 클라이언트가 우회하기 어렵다. 중앙 집중 관리: 모든 접근 제어 로직을 한곳에서 관리할 수 있어 유지보수와 일관성이 용이하다. 단점 복잡성 증가: 미들웨어 설정 및 관리가 까다로울 수 있다. 서버 부하: 모든 요청에 대해 미들웨어가 실행되어 서버..
프론트엔드 면접에서 웹 접근성을 얼마나 준수하며 개발을 하냐는 질문을 들었습니다.웹 접근성에 대하여 얼마나 아시죠?다음과 같은 답변을 하였습니다.기본적으로 시맨틱 마크업을 통해서 스크린 리더기가 식별할 수 있도록 하고, 스크린 리더기가 인식하지 못하거나 어쩔 수 없이 를 사용해야 하는 경우에는 role, aria 속성을 사용하여 정확하게 명시합니다.대체 텍스트 제공: alt키보드만으로도 사용할 수 있어야 합니다., , 등은 tab으로 접근이 가능합니다.의미 없는 디자인용 이미지의 경우, alt를 빈칸으로 남겨둡니다. (스크린 리더기가 alt를 읽어주기 때문입니다.)js로 router를 통해 페이지 이동을 구현할 수 있지만, 태그를 사용하여 검색엔진에서 사이트맵 작성 시 태그 기반 트리를 만들 수 있..
네트워크란?⭐ 여러 컴퓨터를 연결한 통신망: 두 대 이상의 컴퓨터들을 연결하고 서로 통신할 수 있는 통신망.(ex) 집에서 컴퓨터, 공유기 스마트폰처럼 서로 다른 장치가 연결되어 있는 것도 네트워크다.네트워크의 종류 LAN(Local Area Network): 근거리 통신망 여러 시스템이 하나의 네트워크 장비(스위치)에 연결된 네트워크 집, 학교 사무실 등 특정 장소에서 가까운 곳에 있는 컴퓨터끼리 연결한 네트워크 컴퓨터와 네트워크장비(공유기)를 연결하는 선을 흔히 랜선이라고 한다. 보통 PC방, 집, 회사에서는 하나의 LAN에 연결되어 있다. 각자의 집에서 게임을 통해 연결이 되어야 한다면 WAN으로 연결해야 한다. WA..
- editor
- Next.js
- 웹 접근성
- s3
- 노션
- Typescript
- 성능최적화
- 프론트엔드
- base64
- 철학
- HTTP
- https
- styled component
- 궁금증
- 선언적 프로그래밍
- 실용주의 프로그래머
- server
- SSG
- NextJS
- 브라우저
- SSR
- CSR
- lazyloading
- 도메인
- React
- Next
- Proxy
- toast
- Section
- IP
- Total
- Today
- Yesterday
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |