본문 바로가기

분류 전체보기

(43)
프로젝트 세팅 1 - vite.config.ts 프로젝트 세팅을 할 때, 그저 폴더 구조 짜기, 타입 설정하기 등등이 다였던 나는 vite 빌드 툴을 사용하면서vite.config.ts 를 설정하면서 중요성을 깨닫고 있다. vite.config.ts 에서는 파일 세팅1. 프로젝트 루트 경로 설정2. 경로 별칭 설정.. 빌드 세팅1. 빌드 결과물 저장 경로 설정2. 코드 압축 여부3. 소스맵 생성.. 개발 서버 세팅1. 포트 번호 설정2. 브라우저 자동실행 설정..플러그인 세팅1. env 변수 안전하게 관리 (vite-plugin-env-compatible)2. tailwind 빌드 최적화(vite-plugin-tailwind-purgecss).. 등등을 설정 할 수 있다. export default defineConfig({ plugins: [r..
오늘의 끄적임 - 발버둥 너무 덥다.너무 더운데,방금까지 쓰던 글도 실수로 삭제했다. 그래서 다시 쓰는 중 최근들어 자신감이 많이 하락하고포기가 쉬워진 사람이 되어버렸다. 더군다나 ai 까지 치고 올라오니나는 어떤 위치에 서있을 수 있을까고민이 많이 되는 요즘이다. 이럴 때 일수록나만의 성공 공식을 만들어야 한다.흔해빠진, 자기계발서에 나오는 그런 공식이 아닌 나의 특성과 나의 경험을 토대로 구성할 수 있는나만의 공식. ai 에 자존심 세우지 말고최대한 활용하자 주눅들지 말고,해야하는 것 보단잘하는 걸 계속하자 아무리 디지털이 발달해도아날로그에 진심인 사람은지금까지도 잘 살아남아 인정받고 있다는 사실을잊지말고 공허한 마음에세상이 두려움을 심어줄때면나만의 신념을 꾹꾹 눌러담아강해지도록오늘도 노력하자
시작부터 위기..![Open API를 찾아서..] 프로젝트의 이름을 지었다. 바로 "냉장고 비우기" 주된 서비스는 냉장고 속 재료를 입력하면 그 재료만 들어가는 레시피를 제공하는 것이다. 만약 양파와 감자만 입력한다면 다른 재료없이 단 양파와 감자만을 이용한 레시피가 나와야 한다. (소스류 등은 제외) 좋아! 이제 이러한 레시피를 제공하는 Open API 를 검색해보자..! 검색해보자... 죄다..주부 백단 재료 만땅 레시피를 제공하는 Open API 밖에 존재하지 않았다.. 벌써부터 프로젝트의 위기를 맞이하는 것 같았다.. 직접 레시피를 구성해서 API 를 생성하는 건 정말 말도 안되는 일이었다... 그렇게 한참을 고민하고 검색해보다가 나와 비슷한 주제의 프로젝트를 하는 분의 블로그를 발견하였고 "만개의 레시피" 사이트를 크롤링하여 API 사용하고 계..
개인 프로젝트를 시작하다...! [프로젝트의 발단] 웹 퍼블리셔에서 프론트엔드로 전향하기 위해 앨리스 부트캠프에 참여하였고 무사히 수료하였다. 부트캠프에서 진행한 3번의 프로젝트 동안 본의아니게 프론트엔드와 백엔드 둘 다 경험하게 되었고 "혼자서 풀스택 프로젝트를 해볼까....?" 하는 이상한 자신감을 얻게 되었다. 당장 취업도 쉽게 되는 것 같지 않았기에 취업이 되기 전까지 프로젝트를 진행하면 기획부터 제작에서 운영까지 경험할 수 있고 포트폴리오로도 사용할 수 있을 것 같아 여러모로 유용할 것 같았다. 그렇다면 어떤 프로젝트를 할까? 사실 옛날부터 만들고 싶었던 서비스가 있었다. 나는 요리를 좋아하기 때문에 가끔 feel 받으면 음식 재료들을 와랄라 사와서 맛난 음식을 해먹곤 한다. 하지만 꾸준히 성실하게 요리를 하는 편은 아니라서 이벤트성 요리가 끝나..
useRef 가 DOM 선택하는 것 외에 또 다른 용도 [Today I Learned - React] 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef 로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않음 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있음. useRef 로 만든 변수로 관리할 수 있는 것 1. setTimeout, setInterval을 통해 만들어진 id 2. 외부 라이브러리를 사용하여 생성된 인스턴스 3. scroll 위치....!! 요기서 잠깐! 그냥 일반 변수를 안만들고 왜 굳이 useRef 로 변수를 만드느냐? 컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-ren..
map 을 사용할 때 왜 key 설정을 해야하나? [Today I Learned - React] 설정해줘야하는 이유 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있음 만약 설정해주지 않으면 map 을 설정한 초기 배열에서 요소를 하나 더 추가하게되면 배열의 요소가 추가되지 않고 배열의 요소들이 교체되듯이 동작한다. 즉, [a,b,c,d]라는 배열에서 [a,b,z,c,d]로 업데이트하면 DOM 에서는 c 가 z로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입되는 형태가 되어버림 ==> 문제는 없지만 아주 비효율적으로 동작하는 것! key 설정을 해준다면? 수정되지 않는 기존의 값은 그대로 두고, 원하는 곳에 내용을 삽입하거나 삭제함! 즉, 배열을 렌더링 할 때 key 값은 매우 중요함.
useState 객체로 사용하기(input 예시) [Today I Learned - React] input의 개수가 여러개가 되었을 때, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현할 수 있지만 => 좋은 방법이 아님! 여기 더 좋은 방법 설명 시작! 01 일단, 위와 같이 input 태그에 name 속성을 설정하고 이벤트가 발생되었을 때 이 값을 참조하도록 설정. 02 const [inputs, setInputs] = useState({ name: '', nickname: '' }); useState 에는 문자열이 아니라 객체 형태의 상태를 관리해주기 03 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inp..
정규식에 익숙해지자..[코딩테스트 연습] 코딩테스트 연습을 시작하게 되었습니다. 프로그래머스의 레벨 0단계 부터 시작을 하였는데..... 아니??? 나 이정도로 빡대가리였던건가???.... 무슨 문제인지 파악하는 데만 10분정도 쓴 것같아요..... 대략 문제의 내용은 이러하였습니다. ["data", "object", "array"] 라는 배열이 있는데 내가 함수에다가 ["datata", "dataobject", "arrayarr", "data"] 처럼 이상하게 집어넣어 볼테니까 너가 "data", "object", "array" 만 걸러서 옳은 문자가 몇개인지 개수를 좀 알려줘봐 아 근데, dataobject 와 같이 옮은 문자가 나열된것도 개수에 포함시켜야함 ㅇㅋ? 처음에는 아니 뭐...배열이랑 파라미터로 들어온 배열이랑 비교하도록 filt..