My Boundary As Much As I Experienced

프로젝트를 시작하며 (기획, 디자인) 이번 프로젝트는 숙박 예약을 위한 서비스의 전과정을 구현하는 프로젝트였다. 2주라는 짧은 기간동안 전과정을 구현하는 것은 매우 도전적인 과제였고, 멘토님께서 언급한 '기술적으로 단단한 서비스'를 만드는 것을 목표로 진행하였다. 어김없이 내가 초반 이틀 정도는 피그마 디자인을 만들어 제공했는데, 자연스럽게 모바일 - 태블릿 사이즈를 모두 지원하는 느낌보단, 전체적으로 모바일 사이즈를 무리하게 늘려놓은듯한, 요소 하나하나가 비대한 디자인이 되었다는 점은 조금 아쉽다. 내가 개발했던(그리고 지속적으로 관찰했던) 메인페이지 파트의 요소들만 웹 기준으로 적합한 느낌이 든다😅 전 프로젝트(8lack)에선 나름 시간이 남아서 그래픽적인 부분까지 필요하면 신경을 좀 썼더니 팀원들의..

https://school.programmers.co.kr/learn/courses/30/lessons/68936 문제 수준: 프로그래머스 레벨2 문제 요약: 이미지 압축 알고리즘으로 유명한 쿼드트리를 구현하는 문제. 문제를 읽어봤자 잘 이해는 안 가고 입출력 이미지를 봐야 이해하기 쉽다. 입출력 예 (입력 / 출력): 문제 풀이 전략: 반복적인 패턴이 보인다면, 늘 사용하던 dfs를 활용하면 된다. 처음 풀었을 때가 어려웠지 두 번째 비슷한 문제를 푸니까 접근 방법은 쉽게 파악이 된다. 내 풀이: function solution(arr) { function qt(arr, leng) { // 전체 배열과 row의 갯수를 받는다. leng /= 2 let leftUp = arr.slice(0, leng)...

요새 유행하는 번들러 환경 Vite에, 가장 유명한 테스팅 라이브러리 Jest를 엮어쓰려고 했으나 Jest는 웹팩 기반 라이브러리라 Vite환경에서 쓰려면 매우 복잡한 설정들을 거쳐야 한다. 아래 글에서 더욱 자세히 알려준다. vite 에서는 import.meta.env.VITE_XXX 와 같이 환경 변수를 사용하는데 WEBPACK 환경에서 위와 같은 환경 변수를 사용하기 위해서는 별도의 babel 관련 설정이 추가되어야 합니다. https://velog.io/@saeeng/VITE-VITEST-migrate-from-Jest VITE + VITEST (migrate from Jest) Vite > Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpa..

https://dev.to/hannahadora/jest-testing-with-vite-and-react-typescript-4bap Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide. Introduction Application testing is an important aspect of web development. It helps... dev.to 2. in tsconfig esModuleInterop: true 3. cypress 제외 in tsconfig exclude: []에 추가 4. scss나 styled-component를 사용할 시 우회 proxy를 설정

Q. JWT의 장단점? JWT는 인증에 필요한 정보가 담긴 토큰을 클라이언트에서 저장하기 때문에 DB조회를 하지않아도 되고 서버 확장성에 좋다. 그러나 이러한 장점은 클라이언트에서 토큰이 탈취될 수 있다는 단점이 되기도 하다. AccessToken 인증시, 필요한 정보가 담긴 토큰으로 인증을 통과할 수 있는 key라고 보면 된다. 인증에 필요한 정보가 담기기 때문에 탈취에 대한 위험을 줄이기 위해 토큰의 유효기간이 매우 짧다. (30분 ~ 1시간) RefreshToken 유효 기간이 짧은 Access Token을 보조해주는 토큰으로 Access Token보다 유효기간이 길며, Access Token을 발급하는데 사용된다. 유효 기간은 2주 ~ 1달 정도 잡는거 같다. JWT 특징 1. AccessToke..

테스트에는 유닛테스트와 인터그레이션 테스트, e2e테스트가 있다. 유닛테스트는 jest, 인터그레이션 테스트는 react testing library로 많이 한다. (jest로 인터그레이션 테스트도 가능하긴 함.) CRA를 하면 react testing library와 zest를 기본적으로 깔아줌. 파일 이름 컨벤션은 App.test.js 식으로 많이 짠다. in App.test.js import { render, screen } from "@testing-library/react"; import App from "./App"; // learn More라는 텍스트가 있는지 확인하는 테스트 // 이걸 테스트할 필요가 있나? test("renders learn More link", () => { // 맨처음..

XMLHttpRequest는 뭐야? XMLHttpRequest는 클라이언트 측에서 서버와 비동기적으로 상호 작용할 수 있도록 해주는 자바스크립트 객체입니다. 이를 사용하면 페이지의 새로고침 없이도 서버로부터 데이터를 요청하고 받을 수 있습니다. 주로 AJAX(Asynchronous JavaScript and XML) 기술에 사용되며, 최근에는 fetch API로 대체되는 경향이 있습니다. 더보기 XMLHttpRequest의 주요 메서드와 속성: open(method, url, async) 메서드: HTTP 요청을 초기화합니다. method: HTTP 메서드 (GET, POST 등) url: 요청을 보낼 URL async: 비동기 여부를 나타내는 불리언 값 send(data) 메서드: 요청을 서버로 보냅니..

promise에 대해서 알려줘 Promise 객체는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 주로 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같이 시간이 걸리는 작업을 의미합니다. Promise는 이러한 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 패턴 중 하나입니다. Promise는 세 가지 상태를 가집니다: Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태. Rejected (거부됨): 비동기 작업이 실패한 상태. Promise 객체는 다음과 같은 구조를 가지고 있습니다: const myPromise = new Promise((resolve, reject) => { ..