본문 바로가기
728x90

전체 글100

기존 프로젝트에서 vite add시 발생하는 에러정리 기존 정적 리액트 프로젝트에 vite를 추가하려고 보니 오래된 프로젝트라 그런지 자잘한 오류들이 생김 1. node 에러vite@6.0.11: The engine "node" is incompatible with this module. Expected version "^18.0.0 || ^20.0.0 || >=22.0.0". Got "21.6.2" error Found incompatible module.node 최신버전으로 업데이트 필요 21.6.2는 왜 지원안해주는데요...ㅠ최신 버전인 23으로 업데이트 하니까 설치 잘됨 2. node-sass이건 vite관련은 아니긴하지만.. 더이상 node-sass 는 지원하지않음기존 node-sass 삭제 후 sass-embedded로 설치 3. index 못 .. 2025. 2. 3.
패스트캠퍼스 1년차부터 3년차까지 수강한 온라인 강의 후기 : 프론트엔드 개발 올인원 패키지 with React 프론트엔드 개발자로 일하게 된지 벌써 3년차로 이번해가 지나면 만 3년을 일하게 된다. 그동안 나의 이야기를 살짝 풀어보자면 나는 사수가 없는 환경에서 신입부터 일하게 되었다. 사실 학부시절은 제법 공부를 잘했다는 주변의 이야기와 객관적인 성적표 지표들이 나 자신에게 증명해주었기에 사수가 없어도 괜찮겠지라는 근거없는 자만심이 하늘을 찌른상태로 입사를 하게 되었다. 하지만 컴퓨터 공학을 전공했음에도 불구하고 1년차 나의 실력은 정말 끔찍했다고 말 할 수 있겠다. 실무에서 많은 좌절감을 겪고 있던 도중 개인 공부가 없다면 이대로 코더도 되지 못하는 2년차 3년차가 될 것 만 같았다. 프론트엔드의 가장 기본인 자바스크립트부터 제대로 공부해야겠다고 생각했다. 유데*와 인프*에서 많은 자바스크립트 강의가 있었고 .. 2023. 12. 13.
리액트 - 스크롤에 따라 변경되는 드랍다운 컴포넌트 만들기 포트폴리오의 메뉴 부분을 작업하는 도중 드랍다운 메뉴가 필요해져 재사용성을 위해 컴포넌트로 따로 빼면 좋을 것 같아서 구성해보았다. 작업에 들어가기 전 2가지를 최우선적으로 생각하고 작업하였다. 1. 드랍다운 children에 유저가 원하는 컴포넌트를 넣을 수 있게 2. 영역(화면) 밖으로 나가면 화면 안으로 구성될 수 있게 ( 스크롤 포함 ) 드랍다운을 단순 메뉴로 쓰는 경우도 많지만 메뉴안에 checkbox, radio와 같은 다양한 요소들이 들어가는 경우도 많았다. 이를 위해서 드랍다운의 내용은 드랍다운 컴포넌트를 호출하는 부모 컴포넌트에서 정의하고 드랍다운 컴포넌트에는 껍데기만 제공하는 방식으로 구성하였다. 물론 전체적인 디자인은 비슷해야되기때문에 틀이되는 css는 dropdown.css에서 작성.. 2023. 12. 3.
포트폴리오03 - styled components는 버린다. 일 년 만에 작업하는 포트폴리오 이번엔 정말 이직을 해야 하기 때문!!!! 다시 이어서 해보자고 오 작년의 나 제법 잘 해뒀네? 칭찬해....작년에도 진심이긴 했구나 하지만 페이지 전반에 메뉴가 없어서 이동이 약간은 불편하다고 느꼈다. 포트폴리오 사이트에서 얼마나 이동하겠어~?라고 할 수 있지만 없는 것보다 낫지 않겠는가 기존의 작업하던 코드를 보니 styled components를 사용했었다. 작년에는 학습용으로 사용하기는 했었다만 굳이 포트폴리오에 적용할 이유는 없어 보인다. 유지보수가 엄청나게 많은 사이트도 아닐뿐더러 6페이지 정도밖에 안 되기 때문에 클래스 이름 겹치기도 힘듦 이번달 안으로 빠르게 완성해야 하기 때문에 scss로 작업을 전환했다. 오 여기에 마침 적절한 메뉴가 있네 너 헤더로 승급.. 2023. 12. 2.
리액트 - useEffect ( vue의 watch 랑 비슷한 걸까? ) useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 사실 해당 정의만 보면 뭔소릴까...라는 생각이 들긴한다 렌더링 될 때 특정 작업이면 리렌더링 될때도 특정 작업을 실행하는 것인가? 아니면 초기 렌더링일때만 작업이 실행되는 것일까의 두가지 의문이 들 수 있다. 살펴보니 크게 3가지 경우의 수가 있다. 1. 초기에 컴포넌트가 렌더링될 때 한번 실행되고 이 후로 다시 호출 되지 않음 2. 컴포넌트가 재렌더링 될 때마다 실행 3. 특정 변수의 값이 변경될 때마다 실행 어 이거 약간 Vue의 watch 느낌아닌가? 싶은데 동작방식이 조금 다른 것 같다 useEffect는 렌더링이 완료된 이후에 실행! watch는 데이터가 변경되는 것과 동시에 콜백함수를 실행한다. 둘다.. 2023. 11. 30.
백준 11561 - 징검다리( Python ) https://www.acmicpc.net/problem/11561 11561번: 징검다리 각 테스트 케이스마다 한 줄에 승택이가 밟을 수 있는 최대 징검다리 수를 출력한다. www.acmicpc.net 이진탐색 실버 3 레벨의 문제 등차수열로 풀어야한다는 것을 생각하지 못해서 다른 분의 풀이를 참고하여 풀게되었다. - 이전에 점프한 거리보다 1 이상 더 긴 거리를 뛰어야한다 -> 3, 4, 5, 6 과 같은 규칙이 있을 것으로 생각해야됨 3, 5, 9, 15 와 같은 불규칙적인 점프는 도출해낼 수 없음 - 최대의 징검다리 수 -> 점프마다 최소 거리를 뛰어야하므로 1이라 가정하고 규칙을 구할 수 있음 => 즉, 최소 거리를 뛰는 규칙을 찾아야하기 때문에 등차수열을 생각 할 수 있다. 공차를 구하는 것이.. 2023. 3. 14.
728x90
반응형