여씨의 개발이야기

최근에 면접을 보러다니면서 가장 현타오고 자괴감 들던 것이 내가 사용하는 주력 언어에 대한 워크 플로우를 완벽하게 정리하여 타인에게 설명하는 것에 대한 실력이 부족하다는 것이었다. 하지만 자괴감이라는 감정에 굴복하지 않고 앞으로 나아가는 사람이 되기로 했으니까, 면접을 보고 난 뒤에는 꼭 복기를 하리라 다짐을 했다. 나의 주력 언어는 java 그리고 jsp이다. 요즘에는 프론트엔드에 관심이 생겨 react나 vue.js 스터디를 하고 있지만, 그래도 당신이 자신 있는 언어가 뭡니까? 라는 질문을 면접 중에 받게 된다면 주저없이 java와 jsp를 답 할 것이다. 그렇게 익숙한 언어였지만 놀랍게도 workflow를 설명하라는 문제에 답을 하지 못 했다. 이후 '시키는 대로 구현하면 되지'라는 안일한 생각으..

index.js 파일 var express = require('express'); var path = require('path'); var router = express.Router(); router.get('/', function (req, res) { res.send({ greeting: 'hihinode' }); }); router.get('/getFileList', function (req, res) { const fs = require('fs'); const dir = './public/template'; const folders = fs.readdirSync(dir).filter((f) => fs.lstatSync(path.join(dir, f)).isDirectory()); var cardA..

텍스트 파일 읽기 const fs = require('fs'); const text = fs.readFileSync("source.txt"); const textSplitArr = text.toString().split('\n');//띄어쓰기로 나누고 싶을 때는 텍스트 파일 쓰기 const fs = require('fs'); const text = 'UTF-8로 저장될 텍스트'; fs.writeFileSync("target.txt", '\ufeff' + text, {encoding: 'utf8'}); 참고로 Node.js는 파일을 저장할 때 기본적으로 BOM 정보를 저장하지 않기 때문에 \ufeff를 텍스트에 앞에 명시해줘야 함.

프로그래밍을 하면서 내가 제일 싫어하는 부분 또 또 나왔다... 일상에서도 시간 계산을 못 해서 그런 지(?) 개발을 할 때도 동기, 비동기 순서 이런 거 나오면 딱 질색이거등요... 그래도 엘리쌤 JS 강의 덕에 이전에 배웠던 동기와 비동기에 대해 복기하며 이해를 조금씩 하고 있었는데, async와 await 강의를 듣는 순간부터 멍때리는 시간이 많아졌다. promise? 그래 너. promise라는 클래스 너 이놈, asynchronous operation(: 비동기 연산자) 이라는 건 잘 알겠어... 안에서 이루어지는 작업이 성공 할 경우에 resolve, 실패할 경우에는 reject를 반환한다는 것도 okok,, 잘 알겠어. 대충 후속 처리 메서드(promise.then(...).catch(.....

보통 우리는 같은 사이트 내에서 다른 페이지로 이동하고자 할 때는 아래와 같이 라우터를 이용해서 redirect하는 방식을 이용한다. this.$router.push("/about"); 하지만 우리가 알아보고자 하는 방법은 같은 사이트 내부가 아닌, 외부 URL을 redirect하는 것이다. 아래의 소스를 보겠다. 해당 소스는 vue앱에 /contact 경로가 있다고 가정할 때, 사용자가 /contact 페이지를 접속할 경우 외부 url인 https://www.google.com/contact/ 페이지를 접속하고자 한다. 가장 쉬운 방법으로는 /contact 와 연결된 소스에 window.location.href 속성을 사용하면 된다. Contact.js Contact Page 위의 소스에서, creat..

요즘 자주 기웃거리는 개발 커뮤니티에서 svelte에 대한 이야기 꽃을 피우는 걸 눈팅하는 도중, 도대체 이 프레임워크가 뭐길래?(프레임워크라고 하기 보다는 컴파일러라고 부르는 것이 더 명확하다고 한다.)라는 생각이 들었다. 그럼 바로 Svelte 공식 홈페이지부터 보러 가야지! https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work i..

요즘 여러 사이트를 보면 현재 페이지의 링크를 복사하는 버튼이 기본적으로 있는 편이다. 필자도 웹사이트를 만들면서 링크를 복사를 해야하는 상황이 생겨 어떻게 복사를 해야 할 지 고민을 해보게 되었다. textarea를 임시로 추가해 링크를 복사 및 붙여넣기를 한 뒤에 다시 body에서 삭제하는 방법을 알아내었다. 아래의 소스참고하도록 한다. const linkCopy = () => { var url = ''; var textarea = document.createElement("textarea"); document.body.appendChild(textarea); url = window.document.location.href; textarea.value = url; textarea.select(); d..

🥉 초보자 레벨로 이해하기 1-1. 정의 함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀. 1-2. 예시 아래 소스에서는 addEventListener의 argument자리에 function(){...}이라는 anonymous function이 들어간 것을 볼 수 있다. 이러한 함수를 콜백함수라고 한다. 당연히 EventListener를 Add한 객체를 클릭했을 때 function(){...} 함수가 실행된다. document...addEventListener('click', function(){ // 버튼 클릭 시 이 부분에 들어가는 내용이 실행됨 }) 1-3. 특징 - 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있음 - 콜백함수에 함수명을 아무렇게나 작명할 수도 있다.(무조건 an..

🤔 제작동기 토이프로젝트에서 상세 페이지 첫 진입시에 progress를 넣어야 할 부분이 생겼다. 원형 모양의 Progress bar를 제작하려고 한다. 📚 사용할 라이브러리들 1. mui - CircularProgress https://mui.com/api/circular-progress/ CircularProgress API - MUI API documentation for the React CircularProgress component. Learn about the available props and the CSS API. mui.com 👽 소스를 보자 import React from 'react' import {Box, Fade, CircularProgress} from '@mui/materia..

위와 같이 이미지와 텍스트가 주어져있을 때 이미지 위에 텍스트를 입히는 방법을 알아보고자 한다. 1. wrap, image, text div를 구성해준다. {id}님의 덕담보따리 2. 각 div에 맞춰 css를 넣어준다. .user-wrap { width: 100%; margin: 10px auto; position: relative; } .user-wrap img { width: 100%; vertical-align: middle; } .user-text { position: absolute; top: 40%; left: 50%; width: 100%; transform: translate( -50%, -50% ); font-size: 20px; font-family: 'ypseo'; text-alig..