본문 바로가기

전체 글

 (49)
Tailwind CSS에서 rem 단위를 px단위로 커스텀하기, 타입 에러 수정 프로젝트를 하면서 Tailwind CSS를 도입하기로 했다. 스타일 파일을 따로 만들거나 클래스 네임을 지정하지 않는 점은 참 간편한 것 같다. 근데 Tailwind에서는 rem단위를 기본적으로 지원하고 있었다. https://tailwindcss.com/docs/margin Margin - Tailwind CSSUtilities for controlling an element's margin.tailwindcss.com 이렇게 기본적으로 m-1 은 0.25rem 이고 m-2는 0.5rem 인 식이다. 반응형 구현에는 좋지만 정확하게 px 단위로 맞춰줘야 하는 경우도 있다. 특히 font-size도 일정 구간별로 지원하고 있어서 불편하다. px 단위로 정확하게 표현하고 싶은 경우에는 arbitrary v..
Next.js 14, React 18의 streaming과 suspense을 이해해보자 Next.js을 공부하면서 또 반한 부분이 있는데 서버 측에서의 data fetching이다. 리액트에서는 클라이언트에서 API에 데이터를 요청하면 서버를 호출한다. 따라서 사용자가 페이지에 접속하면 로딩 상태인 것을 알 수 있다.하지만 서버컴포넌트에서는 서버에 호출을 하기 때문에 API가 클라이언트에 노출되지 않는다. 따라서 DB와도 직접 통신할 수 있다. 그리고 React 18 버전부터 streaming과 suspense를 지원하고, Next.js가 이것을 활용해서 loading 상태를 간편하게 설정해줄 수 있게 되었다. 뿐만 아니라 한 페이지에 여러 API를 호출할 때도 먼저 완료된 작업부터 렌더링을 수행할 수 있게 했다. 1. streming이란?https://developer.mozilla.or..
NextJS 14의 렌더링 방식 (Hydration)🍀 NextJS는 React의 프레임워크로, 기본적으로 CSR(클라이언트 사이드 렌더링)을 지원하는 리액트와는 다르게 SSR(서버 사이드 렌더링)을 지원하기 때문에 검색엔진 최적화에 유리하고, 초기 렌더링 속도가 빠르다. 그밖에도 서버 데이터 패칭,캐싱 등 최적화를 너무 쉽게 할 수 있어서 성능을 대폭 향상시킬 수 있다. 오늘은 CSR과 SSR을 자세히 비교해보고 NextJS 14버전에서 지원하는 Hydration까지 알아보자. 1. CSR과 SSR 1) CSRCSR(클라이언트 사이드 렌더링)은 클라이언트에서 모든 렌더링을 담당하는 것을 말한다. 리액트는 기본적으로 CSR을 지원한다. 따라서 초기 렌더링 시에 자바스크립트를 다운받고 UI를 로드한다. 장점부드럽고 빠른 화면 전환 (깜빡임 이슈 없음)서버에 부..
네이버 부스트캠프 9기 1차 문제해결력 테스트 후기 네이버 부스트캠프 9기 모집에 지원했다. 웹모바일로 지원했고 지원서를 열심히 썼다.네부캠은 코테가 두번이라 나름대로 열심히 준비했는데 1차는 예상보다 훨씬 쉽게 나왔다. 우선 CS 8문제, 프로그래밍 3문제였던 것 같다. 1차 CS는 엄청 쉽다. 비전공자도 빠르게 풀 수 있는 수준이다. 프로그래밍 문제도 쉬웠는데 아무래도 구현, 문자열, 자료구조 위주로 풀면 좋을 것 같다. 근데 한가지는 복붙이 안되니 시간이 좀 오래걸릴 수 있다. 어렵지는 않은데 조금 시간이 걸리는 문제가 나오는 편이다.  1번유형 : 구현, 문자열난이도 : 실버 3정도 그냥 하라는 대로 하면 되는 구현 문제. 예외처리를 고려하면 좋을듯. 2번유형 : 문자열난이도 : 브론즈 엄청 쉬운 문제 3번유형 : 자료구조(해시)난이도 : 브론즈 ..
카카오 테크 부트캠프 1기 코테 후기 카카오에서 첫 부트캠프 대상자를 모집하였다. 풀스택으로 지원하고 6월 17일 코테를 봤다.나는 코테 경험이 별로 없어서 좀 긴장되었다.문제는 4문제에 1시간 40분동안 푸는 거였다. 시간이 좀 빡빡하다 싶었는데 난이도가 어려운 편은 아니어서 잘하는 분들은 시간이 부족하지는 않을 것 같다.그리고 대체로 문제가 길거나 요구사항이 복잡하지 않고 깔끔한 편이다. 아참 시험 시작 전에 핸드폰으로 녹화를 해야 했는데 초기 설정 단계에서 모바일 감독 설정 단계가 없어서 의아했지만 그냥 응시했다. 그러다가 시험 도중에 모바일 감독 요청이 와서 그제서야 부랴부랴 설정했다. 이거 이외에도 불편한 점이 몇가지 있었기 때문에 좀 짜증이 났다. 1기라서 그런건지 아직 시스템이 제대로 갖춰지지 않은듯했다. 1번유형 - 완전탐색난..
2024년 상반기 회고 벌써 오늘이 2024년 상반기의 마지막날이다. 시간이 이렇게 빠르다니!아쉬운 마음으로 회고를 써볼까 한다. 1. 코테 준비그동안 미뤄왔던 코테 문제풀이를 꾸준히 연습했다. 정확히 말하자면 3월 공채 이후로 강제로 다시 풀게 되었다.혼자서 하면 지지부진할 것 같아 스터디를 만들어서 계속 아침마다 풀이를 하고 있다. 확실히 잘하는 분들과 함께하니 문제 접근 방법도 배울 수 있었고 효율적인 메소드도 많이 알 수 있었다. 그리고 무엇보다 문제를 풀고 나서 다른 사람의 풀이를 보는 습관이 생겼다는 점이 좋다.프로그래머스는 특히 좋아요가 많은 풀이를 볼 수 있어서 유용한데 백준은 그런 기능이 없어서 아쉽...어쨌든 지금도 잘하지는 못하지만 확실히 구현 실력이 늘었고 여러 유형에 익숙해졌다. 통과하는 코테도 생겼다...
TCP/IP의 4계층 이해하기 TCP/IP는 네트워크 통신에서 핵심적인 역할을 하는 프로토콜 집합이다.HTTP/HTTPS 를 비롯한 많은 프로토콜이 TCP/IP에서 동작한다. 나는 이해가 어려웠기 때문에 나중에 복습을 위해서라도 정리를 해본다! 1. TCP/IP 란? 사람 간의 대화처럼 컴퓨터와 네트워크 간의 통신에도 일정한 규칙이 필요하다. 그리고 그 규칙을 프로토콜이라고 한다. 특히 인터넷과 관련된 모든 프로토콜들의 집합을 TCP/IP 라고 한다. 2. TCP/IP의 4계층 TCP/IP에서의 통신은 4개의 계층으로 구분지을 수 있다. 이렇게 프로토콜을 계층화하면 어디에서 에러가 발생했는지 파악하기 쉽고 설계도 쉬워지기 때문에 효율적이다. 따라서 애플리케이션 계층, 전송 계층, 인터넷 계층, 네트워크 액세스 계층으로 구성된다. 데이..
TCP의 3way handshake 과정 TCP는 웹 브라우저가 서버와 연결할 때 신뢰성 있게 연결해주는 프로토콜이다. 신뢰성을 위해 흐름제어, 혼잡제어를 수행한다. 이러한 것을 제어하는 정보는 TCP프로토콜의 Header 부분에 포함되어있다. 또한 Header 를 제외한 TCP가 실을 수 있는 데이터 크기를 세그먼트(segment)라고 한다. 통신 전에 송신 측과 수신측이 잘 연결되었는지 서로 확인 후에 통신하게 되는데 3단계를 거치기 때문에 이 과정을 3way handshake라고 한다. 1. 먼저, 송신자가 수신자에게 SYN을 날려 통신이 가능한지 확인한다. 이 때 포트가 열려있어야 한다. 2. 이후 수신자가 송신자로부터 SYN을 받고 SYN/ACK를 보낸다. 여기서 ACK는 응답을 받았다는 의미이다. 3. 이후로 송신자가 수신자로부터 S..

티스토리툴바