목록분류 전체보기 (123)
EtoC
다른사이트를 모방하는게 아닌 새로운 서비스를 만들어보자는 제의가들어왔고, 프론트개발자로 프로젝트를하게 되었다. 그런테 초기세팅부터 문제가 발생 할 줄이야.. 에러1 : [eslint] Cannot find module 'node:fs' eslint를 설치하고 실행을 햇는데 아래와 같은 에러문구가 떴다. Failed to compile. [eslint] Cannot find module 'node:fs' Require stack: - /Users/sj/Desktop/cafeeodi/node_modules/synckit/lib/index.cjs - /Users/sj/Desktop/cafeeodi/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js -..
2차례 프론트로 개발을 하면서 내가 기업에 나가서 인턴을 할 수 있을까 걱정되었다.하지만 동기분이 정말 좋은 회사라고 꼭 가보라 하셨고 용기를 내서 인턴경험을 하게되었다.첫날 회사에 도착하니 회사소개부터 다양한 협업툴과 업무설명을 듣고, 3가지에 선택권을 주셨다.이때 선택지는 의료인 인증앱만들기, vue와 react를 하나의 레포로 합치기, 에디터 편집기였는데 이상할 정도로 에디터 편집기에 끌렸다.번쩍 손을 들자 사수분들이 적극성과 의외여서 놀라시면서 박수를 쳐주셨던게 기억난다. 0. 구현한 기능에디터 기능 세분화이미지만 보면 굉장히 간단한 업무같은데, 실제로 구현을 해보니 우리가 일상에서 당연하다는듯이 사용하던 사소한 기능하나하나에 얼마나 개발자의 생각과 노력이 들어갔는지 알 수 있었다. 1. 좋았..
작성일 2023-08-02 프론트로한 1차 프로젝트에서는 배운점, 힘든점이 많았다면 이번 2차프로젝트는 아쉬움이 많이 남는 프로젝트였다. 이번 기수 자체가 프론트 3인에 백엔드 7인으로 구성되어있었는데 설마 내가 1인 프론트엔드로 팀을 이루게될줄이야.. 1. 프로젝트 소개 팀명: 가보자GO 개발인원: 프론트엔드 1명, 백엔드 3명 프로젝트 기간:2023.07.17~2023.07.28 Team gabozaGo git Hub 주소 서비스 소개 저희가 모델링한 사이트는 다이닝코드였습니다. 다이닝코드는 위치기반서비스로 유저가 찾는 지역의 음식집을 소개하고 예약비나 수수료가아닌 리뷰를 받아 리뷰데이터를 이용하여 BtoB방식으로 수익을 창출하는것을 보았습니다. 하지만 유저가 리뷰를 달면 돈을주는 방식을 채택할 수 ..
작성일 2023-07-07프론트엔드로서의 첫 프로젝트 SJG가 끝났다.처음 맡아본 product manager로서 느낀점도 많았고, 백엔드 개발자로서도, 프론트개발자로서도 많은 생각을 할 수 있었던 프로젝트였다.사건사고가 정말 많아서 자세한 글들은 프로젝트 진행하면서 작성한 게시글에 옮겨두었다.프로젝트 소개수정과(SuJeongGwa)나는 타일이라는 소재와 관련된 팀이름을 원했는데 나를 제외한 모든 팀원 분들은 수정과라는 팀명을 하고싶어하였다.무슨뜻인지 물어보니 수정과 아이들이라는 말을 줄인것이라하셨고 1:5 다수결로 선정되었다.😅제품 선정친환경 타일구성원FE(2명): 김수정(Product Manager), 최진이BE(4명): 김상원(Project Manager), 서동희, 이주현, 정성남사용한 기술 및..
작업을 시작하기에 앞서 어제 발생한 map함수에대한 걱정이 실화가 되었다. 그저 웃음만 나온다..허허허 이번에 들어오는 데이터는 아래와 같다. { "data": [ { "id": "363", "sub_category_id": "600*1200*20", "surface_type_id": "HARD MATT", "name": "P_1_CTN_01", "weight": "30", "type": "천장용", "price": "10000.00", "sell_counts": "5", "image_url": "images/6.jpg" }, { "id": "2", "sub_category_id": 2, "surface_type_id": 2, "name": "SDH211", "weight": "60", "price": ..
제일 해보고 싶었던 상품 상세페이지! 주말동안에 개구리 css문제도 다풀어봤다고?! 푸터를 끝내고 처음으로 내가 꾸미고 싶은대로(이솝을 참고해서이지만..) 할수있어 너무 설렜다. 일단 데이터는 이렇게 주고 받기로 하였다. 구현 과정 1. map 함수로 데이터 처리 이미 레이아웃을 만들때 상수데이터를 사용해서 만들어두어서 목데이터만 추가로 map을 돌려서 만들어보았다. 그렇게 자신감 넘치게 npm start를 쳤다. 그런데 앗 맵함수 잘못썼다 이렇게 작성한 이유는 타입명 옆에 값들이 map함수로 착착 들어갈거라 생각해서.. 하지만 현실은 타입(주르륵), 값(주르륵) 'map함수를 돌려서 바로바로 옆에 띄우는 방법은 없는걸까?' 고민해보았으나 답이 보이지않았다. 하나씩 해보자며 맵함수를 분리하니 아래 이미지..
음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다. margin, padding 쓰지말고 display나 grid를 쓰라고하는데 그게 뭐지 display: flex CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다. 플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정..
리엑트 4일차인데 어제만든 컴포넌트중 하나를 분리하는 과제를 받았다. 🔨 과제 가이드 - src > pages > Product > components 폴더에 ColorButton 폴더를 생성해주세요 - 생성한 ColorButton 폴더에 ColorButton.js 파일과 ColorButton.scss 파일을 생성해주세요 - [Assignment 3-1]에서 구현했던 Color.js에서 colorButton을 분리해 ColorButton 컴포넌트로 구현해주세요 - Color.scss에서 적용된 스타일도 분리해서 ColorButton.scss에 입력해주세요 - 생성한 컴포넌트를 Color 컴포넌트에서 import 해주세요 - 총 3개의 ColorButton 컴포넌트를 사용하고 props로 각각 다른 데이터..