맨땅에 헤딩

오늘은 팀프로젝트의 기획회의를 하였다. 부트캠프 이후로 팀플젝은 오랜만이라서 더 좋았다. 사실 부트캠프때는 내가 가진 지식이 적어서 동기들로부터 배울것이 많았음에도 내가 흡수할 수 있는 양이 적어서 항상 아쉬웠는데 이번에는 그래도 더 많은양을 배울 수 있을것같아서 많이 기대된다. 일단 커뮤니티 사이트를 만드는 것을 큰 틀로 삼았고, 엄청난 사이트를 만들자..!!라기 보다는 우리가 재밌게 공부하고, 또 상상하는 것을 코드로 만들수 있는 코딩 놀이터라고 하자😄 라는 것을 목표로 하고 있다. 리액트 / 타입스크립트 / Scss 를 사용할 계획이고 초기세팅은 vite / yarn 을 사용하기로 했다. 상태관리나 다른 더 디테일한 것들은 다음에 만나서 또 자세하게 논의해보기로 했다. 이러한 회의의 과정도 실무에서..

매일 일기를 쓰는건 역시 쉬운일이 아니다 ㅋㅋ 요즘 공부도하고 블로그도 쓰고 있지만, 일기를 못썼다 😭 집가면 피곤해서 자기바빠서.. ㅋㅋ 그래도 틈틈이 조금씩 쓸 계획이다. 요즘에는 개인프로젝트를 하면서 에러해결한 것을 위주로 포스팅하고 있는것같다. 지금까지 이 프로젝트를 하면서 만난문제 중, 페이지네이션오류가 가장 해결하기 어려웠는데 map안에 if문을 돌리면 그자리를 비우는게 아니고 undefined가 들어가서 오류가 생긴다는 것을 배웠다. ➡️ map안에는 if문을 돌리면 안됨!! [undefined, 값, ubdefined, 값, undefined] 이런식으로 값이 들어가서 오류가 난거였다. 아래는 오류를 해결한 결과 limit=8로 주어서 이제 8개의 값이 정상적으로 나온다. 영국이랑 캐나다로..

요즘 내가 만들고 있는 웹사이트이다. 오늘 어떤 책을 읽을지 고민중인 유저들을 위해서, 1. 책을 검색하고 2. chatGPT를 통해서 책에대해 궁금한 내용도 질문할 수 있게 해두었다. googleBooks의 api와 chatGPt의 api를 사용했다. 이 프로젝트를 기획할 단계부터 외부 api를 활용하는 것을 익히고 싶은 생각이 있어서 일부러 이런 기능을 이용할 수 있는 사이트를 제작했다. 오늘은 axios를 따로 API폴더를 만들어서 모듈화하는 작업을 하였다. 하다가 계속 map관련 에러가 발생해서 해결하느라 시간이 좀 들었는데 이 과정에서 그래도 왜 에러가 발생했는지를 이해했더니, 의외로 해결방법은 엄청 간단했다 🥲 해결이유과 과정은 아래 포스팅에 자세하게 정리해두었다. Array.map is no..

오늘부터는 스터디에서 공부하는 형식을 조금 변경하기로 했다. 각자 최근 공부한 내용들을 공유하고 어떤 코드를 짰는지, 또 어떤 방식을 추가하면 좋을지 서로 의견을 나누는 식이다. 나는 최근에 만들고 있는 개인 프로젝트 페이지를 화면공유로 보여줬다. googleAPI를 이용해서 책을 가져오는데, maxResult=40으로 최대 40개의 데이터만 받아오게 걸어놨는데, 그걸 다 받아오면서 페이지네이션을 하는 형식으로 바꿔보는게 좋을것같다는 피드백을 받아서 그 부분을 수정할 계획이다. 사진에 있는 코드는 같은 스터디원중 carlos님의 코드인데, 저 부분은 백엔드부분이라서 정확하게 이해는 못했지만 저런식으로 짜는구나.. 정도로 이해했다 ㅎㅎ 오늘은 axios를 모듈화하여 main 페이지가 아니라, API폴더아래..

