개발/Web 8

구름 IDE에서 Next.js 환경 구축하기 (사지방)

✅ 구글에 검색해봐도 어떻게 하는지 나와있지 않아 직접 작성하였다. 도움이 되었으면 좋겠다! 구름 IDE에 Next.js 프레임워크를 사용해 프로젝트를 만들어보자. 그대로 따라하기만 하면 잘 되게끔 상세히 적어놨으니 차근차근 따라와보자! 1. 컨테이너 생성 먼저 구름 IDE에서 컨테이너를 만들어준다. 이때 템플릿은 'HTML/CSS/JS 기본 프로젝트' 로 설정했다. 어차피 package.js 같은 파일들은 직접 만들어줄 것이기 때문에 'React' 템플릿을 따로 사용하지 않았다. 2. 기본 파일 삭제 기존에 존재하는 html, css, md 파일을 모두 삭제해 클린한 상태로 만든다. 3. NVM 설치 NVM은 node 의 버전관리를 위해 필요하다. NVM 설치를 위해 다음과 같이 명령어를 입력해주자. ..

개발/Web 2024.03.16

Prettier HTML 태그 자동 줄바꿈 해제하기

VS code의 유용한 코드 정리 확장프로그램인 Pretter를 쓰다가 불편함이 생겼다. 그리 길지도 않은 태그를 지맘대로 줄바꿈 정리해버리는 문제였다. 해결방법은 생각보다 단순했다. 우선 익스텐션 모드에서 Prettier를 찾은 다음, 프리티어 확장프로그램의 설정(톱니바퀴) 아이콘을 클릭한다. 그 다음, 우상단을 잘 보면 setting.json파일을 여는 Setting 아이콘이 있다. 이걸 클릭해주자. 그럼 여러 세팅들이 나올텐데, 마지막에 "prettier.printWidth": 200 를 추가해주면 된다. 200줄이 넘어갈때만 줄바꿈 정리해주겠다는 뜻이다.

개발/Web 2022.11.22

[MySQL] 비번 맞게 쳤는데 계속 틀렸다고 할 때 해결 방법

또 시작된 맞왜틀이다. 맞는데 왜 틀려? 코드 상에서 MySQL에 접속했을 때는 분명 접속이 잘 됐는데, 콘솔에서 하려고 하니까 로그인이 안되는 신기한 현상이다. ERROR 1045 (28000): Access denied for user 'root@'localhost' (using password: YES) 이 에러 메시지는 로그인 비밀번호를 잘못 입력했을 때 나온다. 비번을 잊어버렸을 때 또는 로그인이 안될 때 SQL에 접속할 수 있는 방법을 정리해본다. STEP 1. cmd를 관리자 권한으로 실행 관리자 권한으로 실행해주도록 하자. STEP 2. cmd에서 MySQL의 bin 폴더가 있는 곳으로 이동하기 STEP 3. MySQL 서비스 중지시키기 net stop mysql STEP 4. 인증 스킵 ..

개발/Web 2022.09.03

[React 공부] Typescript를 쓰는 이유와 기능

자바스크립트는 관대하다. 개발자가 Type을 지정하지 않아도, Undefined된 오브젝트를 사용하려고 해도 '일단은' 군말없이 받아준다. 그러나 사소한 규칙 위반이 쌓여 도저히 다룰 수 없을 지경이 되면 문제는 그 때부터 시작된다. 테스트 단계에서는 됐는데 배포하니까 사이트가 터졌는데요? 왜 사용자 전화번호가 number로 넘어온건가요? 사용자 이름이 undefined로 출력되는데 어떡하죠? ... 바닐라 JS는 컴파일 전에 코드를 검사하지 않는다. 따라서 우리가 무언가 잘못됐음을 직감하는 시기는 실제로 사이트가 돌아가는 와중일 가능성이 높다. 그리고 자료형(Type) 등을 엄밀하게 따지지 않는다는 점 때문에 개발 단계부터 무언가 잘못 쓰기 시작하면 문제를 알아채는 시기는 프로젝트 규모가 커진 이후가 ..

개발/Web 2022.08.25

MySQL 설치 에러: Can not perform keyring migration

mysqld: Can not perform keyring migration : Invalid --keyring-migration-source option. MySQL 설치 방법 포스팅을 쓰다가 이것저것 건들다보니 에러가 발생해버렸다. 에러 해결법을 구글링한 결과다. ⚠️ 주의사항!! 아래 방법으로 진행 시 data 폴더를 삭제하는 경우 데이터가 날아갈 수 있다. 가급적 설치 단계에서 오류가 발생한 경우에 이 방법을 따르고, 아니라면 데이터 백업을 해둔 후 시도하도록 하자. [*8월 19일 추가] 'net start mysql' 명령어를 한번 시도해보자. MySQL 프로세스가 중지 상태일 때 저 문제가 뜨는 것 같기도 하다. 1. MySQL 설치경로 복사 2. cmd 관리자 권한으로 실행 3. 'MySQL..

개발/Web 2022.08.19

[Windows] MySQL 압축파일(zip) 설치 방법

개요 가장 널리 사용되고 있는 오픈소스 DBMS인 MySQL을 설치해보자. 설치부터 cmd를 통해 DB에 접속하는 과정까지 함께 다뤄보려 한다. 설치 과정 MySQL 다운받기 1. MySQL 공식 다운로드 페이지 접속 https://www.mysql.com/downloads/ MySQL :: MySQL Downloads MySQL Cluster CGE MySQL Cluster is a real-time open source transactional database designed for fast, always-on access to data under high throughput conditions. MySQL Cluster MySQL Cluster Manager Plus, everything in My..

개발/Web 2022.08.18

[React 공부] Styled component 알아보기

개요 "Use the best bits ES6 and CSS to style your apps without stress" 라는 문구가 눈에 띈다. ES6와 CSS가 어떻게 한 문장에서 함께 쓰일 수 있는 것일까. 그것은 바로 'CSS in JS', 즉 JS 안에서 스타일의 수정을 즉시 가능하도록 하는 Styled Component의 매커니즘 때문이다. 일반적으로 이전까지의 웹 개발 방식은 HTML과 CSS, JS 모듈을 각각 다른 파일에 분리하여 두는 것이 최선의 방책으로 여겨졌으나, React를 필두로 한 컴포넌트 기반의 모던 개발 방식이 인기를 끌면서 한 컴포넌트에서 HTML, CSS, JS를 모두 해결할 수 있는 개발 방식이 주류가 되었다고 한다. Styled Component의 기본 문법을 보며..

개발/Web 2022.08.17