웹개발
-
if let 구문 이해하기 [ TIL / Rust ]웹개발/Rust 2023. 9. 18. 17:36
배경 아직도 Rust 언어로 구현된 프로그램을 봤을 때 생소한 표현을 확인하게 되는 경우가 많다. 사실 이번 if let 구문 같은 경우는 분명 Rust Book에서도 확인했었던 문법인데 사용하는 방식이 낯설었다. 이번 기회에 이 문법에 대해서는 정확하게 짚고 넘어가기 위해서 정리해본다. match if let은 사실 match 문법하고 밀접한 관련이 있다. match는 사실 C언어에서 switch 문법과 많이 닮아있다. 예제를 보며 간단히 살펴보도록 하겠다. enum Transfortation { Taxi, Bus, Subway, Train, Airplane } // calculate cost let vehicle = Transfortation::Taxi; let cost = match vehicle ..
-
자바스크립트 정규표현식으로 문자열 검증하기 [ TIL / JavaScript ]웹개발/JavaScript 2023. 8. 24. 22:21
배경 유저들에게 간단한 입력을 받을 때, 클라이언트-서버 둘 다 입력을 검증해야될 필요가 있다. 이를테면 이메일을 입력받으면, 이메일 형식의 입력이 필요하다. 이 때 이메일은 반드시 '@'가 포함되어 있어야 하고, 뒤따라오는 도메인 형식의 확인도 필요하다. 비밀번호도 보안을 위해 대문자나 특수문자의 입력을 요구하기도 한다. 이렇게 문자를 입력받을 때 필요에 의해서 검증을 하는 것을 구현을 해야될 때 어떻게 해야할지 알아보려고 한다. 사실 한 글자, 한 글자 입력이 들어오고 삭제될 때마다 체크하는 방법도 있다. 비밀번호 정도는 이렇게 구현할 수 있을 것이다. 하지만 이메일 같이 패턴을 요구하는 검증에는 알고리즘을 짜기 어려울 수 있다. 정규표현식 이를 간편하게 구현할 수 있는 것이 정규표현식이다. 정규표현..
-
react-router-dom 라이브러리 사용법웹개발/React.js 2022. 9. 23. 19:22
리액트, 첫 문을 'react-router-dom' 라이브러리 설명으로 열게 되었다. 아직 딥하게 공부한 것은 아니어서 간단히 소개만 하는 글이 될 것 같다. 'react-router-dom'을 이해하기 위해서는 SPA 개념에 대해서 이해하고 있어야 한다. SPA 과거 웹 어플리케이션은 여러 HTML 페이지를 두어 제공하는 형식이었다. 클라이언트에 측에서 URL을 이용하여 서버에 있는 자원을 요청하면, 서버는 요청한 자원이 있는지 확인하고 클라이언트에게 자원 통째로 제공한다. 이런 결과로 클라이언트는 매번 요청 때마다 이전 페이지를 새로 갱신하여 현재 페이지를 확인해야 했다. 지금이야 인터넷 속도가 빨라져서 눈 깜짝할 새에 요청/응답이 진행된다고 하지만, 그렇지 않은 때는 불필요한 갱신 때문에 시간을 써..
-
1급 객체, 콜백 함수, 고차 함수웹개발/JavaScript 2022. 9. 22. 01:04
JavaScript를 공부하면서 놀라웠던 것은 엄청난 자율성이다. '이게 될까?'라고 생각한 것은 생각보다 잘 작동한다. 그 중에서 한 몫 하는 건 JavaScript의 함수 개념이다. 1급 객체 /* 함수 선언식 */ function declaration() { console.log("Hello"); } declaration(); /* 함수 표현식 */ let expression = function(){ console.log("World!"); } expression(); /* 1급 클래스 */ function firstClass(paramFunc){ return function(){ paramFunc() console.log("Wake Up!") } }; 줄곧 기본적으로 봐왔던 '함수 선언식' 외에 ..
-
git을 공부할 때마다 처음 배우는 것 같아 정리해보는 글(내용 추가 예정)웹개발 2022. 9. 17. 17:34
협업이 필수라는 개발자 생태계에서 github을 사용하는 것은 필수라고 한다. 학교에서도 그렇고, 한 번 참여했었던 프론트엔드 개발 교육에서도 그렇고 프로그래밍을 가르치는 모든 과정에서 한 번씩은 git 사용을 가르쳐준다. 하지만 매번 git을 배우고도 다시 사용할 때마다 기억이 리셋된다. 그 이유 중 첫 번째, 제대로 개념을 정리하지 않고 넘어갔기 때문일 것이다. 그 때마다 git으로 간단한 과제를 해결하는데만 치중하다보니 git에 대한 제대로 된 개념이 자리잡지 못하고 심화로 넘어갔다. 이유 두 번째, git이 제대로 작동하는 상황들만 가정하다보니 문제 상황을 풀어나갈 능력을 갖추질 못했다. git의 실질적인 효력은 이 문제 상황을 돌파하는데에 있다는 것이 지금와서 생각이 된다. 정리1. 아직도 헷갈..
-
내가 하는 CSS 가운데 정렬(내용 추가 예정)웹개발/HTML&CSS 2022. 9. 15. 19:55
CSS를 작업하고 있노라면, 항상 파워포인트가 그리워진다. 파워포인트는 대상을 누르고 가운데 정렬만 하면 어느새 화면 정가운데에 정렬되어 있다. 하지만 CSS는 모든 작업을 언어로 해야 한다. 사람과 사람 사이의 소통도 어렵지만 사람과 컴퓨터 사이의 소통도 마찬가지라는 것을 CSS를 통해 깨닫는다. 우선 빈 페이지에 뭐라도 그리기 시작하고 보면 항상 모든 도형들이 왼쪽 위부터 정렬되는 것이 눈에 거슬린다. 이 때문에 곧 가운데 정렬 하는 방법을 찾게 된다. Flexbox 를 이용한 가운데 정렬 일단 내가 가장 많이 쓰는 가운데 정렬 방법이다. .container { width: 100%; height: 100%; display: flex; justify-content: center; } .square{ ..
-
JavaScript / 'var' vs 'let' vs 'const'웹개발/JavaScript 2022. 8. 23. 21:30
모든 언어의 기초 중의 기초. 변수에 값을 할당하는 방법! JavaScript 를 처음 공부하게 되면 어려운 내용을 피하기 위해 변수 선언을 'var'로 한다. 하지만 기본적인 내용을 이해하고 나서는 ES6 부터 도입된 'let'과 'const'의 사용을 고려하게 된다. 'let'과 'const'의 도입 배경에 대해서 알고나면 언제 이 키워드를 써서 변수를 선언해야 할지 감이 온다. 'var'로 선언된 변수들은 문제를 안고 있다. 바로 너무 유연하다는 것. 전역에 'var'로 선언된 변수는 함수 내 영역에서 동일하게 생성하여 할당하면 값이 변경되기도 한다. 'let'과 'const'는 블록 레벨 스코프를 따른다. '{ }' 안에서 선언된 변수는 괄호 안에서만 사용되고 잊혀진다. 'let'과 'const'..
-
[Node.js] express.Router로 라우팅하기웹개발/Node.js 2021. 8. 28. 16:02
node.js가 서버를 구성하기 위해 만들어진 런타임이라고 한다. node.js가 지원하는 내장함수를 통해서 가벼운 서비스는 수월하게 만들 수 있다. 하지만 내장함수만을 이용하여 서버를 만들기는 귀찮은 일이 많다. 특히 라우팅이 그렇다. node.js 내장함수만을 이용하여 만들려면 일일이 조건문을 통해 어떤 url을 통하여 들어왔는지 검사를 해야하며 메소드도 체크해줘야 한다. 적어도 라우팅만이라도 훨 간편하게 하기 위해서 express 프레임워크가 필요하다. 익스프레스의 Router 객체는 쓰기가 매우 편리하다. 먼저 예제를 살펴보자. // index.js 파일 const express = require('express'); const router = express.Router(); router.get(..