본문 바로가기
728x90

웹개발3

Next.js의 화나는 에러 : /_error: /404, /500 React 기반의 SPA 프레임 워크, Next.js는 장점도 많지만 블랙박스가 많다. 나같은 초짜는 그 속내를 알기가 어렵고 리액트를 제대로 배우지 않았거나 websocket의 개념을 정확히 모른다면 쉽게 접근하기 어렵다. 오류메시지 보통은 JSX array에서 key가 없거나 하는 단순한 문제부터 pages 폴더에 component를 넣거나 하는 구성 오류에서 build가 안되는 문제를 경험하는 편인데, 오늘은 당최 종잡을 수 없는 에러가 떠버려서 삽질을 많이 했다. 해결시도1 : 404.jsx 파일 만들기 /404와 /500을 렌더링하는 과정에서 오류가 생겼다는 것이다. 하지만 pages폴더에 404.jsx와 500.jsx파일이 없다. 그래서 stackoverflow를 뒤져보니 404.jsx를 만들.. 2023. 7. 1.
VS code의 html tag 자동완성을 웹에서 구현하기 자동완성 오늘은 어제 만든 코드를 몇 줄 소개하려 한다. VS code를 사용하면 아래와 같은 자동완성 기능을 사용하는데, 손목에 부담이 덜 갈 만큼 정말 편하다. 만약 html을 이용하는 블로그를 사용하거나 html문서를 작성할 일이 많다면 이 기능이 정말 필요한데, 그렇다고 편집기를 깔아서 작성한 다음 복붙을 하자니 그 과정마저도 미친 귀찮음이 지배해버리거나, 아이패드로 작업하는 경우에는 마땅한 편집기를 찾지 못해 일일히 를 쳐야하는 번거로움을 느껴야만 한다. 이걸 1시간만에 만들었는데 지난 1년간 일일히 를 쳐왔던 시간을 생각하면 이런 바보가 어디 없다. 코드 서론을 길게 할 것 없이 코드로 가자. Contenteditable을 적용한 div가 기준인데 input태그나 textarea에서는 안 먹힐.. 2023. 6. 4.
Next.js에서 api를 쓰는 이유 Next api? 웹 개발을 할 때는 Express & EJS를 이용해 프레임워크 없이 사이트를 만들곤 한다. 그런데 최근 SPA (single page application)의 장점을 깨닫고 한 달쯤 전부터 Next라는 프레임워크를 사용해보고 있는데, 풀리지 않는 궁금증 중 하나가 왜 api를 사용하냐? 하는 것이다. 예를 들면 json 파일을 읽거나 쓸 때, 그냥 fs 쓰면 안되나? 싶은데 그게 안된다는 걸 오늘 정확히 알았다. Client vs Server 구글의 힘을 빌려 개발에 달려들다 보면 기초 지식이 많이 부족해지는데, 그 중 가장 중요한 개념이 client와 server를 구분하는 것이다. Client와 Server는 각각 프론트, 백으로 생각해도 되는데 이게 단순히 디자인이나 웹 구성의 .. 2023. 5. 27.
728x90