프론트 개발 블로그

+ 추가 글 티스토리 로그인 문제로 오시는 분들이 많은 것 같아 추가 글 올립니다. 대게 티스토리 로그인이 안되는 경우 브라우저 캐시 문제 입니다. (브라우저에 다른 계정이 이미 로그인 되어 있거나 하는 경우, 사용자는 내가 이미 로그인 되어 있는 지 모름) 크롬 브라우저를 사용하고 계시는 분들은 크롬 브라우저 우 클릭 '새 시크릿 창'으로 사이트에 접근하여 로그인 해보세요! 티스토리 카카오 계정 로그인 문제 때문에 요 몇일 진심으로 화가 났었다. 티스토리 메인 화면 오른쪽 상단에 [시작하기] 버튼을 클릭하면 [카카오 계정 로그인], [티스토리 계정 로그인] 버튼이 나오는 화면으로 이동하게 된다. 해당 페이지에서 [카카오 계정 로그인] 버튼을 누르면, 로그인 페이지가 아닌 블로그 생성 페이지로 이동하게 ..

package.json 작성 중 나타난 에러 String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$". name 에 들어간 대문자때문에 생긴 에러였다. name 작성 할 때 대문자 그리고 띄어쓰기가 허용되지 않기 때문에 소문자로 작성하고 띄어쓰기는 '-' 하이픈으로 대체한다. 참고! package.json 파일에 NPM 규칙을 적용하기 위해 발생하는 에러라고 한다. stackoverflow.com/questions/48694816/vscode-package-json-string-does-not-match-the-pattern

Gulp 작업 환경 셋팅중에 만난 ReferenceError: primordials is not defined in node 구글링 검색해보니 이미 해결 방법이 나와있었다. nykim.work/70 Gulp3 버전은 Node 12 버전에서 제대로 동작하지 않는다고 한다. 방법1)Gulp4 로 업그레이드 하거나 방법2)Node 를 다운그레이드 하라는 방법이 나와 있는데 내가 사용하고 있던 작업 환경은 Gulp 3.9.1 / Node 14.15.4 였다. 방법3) 1. 기존에 있던 node_module 폴더 삭제 2. npm-shrinkwrap.json 파일 생성 후 동일한 디렉토리에서 코드 작성 : { "dependencies": { "graceful-fs": { "version": "4.2.2" } } ..

기본적으로 '제 3자' 를 뜻하는 단어. 이 '제 3자'가 어떤 분야의 제 3자를 의미하는지에 따라 의미가 나뉜다. 예를 들어, 프로그래밍 개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크 등을 서드파티로 볼 수 있다. 서비스와 사용자 사이에 서드파티는 응용 프로그램, 애플리케이션, 웹 서비스로 볼 수 있다.

Next.js 를 설명하는 글들을 찾아보면, Next.js 에서 어떻게 페이지 이동을 하는 지의 대한 튜토리얼이 꼭 들어가 있다. 왜 그러한 튜토리얼이 들어가 있는 지 알아보기 위해 SSR 그리고 CSR, Next.js 구동 방식에 대해 공부해보자! SSR(Server Side Rendering, 서버 사이드 렌더링) 서버 사이드 렌더링이란, 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식을 말한다. 이를 통해 사용자는 바로 렌더링되는 화면을 보기 때문에 사용자 경험이 높아진다. 장점 1. 검색 엔진 최적화 가능 2. 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다...

1) Next.js 란? Next.js 는 React 프레임워크로 생산을 위해 만들어졌습니다. 여기에서 말하는 생산이란 프로덕션, 즉 실제 서비스를 운영하는 환경을 말합니다. The React Framework for Production 프로덕션에 필요한 기능, - 하이브리드 정적 및 서버 렌더링 - TypeScript 지원 - 스마트 번들링 - route 프리 패치 등 최고의 개발자 경험을 제공하고, config(구성)이 필요하지 않습니다. 왜 Next.js 인가요? 이미지 최적화 : 인스턴트 빌드를 통한 및 자동 이미지 최적화 Interantionailzed (국제적인 라우팅) : 빌트 인 도메인 및 서브 도메인 라우팅 및 자동 언어 감지 Next.js Analytics : 실제 방문자 데이터 및 페..

Next.js 설치 시 'package.json' 에 'scripts' 를 추가하게 된다. 이 스크립트는 애플리케이션 개발의 여러 단계를 참조한다. - 'dev' - 'next dev' 개발 모드에서 Next.js 를 시작하는 실행 - 'build' - 'next build' 프로덕션 용도로 애플리케이션을 빌드하는 실행 - 'start' - 'next start' Next.js 프로덕션 서버를 시작하는 실행 추가 내용 (210413 추가) - next dev 커맨드에는 source map 과 hot code reloading 이 제공되어 디버깅 시 매우 유용하다 - build, start 명령어는 운영 버전의 사이트를 로컬에서 배포하는데 사용해야 하는 명령어로 최종 사용자들에게 유익하지 않을 source..

The Next.js Handbook 내용 스터디 https://www.freecodecamp.org/news/the-next-js-handbook/ 번역 : https://coffeeandcakeandnewjeong.tistory.com/5#ch-7 Q. 우측 하단 번개 아이콘은 무엇인가요? 페이지의 우측 하단의 번개 모양 아이콘이 보이시나요? 마우스(Hover)를 가져가면 "Prerendered Page"라고 뜹니다 : 1. 이 아이콘은 개발 모드에서만 볼 수 있다. 2. 이 아이콘은 자동 정적 최적화에 적합한 경우 이를 알려주는 표시이다. 3. 자동 정적 최적화란? 3-1. Next.js는 리액트를 사용할 때 정적 웹 사이트, 즉 SSR(Server Side Rendering)을 쉽게 할 수 있도록..

문제 리액트에서 컴포넌트 모듈 가져올 때 경로 설정하는 방법. depth가 깊어질수록 경로 설정이 불편하기 때문에 사용. 해결 jsconfig.json (타입 스크립트를 사용한다면 tsconfig.json) 파일을 생성하여 옵션을 작성하면 된다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } create-react-app.dev/docs/importing-a-component/#absolute-imports

photoshop cc를 사용 후 가장 불편한 점은 디자이너들이 대지 색상을 흰색으로 깔아서 주는 것 ㅠㅠ 잊지 않기 위해 기록한다. (하필 포토샵을 한글로 설치하여서 더 헷갈림) 1. 레이어에서 포토샵의 폴더를 선택한 후 2. 한글일 경우 창 > 속성 > 대지 영역에서 대지 배경색을 투명으로 변경하면 된다. 영문일 경우 Advanced Options 에서 Bacgkround Contents 를 Transparents 를 선택하면 된다.