티스토리

corin

검색하기

블로그 홈

corin

chsususua.tistory.com/m

문과계열 비전공자

구독자: 0

방명록 방문하기

공지 자기소개 겸 블로그 소개 모두보기

주요 글 목록

[React] useState(value) vs useState(callbackFn) 배경 토스 슬래시 중 useOverlay를 읽으며 의문이 들었다. let elementId = 1; export function useOverlay({ exitOnUnmount = true }: Options = {}) { ...(중략) const [id] = useState(() => String(elementId++)); ...(중략) 나는 항상 useState를 사용할때 값을 넣어서 사용을 했다. id를 전역으로 관리하는 것하며, 초기값으로 함수를 넣는 것이 무엇을 의미하는지 궁금해졌다. 같은 원리의 쉬운 코드 제작 stackblitz를 통해 코드를 만들어봤다. 구조는 아래와 같다. 앱 안에 엘리먼트 컴포넌트가 2개 들어있다. 앱과 엘리먼트 컴포넌트에는 각각 hook이 호출된다. hook은 초기값이.. 공감수 0 댓글수 1 2023. 12. 28.
[JOTAI] 조타이 처음 사용해보기 상태관리 라이브러리 종류 - proxy patten : Mobx, Valtio - flux patten: Redux, Zustand - atomic patten: Recoil, Jotai 위 언급한 것과 같이 아토믹 패턴에 포함되는 것이 조타이이다. 조타이 공식문서를 보면 다음과 같이 설명한다. Jotai는 Recoil 에서 영감을 받은 원자 모델로 상향식 접근 방식을 취합니다 . 원자를 결합하는 상태를 구축하고 원자 종속성을 기반으로 렌더링을 최적화할 수 있습니다. 이렇게 하면 메모이제이션이 필요하지 않습니다. 특징: - 최소 코어 API(2kb) - 많은 유틸리티 및 통합TypeScript 지향 - Next.js, Gatsby, Remix 및 React Native와 함께 작동 - SWC 및 Babe.. 공감수 1 댓글수 0 2023. 7. 31.
[실버] 영화감독 숌_1436번 문제 666은 종말을 나타내는 수라고 한다. 따라서, 많은 블록버스터 영화에서는 666이 들어간 제목을 많이 사용한다. 영화감독 숌은 세상의 종말 이라는 시리즈 영화의 감독이다. 조지 루카스는 스타워즈를 만들 때, 스타워즈 1, 스타워즈 2, 스타워즈 3, 스타워즈 4, 스타워즈 5, 스타워즈 6과 같이 이름을 지었고, 피터 잭슨은 반지의 제왕을 만들 때, 반지의 제왕 1, 반지의 제왕 2, 반지의 제왕 3과 같이 영화 제목을 지었다. 하지만 숌은 자신이 조지 루카스와 피터 잭슨을 뛰어넘는다는 것을 보여주기 위해서 영화 제목을 좀 다르게 만들기로 했다. 종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다. 제일 작은 종말의 수는 666이고, 그 다음으로 큰 수는 1666, 266.. 공감수 0 댓글수 0 2023. 6. 17.
[ErrorBoundary] ErrorBoundary하는데 자꾸 Uncaught runtime errors가 발생해요 리액트에서 api를 다루면서 2가지를 많이 사용한다. 1. suspense 2. errorBoundary 간단하게 promise에 대해 이야기를 하자면 1. api 등을 사용하기 위해 fetch를 사용한다. 2. fetch의 결과는 프로미스로 전달된다. 3. 결과는 3가지 상태가 있는데, 1) 팬딩-진행중- 2) 실패 3) 성공이 있다. 이는 더 찾아보면 좋다. 4. 이 상태를 관리하기 위해 위 두 가지를 사용한다. 1) 서스펜스 - 팬딩상태라면 스켈레톤을 그려준다. 2) 에러 바운더리 - 에러바운더리로 감싼 컴포넌트 안에서 에러가 발생하면 이를 캐치해서 대체 컴포넌트를 그려준다. > 나는 api를 사용한 컴포넌트 밖에 놓고, api가 실패한 경우 그 자리에서 throw new Error를 던져서 사용했.. 공감수 0 댓글수 0 2023. 5. 31.
[CSS] first-child/last-child가 안먹혀요 처음 짰던 코드는 대충 다음과 같다. 1. hi 2. hello 3. bye 4. good bye ul:first-child { color: blue; } 그럼 어떻게 될까? 물론 되지 않는다..! 왜일까?? ul: last-child라고 작성하는 것은 자기 자신한테 거는 것이다. 근데 우리는 ul 안에 있는 마지막 li에 css를 걸고 싶은 것이니 ul > *:first-child { color: blue; } ul > *:last-child { color: red; } 이렇게 하면 이렇게 된다! 공감수 0 댓글수 0 2023. 5. 17.
[우테코] Lv. 2 다시뭐먹지 구현 배경지식 01. 점심 뭐먹지와 동일한 ui이다. 02. 레스토랑을 추가하고 삭제하는 기능은 구현하지 않으며 클릭했을 때 모달창이 켜지는 것만 실행된다. 03. 기존에 바닐라로 구현한 것을 리액트로 구현한다. 04. 리액트를 접해보지 않은 사람들을 위해 익숙한 이전 미션을 다시 해보며, 기능도 줄어들었다. 05. 리액트 온보딩 같은 느낌이라서 짧은 미션기간이었다. 1단계가 화-목/ 2단계가 금-월었다. 06. 1단계는 class형으로 컴포넌트를 작성했다. 2단계는 이를 function형으로 수정했다. 이번에 처음 리액트를 만졌기 때문에 걱정이 많았는데 페어가 리액트를 잘 다루고 파일분리를 잘하는 크루라서 도움을 많이 받았다. 사실 거의 배우는 시간이었다고 할 수 있을 정도로 따라가는 시간이 많았는데, 아예.. 공감수 0 댓글수 0 2023. 5. 3.
[REACT] 왜 여러 개의 svg를 넣으면 첫번째 svg이미지로만 나오죠? svg를 컴포넌트로 만들어서 화면에 그려내야 했다. 이런식으로 svg를 불러와서 로고를 그려내고 싶었다. 위 코드대로라면 첫번째 줄에 하나로고/우리로고 두번째 줄에 롯데로고/롯데로고가 나와야했다. 하지만 역시나 잘 되지 않는다.. (리액트를 시작하고 되는일이 하나도 없어) 따란..! 이렇게 하나은행이 4개가 나왔다. 이게 순서를 바꿔도 하나은행이 나오냐? 아니다. 무조건 첫번째 있는 놈에 따라 뒤에 것들이 모두 바뀌어버렸다.. 결과적으로는 무엇이 문제냐 이건 하나은행 로고 svg이다. 이건 우리은행 로고 svg이다. 두 코드에서 중요하게 봐야하는 것은 pattern의 id이다. 두 id가 같다. 이 아이디가 같으면 같은 이미지를 보여준다-다른 크루의 도움을 받았다-고 한다. 그래서 얼른 바꾸어보았다. 단.. 공감수 0 댓글수 0 2023. 4. 29.
[REACT] svg import했는데 오류가 뜬다. 이미지 파일을 svg로 사용하면 좋다. 대충 이유는 1. 코드로 되어 있기 때문에 수정이 쉽다. > 만약 색상을 바꾸거나 크기를 변경하고 싶다면 코드를 변경하면 된다. 2. 렌더링에 좋다. > 코드로 들어가기 때문에..? 렌더링이 될 때 깜박이지 않는다. 3. 깨지지 않는다. > svg는 백터타입이라 깨지지않는다. (구체적인 이유는 검색해보세요) 그렇다면 어떻게 사용하는가? 이렇게 된 svg가 들어간 버튼을 만들고 싶다면? 1. 그냥 코드에 넣어버린다. export default function PlusButton() { return ( ); } 이런 방식으로 넣으면 된다. 근데 이렇게 하면 간단한 svg는 괜찮으나 여러개의 svg가 필요하거나 한다면 코드가 번잡스러워진다. 2. 따로 파일에 분리해서 i.. 공감수 0 댓글수 0 2023. 4. 28.
[REACT] React 렌더링 과정? 처음 리액트 렌더링에 대해 생각하게 된 계기는 다음과 같았다. const [val, setVal] = useStats(0) function foo(){ setVal(val+1) ; setVal(val+1) ; setVal(val+1) ; } 맥락이 위와 같은 코드를 짜고 대단히 오류가 났다. 답은 무엇일까? 왜 위에 코드가 문제가 생길까? 이것과 관련한 답은 "틀리면서 공부하는.."코너에 나와있으니 여기에서 확인하기 바란다. 여튼간 "state가 바뀌면 새로 랜더링 된다고 한다"라는 사실만을 믿고 코드를 짜는 것은 이러한 오류를 낼 수 있다는 생각에 리액트가 언제 다시 랜더링되는 지를 조금 알아보게 되었다. .jsx는 어떻게 렌더링될까? 리액트는 업데이트가 된 부분만 다시 그리기를 하게 된다. 이는 단순.. 공감수 0 댓글수 0 2023. 4. 26.
[REACT] 한 함수 내에서 setState를 여러번 호출한다면 적용이 안됩니다. 리액트를 잘 모르면 발생하는 문제가 여럿있다. 그중 한 가지를 가지고 왔다. const [count, setCount] = useState(0); function plus() { setCount(count+1); setCount(count+1); setCount(count+1); } plus(); 이 상황에서 count는 몇일까? 3? 정답은 1이다. 그 이유는 저 plus가 실행되는 당시 안 count는 0이다. setCount 속 count는 0이니 결국 그 안에는 주구장창 1만 들어가게 된다. 그럼 나는 한 함수 안에서 setCount를 어러번 하고 싶은데 어떻게 해야하지? const [count, setCount] = useState(0); function plus() { setCount((cou.. 공감수 0 댓글수 0 2023. 4. 26.
[우테코] Lv. 1 영화리뷰 구현 - 2단계 배경지식! 01. 추가해야 하는 기능이 여럿 있었다. 모달창을 키고 끄는것. 무한 스크롤로 수정. 별점주기 기능(로컬 스토리지 활용) 02. 모달과 별점은 이전에 했던 것과 유사하여 크게 어렵지는 않았으나 무한 스크롤이 좋은 자료가 없어서 좀 헤맸다. 역시 좋은 자료는 영어로 되어 있다. 후 03. 개인적인 일정으로 인해서 시간이 없었다. 월요일까지 제출인데 토요일 오후에 시작하였다. 1번째 Push 설계 의도 * 각 컴포넌트 안 함수들은 그 컴포넌트 밖으로 내보이지 않기 * 각 컴포넌트에서 관련 이벤트 부여하기 가능한 이벤트를 삭제/재등록하지 않기 * 무한 스크롤 이벤트에서 옵저버 이벤트를 app.ts에 배치하여 최초 랜더링 시 이벤트 세팅 * itemList 에 이벤트를 부여해서 모달 여는 이벤트 위.. 공감수 0 댓글수 0 2023. 4. 5.
[우테코] Lv. 1 영화리뷰 구현 - 1단계 배경지식! 01. 처음으로 API를 사용해보기 > 비동기로 처리하기 위해 promise / asnyc / await 사용 02. 이벤트 부여하는 것을 유틸에 모아다가 렌더링 후 부여하는 방식을 사용해봄 03. 검색 API가 있다는 것을 처음에는 몰라서 헤메다가 나중에 검색 API를 사용 04. 렌더링 테스트는.. 어떻게 하는 거죠..? 1번째 Push 설계 의도 * 컴포넌트는 본인의 템플릿과 이벤트를 가지고 있습니다. * 컴포넌트 파일에서 이벤트를 부여하는 경우 렌더링이 이루어지지 않은 상태이기 때문에 이벤트 부여를 모아다가 렌더링이 끝난 이후 모은 이벤트를 부여해주었습니다. * 처음에는 맨 상위 컴포넌트에서 랜더링을 해주었지만, 그런 경우 async가 상위 파일까지 타고 올라가버립니다. 때문에 API에.. 공감수 0 댓글수 0 2023. 4. 5.
[IntersectionObserver] 바닐라자스_무한 스크롤 만들기 무한 스크롤을 만들어보고자 한다. 이는 이벤트 스크롤로도 가능하지만 IntersectionObserver을 이용하는 것이 reflow가 덜 일어나 더 좋다고 한다. 그리고 이벤트 스크롤은 연속해서 계속 이벤트가 발생하기 때문에 Debounce, Throttle관리를 해줘야하지만, IntersectionObserver은 그런 것들을 하지 않아도 된다. 작동 원리는 대충 이해하기로는 전체 페이지가 있고, 그 안에 우리가 보는 뷰가 있다는 것을 전제로 한다. 그 중 지정된 element가 우리가 보는 뷰 안에 들어오거나 나가는 것을 감지하여 이벤트를 발생해준다. 실행 목적 1. div 태그에 a 태그를 연이어 놓고 싶다. 2. 이 a 태그는 무한으로 만들어질 수 있고 이걸 스크롤로 계속 내리고 싶다. 태그 정.. 공감수 0 댓글수 1 2023. 3. 22.
[비동기] promise 1. resolve / reject = callback 함수이다. 2. resolve / reject 인수는 진행 상 필수요소이다. > 없다고 해서 문제가 발생하는 것은 아니지만 아래 finally, then, catch가 실행되지 않는다. 3. 사용예시 1) val() 실행되며 안에 있는 프로미스 작동 2) setTimeout = 비동기 함수라서 동기 흐름에서 벗어나서 작동 3) setTimeout 안 함수로 랜덤함수를 만들어 5보다 작으면 성공/ 크면 실패로 성공실패 사례를 만듦 > 해당 부분은 원래 API가 연결이 안되는 등의 오류를 처리하기 위함. 연결되면 성공, 안되면 실패처럼. > 하지만 여기서는 임의로 랜덤함수로 성공-실패를 지정해줌 4) 여기서 "안에 들어있는 콘솔로그" 는 프로미스 안에 .. 공감수 0 댓글수 0 2023. 3. 17.
[우테코] Lv. 1 런치 구현 - 2단계 배경지식! 01. 점차 체력이 떨어져간다. 02. 추가되는 기능/ 선호목록 만들기, 선호-비선호, 세부정보 모달 03. 꼬여버린 임포트 1. PR 메세지 + 리뷰(답변) Q. 대략적인 파일 임포트 : 위에서 보실 수 있다시피 굉장히 파일이 엉켜있습니다. 이를 해결하기 위해서 붙잡고 있었지만 도저히 해결할 수 없었습니다. 이렇게 된 원인을 제 생각대로 말하자면, 컴포넌트의 불명확한 정의라고 생각합니다. 컴포넌트를 재활용이 가능한 엘리먼트 단위정도로 생각했습니다. 때문에 파일 안에 템플릿과 그 엘리먼트 용도에 맞는 함수들을 넣었습니다. 그 결과 다른 곳에서 그 함수를 필요로 한다면 그 파일을 임포트하게 되고, 이것이 상하관계 없이 이어지며 결국 서로가 서로를 임포트하는 상황에 이르렀습니다. 이 상황이 굉장히.. 공감수 0 댓글수 0 2023. 3. 14.
[우테코] Lv. 1 런치 구현 - 1단계(2차) 배경지식! 01. 여기서부턴 나혼자 리팩토링! 02. 악 테스트 어려워 1. PR 메세지 1. 구상 * 템플릿 분리: 일단 동적 컴포넌트로 따로 변경되지 않을 컴포넌트는 템플릿 파일에 따로 저장하였습니다. 파일로 분리해 놓는 것이 좋을 수 있지만, 적어도 지금은 분리되어있으면 가독성만 해친다고 생각하였습니다. 다만, 모달창을 하나의 폼으로 다시 정의한 과정에서 템플릿이 너무 길어졌다는 문제가 있습니다. 거슬리기는 하지만 따로 빼는 것은 다른 컴포넌트와의 통일성을 해친다고 생각해 동일하게 넣었습니다. * 컴포넌트: 일전에 했던 것처럼 컴포넌트 안에 이벤트리스너를 추가하는 함수를 구현했으나 로직들을 다른 파일에 만들어 불러오는 식으로 만들었습니다. 다만 이런 경우에 다른 파일에 종속된다고도 생각이 들었습니다.. 공감수 0 댓글수 1 2023. 3. 14.
[우테코] Lv. 1 런치 구현 - 1단계(1차) 배경지식! 01. 컴포넌트란 무엇일까. 컴포넌트 중심 개발이 미션 목표 02. 주어진 탬플릿으로 보다 원활한 css but 많아진 기능구현 03. 지금까지 중 제일 시간이 부족. 3일 중 마지막날에 이르기까지 못한 기능구현 04. 설계.. 했다고 생각했는데 어디까지가 도메인이죠? 1. PR 메세지 1. 구상 * 컴포넌트 분리: 컴포넌트를 처음 접했습니다. 때문에 컴포넌트가 무엇인지를 익히는 것이 가장 우선이었습니다. 페어와 이야기한 끝에 컴포넌트를 html 태그 중 기능을 가지는 것으로 정의하고 이를 하나의 파일로 만들었습니다. 해당 컴포넌트 파일은 컴포넌트를 랜더링할 수 있게 템플릿을 가지고 있고, 이벤트-모달창을 키거나, 필터를 하는 등-를 가지고 있는 경우 이벤트를 부여하는 함수를 포함했습니다. *.. 공감수 0 댓글수 0 2023. 3. 14.
[Map/Object] Map과 Object의 key, value 다루기 및 차이점 key - value 를 이용한 데이터 저장 방법은 두 가지가 있다. - map - object 이 두 가지가 같은 것이라고 생각했다. 그러던 중 두 개념이 다른 것임을 깨닫고 어떻게 다른지 찾아보았다. 더불어 데이터를 저장하고 사용하는 과정에서 벌어질 수 있는 다양한 상황을 실험해보았다. 이렇게 다른데 왜 같은 거라고 생각했을까? 실제로는 map을 잘 안써서 그런가 - 기본 개념 / 문법 Map Object 생성 방법 const map = new Map([ ["a", "문자형 key"], [1, "숫자 key"], [[1, 2, 3], "직접 array key"], [arr, "참조 array key"], ]); const object = { a: "문자형 key", 1: "숫자 key", "[1, 2.. 공감수 0 댓글수 1 2023. 3. 5.
[CSS] display속성 발표자료 간단한 inline / block에 대한 소개, flex, grid의 설명, 실제 사이트 예시를 포함하고 있습니다. 공감수 0 댓글수 0 2023. 3. 5.
[모던자바스크립트] Number/Math 메서드 정리 Number 메서드 유한한 수인지 확인하기 Number.isFinite() vs isFinite() 👉 Number.isFinite: 정말 유한한 수인 경우에 true 👉 isFinite(): 인수를 한번 처리하고 유한수인지 확인하기 때문에 true = 1로 처리됨. 👉 인수에 따른 반환값 인수 Number.isFinite() isFinite() 개념 유한수 판단 유한수 판단하는 빌트인 전역 함수 0 true true 100 true true -13 true true 1.3578 true true -54.573277 true true 2**53 true true 2**53-1 true true "1" false true true false true false false true undefined fals.. 공감수 0 댓글수 0 2023. 3. 5.
[HTML] input / form tag 기존에 유저의 입력을 받는 것은 input tag를 js에 가지고 와서 value값을 확인했다. 이번에 이런 부분이 비효율적임을 느꼈고 문제가 있던 부분 2가지를 고쳤다. 1 수정전: 기본값을 value로 설정하고 클릭하면 삭제하고 초기화하면 다시 생성하는 것으로 처리 수정후: input 속성 중 placeholder을 사용할 수 있다. > 사실 이건 제시된 화면에서 이렇게 처리하고 해서 처리한 부분이었다. > 찾아보니 placeholder를 지양하자는 블로그도 있었다. (https://ibrahimovic.tistory.com/30) > 그 근거 중 내가 느낀 제일 큰 문제점은 리더기에 읽히지 않는다는 점이었는데, 만약 이 말이 사실이라면 충분히 지양될 이유라고 생각된다. > 다만 해당 문제는 상위에 .. 공감수 0 댓글수 0 2023. 2. 28.
[우테코] Lv. 1 로또 구현 - 2단계(웹) 2차 PR 후기_최종 배경지식! 01. 2단계는 1차 PR을 보내고 리뷰를 받고 그에 수정을 하고 2차 PR을 보내 머지까지 된 과정을 적었다. 02. 기술적인 부분에서 많은 아쉬움이 남는다. 03. 해야할 것들이 눈에 보이는데도 시간이 없고 내 마음의 여유가 없어 구축하지 못했다. 04. 해야할 것들과 배워할 것들이 쌓여있는데 코드도 짜기에도 바쁘고, 짠다고 해서 배움이 없으니 맘에 들지도 않는 상태이다. 지난 PR 때 작성한 질문에 대한 리뷰에 대한 리뷰 Q. 인터페이스와 상호작용하는 경우가 처음이라 이걸 여러 파일로 나누어도 되는 것인지, 이벤트 별로 나누는 것이 좋을지, 화면 별로 나누는 것이 좋을지, 혹은 다른 기준이 있을지 궁금합니다. A .크게 화면(페이지)에 따라 나누기와 컴포넌트에 따라 나누기가 있을거 같습니.. 공감수 0 댓글수 0 2023. 2. 27.
[우테코] 어쩌다 면담 고민이 많은 날이 계속 되었다. 구조적으로 어느 것이 좋은 건지 모르겠고, 사람들은 이렇게 하고 있다고 말하는데 그걸 동의할 수 없었다. 사람들은 나름의 근거를 대며 그렇게 이어가고 있었고, 나는 그런 근거도 없이 일단 그게 아닌거 같은데, 하는 마음만 들었다. 그래서 일단 여러가지를 따라 이미 만든 코드를 분리해보고자, 리팩토링해보고자 했지만 손을 댈수록 이상해졌고, 이게 맞는 방법인지 의문이 들었다. 그러다가 코치분들이랑 이야기를 할 기회가 생겼다. - 내가 가장 고민을 하던 구조에 대해 질문을 했고, 왜 그걸 고민하는 지에 대해 물어보셨다. 결국 이야기의 종합적인 결론은 다른 사람을 너무 의식하지 말고 맞다고 생각하는 것을 하라는 것이다. 전공자이니 뭐니 해도 물어보면 사실 정답이 없는 부분도 많고.. 공감수 0 댓글수 0 2023. 2. 24.
[우테코] Lv. 1 로또 구현 - 2단계(웹) 1차 PR 후기 배경지식! 01. 2단계는 웹으로 인터페이스를 만들어야해서 html, css를 연결해야 했다. 02. 기간은 길었고 많은 리뷰를 받으려면 빠르게 했어야 했다. 03. 바닐라 자바스크립트로 한 경험이 적어서 일단 index.js로 몰아넣었는데 후에 이걸 분리하기가 어려웠다. 04. 다른 사람들은 뷰를 만들거나 기능 단위로 구분하거나 했는데.. 나느.. 1단계 PR 리뷰의 리뷰 일단 1단계를 페어 끝내고 받은 피드백들과 질문에 대한 답변은 아래와 같다. 1. 작성 의도 1) mvc패턴에 대한 고민 : 코치님은 본 미션에서 나눈다면 어떤식으로 나누실지 궁금합니다. > M (모델): 데이터와 비즈니스 로직을 관리 V (뷰): 레이아웃과 화면을 처리 C(컨트롤러): 명령을 모델과 뷰 부분으로 라우팅이라는 기준에 .. 공감수 0 댓글수 1 2023. 2. 24.
[JEST] test.each 사용하기 만약 당신이 같은 함수를 인수만 다르게 해서 테스트하고 싶다면 test.each를 사용해볼 수 있다. 기본 문법은 다음과 같다. test.each([[test_인수], [test_인수], [test_인수]])( "test 제목 %#", //%# = 테스트 번호(index) (testCase) => { const result = testFunction(testCase); expect(result).toEqual(result); } ); 예시로 인수 두 개를 받아 이를 합하는 함수를 만들어 테스트하고자 한다. //testCase_1 = 1 + 2 = 3 function plus(one, two){ return one + two ; } test.each([[[1,2]]])( "더하는 함수 테스트 %#", (t.. 공감수 0 댓글수 0 2023. 2. 19.
[우테코] Lv. 1 로또 구현 - 1단계(페어) 후기 배경지식! 01. 로또는 프리코스때 했었다. 02. 인덴트(깊이)가 하나로 제한되었고, 인수도 2개로 제한되었다. -크게 상관은 없었다.- 03. 1단계는 페어로 이루어져 하나의 컴퓨터로 같이 코드를 짠다. 04. 기간은 총 3일이며 야근도 했다. 05. 하나의 컴퓨터로 돌아가며 진행하며 이번에는 시간을 기준으로 했다. 이번 미션은 이미 해봤던 거라 괜찮을 줄 알았는데 여전히 같이 하는건 에너지가 많이 소모된다. 이전에는 미션이 어떻게 진행되는 지에 대해 적응하는 기간이었다면, 이번에는 생각해보던 것들을 조금이나마 시도해보는 시간이었다. 저번 교육때 말씀하시기로 pr에는 코드 작성에 대한 내용을 담으라고 해서 이번에는 내가 의도한 바와 궁금한 점을 적었다. 아래가 그것이다. 1. 작성 의도 1) mvc패.. 공감수 0 댓글수 0 2023. 2. 18.
[ Naming ] Index.js / App.js 의 차이 프리코스 때에 우테코에서 준 파일들의 형식은 App.js가 기본이 되었다. 이 위에 input/output/constant 등을 require/exports 하며 운용했다. 하지만 이번 파일의 이름은 index.js였다. 이에 대해 우리팀(나의 페어를 포함하여 3쌍의 페어)는 아래와 같이 행동했다. 1. index.js 속에 class app을 만들고 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 2. index.js 속에 class app을 만들고 여기를 중심으로 코드를 짠다. (나!) 3. app.js를 index.js로 수정한 후 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 여기에서 잘못된 코드는 없다.. 늘,,.. 공감수 0 댓글수 0 2023. 2. 14.
[ Pattern ] Layered Architecture Pattern(계층화된 아키텍처 패턴) * 여러 글을 읽은 후 이해한 내용과 내 생각을 정리하는 것으로 올바르지 않는 정보가 있을 수 있습니다. 1. Layered Architecture Pattern ( 계층화된 아키텍처 패턴)이란? : 개발 모델 중 하나로 수직적-단계적-인 여러 층(레이어)으로 구성하는 것. 예로 들어서 2단, 3단, 4단이 있지만, 딱 잘라서 '여기부터 여기까지 레이어'하는 것은 아님. 개념의 경계가 흐릿하여 어느사람은 이걸 A레이어로 볼 수도 있고, B레이어로 볼 수도 있음. 때문에 무엇이 무엇에 포함된다를 중점으로 보기보다는 그 개념이나 의미를 생각하여 왜 이걸 사용하는지에 대해 고민하는 것이 좋은 접근으로 보임 - 2. 그럼 대체로 어떻게 구분되는가? : 크게는 사용자부분과 데이터부분으로 나눈다고 보면 됨. 거기에.. 공감수 0 댓글수 0 2023. 2. 13.
[ 우테코 ] Lv. 1 자동차 경주 구현 - 2단계(리팩토링) 후기 배경지식! 01. 1단계(페어)를 끝내고 리뷰가 오면 피드백을 반영한다. 02. 그리고 머지가 되면 2단계를 진행한다. 03. 멘토의 여러 리뷰와 우테코에서 말하는 조건을 반영한다. 혼자 리팩토링을 하며 아래와 같은 것들을 했다. 물론 바로 적용한건 아니고 여러 번 피드백을 들으며 진행했다. 변경한 것들 inputView.js에 input 관련 함수와 try-catch를 모아놓기 사용자의 차 이름 덩어리 인풋값을 inputView에서 가공하지 않기 위해 index.js에서 처리했다. 근데, 또 round는 inputView.js안에서 try-catch를 잡아냈다. 통일성이 없다고 생각되어 해당 부분은 모두 input.view에서 처리를 하도록 수정했다. 다만, input값을 inputView에서 가공하는.. 공감수 0 댓글수 0 2023. 2. 13.
[ 깃/ 깃허브 ] 내가 이해하기 위한 정리 우테코를 하면서 깃/깃허브를 처음 접했다. 그래서 이걸 어떻게 하라고...? 싶은 느낌. 뭐가 뭔지 모르겠어서 하라는 대로 하기만 했다. 아직도 뭐가 뭔지 모르겠지만, 이제까지 하면서 내가 이해한 바를 정리한다. 각 코드보단 큰 줄기가 다음과 같다. 만약 여러 사람과 하는 프로젝트라고 할 때, 주되게 끌고 가는 ID의 레파지토리가 있을테다. 각각의 업무를 맡은 사람이 이 main이라는 ID의 레파지토리에서 "fork"해서 자신의 깃 허브에 레파지토리를 판다. > main의 홈페이지 안에 fork라는 칸이 있고, 이를 클릭하면 된다. fork를 해도 내 컴퓨터 안에서 작업하기 위해서는 로컬저장소로 "clone" = 복사해야 한다. > 내가 작업하고자 하는 폴더에서 터미널에 "git clone 클론 코드"를.. 공감수 0 댓글수 0 2023. 2. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.