![]()
서명 : 오늘부터 개발자 저자 : 김병옥 출판 : 천그루숲 발행 : 2021.11.20. 이 책은 내가 블로그를 시작할 수 있게 도움을 준 책이다. 프론트엔드 개발자가 되기로 마음을 먹었으나, 독학으로 공부를 하다보니 앞길이 막막하였다. 그러다가 우연히 이 책을 알게 되었고 어떤 방식으로든 공부한 것을 기록하라는 김병옥 작가님의 말씀에 영감을 받았다. 그래서 내가 공부한 것을 기록하자는 마음으로 블로그를 만들었고, 지금 현재 300개 이상의 글을 작성한 블로그가 되었다. 현재 당신의 나이나 IQ, 적성이 어떻든 간에 방향을 잘 잡고 6개월 정도 꾸준하게 공부한다면 누구나 개발자가 될 수 있습니다. 내가 해보고 싶은데, 다른 사람에게서 허락이나 이유를 찾을 필요도 없습니다. 당신이 해보고자 마음먹었으면 열..
![]()
서명 : 역사의 쓸모 저자 : 최태성 출판 : 다산초당 발행 : 2019.11.22. 친구의 추천으로 이 책을 읽으면서, 역사에 대해 매우 무관심이였던 나에게 큰 교훈을 주었다. 과거의 사건들이 현재의 삶을 어떻게 형성했는지 살펴보고, 앞으로 어떻게 살아갈 것인지 돌아보게 해주었다. 앞으로 역사를 다른 시각으로 새롭게 바라보겠다. 역사는 단순한 기록이 아닌, 우리의 현재와 미래에 영향을 끼칠수 있는 퍼즐이라고 생각하며 살아가고자 한다. 우리는 모두 언젠간 죽습니다. 한 번뿐인 인생, 한 번뿐인 젊음을 어떻게 살 것인지 고민하지 않는다면 역사라는 무대에서 어떤 역할을 할 수 있겠어요? 저는 늘 사람들에게 역사에 무임승차하지 말라고 이야기합니다. 우리가 앞선 시대의 사람들에게 뒤이어 이 땅에서 살아갈 사람들..
![]()
에러 페이지와 환경 변수 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 에러 페이지 - 이번엔 에러 페이지를 만들어 봅시다. - #1. Gnb.js에 들어가 다음과 같이 입력해줍니다. → Contact 페이지는 만들지 않아서 에러 페이지가 발생하는데, 나오는 페이지는 기본으로 들어가 있는 페이지입니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = useRouter(); let activeItem; if (router.pathname === "/") { activeItem = "h..
![]()
0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로딩 페이지 제작 - 화면이 넘어갈 때, 사용할 로딩 페이지를 만들어보겠습니다. - #1. index.js 에 들어가 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import { Divider, Header, Loader } from "semantic-ui-react"; export de..
![]()
Dynamic Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) - 사용된 API 1. Dynamic Routes 배우기 전 - 이젠 api를 통해서 상품을 불러오겠습니다. - #1. api 호출을 위해서 VScode 터미널에 npm i axios를 입력하여, 설치해줍니다. - #2. 이제 index.js에 다음과 같이 입력합니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.m..
![]()
페이지 레이아웃 생성 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 페이지 레이아웃 생성 - 페이지 레이아웃을 생성해봅시다! - #1. 생성하기 전에 먼저 다음과 같은 코드를 VScode의 터미널에 입력해, 시맨틱 UI react를 설치해줍니다. → 이를 이용해서 레이아웃을 작업할 예정입니다. npm install semantic-ui-react semantic-ui-css - #2. 그 후, 만들었던 next 폴더에 src 폴더를 생성한 뒤, 그 폴더 안에 component 폴더를 더 생성합니다. - #3. component 폴더 안에 Top.js 파일과 Footer.js 파일을 생성합니다. - #4. Top.js 파일에 다음과 같이 입력해줍니다. import ..
자랑하지 마라. 시기하지 마라. 매사 겸손하게 살아라.
![]()
Next.js 설치 1. Next.js 설치 - 이제 Next.js를 설치해봅시다! (Next.js 사이트를 참고하였습니다) - #1. 먼저 원하는 폴더를 생성 후, 터미널에 들어가 다음과 같이 입력해줍니다. → 여러 선택사항이 나오는데, 원하는 것을 선택하면 됩니다. npx create-next-app@latest - #2. 설치가 끝났으면 VScode로 들어가 다음과 같이 입력하여 접속해봅시다. → 브라우저에 localhost:3000을 입력하면, Next.js 페이지가 나오게 됩니다! npm run dev - #3. index.js에 들어가 다음과 같이 수정해보고 다시 들어가봅시다. → 수정되어 출력되었음을 확인할 수 있습니다. import { Inter } from "next/font/google..
![]()
Next.js 1. Next.js란? - Next.js는 React 기반의 웹 애플리케이션을 쉽게 개발할 수 있게 도와주는 오픈 소스 JavaScript 프레임워크입니다. - 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 지원합니다. 2. 특징 및 장점 - 서버 사이드 렌더링(SSR) - 페이지를 서버에서 렌더링하여, 초기 로딩 속도를 향상시키고 검색 엔진 최적화를 개선합니다. - 정적 사이트 생성(SSG) - 빌드 시점에 미리 페이지를 생성하여, 성능을 향상시킵니다. 특히 정적 컨텐츠에 적합합니다. - API 라우팅 - 페이지 간의 이동이 간편하며, 파일 시스템을 기반으로한 경로 매핑이 가능합니다. - 개발 환경 간편화 - 자동 리로딩, 코드 스플리팅, 모듈 사티일링 등..
![]()
DELETE 1.DELETE - 이번엔, DELETE(삭제)를 해봅시다. - #1. 기존에 입력했던 app.js 코드 중 app.get(...) 밑에 다음과 같이 입력해줍니다. (저번 글 바로가기) // 데이터 삭제 app.delete("/wise-sayings/:id", async (req, res) => { // 요청을 보냄 const { id } = req.params; const [rows] = await pool.query("SELECT * FROM wise_saying WHERE id = ?", [ id, ]); // 없는 id를 요청하는 경우 if (rows.length == 0) { res.status(404).send("not found"); return; } const [rs] = aw..
![]()
PATCH 1. PATCH - 이번엔 PATCH 즉, 수정을 해봅시다. - #1. 저번에 입력한 app.js에서 app.get(...) 밑에 다음과 같이 코드를 추가해줍니다. (저번 글 바로가기) app.patch("/wise-sayings/:id", async (req, res) => { // 요청을 보냄 const { id } = req.params; const { author, content } = req.body; const [rows] = await pool.query("SELECT * FROM wise_saying WHERE id = ?", [ id, ]); if (rows.length == 0) { res.status(404).send("not found"); return; } if (row..
![]()
POST 1. POST - Postman으로 POST를 진행해 봅시다. - #1. Create Collection을 클릭한 후, POST로 다음과 같이 입력합니다. → 또한, URL을 Express.js로 만들었던 http://localhost:3000/wise-sayings/라고 입력합니다. (만들었던 코드 바로가기!) { "content" : "나는 행복하다.", "author" : "미상" } - #2. 그 다음, send 버튼을 클릭하면, 에러가 뜹니다? → 원래 코드에서 app.post를 작성하지 않았기 때문입니다. - #3. app.js 코드에 들어가, 15줄인 const app = express() 밑에 app.use(express.json());을 입력 후, app.get(...) 밑에 다..
![]()
Postman 0. 시작하기 전에.. - 시작하기 전에 Express.js를 공부하고 오시면, 더 도움됩니다! (바로가기) 1. Postman - Postman은 API 개발 및 테스트를 위한 협업 도구입니다. - API를 만들고, 테스트하고, 문서화하며, 공유하기 위해 사용됩니다. - 사용자가 HTTP 요청을 만들어 보내고, 응답을 확인하며, API 엔드포인트 및 메소드를 테스트할 수 있는 플랫폼을 제공합니다. 2. 사용방법 - #1. 먼저 홈페이지에서 Postman을 다운로드 받습니다. (다운로드 사이트로 이동) - #2. 다운로드 받았다면, 프로그램에 들어가 로그인하면 다음과 같은 화면이 나옵니다! (필자는 구글로 로그인했습니다.) - #3. 그 다음, Workspace 메뉴에 들어가서 Create..
![]()
데이터 분석 과정 1. 데이터 분석 과정 - 데이터를 분석하는 목적은 데이터가 포함하고 있는 유용한 정보를 파악하여, 현실 문제를 해결하기 위함입니다. - 데이터 분석 과정은 다음과 같습니다. - 1단계 : 문제 정의 및 계획 - 문제가 명확해야 그 문제를 해결하기 위한 데이터가 어떤 것인지를 추정할 수 있습니다. - 어떤 분석 기법을 적용할 지도 계획할 수 있습니다. - 문제 정의가 구체적이고 명확할수록 데이터 분석이 방향을 잃지 않고 효과적으로 진행할 수 있습니다. - 2단계 : 데이터 수집 - 문제가 정의되면, 그 문제를 해결하기 위해 필요한 데이터가 무엇인지 파악하고, 데이터를 수집하는 과정을 거칩니다. - 데이터는 다양한 소스에서 나올 수 있으며, 내부 데이터베이스, 외부 데이터 제공업체, 웹 ..
![]()
빅데이터(Big Data) 1. 빅데이터(Big Data) - R프로그래밍을 배우기 전에, 빅데이터에 대해서 알아보겠습니다. - 빅데이터란 기존의 데이터베이스 관리 도구의 데이터 수집, 저장, 관리, 분석 역량을 넘어서는 데이터를 말합니다. - 빅데이터는 주로 세 가지 특성에 기반하여 정의됩니다. 이러한 특성을 3V라고 합니다. 2. 빅데이터의 특성 (3V) - 규모(Volume) - 빅데이터는 대량의 데이터를 다룹니다. 전통적인 DB 시스템에서 처리하기 어려운 정도의 막대한 양의 데이터를 포함합니다. - 다양성(Variety) - 빅데이터는 다양한 유형의 데이터를 포함합니다. - 구조화된 데이터, 반구조화된 데이터, 비구조화된 데이터 등 다양한 형태의 데이터가 빅데이터의 일부입니다. 구조 예시 구조화된..
