Think Thing

시작하기 앞서 이 글은 개념이나 방법을 설명하기 위한 것이 아닌, 삽질했던 것을 조각조각 기록해 비슷한 상황에 놓인 사람들에게 팁이 되고자 하는 용도임을 알린다. 배경 흔히 캡스톤(Capstone)이라고 부르는 졸업 프로젝트를 할 때가 되었다. 이번 팀에서의 목표는 실제로 서비스를 하는 것이며, 본인은 풀스택으로 참여한다. 기획은 올해 초부터 시작했던 터라 순조롭게 진행하고 있고, 디자인은 나오려면 아직 좀 걸리기에 그동안 할 수 있는 프로젝트 기본 세팅부터 CI/CD까지는 끝마치려고 한다. FE는 Vercel과 같은 CDN 서비스가 워낙 잘 되어있기 때문에 크게 신경 쓰지 않고, 오랜만에 BE를 EC2에 배포하다가 특수한 상황이 겹쳐 이런저런 일을 겪었다. (참고) BE의 주요 스택은 다음과 같다. -..

Study/Web 2023. 3. 19. 00:58

SVG란? SVG는 Scalable Vector Graphics의 약자로, 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어라고 MDN에서 정의하고 있다. 우리는 수학 시간에 원점을 지나는 우상향의 대각선에 대해서 좌표평면 위에 그래프를 그릴 수도 있고, y = x 라는 식으로 정의할 수도 있다. 간단히 비유해서 전자가 기존의 비트맵 이미지 표현 방식이고, 후자가 SVG 방식이라고 할 수 있다. (x, y)에 어떤 색깔이 들어가는 지를 정의하는 것이 아닌, 점들 사이의 관계를 정의하는 것이기 때문에 확대해도 깨지지 않고, 파일의 크기가 상대적으로 작다는 장점이 있다. 어떻게 쓰는 건데? 이는 MDN에 있는 타원을 만드는 SVG 예제로, XML 기반의 마크업 언어라고 했던 만큼 HTML과 상당히 유..

Study/Web 2023. 1. 10. 17:28

지난 6월 22일, ECMAScript 2022가 정식 스펙으로 채택되었다. FE 개발자로서 떼려야 뗄 수 없는 JS의 새 소식이기에, 언박싱하는 느낌으로 살펴보려고 한다. Javascript는 아는데, ECMAScript는 뭔가요? 수 년 전의 웹 시장은 춘추전국시대로 비유될 만큼 다양한 브라우저들이 각자 본인들만의 스크립트 언어가 존재하는 혼돈의 시기였다. 이 때의 웹 개발은 각 브라우저에서 동작할 수 있게끔 같은 기능을 다른 언어로 여러번 작성해야 하는 끔찍한 일이었다. 이를 해결하고자 Netscape는 ECMA 학회에 Javascript 표준안을 제시하였고, 그렇게 ECMAScript라는 Javascript 표준안이 세상에 등장하게 된다. 어쩌구 저쩌구 중간에 IE가 말을 안듣는 바람에 JQuer..

Study/Web 2022. 8. 2. 02:10

개발중인 MODIMOA는 할인 정보 종합 서비스이기 때문에 상품 리스트를 제공해줘야 한다. 리스트에는 Infinite Scroll은 적용되어 있고, 최근 리스트의 레이아웃을 어떻게 해야할지 고민이 들었다. 내가 생각한 리스트 레이아웃의 조건은 다음과 같다. 1. 상품이 잘려서 보여서는 안된다. 2. 상품 간의 간격이 일정해야 한다. 3. 리스트를 하나로 봤을 때, 좌우 여백이 동일해야 한다. (가운데에 있어야 한다.) 4. 마지막 줄의 상품들은 개수가 꽉 안차더라도 윗줄과 배치 간격이 같아야 한다. 5. 창 너비에 따라 리스트의 열 개수가 변해야 한다. (반응형) 만약 flex, flex-wrap, justify-content, gap 속성을 적절히 조합해서 사용한다면 1, 2, 3, 5번은 해결할 수 ..

Study/Web 2022. 3. 25. 18:07

요즘 나는 작년에 만든 MODIMOA라는 할인 정보 종합 서비스의 추가 작업을 하고 있다. 셀프 디자인의 한계로 모바일 서비스로 만들었던 것을 데스크탑으로 확장하는 작업을 하고 있는데, 이 과정이 마냥 순탄치만은 않다. 왼쪽 사진은 이미 개발을 진행한 상태이고, 오른쪽 사진이 추가로 작업한 것이다. 이 프로젝트에서는 Sass(scss)를 사용하고 있기 때문에 미디어 쿼리를 이용해 모바일인지 데스크탑인지 나눠주었고, 깊은 이해 없이 이것저것 라이브러리를 가져와서 막 짠 코드에 이미 상태들이 뒤엉켜 있었기에 일단 js는 최소한으로 건드리면서 대부분 css 위주로 해결하였다. (최적화.. 막막하다..) 그런데 정렬탭을 정렬 버튼으로 바꾸는 과정에서 생각지도 못한 문제를 발견했고, 이를 오늘 해결해 글을 작성하..

Study/Web 2022. 3. 18. 12:05

Closure가 뭔데? 💁 : Javascript에서의 Closure는 내부 함수가 외부 함수의 지역 변수에 접근하고 있을 때, 외부 함수가 실행이 끝나서 지역 변수가 소멸되었어야 함에도 여전히 내부 함수에서 접근이 가능한 매커니즘을 의미한다. 엥 그래서 Closure가 뭐야? 💁 다음과 같은 상황에서 우리는 Closure를 볼 수 있다. function makeFunc() { var name = 'Think Thing'; function displayName() { // Closure 형성 alert(name); } return displayName; } var myFunc = makeFunc(); // myFunc변수에 displayName을 리턴 myFunc(); 이 예시에서 makeFunc()의 ..

Study/Web 2021. 12. 21. 17:57