👨💻📱✍️🎢314 [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. 이전 1 ··· 6 7 8 9 10 11 12 ··· 53 다음
