본문 바로가기
velog 블로그 이전 개발자 블로그를 꾸려나가기에 velog가 더 좋다는 판단 하에 아래 링크로 블로그를 이전합니다. https://velog.io/@irondesk irondesk (SOOCHUL SON) - velog emmet 문법으로 생산성 향상 시키기 HTML 마크업을 하다보면 비슷한 태그를 여러개 써야 하는 수고로움이 많이 생긴다.과거에 마크업을 할 때, 나는 항상 괄호 열고 쓰고 괄호 닫고를 노가다로 반 velog.io 2022. 7. 24.
Redux-toolkit으로 로그인 구현 (1) state 저장하기 나는 최근에 Next.js로 SSR 환경에서 토이 프로젝트를 개발하고 있다. 간단하게 생각하고 시작했던 프로젝트라, 상태를 다른 컴포넌트에서 쓰더라도 한 두 번 props drilling을 하고 말지라는 생각에 상태 관리 라이브러리를 도입할 생각을 하지 않았다. 하지만 프로젝트 계획을 점점 크게 키우면서 로그인/아웃 기능을 구현해야 하다보니, 전역에서 상태를 관리해야 할 필요성을 느끼게 되었다.그래서 Redux-toolkit으로 로그인 기능을 구현하기로 했다. Redux를 선택한 이유 여러 상태 관리 라이브러리가 있지만 Redux를 선택한 이유는 사실 특별하진 않았다. 우선 한국어로 된 자료가 비교적 많아서, 개발 중 어려운 일이 생겨도 대응하기 수월할 것이라고 판단했다. 실제로 취업을 준비하면서 프론.. 2022. 7. 20.
제주 웹 컨퍼런스, UX 이야기 좋은 기회가 와 제주웹컨퍼런스에서 UX를 주제로 내 생각을 말할 기회가 생겼다. 무경력자에게 찾아올 수 없는 기회였는데도 정말 좋은 기회를 잡았다고 생각한다. 제주 웹컨퍼런스는 6월 2일부터 사흘 간 진행됐고, 카카오 본사가 위치한 제주첨단단지 근처에 위치한 세미양빌딩에서 진행됐다. 세미양빌딩은 제주 소재의 다양한 스타트업들이 입주해있었고, 위니브 이호준 대표님의 안내로 내부 시설을 간단히 견학해볼 기회도 있었다. 굉장히 큰 규모와 시설이었고, 제주 스타트업에 대한 이야기도 간략히 들을 수 있었다. 이 포스팅을 작성하면서 굉장히 아쉬운 점은 시설 사진을 하나도 찍지 않고 왔다는 것이다. 시설들을 구경하느라 촬영할 생각을 전혀 하지 못했다.^^; 나는 2일차 16시에 '경험을 덜어낼 때, 경험은 개선된다'.. 2022. 6. 13.
Prisma와 PlanetScale - [1] ORM 최근에 진행 중인 MOSS 프로젝트는 Prisma와 PlanetScale로 백엔드를 구현하고 있다. 국내에선 낯선 스택이기도 하고 한국어로 된 자료가 거의 없어 접근하기 매우 어려웠다. 프로젝트에서 이 기술을 제안해주신 분이 영어에 능통해서 시도해 볼 수 있었다. MongoDB나 Mongoose도 간단하게만 접해봤는데, 이번 기회에 백엔드를 제대로 다뤄보게 되었다. 우선 글쓴이는 프론트엔드 쪽이다보니, 아래 설명은 이해하고 있는 선에서 정리했다. ODM/ORM 우선 ODM이나 ORM은 데이터베이스에서 정보를 꺼내어 쓰는 일을 편리하게 하는데 목적이 있다. 그 중에서 ORM(Object Relational Mapping)은 객체 지향 프로그래밍을 사용한다. 객체 지향 데이터 구조에서 모든 데이터는 객체(O.. 2022. 6. 9.
백준 1991 트리 순회 본격적으로 코딩 테스트를 준비하면서, 자료구조와 트리에 대해서 공부하고 있다. 트리의 경우는 원리는 이해하고 있었지만 코드로 구현하는데 어려움을 느꼈던 부분이다. Python에서는 class로 객체지향 프로그래밍을 구현할 수 있다. 트리 순회 코드를 구현하는데 이 방법 외의 방법을 사용해도 되지만, 코딩 테스트를 보는 회사들의 취지를 고려한다면 객체지향에 맞게 구현하는 것이 좋을 것 같다. class Node: def __init__(self, item, left, right): self.item = item self.left = left self.right = right pre_array = [] in_array = [] post_array = [] def preorder(node): # 전위 순회 p.. 2022. 5. 7.
이코테 상하좌우 문제 여행가 A는 N * N 크기의 정사각형 공간 위에 서 있습니다. 이 공간은 1 * 1 크기의 정사각형으로 나눠져 있습니다. 가장 왼쪽 위 좌표는 (1,1)이며, 가장 오른쪽 아래 좌표는 (N, N)에 해당합니다. 여행가는 상-하-좌-우 방향으로 이동할 수 있으며, 시작 좌표는 항상 (1,1)입니다. 우리 앞에는 여행가 A가 이동할 계획이 적힌 계획서가 있습니다. L : 왼쪽으로 한 칸 이동 R : 오른쪽으로 한 칸 이동 U : 위로 한 칸 이동 D : 아래로 한 칸 이동 이때 여행가 A가 N * N 크기의 정사각형 공간을 벗어나는 움직임은 무시됩니다. 예를 들어 (1,1)의 위에서 L 혹은 U를 만나면 무시됩니다. 모범 답안 n = int(input()) plans = list(map(str, in.. 2022. 4. 24.
프로그래머스 Dev-Matching 2021 상반기 과제 올해 상반기 프로그래머스 Dev-Matching을 준비하면서, 지난해 상반기 과제를 풀어보았다. 과제 개요 https://programmers.co.kr/skill_check_assignments/100 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 고양이 사진과 파일 정보가 담긴 API로 일종의 사진 탐색기를 만드는 것이 과제이다. 다른 모듈을 사용하지 않고 바닐라 JavaScript로 만들어야 하며, 제한 시간은 3시간이었다. 우선 첫 화면(root)을 렌더링하는 함수를 구현했다. async/await 비동기 함수로 만들었고, 여기서 Loading은 .. 2022. 3. 12.
multer로 이미지 업로드 기능 만들기 multer를 이용해 파일을 서버로 요청해서 저장할 수 있다. 우선 아래 명령어를 입력하여, multer를 설치하자. npm install multer 암호화된 module/imageUpload.js const multer = require("multer"); const upload = multer( {dest: "uploads/"} ); // 여기서 dest는 destination(목적지)의 줄임말 // 해당 위치에 이미지를 저장하겠다는 뜻 module.exports = upload; routes/index.js const upload = require("../module/imageUpload"); // imageUplaod.js 불러오기 router.post('/upload', upload.singl.. 2022. 1. 1.
HTTP Method를 활용한 요청 및 응답 HTTP Method에는 여러가지가 있지만, 가장 많이 사용하는 것은 아래 네가지이다. get : 요청 받은 정보를 검색(read)하여 응답 post : 요청된 자원을 생성(create) put : 요청된 자원을 수정(update) delete : 요청된 자원을 삭제(delete) 라우팅 라우팅은 클라이언트의 요청에 맞게 분기처리해서 응답하도록 하는 것을 의미한다. routes/index.js var express = require('express'); var router = express.Router(); // post method let arr = []; router.post('/create', (req, res) => { const data = req.body.data // body의 raw jso.. 2022. 1. 1.
NPM 패키지 설치와 Express, Nodemon NPM(Node package manager)은 이름에서 알 수 있듯이, Node.js 개발의 편의를 위해 다양한 모듈들을 모아둔 패키지이다. 대부분의 Node.js 백엔드 개발자들인 이 NPM 패키지를 설치해서 사용하고 있다. 설치 우선 NPM을 설치하기 위한 임의의 폴더 하나를 생성한다. 터미널 창에서 아래의 코드를 입력한다. npm init 설치가 끝나면 package.json이라는 파일이 생성된 것을 볼 수 있다. 설치 과정 중 터미널에서 name을 비롯한 몇 가지를 물어보는데 입력하지 않고 엔터를 쳐도 무방하다. package.json { "name": "npm-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts".. 2021. 12. 31.
API 서버 만들기 Node.js를 활용하여 API 서버를 만드는 방법을 개략적으로 설명한다. http 모듈 const http = require("http"); Node.js에 내장된 HTTP 모듈을 호출하는 태그로, Node.js가 HTTP를 통해 데이터를 전송할 수 있게 만든다. http.createServer((req, resp) => { if (req.url === '/') { // 분기처리 resp.writeHead(200); resp.end("main url"); } else if (req.url === "/upload") { // 분기처리 resp.writeHead(200); resp.end("upload url"); } else if (req.url === "/delete") { resp.writeHead(.. 2021. 12. 31.
Node.js Node.js는 네트워크 어플리케이션을 빌드하는데 서버 구축 등을 도와주는 JavaScript의 런타임 플랫폼이다. 프론트엔드의 대표적 언어인 JavaScript로 백엔드 개발을 할 수 있어서 많은 개발자들이 채택하고 있다고 한다. 이벤트 기반 처리 Node.js를 공부하기에 앞서, 이벤트 기반의 처리 순서에 대해 간단히 익혀본다. 여러 이벤트들이 실행될 순서대로 호출 Stack에 쌓여 있다. 필요하다면 Background로 이벤트가 이동한다. (예를 들어 setTime 함수) Background에서 작업이 완료되면, Task que로 이동한다. 호출 Stackd에 있던 이벤트들이 모두 완료되면, Event loop가 Task que 작업들을 호출 Stack으로 이동시킨다. 블로킹 I/O와 논블로킹 I/.. 2021. 12. 27.

티스토리툴바