본문 바로가기

분류 전체보기222

[Vue.js] Vue.js 찍먹을 위한 초기 세팅 Vue2를 레거시로 가진 회사에서 인턴을 하게 되었습니다. 인턴 시작 전 Vue2를 공부하고 세팅 정도는 문제없이 하기 위해 포스팅합니다. 대부분의 출처는 : 한시간만에 배우는 VueJS 입문 입니다. Vue Cli로 프로젝트 생성하는 법 npm i -g @vue/cli 로 vue cli 설치 vue create . 으로 현재 폴더에 프로젝트 설치 (폴더 생성하며 만들려면 vue create 원하는폴더명 ) 이후 선택창에 default (vue2/eslint) (vue3/eslint) 등 선택지 생김, 일단 첨이니까 vue2 Default로 선택 npm run serve 하니 vue로 만든 첫 프로젝트를 만났다! ㅎㅎ react로 팀플 2개 돌려봤더니 vue시작이 엄청 어려울 것 같진 않다. 오히려 새로.. 2022. 9. 10.
[React.js] Styled Components 파일 분리 멘토 코드 리뷰 Styled Components 스타일드 컴포넌트를 프로젝트에서 사용하면서, 도대체 어떻게 써야 잘 쓰는건지 감을 못잡고 있었습니다. 그러던 중 동기 분이 이전 기수들 코드를 통해 파일분리를 하고, 쉽게 사용하는 방법을 알려줬습니다. 하지만 코드리뷰를 통해 조금 더 컨벤션에 가까운 best practies를 알게 되었고, 해당 리뷰를 반영하게 되었습니다. 멘토님의 깃헙 프로필을 까는게 개인정보 보호상 안좋다고 생각하여 프로필부분은 날렸습니다. 개인적으로 위 세가지 링크가 정말 도움이 많이 되어 포스팅으로 남깁니다. Styled Components Best Practices The 3 essentials to get started with styled-components default export와 nam.. 2022. 9. 4.
<프로그래머의 뇌> - 펠리너 헤르만스 취미가 독서인 나로썬 [ "프로그래머", "뇌", "인지 과학" ] 이라는 미친듯한 어그로의 제목을 보고 구매하기 버튼을 누르지 않을 수 없었다. 1독 한 결과 내가 평소에 생각하던 프로그래밍 공부법, 또는 프로그래밍에서 주요하다고 생각한 포인트가 솔찍히 거의 90% 이상 겹쳐서 어찌보면 도움이 되지 않은 책이라고 생각할 수도 있었다. 하지만 반대로 생각하면, 내가 뇌피셜로 생각했던 내용들, 경험적으로 "이러이러하게 공부해보니까 도움이 되더라~"라고 생각하고 동기들에게 이야기한 내용들을 인지과학 측면에서 논문등의 근거를 통해 주장을 뒷받침해주는 근거들이 있어서 아주 도움이 되는 책이었다. 아래는 책을 읽으며 밑줄 친 부분이나 스스로 코멘트 한 부분이다. 밑줄, 코멘트 등 클리핑 우리가 무슨 일을 할 때 .. 2022. 9. 4.
질 낮은 시간을 보낸 2차 프로젝트 1차 스프린트 한 주간 (그리고 출사표) 1주 3포스팅 마저 못 채우는 이번 주... 1주 3포스팅, 그 적은 양을 채우기 위해 고민을 해보았지만 이번주는 정말 3개의 포스팅을 채울 거리가 없다. 이 주의 배움이 그만큼 적었단 뜻이고, 이 주의 시간이 그만큼 온전한 공부의 시간이 되지 못했다는 뜻이다. 이번 한 주를 돌이켜 보면 꽤 많은 시간을 프로젝트에 할애 했다고 생각들지만, 실상 그 속을 들여다 보면 재밌게 공부한 시간이 거의 없다고 느낀다. 불이 났다 어쩐다 이런 핑계가 있지만 그 이외에 사무실에서의 시간 또한 굉장히 밀도 낮고, 질 낮은 시간이었던 것이 사실이다. 기억 남는 작업 이번주 기억에 남는 작업은 원티드의 이력서 작성 Form Page에서 이런 저런 Input Box를 커스터마이징하고, Select Box를 구현하고, 기술 스.. 2022. 9. 4.
2차 프로젝트 계획 또는 다짐 2차 프로젝트 계획 또는 다짐 1차 스프린트 플래닝 미팅 ( 8.29 월요일 ) 트렐로 생성, 유저 행동 플로우 차트 생각하면서 티켓 생성 FE : UI, UX, Data 에 대한 거의 모든 것 을 트렐로에 문서화 해둬야한다. BE : API Docs를 미리 문서화 해두는게 좋을것 같다. 티켓 FE: 티켓 생성 시 UI, 기능은 분리해서 짜야 하고, 최대한 세분화 해서 짜는게 효율적인 티켓 배분, 트래킹에 도움이 된다. 티켓 생성 시에 작성된 UI, 기능이 전부가 아니라는걸 인지해야한다. 완성도 높은 프로젝트가 되기 위해선 미리 선정한 티켓이 100이라면 50의 부가적인 기능이 필수적이다. 이건 추가기능 구현의 문제가 아니라, 필수 기능을 구현할 때 미리 생각지 못한 당연한 부가기능들이 많음을 간과하기 .. 2022. 8. 28.
1차 프로젝트 개인 회고 개인 회고 프로젝트 명 : 따봉 가락신 🏖 클론 대상 사이트 : 하바이아나스 브라질 Havaianas 팀원 FE 박승민 : 메인 페이지, 장바구니 송경용 : 로그인, 회원가입 임채동 : 메인 페이지, 상품 목록 페이지 최슬기 : NavBar, 상품 상세 페이지 BE 길성민 : 제품 상세 API, 장바구니 API, 카테고리 API, 색상별 제품 조회 API 문정진 : 로그인/회원가입 API, 메인 페이지 API, 필터링, 추천 알고리즘 API, 구매 API 기술 스택 FE: React, React-router-dom, SCSS, 이외 라이브러리 없이 진행 BE: Node,js, Express, TypeORM, MySQL 내가 담당한 티켓 (메인 페이지 일부 컴포넌트, 상품 목록 페이지) 메인 페이지 { 베.. 2022. 8. 28.
프로그래머스 2022 데브매칭 하반기 과제 테스트 후기 개요 프로그래머스에서 진행하는 프론트엔드 데브 매칭 과제 테스트를 치뤘다. 시험은 3시간에 걸친 시험이었고, 이전 과제 테스트 모범 답안을 보면 Vanilla JS를 통해 SPA를 구현하는 시험이었는데, 이번 시험도 마찬가지로 이전 과제들 처럼 Vanilla JS를 통해 SPA를 구현하는 시험이었다. 웹 개발 공부를 시작한지 얼마 안된 FE개발자인 내가 이번 시험을 통해 감히 유추해보자면, 현업에서 Vanilla JS 역량이 가장 중요한 역량이라는 것이다. 그리고 이를 통해 SPA를 구현하라는 과제를 내주었다는 것은 ReactJS, VueJS, Svelt 등 라이브러리, 프레임워크와 관계없이 SPA에 대한 명확한 개념을 알고 있는것이 중요하다는 점을 유추 할수 있었다. 이는 네이버의 무료 웹개발 강의 사.. 2022. 8. 28.
[React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기 Fetch문은 필수 프로젝트에서 Fetch문은 당연히 필수적으로 사용하는 부분입니다. 근데 이 Fetch문에서 문제가 생기는 경우가 많다는 걸 조금씩 깨닫고 있습니다. Fetch가 끝나지 않았는데 존재하지도 않는 데이터로 map()함수를 돌린다던지....(이전 포스팅) 등등 BE-FE의 통신 부분인 Fetch문이 굉장히 중요합니다. 그렇다면 FE에서도 이런 Fetch문을 그냥 둘수는 없지 않을까요? BE에서 여러가지 경우의 수를 생각하며 Validation과 Try-Catch문에 힘을 쓰는데, 우리도 Fetch에서 에러가 났을 때 확인도 하고, 처리도 할 수 있도록 해야 하지 않을까요? 단순 Fetch 코드 useEffect(() => { fetch(&#39;/data/releaseProducts.jso.. 2022. 8. 22.
[React.js] fetch로 받은 데이터 map() 에러 동적 라우팅 강의를 보다가 동적 라우팅 강의를 보며 코드를 따라 치다 문제가 되는 부분이 생겼습니다. fetch를 사용해서 users 데이터를 데려온 뒤, map으로 뿌려주는 형태였는데, users 패치가 완성 되기 전 map으로 뿌리는 렌더링을 먼저 실행해서, undefined에 map() 메서드를 실행하려 하니 에러가 뜨고 더 이상 리렌더링도 진행되지 않았습니다. import { useEffect, useState } from &#39;react&#39;; import { Link } from &#39;react-router-dom&#39;; function List() { const [users, setUsers] = useState(); try { useEffect(() => { fetch(&#3.. 2022. 8. 19.
코드카타 못 푼 문제 (재귀 함수) (최단 경로?) 매일 진행하는 코드카타 매일 진행하는 코드카타에 처음으로 못 푸는 문제가 나왔습니다!! 아주 좋네요!! 매일 못 푸는 문제가 나왔으면 좋겠습니다. 페어 프로그래밍 짝과 10분 가량 이야기해본 결과 재귀함수로 풀어야 한다는건 알겠는데 풀이를 모르겠다는 의견으로 합일되서 답을 보고 이해해보기로 했습니다. 구글링을 통해 아래 해답을 찾았고, 아래 해답을 한명씩 돌아가며 { 설명 : 키보드 } 역할을 해보았습니다. 그리고 마지막은 누가누가 외운거 빨리 치나 경쟁도 해봤습니다. ㅋㅋ 재귀함수 문제는 항상 어렵다고 느껴지는데, 이 문제는 이해하고 답을 외우는 형태로 가니 오히려 이해가 된것 같은 느낌이네요. 재귀함수 많이 풀어봐야겠습니다. 문제 양수로 이루어진 m x n 그리드를 인자로 드립니다. 상단 왼쪽에서 시.. 2022. 8. 18.

티스토리툴바