본문 바로가기

전체 글314

[Haskell Tutorial] High Order Function 이번 포스트는 http://learnyouahaskell.com/higher-order-functions 에 근거하고 있습니다. 📌 고차함수 (High Order Function) 고차함수 는 함수를 파라미터로 넘겨줄 수 있고, 반환값으로도 사용할 수 있습니다. 한마디로 함수를 값으로 취급할 수 있다는 것을 의미합니다. 📌 커링 (Currying) Haskell 다중인자 함수의 정체 하스켈의 함수는 하나의 인자만 받을 수 있도록 되어있는데, 어떻게 여러개의 인자를 받는 함수를 구현할 수 있는 것일까요? 두 인자를 받아 큰 값을 반환하는 함수 max 는 다음과 같이 두 단계로 나눠볼 수 있습니다. ghci> max 4 20 20 {- ✅ 위 표현식은 다음과 같이 분리할 수 있다. -} ghci> maxVa.. 2022. 12. 31.
[Haskell Tutorial] Module 📌 Module 모듈이란 우리가 작성한 파일 단위의 API (함수 및 타입들) 뭉치입니다. Haskell 에서는 각각의 파일이 하나의 모듈입니다. 모듈은 영문대문자로 시작하는 이름을 가지며(Html.hs), 모듈을 정의하는 쪽에서 외부로 공개하기를 원하는 API 들을 지정할 수 있습니다. -- Html.hs module Html ( Html , Title , Structure , html_ , p_ , h1_ , append_ , render ) where -- ... 각각의 API 들에 대한 구현부 📌 Internal Module 앞서 module 을 export 한 방식은 private 한 기능들에 접근하지 못한다는 특징을 가지고 있습니다. Haskell 에서는 이러한 경우 module 에 모두 접근.. 2022. 11. 28.
[Haskell Tutorial] Type 📌 타입추론 Haskell 은 타입 추론이 가능하지만 보통 명시적으로 타입을 명시하는 것이 미래의 나와 다른 이들을 위해 더 나은 선택입니다. 타입은 식별자 위에 :: 와 함께 명시합니다. title_ :: String -> String 위 타입은 String 을 인자로 받아 String 을 반환하는 함수를 의미하는 것이죠. 📌 Haskell 의 함수는 일급 클래스다. 사실 앞선 모든 예제에서 2개 이상의 인자를 받는 함수들을 정의했지만 사실 Haskell 에서 모든 함수는 하나의 인자를 받도록 되어있습니다. makeHtml :: String -> String -> String 이전에 작성한 makeHtml 은 두개의 String 인자를 받아 하나의 String 을 반환하도록 되어있었는데, 사실 이는 다.. 2022. 11. 28.
[Haskell Tutorial] Function & Chaining 💡 해당 포스트는 Learn Haskell by building a blog generator 를 정리한 내용입니다. 📌 함수 Haskell 의 함수는 다음과 같이 정의합니다. ... = 이때 함수 이름은 camelCase 를 보편적으로 사용합니다. content 라는 인자를 받아 문자열을 만들어서 반환하는 함수를 구현해봅시다. wrapHtml content = "" content "" 이제 이 함수의 결과를 콘솔에 출력합니다. main = putStrLn (wrapHtml "Hello World!") 어라? 여기서는 괄호가 사용되었습니다. Haskell 은 기본적으로 괄호 없이도 함수 호출이 가능합니다. 다만 위와 같이 괄호를 묶어서 호출하면 해당 표현식의 결과로 대치됩니다. putStrLn 함수가 하.. 2022. 11. 28.
[Haskell Tutorial] Hello World! 💡 해당 포스트는 Learn Haskell by building a blog generator 를 정리한 내용입니다. 📌 Haskell 개발환경 설정 가장 먼저 GHCup 을 설치해줍니다. Haskell 개발에 필요한 HLS, ghc 등을 버전별로 편하게 관리할 수 있는 도구입니다. GHCup GHCup From here you can search these documents. Enter your search terms below. www.haskell.org curl --proto '=https' --tlsv1.2 -sSf | sh 설치가 끝나면, 다음 명령어를 통해 현재 사용가능한 툴 버전들을 한눈에 확인하며 관리할 수 있습니다. $ ghcup tui vscode 를 사용할 경우 Haskell 플러그.. 2022. 11. 28.
Next.js styled-component 설정하기 (SSR FOUC 이슈) 📌 Next.js ❤️ styled-component Next.js 와 Styled Component 를 함께 사용할 때 적절한 설정을 하지 않으면 SSR 시에 FOUC (Flash of Unstyled Content) 현상이 발생하게 됩니다. 🤔 FOUC? 페이지의 스타일시트 정보가 로드 시점에 포함되지 않아 잠시 스타일이 적용되지 않은 페이지가 나타나는 현상입니다. 📌 FOUC 원인 파악하기 Next.js SSR (Pre Rendering) Server-side Rendering 과 Static Generation 모두 Pre-rendering 방식이며 필요한 data fetching 과 HTML 렌더링이 client 에게 보내지기 전에 이미 수행됩니다. 이를 통해 client 는 non-intera.. 2022. 11. 27.
TypeScript + Jest 유닛 테스트 작성하기 이번 포스트에서는 TypeScript 환경에서 Jest 로 유닛 테스트를 진행하기 위해 필요한 설정들과 확인을 위한 간단한 예시 코드를 작성해보겠습니다. 사용할 테스트 프레임워크는 가장 대중적으로 사용되고 있는 Jest 입니다. 📌 Jest 설정 1️⃣ 패키지 설치 먼저 필요한 패키지를 설치합니다. npm i -D jest @jest/globals ts-jest 💡 @jest/globals 명시적인 import 를 선호하기에, 해당 패키지를 사용해서 jest api 사용했습니다. 💡 ts-test TS 로된 모듈 테스트를 수행할 때 컴파일 + 타입 체크까지 함께 수행할 수 있도록 해줍니다. 2️⃣ config 파일 추가 // jest.config.js /** @type {import('jest').Con.. 2022. 11. 27.
AWS SDK 로 s3 파일 사이즈 조회하기 📌 업로드 할 바우처에 크기 제한을 추가할 수 있을까요? 트리플 TNA 파트너웹 에는 파트너가 고객에게 예약 바우처를 전송하는 기능이 있습니다. 기존에는 파일 사이즈의 제한 없이 전송하도록 했는데, 사이즈가 커질 경우 이슈가 생겨서 이번에 리뉴얼하면서 서버에서 바우처 사이즈가 클 경우 이를 분리해서 전송 처리하는 것 이외에 프론트엔드에서도 개별 바우처에 용량 제한(15MB)을 추가하기로 했습니다. 이를 위해 브라우저에서 올리는 파일 사이즈 체크 이외에도 S3 에 이미 업로드 된 바우처 파일 사이즈를 조회해서 각 바우처 항목에 용량정보를 함께 노출해줘야 했습니다. 그래야 고객이 어떤 파일에 문제가 있는지 한번에 확인이 가능할 테니까요. 📌 S3 파일 사이즈 (HeadObject) 브라우저에서 업로드한 파일.. 2022. 11. 26.
Safari 브라우저 window.open block 이슈 📌 1:1 문의하기가 safari 에서만 동작을 안해요! 얼마전에 항공쪽 QA 중에 다음과 같은 이슈가 있었습니다. 원인을 파악하기위해 safari 브라우저에서 동선을 파악해보니, 문의 버튼 클릭 시 새창으로 열기 대신 팝업 차단 알럿이 뜨는 것을 확인할 수 있었습니다. 🤔 원인이 뭘까? safari 브라우저에서 다음과 같은 코드는 정상적으로 동작하지 않습니다. { await asyncJob() window.open('url', '_blank'); // ❌ } /> 이는 safari 브라우저에서 새창을 열때, 사용자의 입력에 곧바로 반응할 수 없는 상황이라면 window.open 액션을 막기 때문입니다. (대표적으로 비동기 요청을 수행한 뒤 리다이렉트 하는 것이 있겠네요) 📌 어떻게 고치면 될까? 🐛 문.. 2022. 11. 26.

티스토리툴바