리액트로 책을 검색하고, chatGPT로 질문과 대답도 들을 수 있는 사이트를 만들고 있다. 만들면서 어떤 날은 기능이 잘 구현되어 기분이 엄청 좋은 채로 잠들고, 또 어떤날은 잘안돼서 집에 오는길에 조금 우울한 날도 있었다.. ㅋㅋ 그래도 계속 손보면서 조금더 나은 방법으로, 사이트가 조금씩 발전하고 있는거같아서 다행이다. (힘들어도 포기하지 않은 나자신 칭찬합니다) 엄청 대단한 사이트는 아니지만 그래도 뭔가 결과물이 눈에 보여서 조금은 뿌듯하다.😄 내일은 디자인을 조금 더 이쁘게 바꾸고 배포까지 할 예정이다. 추가적으로는 컴포넌트나 className을 조금 추상적으로 지은것같아서 더 구체적으로 바꾸는 작업을 해야겠다. (그래야 개인 프로젝트가 아닌, 회사에서 대규모의 플젝을 할때도 좋은코드니까..!!..

오늘은 API불러오는 연습을 하기 위해, 키워드를 검색하면 그에 알맞는 책이 나오는 사이트를 만들어보았다. 이 과정에서 구글에서 API를 key를 생성해서 불러오는 방법, 그리고 그것을 .env를 통해서 숨겨서 안전하게 가져오는 방법을 더 익혔다. 원래 키값으로 받아오는것은 잘됐는데 이것을 .env로 숨기는 과정에서 자꾸 에러가 발생했다. 이거 해결하려다가 시간이 30분은 걸린거같은데 🥲 해결법은 완전 간단했다 1. 서버를 껐다켠다. (나는 npm start를 다시 해주니 정상적으로 작동했다) 2. .env의 위치를 확인한다. 나는 1의 방법으로 해결함!! 자세한 해결기는 아래에 적어두었다. API Key not valid. Please a valid API key ❌ 에러코드 ❌ error: {code..

일기를 매일 쓰는일은 쉬운일이 아니다 역시.. ㅋㅋ 지난주는 약간 땅굴을 판 관계로 공부도 덜하고 일기도 조금밖에 안썼지만..!! 어제부터 다시 열공시작이다..!! 코딩하면서 힘들때가 사실 많았지만 그때마다 옆에서 잡아주는 고마운 사람들이 있어서 그래도 다시 제길로 돌아올 수 있어서 나는 어떻게보면 참 인복이많은 사람인거같다 (사주에도 주위에 도와주는 사람들이 많아서 잘될거라던데 맞는것인가..!!🤔 ㅋㅋ) 오늘은 리액트 공부도 하면서 프로젝트도 작게 하나 만들고 있다. 대단한 기획은 아니지만 그래도 아이디어도 내고 평소에 만들어보고 싶었던 이런저런 기능들을 구현하고 있다. 이해하는 공부를 좋아해서 그렇게 했는데 코딩은 또 너무 그렇게만 하면 많은 기능을 익히기는 어려워서 좋지 않은거같다 일단은 많은 것들..

오늘은 프로그래머스를 풀면서 자바스크립트의 내장함수인 unshift(), push(), shift(),pop()에 대해 공부했다. 유사하면서도 반대의 기능을 가지고 있어서, 잘 알아둬야할것같다. 나는 크게 추가/제거라는 공통점으로 묶어서 정리했다. 🔫 공통점: 추가 💡 unshift() ↔️ push() 맨앞 맨뒤 🔫 공통점: 제거 💡 shift() ↔️ pop() 맨앞 맨뒤 포트폴리오 사이트를 리액트로 간단하고 만들려고 구상하고, 공부중이다. 일단 포폴 자체도 부족하다고 느껴서 사이트에 아직 올릴것이 많은건 아니지만 만들면서 채워나가려고 한다. 깃허브에 만들면서 푸쉬하는법이나 기본적인것들을 만들어보는 연습을 하는데에 도움이 될 것같다. 주말동안 잘놀고 즐겁게 잘 보냈는데 이상하게 잠이 잘 안온다. 피곤..

요즘에 운동을 안해서 그런지 체력이 너무 떨어졌다. 그리고 이런 저런 고민이 많아서 잠을 푹 못자서 그런지 진짜로 혈색이 달라졌다 ㅠㅠ 주말동안은 잠도 좀 충전을 해야겠다 (그래도 프로그래머스는 한문제씩 풀것이다!) 운동도 조만간에 시작해야지 확실히 운동을 할때랑 안할때랑 집중력이 차이가 난다. 요즘 다크서클이 너무 심해서 고민이다 ㅋㅋㅋㅋ 이 시기만 지나면 다시 괜찮아질거라고 생각하긴 하지만 일단은 그래서 브로콜리라도 먹고 있다 🥦🥦 얼른 이 고민들이 해결돼서 다시 혈색을 되찾고 싶다!! 오늘은 새로 시작할 프로젝트를 어떻게 만들지 기획했는데, 하고 싶은 프로젝트는 있는데 기술력이 아직 그건 무리일거같아서 조금 더 있다가 해야할거같다 그래서 다른 아이디어를 또 생각해야할거같다. 일단 다음주에 프로젝트를..

오늘은 리액트로 shopping basket을 만든것을 netlify를 통해 배포까지 해보았다. 간단한 기능만으로 구성되어 어려운 페이지는 아니지만, 배포는 처음으로 해보는거라 더 의미가 있는 프로젝트였다. 자세한 내용은 아래에 기록해두었다. shopping basket 프로젝트 프로젝트 소개 쇼핑목록을 관리하는 메모장이다. 👉 배포사이트 보러가기 👉 깃허브보러가기 🖥 제작기간: 2일 (2023.3.21-3.22) 제작인원: 1명 (개인프로젝트) 기술스택: React, styled-components 추가 hihiha2.tistory.com 기능을 많이 추가하지는 않아서 앞으로 여기에 계속 추가할 예정이다. 앞으로 수정을 해도 지속적인 배포(CD)를 할 수있다..!! 오늘은 프로그래머스를 풀면서 map(..