본문 바로가기
728x90
반응형

source-code/software41

프로그래머의 뇌 코딩에 영향을 주는 인지 과정 코드가 초래하는 세 가지 종류의 혼란 1. 지식의 부족 : 프로그래밍 언어나 알고리즘 혹은 업무 영역에 대한 지식이 없는 경우 혼란 발생 2. 정보의 부족 : 코드를 이해하기 위해 필요한 정보를 충분히 가지고 있지 못하는 경우 혼란 발생 3. 처리 능력의 부족 : 코드가 너무 복잡해, 두뇌의 처리 용량이 부족하기 때문에 혼란 발생 현 팀에서 겪는 혼란은, 대부분 3에서 기인한다. 각 단계에서 어떤 일이 실행되는지 이해하기 어려운 코드들이 초래하는 혼란은 피할 수 없다. 위에서 아래로 왔다 갔다 해야만, 코드 중간중간 주석을 달아야만 이해할 수(심지어 이래도 처리가 힘들 수도) 있다. 코딩에 영향을 주는 인지 과정 1. 지식의 부족 → 장기 기억 공간(LTM)에 해당 내용이 .. 2023. 8. 30.
Singleton Pattern을 통한 axios 쿠키 허용 배경 Cookie를 통해 로그인을 구현하던 와중, 모든 api 요청에 공통된 옵션을 줘야 하는 상황이 생겼다. 정확히 말하자면... axios를 통해 브라우저의 HTTP 요청을 처리하고 있는데, 이때 쿠키를 사용할 경우 withCredentials 옵션을 true로 줘야 한다. → 일반적으로 브라우저는 CORS 정책에 따라 다른 도메인으로부터 온 요청에서는 쿠키와 같은 인증 정보를 보낼 수 없다. (동일 출처 간의 요청에 대해서만 인증 정보를 자동으로 전송) → withCredentials 옵션을 통해 브라우저가 해당 도메인 쿠키를 함께 보내도록 허용하는 것! 예를 들어 리뷰 생성 시 로그인한 사용자의 쿠키를 함께 보내기 위해서는 import axios, { AxiosResponse } from "axi.. 2023. 8. 20.
Template Method pattern 배경 결제 관련된 페이지를 만드는 도중 이런 상황과 마주했다. 결제(이하 멤버십)에는 세 가지 단계가 존재(베이식, 스탠다드, 프리미엄) 각 결제 단계마다 1) 해당 단계의 이미지 2) 해당 단계의 문구 3) 해당 단계 신청 api 가 존재 위와 같은 상황에서 베이직, 스탠다드, 프리미엄 멤버십 객체는 어떻게 구성되어야 할까? class Membership { } class Basic extends Membership { image = require('basic.png') description = '배이직 멤버십 입니다' apply() { // 베이직 멤버십 신청 함수 } } class Standard extends Membership { image = require('standard.png') desc.. 2023. 8. 20.
Postgresql date_trunc 함수를 통한 날짜별 조회 Postgresql DBMS를 사용하고 있다. id content created_at 0 abc 2023-07-25 07:27:17.407684+00 1 abc 2023-07-25 07:47:50.772492+00 2 ㄱㄴㄷ 2023-07-26 09:26:02.968429+00 3 ㄹㅁㅂ 2023-07-27 01:30:09.382792+00 다음과 같은 데이터가 존재하는 상황! 날짜별로 각 데이터가 몆 개 생성되었는지 조회해 달란 요구사항이 있었다. 일반적인 상황... 예를 들어 content별로 각 데이터가 몇 개 존재하는지 조회해야 했다면 SELECT content, count(*) FROM TABLE GROUP BY content group by를 통해 간단하게 조회할 수 있을 테다. 그런데 문제는.. 2023. 8. 20.
첫 실무 test code 작성 및 고민 2023-03-02 작성된 글입니다. import {describe, expect, it} from '@jest/globals' import convertToIndexGroup from './converToIndexGroup' describe('convert array to index group object', () => { describe('group by 4 item', () => { const ITEM_NUMBER_IN_EACH_ARRAY = 4 it('given length one array', () => { expect(convertToIndexGroup([{id: 0}], ITEM_NUMBER_IN_EACH_ARRAY)).toEqual( { 0: [{id: 0}], }, ) }) it('giv.. 2023. 8. 20.
클린 코드 나쁜 코드는 개발 속도를 크게 떨어뜨린다. (...) 코드를 고칠 때마다 엉뚱한 곳에서 문제가 생긴다. 간단한 변경은 없다. 매번 얽히고설킨 코드를 '해독'해서 얽히고설킨 코드를 더한다. (...) 나쁜 코드가 쌓일수록 팀 생산성은 떨어진다. 여럿 개발자의 마음을 쿡쿡 찌르는 문구. 아마 모두가 겪어본 적이 있을 테다. 누군가가 작성한 코드를 수정하고, 문제가 터지고, 해독하고, 한참 시간이 걸리고, 수정하고, 문제가 터지고, 이해하고, 비슷한 엉망 코드를 얹고. 반복. 반복. 사실 최근 아키텍처, 테스트, 클린 코드에 관심을 가지는 것도 이러한 맥락에서다. 앱과 비슷한, 혹은 동일한 기능의 웹을 개발하는데... 앱에서 작성한 코드 중 활용할 수 있는 게 거의 없었다. 불과 6,7개월 전에 내가 작성한 .. 2023. 8. 20.
클린 아키텍처 1장 - 설계와 아키텍처란? 소프트웨어 아키텍처의 목표는 필요한 시스탬을 만들고 유지보수하는 데 투입되는 인력을 최소화하는 데 있다. 비용은 최소화하고 생산성은 초대화할 수 있는 설계와 아키텍처를 가진 시스템을 만드려면, 이러한 결과로 이끌어 줄 시스템 아키텍처가 지닌 속성을 알고 있어야 한다. 2장 - 두 가지 가치에 대한 이야기 모든 소프트웨어 시스템은 이해관계자에게 '행위(behavior)'와 '구조(structure)' 란 두 가지 가치를 제공한다. ... 소프트웨어를 만든 이유는 기계의 행위를 쉽게 변경할 수 있도록 하기 위해서다. ... 이해관계자가 기능에 대한 생각을 바꾸면, 이러한 변경사항을 간단하고 쉽게 적용할 수 있어야 한다. 이러한 변경사항을 적용하는 데 드는 어려움은 변경되는 범위(.. 2023. 8. 20.
Jest를 통한 unit test 테스트 코드. 초기 스타트업 개발자, 특히 프론트엔드 개발자들이 가장 놓치기 쉬운 요소가 아닐까. 왜? → 제품의 명확한 기능이나 디자인 시스템이 갖춰지지 않은 상태로 개발이 진행되는 경우가 많기 때문. 끊임없이 바뀌는 요구 사항과 화면 설계서를 열심히 반영하다 보면... (거기다 기간은 어찌나 촉박한지) 기껏 작성한 테스트 코드가 쓸모 없어지는 경우가 비일비재해지며, 이런 일이 반복되면서 오히려 테스트가 생산성을 떨어뜨리는 주범이 되기도 한다. 현 서비스 역시 이러한 상황 속에서 운영 및 개발이 진행되어 왔는데... 초창기 때만 해도, 테스트 코드가 없다고 해서 별 다른 불편함이 느껴지지는 않았다. 구현된 결과물은 직접 서비스를 동작하면서 확인할 수 있었고 (끽해야 버튼 몇 개 클릭이니) 수정 사항이 .. 2023. 8. 18.
SEO 쎄오가 뭘까? Search Engine Optimization === 검색 엔진 최적화 되시겠다. 세상에는 수천수만 개의 웹페이지가 있는데... 대부분의 사용자들은 검색 이란 수단을 통해 각 웹페이지에 접속할 테다. 따라서 우리가 할 일은? 적절한 검색어를 입력했을 때 우리의 웹페이지가 검색 엔진에 노출되게끔 만들고, 이왕이면 그중에서도 상위에 노출되도록 만드는 것! 사실 효율적인 SEO를 위해서는 모든 직군의 노력이 필요하지만 그 중에서도 개발자, 특히 프론트엔드 개발자가 할 수 있는 일들을 살펴볼 예정. 1. 공통 사항 1) HTML 메타 태그 a. 페이지 별 적절한 메타 태그 사용 - title 태그 : 페이지의 콘텐츠 주제를 명확히 설명할 수 있는 문구, 페이지에 맞는 고유한 제목 사용 권고 - .. 2021. 7. 28.
728x90
반응형

티스토리툴바