항해99를 시작하며 작성했던 지원서를 발견해서, 오랜만에 읽어보니 감회가 새로워서 여기 남겨두려 합니다. 올해 1월까지 저는 홍대에서 베이커리 카페를 운영했었습니다. 전공과 전혀 관련없는 분야였지만, 프랑스 유학까지 가서 제과를 공부하고, 매일 새벽부터 직원들과 함께 저녁까지 쉬지않고 일했습니다. 저는 홍대에서 순수미술을 전공했습니다. 3학년때 공군 전기보수 지원병으로 벙커에 전기 시설물을 고치는 일을 했고, 졸업과 동시에 카페를 창업하여 6년간 운영했습니다. 저는 어떤 것에 몰입을 하면, 결과물이 나올때 까지 밤을 새서 어떻게든 만들어 냈었습니다. 군대에서 생전 처음으로 세탁기를 분해할때도, 미대에서 아두이노로 로봇팔을 만들때도, 카페를 운영하며 내부 통신망을 보수하거나, 새로 깔때도, 카페 기계들을 ..
이상태에서 진행이 안된다. 혹시몰라 git을 업그레이드 해봤는데 (2.39.2->2.41.0) 역시나 안된다. 해결방법 git config --global http.postBuffer 157286400 // 버퍼 용량을 150MB로 늘리는건데, 큰 파일을 다루고 있지 않아서 패스 git gc // garbage collection 최종 선택 -> 해결방법 git gc 이렇게 하고 입력하니 거짓말처럼 해결. 아마 내부적으로 데이터 흐름이 꼬였거나, 뭔가 알수없는 문제가 있었던것 같음. - 해결된 이유? `git gc` 명령어는 Git의 가비지 컬렉션을 수행합니다. 이 명령어는 저장소를 최적화하고 불필요한 파일을 제거하여 저장소의 크기를 줄입니다. 특히 저장소가 큰 경우나 많은 브랜치와 태그, 오래된 객체 ..
IAM 사용자를 생성한뒤 IAM사용자로 로그인해서 시작함. 가비아에서 아무 도메인이나 하나 구매한 상태에서 시작함. 0. Route53 호스팅영역 생성 DNS관리 밑에 작은 호스팅영역 생성 클릭. 가비아에서 구매한 도메인을 입력하고 바로 생성. Route53은 후반부에 마저 설정해줄 예정이다. 1. S3 버킷 만들기 원하는 버킷 이름을 설정해준다. aws리전은 서울로 설정. ACL설정은 여기 올린 객체의 소유권을 지금 생성한 이용자로 할지, 아니면 다른 계정에서 업로드한 사람이 소유할지 옵션인데, 추후에 필요시 활성화해서 사용하자. 우린 정적 사이트를 호스팅하지만, CloudFront를 이용해서 호스팅하므로 아래와 같이 체크한다. 참고로 만들어진 버킷 속성에 있는 아래 옵션도, 우리는 cloudFront..
1. 기본 설정, Devtools, Options React Query의 설치 및 초기 설정 $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query const queryClient = new QueryClient() function App() { return ( // Provide the client to your App ) ========== function Todos() { // Access the client const queryClient = useQueryClient() ... React Query Devtools의 설치 및 활용 방법 $ npm i @tansta..
https://flatland.shop/ https://github.com/taehyunkim3/hhblog-team9-Front GitHub - taehyunkim3/hhblog-team9-Front Contribute to taehyunkim3/hhblog-team9-Front development by creating an account on GitHub. github.com React App flatland.shop trouble shooting [로그인, 회원가입 먹통] : 아이디 중복등으로 오류가 있는 경우, alert창으로 알려주고 새로고침하여 데이터를 reset시킴. [회원가입 어려움] : 회원가입에 필요한 폼을 줄이는 대신, 그 폼을 수월하게 작성하기 위해 최대한 많은 정보를 실시간으로 ..
https://codesandbox.io/s/wonderful-feather-hlqvxt?file=/src/pages/Todos.jsx 1. 페어리뷰(level3) : select map으로 뿌려줬어야함 쿠산님과 페어프로그래밍: redux 10번은 더 써봐야함. 안보고 쓸 수 있도록. ->codesandbox 2. 공부 열심히 하되, 실제 코드를 안보고 쓰는 습관을 들여볼것(아주 기본적인 것은 그렇게 해야 손에 익힐 수 있음) 코드컨벤션 만들기. 설계 이후 코딩 시작할것. 깨끗하게 작성하는 습관 들일 것. codesandbox에서 해보면 바로바로 적용이 되어서 좋음. (하드용량 차지 걱정도 없음) 3. 내일 소셜로그인 미리 준비하고 읽어갈것. 너무 어렵다. 목요일 테스트 있음.
1. 블로그 제작 with 민승님 redux복습 infinity scroll + 스켈레톤 UI 제작. 2. figma 기본적인것 다루어보기. 첫번째 조별 과제 -> 같이 기획하고, 같이 api명세서 작성하고, 같이 와이어프레임을 상세하게 그릴 것. 구글등에 클래스, 변수명 규칙을 찾아보고, 일관적이고 세련된 변수명 규칙을 지어놓을것. react query+recoil이 대세라고 함. 큰 노트에 전체 그림을 그림그리며 파악하는거 좋음. github project->issue 자동연결 해보기. git-> pullrequest redux로 input상태관리하는것 익숙해질것. redux처럼 middleware 표로 만들어보기. 디버깅, 공식문서. 함께 협업한 민승님의 TIL 오늘은 태현님과 함께 블로그 프로젝트..
리엑트의 라이프사이클 매서드, react hook 모든 리엑트 컴포넌트는 아래와 같은 라이프사이클이 존재한다. 저, 리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되고, 사라질 때 동작하는 코드를 넣을 수 있게 도와준다고 보면 된다. 그 중에서도 대표적으로는 constructor, componentDidMount, componentDidUpdate, componentWillUnmount 가 있다. 처음에는 클래스형 컴포넌트가 주로 사용되었는데, 이 친구들은 라이프사이클 메서드를 이용해서 상태 관리나 라이프사이클 이벤트를 처리했다. 그런데 리액트 v16.8부터 Hook이라는 걸 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. useState는 컴포넌트의 상태를 관리하고, us..
1. 오늘 한일 리엑트 강의 정리중. redux정리 2. 하고싶어진 일 tailwind 오늘중으로 리엑트 강의 완강후 복습.(리엑트개념정리강의. 클론코딩부분 제외) react query까지. 용어정리(개념보다 용어가 어려움. 그 단어에 익숙해져야, 그 단어로 파생되는 개념을 빠르게 이해할 수 있음) 커스텀훅 사용해보기. (값이 아닌 로직을 재사용. use어쩌구 이렇게 이름지으면 너무 근사할것 같음.) 3. 해야했었는데 어제 til 빼먹음. 4. 참고 자료 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/ FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블 이혁원(..
1. 오늘 한 일 kakao 검색 API 미니프로젝트 https://github.com/taehyunkim3/study-react-search GitHub - taehyunkim3/study-react-search: 리엑트 스터디 2-search 리엑트 스터디 2-search. Contribute to taehyunkim3/study-react-search development by creating an account on GitHub. github.com 스파르타코딩 react 심화 redux 2. 배운것 axios, REST API 이용해서 데이터 받아오기.->API 명세서 읽고 반영하기. rafce useSelector redux .env VITE .env 3. 리팩토링시 반영할 것 + 이해해야 하..
1. 오늘 한 일 페어 나영님과 todolist 제작 리덕스 공부. 2. 요즘 며칠 한일 정리를 못함. git commandline으로 사용하는 방법 익힐것. rebase? usememo, useCallback, React.memo -> 사용 용도 익힐것. onSubmit, onChange, onClick-> useCallback 거의 붙여야 함 contextAPI CSS빠르게 하는것 익힐것.
1. 한일 페어프로그래밍 리뷰 기술멘토님 면담 2. 느낀점 기초의 중요성. 기초부터 탄탄하게 다져진 페어분의 코드를 보며 많은 생각을 함. 3. 삽질 내가 짠 코드 설명을 못함 ->완전한 이해를 하지 못함 + 변수명이 직관적이지 않음 + 폴더구조가 복잡함. 4. 내일 리엑트 숙련과정 수강 (수요일 저녁까지 완료)
virtual DOM, props, state 리엑트는 가상돔이라는 개념을 가지고 있음. 가상돔은, 브라우저가 랜더링하기 위해 생성하는 DOM을 매번 전부다 새로 생성하는게 아니라, 매번 DOM의 사본을 가상돔이라는 이름으로 생성해서, 기존 DOM과의 차이점만 비교해서 랜더링 함. 이로써 랜더링 해야하는 DOM의 범위를 제한해서 브라우저 랜더링 속도를 향상시킴. state는 이런 DOM을 업데이트 할때, 재랜더링의 기준이 되는 데이터임. 가상dom은 state의 메모리변화값을 감지하여, 변화유무를 판단함. 이 과정의 특성상, 메모리 값이 변하지 않고 데이터가 변하는 경우 데이터 변화를 시스템이 감지할 수가 없어 여러 문제가 발생. 따라서 리엑트에서 배열, 객체등의 자료를 다룰때 불변성을 유지하는것이 매우..
2023.06.23 21:25작성 1. 오늘 한일 리엑트 주차 시작 리엑트 todolist 제작 https://github.com/taehyunkim3/todolist_99_1/tree/main GitHub - taehyunkim3/todolist_99_1: 항해99 15기 주특기1주차 레벨1 항해99 15기 주특기1주차 레벨1. Contribute to taehyunkim3/todolist_99_1 development by creating an account on GitHub. github.com 코드리뷰 특강 https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/ 효과적인 코드리뷰를 위한 리뷰어의 자세 안녕하세요, 톡FE파트에서 ..
1. 오늘 한 일 알고리즘 시험(6/6) react localstorage 이용해서 다크모드 상태 저장하기. 기술매니저님 미팅 랜선 술자리 2. 토요일까지 할일 토요일 9시 리엑트 스터디 -> 페이지네이션 3. 일요일까지 할일 시간포멧 라이브러리 firebase -> 로그인 기능 json server API DB 변수명 정리 라우터 -> 상세정보 useEffect, useState 정리 오늘 푼 문제 답안 function solution(n) { let array = n.toString().split('').reverse(); //문자열화->배열화->뒤집기 const sum = array.reduce((acc, curr) => acc + Number(curr), 0); //합계 계산 return arra..
1. 오늘 한 일 https://kthdev.tistory.com/165 [프로그래머스]소수 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 kthdev.tistory.com https://kthdev.tistory.com/164 [프로그래머스]신규 아이디 추천. 정규식 문제 https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와..
1. 오늘 한 일 팀원들과 알고리즘 풀이, 리뷰 나머지 일정은 개인 사정으로 거의 못하고, 대신 다음날 5시부터 하는중. 잠에서 깨는데 3-4시간정도 소요되어서, 새벽에 일찍 일어날 필요성이 있음. 2. 오늘 한 삽질 멘탈, 텐션 관리가 정말 중요함. 이게 관리가 안되면, 아무것도 할 수가 없고, 시간을 흘러감. 결과적으로 항해 99일의 1%을 반쯤 날리며 큰 교훈을 얻음. 공부하는게 문제가 아니라, 공부하고 싶은 마음을 계속 유지하는게 중요한 것임. 하지만 그 중요성을 깨달은 것을 양분삼아 남은 기간을 더 알차게 채우기로 함. 3. 그래서 다음날(21일, 사실 오늘) 할 일 투두리스트 리펙토링 (로컬스토리지 이용해서 새로고침에 대응하고, 리스트도 저장되게 해보기. ) 알고리즘 2시간, 최대 3시간 이하..
0. 작성일? 2023년 6.19 월요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 다크모드 완성. 최원장님 면담 이현주 기술매니저님 면담 알고리즘풀이(하루2~3시간씩) 항해 출석체크 프로그램 소스코드 분석(타이머부분만) -> 블로그글 작성 https://kthdev.tistory.com/156 [react/jotai]항해99 출석체크 페이지 시간이 계속 느려지는 이유 이름 지우는게 너무 힘들었다. 항해99 과정에서 선의의 경쟁? 을 위해 출석체크를 하는 페이지가 있는데, 이 페이지의 시계는 5시간정도 뒤에 보면 1시간이상 느려져있다. 우리는 아마 항해99의 kthdev.tistory.com 코드변조의 위험성과 웹 보안에 대한 간단한 고찰 https://kthdev.tistory.com/155 코드..
회고 이번주는 많은 일이 있었다. 우선 TIL을 쓰기 시작했다. 알고리즘에 약간 재미를 느끼기 시작함. 알고리즘 스터디를 시작함. -> 간단하게 파이썬 사용방법 알면 좋음. CS스터디 청강함. -> 브라우저의 랜더링과 호이스팅 개념에 대하여 새로운 과제를 받음(리엑트로 투두리스트 만들기) 이번주 키워드 JavaScript 의 ES란? ES는 EcmaScript의 약자로, 자바스크립트 문법을 표준화하기 위해 만든 규격. 자바스크립트가 넷스케이프에서 개발된 뒤, MS에서 J스크립트를 개발하고 두 언어가 호환되지 않는 문제가 발생하자, 유럽컴퓨터제작연합(ECMA)에 표준화 요청을 하였기 때문에 이렇게 이름이 붙었다. 지금 ECMA는 업무가 유럽에만 국한되지 않으므로 Ecma라는 하나의 단어로만 사용하고 풀네임..
썸네일을 위해 춤춰주신 도영님. 0. 작성일? 2023년 6.17 토요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 만들기 알고리즘풀이 알고리즘 게시글 작성 3개. 2. 내가 모르는것? 몰랐던 것? html&css 기본적인 스타일링 지식 부족함 fontawsome 리엑트에서 사용방법 다름 3. 알게된점? 어떤 성장을 이루어냈는지? 알고리즘- 매소드 사용 방법(게시글) 내가 기본적인 css부터 다시 다져야겠구나 그리고 지식보다, 어떤걸 계속 끊임없이 만들면서 실제로 모르는걸 찾아보면서 해나가야 기억에 남는구나. 4. 어떤 삽질을 했는지? 왜? html, css 기본 스타일링에서 시간 너무 오래 잡아먹음. 5. 깨달은 점? 6. 참고링크, 공부내용 https://school.programmers.c..