Land of Joe

삭제, 추가 등 배열에 변화를 주고자 할 때 원본에 직접 수정을 가하는 게 아니라 해당 배열의 새로운 복사본을 생성해 그곳에 수정을 한다.! 열라 어렵다... 알 듯 말 듯.. 알쏭달쏭..

리액트 파일 여는 방법.. 나만 모르나 hoxy..? 난 평소처럼 걍 vs code에서 open with Live Server을 하고 싶었을 뿐인데.. 리액트는 npm start인 것 같길래 vs code에 있는 터미널에 npm start만 주구장창 쳐도 계속 똑같은 오류만 반복됐다. 구글링도 하고 chat gpt한테도 물어보고 수정하기를 반복해도 달라지는 게 없었다. 결국 팀원분께 카톡을 갈겼다... 그리고 바로 해답을 주셨다.. 겁나 똑똑... 걍 엘리트 그 잡채..... 엘리트의 가르침을 받았음에도 불구하고 나는 터미널에서조차 오류가 나버렸고.... [React] 오류 해결: "sh: react-scripts: command not found" 🤖 에러 상황 React에서 배포 파일 생성 시도 중 ..

때는 작년 9월경.. 웹의 ㅇ도 모를 때, 프론트엔드의 ㅍ도 모를 때 html, css, javascript 순으로 생활코딩을 부순 나는 흥미와 자신감에 가득 차서 리액트까지 갈겼었지. 근데 웬걸 html도 js(내가 알던, 뭐 얼마나 알았다고;;)도 아닌 것이 너무 헷갈려서 일단 1보 후퇴. 막학기와 동시에 시작한 교내 동아리 플젝은 아직도 진행 중..ing 학기 중에 연합동아리 소속 웹 FE 스터디에 참여했었는데 사실 동아리의 지원 자체가 기대에 많이 못 미치긴 했으나(꼴랑 워크북? 그것도 걍 개념 채워넣어라잇 이런 식) 또또 js까지 자신감 있게 채워넣고는 리액트가 시작되자마자 사기를 잃어버렸다는....... 근데 더 심각한 건 총 13주차의 스터디 일정 중 약 65퍼가 리액트(&그 이후..는 내가..

데이터바인딩 하기를 배웠다. 데이터바인딩 Data Binding : html에 데이터 꽂기 및 동기화 (client-side rendering, 반: server-side rendering) 위 모습을 만들기 위한 html은 다음과 같다 Card title 가격 : ?? 주문하기 Card title 가격 : ?? 주문하기 Card title 가격 : ?? 주문하기 다음의 자료를 데이터바인딩 하고자 한다. 위 products의 구조를 살펴보면 [ { }, { }, { } ] object자료형 { } 3개를 포함하고 있는 array자료형 [ ]임을 알 수 있다. array자료형 [ ]은 value만을 담고있는 반면, object자료형 { }은 key:value를 담고있다는 차이가 있다. 데이터바인딩을 할 각..

어제는 이벤트 버블링에 의해 모달창의 검은배경이 아닌 다른 어느 부분을 눌러도 모달창이 닫히는 문제를 해결하는 방법에 대해 공부하였다. for (let i=0; i < $('.tab-button').length; i++) { $('.tab-button').on('click',function(){ $('.tab-button').removeClass('orange') $('.tab-button').eq(i).addClass('show') $('.tab-content').removeClass('orange') $('.tab-content').eq(i).addClass('show') }) } [JavaScript] 이벤트버블링이벤트 버블링 : HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 모두 이벤트..

개강일이라 정신 없던 하루~ 내일은 아침 5시에 일어나 인스부르크로 1박 2일 여행을 떠난다. 아직 짐도 못 쌌지만 조금이라도 공부하기! 오늘 배운 것 1. 함수 return 의 기능 - 반환(퉤 뱉어버리기) - 함수 종료 (function 내 return 뒤에 오는 명령은 작동하지 않는다) 2. 소수점 관련 반올림: .toFixed(숫자) //몇 째자리까지 ㄴ문자로 변경됨 주의!! ㄴ다시 숫자로 변환: parseFloat(문자열), parseInt(문자열) Q1. 함수에 분과 초를 차례로 파라미터로 입력하면 ms단위로 바꿔서 뱉어주는 함수 만들기 (1초 == 1000ms) Q2. 가격을 파라미터로 입력하면 10% 할인가를 뱉는 함수 만들기 (조건: 첫 구매여부도 true/false로 둘째 파라미터에 입..

1. setTimeout, setInterval 5초 이내 구매시 사은품 증정! 2. 정규식 만들기 /\S+@\S+\.\S+/.test(aaa@bbb.ccc) == true; 3. Carousel 캐러셀 만들기 ◀️ 1 2 3 ▶️ 사진 세 개를 가로로 나열하고 그에 따른 버튼 세 개도 만든다 .slide-container { width:300vw; transition: all 1s; } .slide-box { width:100vw; float:left; } .slide-box img { width:100% } 각 이미지를 감싸는 div인 .slide-box는 100vw, 전체 이미지를 감싸는 div인 .slide-container는 300vw로 설정함으로써 하나의 이미지가 보여지는 영역 전부를 차지하도..

Hello World:) 네이버 블로그에 글을 쓴 지도 벌써 4년째인데 낯선 곳에서 새로운 시작을 하려니 왜이렇게 어색하고 어려운지 모르겠다. 나는 본래 글 쓰는 것을 좋아하지만 감정을 뺀 객관적인 진술보단 아주 사소하고 개인적인 이야기가 위주였기에 그런 것 같다. 이 공간은 개발자로서의 나, 느리더라도 꾸준한 성장을 기록하기 위한 공간이다. 프론트엔드 개발자를 목표로 공부하고 있다. 이러한 목표를 갖기까지 참 멀리도 돌아왔다. 경영학을 전공하다가 VR/AR 산업에 관심이 생겨 소프트웨어를 공부하고 싶다는 생각에 소프트웨어융합공학 연계전공을 시작했다. 연계전공을 시작한 첫 학기엔 컴퓨터네트워크, 둘째 학기엔 파이썬 기초와 자료구조론을 동시에, 셋째 학기엔 데이터베이스와 알고리즘을 수강하였다. 넷째 학기엔..