본문 바로가기

분류 전체보기346

Next.js - Styled-components 적용전 렌더링 되는 이슈 요즘 한창 Next.js 프로젝트를 만드는 중이다. Styled-components 가 첫 렌더에만 적용이 되고 새로고침을 한 후에는 적용이 안되는 이슈가 있었다. 열심히 구글링을 해본 결과, Next.js가 SSR로 동작하기 때문에 style 적용되기 전에 렌더링이 되어서 이슈가 발생한 것을 알게 되었다. 그렇기 때문에 서버로 요청이 들어오면 가장 먼저 실행하게 만들어야 한다. 해결책을 찾던 새발자는 _app.tsx 와 _document.tsx 라는 서버 파일의 존재를 알게 되는데... Next.js - Styled-components 적용전 렌더링 되는 이슈 우리는 빨간 박스에 있는 부분에서 밑작업을 할 것이다. 위치를 잘 알아 놓자. 1. 일단 pages 폴더 안에 _app.tsx 를 _documn.. 2023. 4. 16.
CSS - display 속성 inline / block / inline-block 이란 display: inline inline 속성은 텍스트 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. 대표적인 태그는 이 있다. (텍스트 크기만큼만 공간을 계산하니 레이아웃 관련 속성은 적용이 안된다.) width / height 적용 불가 margin / padding-top / bottom 적용 불가 line-height 적용 불가 , , , , , , , , , , display: block block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 가 있다. width, height, margin 등 layout 관련 속성 지정가능 , , - , , , , , , , display: inline-block inline-block 속성은 inline .. 2023. 4. 13.
Next.js - next dev / build / start 명령어 및 포트 변경하기 요즘은 Next.js 를 공부하는 중이다. 최근까지 CSR 방식을 사용해 개발하며 느꼈던 단점들을 SSR 과 SSG 방식을 통해 보완할 수 있게 되어 매우 들떠있다. Next.js 를 시작하며 명령어가 너무 헷갈렸다. 정확한 명령어를 알고 사용하기 위해 정리해보았다. dev - Runs next dev to start Next.js in development mode // 디벨롭 모드 시작하기 build - Runs next build to build the application for production usage // 프로덕션 빌드할 떄 start - Runs next start to start a Next.js production server // 프로덕션 서버 시작하기 - next dev 는 so.. 2023. 4. 7.
웹 최적화 - 구글폰트 워닝 "The resource was preloaded using link preload but not used within a few seconds from the window's load event." 지난번 폰드 다운로드 속도를 해결했더니 또다른 워닝이 나왔다. 지난번에 해결했던 구글 폰트 최적화 ↓ ↓ ↓ 웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST) 웹 사이트의 성능을 측정해 보았더니 구글 폰트를 다운 받는데 시간이 꽤 걸렸다. 브라우저 렌더링을 할 때, 폰트 다운로드가 끝날때까지 기다렸다가 다음 태그를 읽어와서 그런 것 같았다. 참 devbirdfeet.tistory.com 1. 첫번째 이슈 The resource https://fonts.googleapis.com/css2?family=Noto+Sans+KR was preloaded using link preload but not used within a few seconds from the window's load event. Pl.. 2023. 3. 27.
JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 JavaScript 를 공부할 때면 알아야할 호이스티와 클로저의 개념 여러번 숙지할때마다 조금 더 깊이 들어가게 된다. (다 - 다익선) 오늘도 의식의 흐름에 따라 정리를 해보았다. JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 스코프 코드를 짤 때, 모든 시작은 변수를 선언하고 값을 넣는 것에서 출발한다. 근데 변수가 인기가 많아서 이곳 저곳 불려다니면 혼선이 생길 것이다. 그래서 스코프라는 개념으로 변수가 돌아다닐 수 있는 바운더리를 정해두었다. 글로벌 레벨 스코프는 코드 이곳저곳을 누빌 수 있다. 함수 레벨 스코프는 function() { 함수 안 } 에서만 누빌수 있다. 블록 레벨 스코프는 { 요런 블록 안 } 에서만 뛰놀 수 있다. (if 문이나 for .. 2023. 3. 17.
npm 실행오류 - Cannot find module 'are-we-there-yet' nvm 을 설치해서 npm 버전을 바꾸려고 npm install 하다가 다음과 같은 에러를 만났다. 난 are-we-there-yet 을 설치한적도 없었는데 왜 이 모듈이 없다고 하는 걸까 are-we-there-yet 모듈은 npm log 를 구성하고 있는 디펜던시중 하나이다. 즉, node 의 디펜던시에 문제가 있어 이런 에러가 뜨는 것이다. 인터넷에 찾아보니 여러가지 해결방법이 있었지만 나와는 맞지 않아 직접적으로 찾아해맸다. nvm 에 설치된 node 버전과 현재 나의 node 버전이 맞지 않아 일어나는 문제로 판단하였고, (그렇기 때문에 디펜던시가 서로 달랐던 것으로 추측한다.) nvm 디렉토리로 직접 들어가 잘못 설치된 버전이 있어 그 폴더를 삭제해 주었다. 다시 npm install 을 해보.. 2023. 3. 16.
JavaScript - 동기와 비동기의 쉬운 이해 Updated 03/16/23 항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다. 요청과 응답 HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다. 통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다. 요청 - 클라이언트 → 서버 응답 - 서버 → 클라이언트 동기와 비동기 동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 비동기는 동시에 병렬적으로 핸들링하는 방식이다. 자바스크립트는 싱글쓰레드 언어이다. 싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다. 하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다. 멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 .. 2023. 3. 9.
JavaScript - 유용한 정규식 예제들 내가 보려고 만든 유용한 정규식 예제들 🤩 정규식은 사랑입니다 💝 (계속 업데이트 해서 채워나갈 예정) JavaScript - 유용한 정규식 예제들 URL 검사 const validURL = (url: string): boolean => { if (!url) { return false; } const regex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/g; return regex.test(url); }; 이메일 검사 const validEMAIL = (email: string): boolean => { if (!email) { return false; } const regex = /^([\w._-])*[.. 2023. 3. 2.
JavaScript - 재귀함수 만들기(feat. 반복문 비교) 프로그래머스 코테 문제를 풀어보다가 while 문을 사용한 함수를 → 재귀함수로 바꾸어 한번 더 풀어보았다. 처음에는 어렵지만 유형을 익히고 이해하게 될수록 참 재미있어 지는 것 같다. JavaScript - 재귀함수 만들기(feat. 반복문 비교) 문제를 간단히 설명해보면 다음과 같다. (출처 : 프로그래머스 - 콜라문제) 콜라 빈병 2개를 가져가면 → 새것 1병으로 교환해준다. 나는 총 빈병 20개를 가지고 있다. → 그럼 새것 10병을 받을 것이다. 10병을 그자리에서 마신다 → 그럼 새것 5병을 받을 것이다. 5병을 그자리에서 마신다 → 그럼 새것 2병을 받을 것이다. + 빈병 1개가 남을 것이다. 2병을 그자리에서 마신다 → 그럼 새것 1병을 받을 것이다. 새병 1개 마셔버리고 + 아까있던 빈병.. 2023. 3. 1.
반응형

티스토리툴바