티스토리

record4me

검색하기

블로그 홈

record4me

record4me.tistory.com/m

잇츄미 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[인턴] 24_09819 한 달 간의 개발 인턴을 경험한 후 (feat. 클라이언트(고객님)) 한 달 인턴 지원 전, 내가 취업준비 관련하여 고민하던 것-백엔드와 소통해서 만든 프로젝트가 없었다는 게 아쉬웠어. baas로만 구현했던 프로젝트가 대부분이어서 현업에서 백엔드와 같이 프로젝트를 완성하기엔 경험이 부족하지 않을까 생각했어. 다른 포지션과의 REST API통신을 하며 겪은 문제나 서로 필요한 데이터가 무엇인 지 주고받으며 기능 구현을 해보고싶었어. 프론트엔드에서 API통신하며 필요한 데이터를 정리할 API설계를 효율적으로 짤 수 있지 않을까 싶었지. 한 달 인턴을 지원하게 된 이유(무엇을 기대하고 지원했는 지)-무엇보다 현업에서의 백엔드와의 소통을 대비할 수 있고, 프론트엔드에서 데이터를 사용할 때 편하게 API 통신을 해볼 기회라고 생각했어. 사수분이 계시다면 사수분께 질문을 드리고 답.. 공감수 0 댓글수 0 2024. 8. 19.
[TIL] 24_0528 vite, vue 튜토리얼 24_0528 실시간 제작 중 시작 가이드$ yarn create vite ? Project name : >> vite-project vue-todolist ? Select a framework: >> - Use arrow-keys. Return to submit.> VueV Select a framework: >> vueV Select a variant : >> - Use arrow-keys. Return to submit.> JavaScriptV Select a variant: >> JavaScript vite 초기화 끝 - vscode 세팅 시,권장 익스텐션으로 vue - Official 설치 공감수 0 댓글수 0 2024. 5. 28.
[TIL] 24_0308 input값 타입에 대한 트러블 슈팅 💥트러블 슈팅💥 📌 관련 이슈 input값 타입에 대한 트러블 슈팅 해결 -문제 : 유효성 검사로 공백을 제거 하기 위해 해당 문자열에서 공백을 모두 제거해서 빈 문자열로 대체하려고 replace함수를 사용했지만, {}' 형식에 'replace' 속성이 없습니다." 라는 메세지가 뜸. - 원인 : useInput의 initialState의 interface타입을 any에서 unknown으로 바꿨을 때, 타입스크립트가 interface에서 지정한 string타입을 인지 못 함. - 방안1 : as string으로 타입을 확정해줌. - 방안2 : 매개변수에만 제네릭을 사용해서 매개변수로 들어오는 initialState의 값에 제네릭으로 타입지정해 주기. - 방안3 : 사용된 useInput 커스텀 훅의 in.. 공감수 0 댓글수 3 2024. 3. 8.
[TIL] 24_0305 타입스크립트(TypeScript)의 컴파일러 ✨타입스크립트의 컴파일러✨ - 컴파일러 컴파일러라는 건 프로그래밍 언어로 이루어진 소스 코드를 다른 프로그래밍 언어로 변환하는 도구야. 타입 스크립트의 컴파일러인 tsc는 타입스크립트를 자바스크립트로 변환해줘. 📌1- 타입 검사를 해줘. - tsc라는 소스코드의 정적 타입 검사를 수행해. => 그래서 개발자가 코드에서 타입 관련된 오류를 바견해서 수정할 수 있어. 📌2-에러 메세지 해석할 때 도움이 돼 - 타입스크립트의 컴파일러는 소스 코드의 어디에서 에러 메세지가 난다며 표시해줘. - 보통 자바스크립트에선 런타임 오류가 나면 에러가 대충 어디서 터진 것 같아도 정확하게 알기 위해선 추가적인 로그를 설치해서 로그를 소스 코드에 삽입하고 그 사이의 경계값들을 보는데 - 타입스크립트에서는 에러 메세지를 해석.. 공감수 0 댓글수 0 2024. 3. 5.
[TIL] 24_0304 자바스크립트의 약점 ✨ 자바스크립트의 약점 📌 1. 실행시간에 결정되는 변수타입 - 자바스크립트는 변수 타입이 실행 시간에 결정되니 때문에 따로 타입을 지정하지 않았어. 예를 들면, common.js 시절에는 var라는 키워드, es6 때의 경우는 let, const라는 키워드를 써서 변수를 정의했어. const는 상수, let은 변수라고 보면 돼. 말 그대로 이 변수가 값이 변할 수 있는지 또는 고정되어 있는 지를 보고, 소수점 숫자인 지, 문자인 지 타입을 명확하게 지정하지 않았어. => 그래서 자바스크립트는 변수 타입이 실행 시간에 결정될 수 밖에 없어. 들어올수 있는 변수의 데이터들이 너무 다양하기 때문이야. 📌 2. 약한 타입을 체크 - 그 외에는 개발자의 실수로 인한 오류가 발생하기 쉬워. 이런 오타같은 실수가 .. 공감수 0 댓글수 0 2024. 3. 4.
[TIL] 24_0229 다섯번째 프로젝트에 대한 회고 Keep - 현재 만족하고 있는 부분 react-query와 리덕스를 같이 써서 기존에 배운 것에 적용할 수 있는 기회됐습니다. 이번 협업 때도 issue와 PR로 프로젝트 관리가 잘 되어서 좋았습니다. 미디어 쿼리로 반응형을 구성해본 게 재밌었습니다. 팀원분들에게 기술적으로 배울 수 있는 것들이 많아서 좋았습니다. 예를 들면, API로 만든 지도 검색 리스트를 만들거나, 리액트 쿼리를 이용한 CRUD, 이미지 변경들을 배울 수 있었습니다. Problem - 불편하게 느끼는 부분 남해리 supabase의 문서가 의외로 다른 문서보다 잘 되어있었음에도 method를 활용을 원활하게 하지 못해서 아쉬웠습니다. issue, PR말고도 리뷰, discussion, wiki, todo 기능이 있었는데 이번에 사용.. 공감수 0 댓글수 0 2024. 2. 29.
[TIL] 24_0221 리덕스 thunk, tookit 에서의 오타, 리덕스와 vscord의 기능과 이름 충돌로 인한 오류 thunk에서 반환된 data가 fulfiled에 payload로 가지 않는 버그 해결 추측 오타나 action이름이 잘못 됐을 것, return 하는 방법이 잘못된 것. ex) thunkAPI.rejectWithValue(), thunkAPI.fulfillWithValue활용 안 한 것 시도 1. thunk안에서 return을 thunkAPI.fulfiledWithValue(data) 이렇게도 써보고 마이그레이션된 방법인 그냥 return data도 해봄 2. __getletterCard의 thunk함수와 extraReducers를 처음부터 다시 써 봄. 원인 1. extraReducers의 이름이 "s"가 빠져있는 extraReducer라고 되어있어서 extraReducers의 기능이 처음에 제대로 .. 공감수 1 댓글수 0 2024. 2. 21.
[TIL] 24_0216 리덕스 툴킷(RTK) 리덕스 툴킷 리덕스 툴킷은 리덕스를 배웠던 구조와 패러다임이 전혀 다르지 않아. 새로운 게 아니야. 쓰는 방법은 useSeletor, dispatch 의 업데이트 부분들이 같고, 바뀐 부분은 설정하는 부분들인 모듈(modules)부분들이 달라. 리덕스 툴킷 설치 방법 $ yarn add @redux/toolkit react-redux $ npm install @redux/toolkit react-redux 기존의 리덕스를 툴킷으로 바꾸는 방법은 쉬워. 리듀서는 똑같이 모듈스안에서 만들어져. 과정은 처음에 creatorStore, rootreducer, store를 provider에 껴서 만드는 건 같아. 기존의 리덕스와 리덕스 툴킷의 차이 기존 리덕스에선 휴먼에러를 방지하기 위해 액션 밸류(action).. 공감수 0 댓글수 0 2024. 2. 16.
[TIL] 23_0215 네번째 프로젝트 KPT 회고, 팀프로젝트 what`s your music 네번째 프로젝트 KPT 회고 사용자들이 오늘의 음악을 추천하며 서로 공유할 수 있는 뉴스피드 프로젝트를 만들었어. 구현하고 보니 마감기한은 지켰지만 추가 구현 사항을 구현하지 못 한 게 많이 아쉬웠어. 물론 팀워크도 좋고, 프로젝트 관리도 잘 되서 정말 좋아. github의 issue와 Pull Request로 관리했거든. Keep - 현재 만족하고 있는 부분 - 제 시간 내로 필수사항을 구현한 것 - issue와 PR을 사용해서 팀원과 소통이 잘 된 프로젝트 관리 - 와이어 프레임대로 잘 완성된 부분 Problem - 불편하게 느끼는 부분 - 선택 구현 기능을 구현하지 못 한 것 뿐만 아니라 일부 버그를 바로 캐치 못 해서 나중에서야 해결한 것 - API설계를 확실히 하지 못해서 실시간으로 데이터 구조.. 공감수 0 댓글수 0 2024. 2. 15.
[TIL] 24_0205 git push하면서 reject 발생 git push 하며 뜬 rejected git switch 하기 전에 commit과 push를 마치고 이동해서 새 데이터를 add, commit했는데도 head위치가 불안정하게 이동한 줄 알았는데 이동한 브랜치에서 그전에 원격저장소에서 직접 수정한 내역을 로컬로 안 가져와서 생긴 문제였어. 리드미를 원격저장소에서 직접 수정했거든. 아래 같은 오류가 떠서 해결했어. 이건 두번째로 뜨는 건데 이전엔 git rebase로 해결했는데 이런 방법도 있더라구. 해결한 방법 $ git log $ git reset 628b04ecf2f8c1a3d6fb8f5c307fbd647fb5b284 $ git stash $ git pull origin props-drilling $ git stash pop $ git add . .. 공감수 0 댓글수 1 2024. 2. 6.
[TIL] 24_0214 세번째 프로젝트를 마치며, prop-drilling-context-redux -세번째 프로젝트를 마치며, 휴먼에러로 삽질만 몇 번을 했는 지 모를 2일을 보내고 다른 2일간은 prop-drilling, 1일은 redux로 개선하는 시간을 보냈어. 첫번째 삽질만 아니었어도...하지만 의미있는 삽질이었어. ㅎㅎ prop-drilling-context-redux 처음 prop-drilling할 때 휴먼에러로 고생한 것과 초기 state 데이터 형태가 배열과 객체로 따로 관리되서 setState로 변한 값을 설정해줄 때 데이터 형태를 어떻게 뿌려줄 지 무지 고민했던 것 같아. contextAPI를 사용해서 state를 공유하니까 정말 세상 편하지 않을 수가 없더라. prop-drilling에서 답답했던가 1차로 싸악 풀렸어. 하지만 최상위 컴포넌트에서 state를 보내주려고 하니까 왔다.. 공감수 0 댓글수 0 2024. 2. 3.
[TIL] 24_0202 필터 오류 공감수 0 댓글수 0 2024. 2. 2.
[TIL] 24_0201 Redux Ducks Pattern Ducks Pattern 리덕스를 사용하기 위해선 리덕스의 구성요소들을 모두 만들어야 사용이 가능해. 이건 개발자 마다 다를 수 있어. 그래서 협업하면 중구난방일 경우가 상당히 높은데 Erik Rasmussn 라는 분이 통일시키기 위해 패턴화를 시켜줬어. 그게 ducks pattern이야. 덕스 패턴은 이미 쓰고 있어. 이전에 했던 모듈 파일 1개에 Action Type, Action Creator, Reducer가 모두 존재하는 작성방식이야. Reducer 함수를 `export default` 해. Action creator 함수들을 export 하고 Action type은 app/reducer/ACTION_TYPE 형태로 작성해. // counter.js // action value const PLU.. 공감수 0 댓글수 0 2024. 2. 1.
[TIL] 24_0131 useState 와 useRef useState와 useRef를 사용하는 input 내부의 값 관리 useState로 하면 많은 값을 같이 불변성을 지키면서 눈으로 즉각 보며 관리를 할 수 있어서 좋고 useRef는 그 부분의 값을 저장하고 해당 부분을 콕 짚어서 제어할 수 있어서 좋아서 같이 필요한 곳에 쓰믄 좋은 것 같아. input값의 변화를 ref로 다룬다면 이렇게 가독성은 떨어지는 것 같아. const test = () => { const inputOneRef=useRef(Number) const inputTwoRef=useRef(function(){}) const inpuThreetRef=useRef(String) const inputfiveRef=useRef(boolean) const inputfiveRef=useRef().. 공감수 0 댓글수 0 2024. 1. 31.
[TIL] 23_0130 Redux -Action Value Creator Redux -Action Value Creator 중앙 데이터 관리소인 store에서 리듀서는 store에 들어있는 state(상태)를 제어해. 들어온 state값으로 지지고 볶아서 내보내주거나 보관하는겨. 초기 리듀서는 이렇게 고지식했어. // counter.js // 초기 상태값(state) const initialState = { number: 0, }; //원래라면 // const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야. // 리듀서 : "state에 변화를 일으키는"함수 // (1) state를 action의 type에 따라 변경하는 함수 // state를 action 안에 있는 type에 따라서 변경하는 작업 // input : state, acti.. 공감수 0 댓글수 0 2024. 1. 30.
[TIL] 24_0129 useDispatch의 역할 useDispatch -state를 바꾸는 방법 중에 하나야. -action객체를 이용해서 action의 type에 따라서 바꿔줘. 위 그림을 펼쳐보자면, 중앙 데이터(state) 관리소인 store 안에는 1. state도 있고, 2.리듀서(Reducer)도 있어. state는 상태(상태 값)이고, 리듀서는 state(상태)를 제어해줘. 돌아가는 원리 1. 현재 보여주는 UI는 => App.jsx 컴포넌트라고 할 때, ui에서 이벤트가 일어나서 2. 중앙 데이터 관리소인 store에 있는 state => counter의 값을 바꿔야한다는 요청을 UI(컴포넌트)에서 하면 예를 들어 이런 요청 => ex) onClick={setState(counter + 1)} 3. 그 요청을 Dispatch란 애가 수행.. 공감수 0 댓글수 2 2024. 1. 29.
[TIL] 24_0128 리덕스 세팅하면서 useSelector로 state확인하며 경고발생 리덕스를 세팅하면서 useSelector로 state값이 잘 들어오나 확인하려고 state전체를 가져와서 통째로 리턴했더니 불필요한 렌더링이 일어났다며 전체 state를 반환하는 Selector는 상태가 변경될 때마다 다시 렌더링되니까 주의하라는 메세지가 떴어. 발생한 경고 Selector unknown returned the root state when called. This can lead to unnecessary rerenders. Selectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes. 원인 코드 impor.. 공감수 0 댓글수 0 2024. 1. 28.
[TIL] 23_0127 useContext(context API) useContext -react context의 필요성 부모=> 자식 컴포넌트로 데이터 전달할 때 props로 전달했어. 부모 => 자식 => 그 자식 => 그자식의 자식 => prop driling 이런 위에서 아래로 props를 보내는 props drilling => 깊이가 너무 깊어지면 부모에서 자식으로 넘겨줄 때 여러개의 컴포넌트있을 경우 어디에서 prop이 왔는 지 알수 없기도하고 오류가 무조건 생기며 원인 파악 힘들어 하지만 context API를 쓰면 전역으로 데이터를 관리할 수 있어 어떤 컴포넌트든 전역적으로 선언되어있는 데이터에 접근 가능해. contextAPI 필수 개념 createContext : context 생성 (컨텍스트를 만드는) Consumer : context 변화 감지 (.. 공감수 0 댓글수 0 2024. 1. 27.
[TIL] 24_0126 리액트에서의 map사용, key prop 오류 리액트에서의 map 사용 리액트에선 배열을 받아서 순서있는 엘리먼트 리스트를 출력하는 컴포넌트를 쓸 때 key값을 부여해. -key는 React가 어떤 항목을 변경, 추가, 삭제할 때 식별하는 걸 도와. 엘리먼트에 안정적인 고유성을 부여하기 위해서 배열 내부에 있는 요소에 key속성을 주고 값을 지정해줘야 해. 예를 들면, const ElementKey = () => { const array = [ { id: 1, name : 보라돌이, }, { id : 2, name : 두비, }, { id : 3, name : 나나, }, { id : 4, name : 보, } ] return ( {array.map((data) => { const { id, name } = data return( {name} ) }.. 공감수 0 댓글수 0 2024. 1. 26.
[TIL] 두 번째 개인 프로젝트 피드백 반영, 베이직 과제 후 두번째 개인 프로젝트 피드백 반영 App.js는 리액트 컴포넌트니 다른 뷰와의 통일성을 위해 확장자를 jsx로 변경 App.jsx 유무 처리 불필요한 빈 태그 처리 주의!! uuid, shortid등을 사용 TodoForm에서 todoInputs => setTodoInputs의 함수형 업데이트를 이용 유사한 형태의 UI를 공통화-> 템플릿 여기서 템플릿은 총 3번을 걸쳐 다시 만들어졌는데 첫번째는 -첫번째 템플릿 import React from "react"; import TodoCards from "view/main/todoCards/TodoCards"; // 템플릿 만들기 export const StateTemp = ({ title, isDoneState, todoInputs, setTodoInput.. 공감수 0 댓글수 0 2024. 1. 25.
[TIL] 24_0124 useEffect, useRef 이번 리액트 숙련 강의를 들으며 이번에 만들었던 투두리스트를 되짚어봤어. useEffect, useRef useEffect - 로딩시에 콜백으로 안의 실행문을 한 번 만 딱 실행되게 해주는 함수야. useRef - 값을 Dom에 저장해서 렌더링해도 값을 유지하게 해주는 저장소 역할도 하고 - Dom에 직접 접근해서 값을 직접 DOM제어도 할 수 있어서 두 함수를 이용하자면 useEffect(() => { refComment.current.focus(); },[]) const refTitle = useRef(null); const 함수 = () => { refTitle.current.focus(); } 이런 식으로 useEffect론 로딩하자마자 해당 input에 포커스 줄 수 있고, 함수실행되고 마지막에.. 공감수 0 댓글수 0 2024. 1. 24.
[TIL] 23_0122 이름 짓기, 비구조화 할당(객체 구조분해, 배열 구조분해) 이름 짓기 이번에 베이직 수업에서 변수, 클래스 이름 등의 이름 짓기에 대해 알려주셨어. 분명 직관적으로 잘 짓는다고 자부하고 있었는데 정말 작은 부분에서 못 짓고 있었다는 걸 알게 됐어. 그리고 바로 프로젝트에서도 수정했지. 물론 내가 보기엔 간단할 지라도 같이 협업하는 사람에겐 무슨 의미인 지 모르고, 그걸 사용하는 사람마다 일일이 알려줄 수 없으니 누가봐도 알아볼 수 있는 이름으로 지어야 해. 평소 삭제 버튼의 클래스 이름을 del-btn이라고 짓고 있었는데 이게 잘못 됐다는 걸 알았어. delete-btn라고 이런 식으로 길어지더라도 내가 함께 협업하는 사람도 직관적으로 알아볼 수 있도록 지어야 해. 예를 들어, del-btn 외에도 ed-btn 등 regi-btn 이런 것도 edit-btn이나 .. 공감수 1 댓글수 2 2024. 1. 22.
[TIL] 24_0121 컴퓨팅 사고, 개발 공부법 느낀 점 이번 베이직 과제로 컴퓨팅 사고와 개발 공부법을 읽었는데 정말 좋은 것 같아. 만약 이걸 알고리즘 카타와 알고리즘 세션을 하기 전에 봤다면 왜 정렬함수들과 알고리즘을 그렇게 표현을 해서 써봐야 하는 지 이해하는 데에 도움이 되지 않았을까라는 생각이 들어! 초보, 입문 코딩에 정말 좋은 글 같아! 알고리즘 세션을 들을 때나 알고리즘을 풀 때나 어떤 생각으로 그 로직을 짜야하는 지 답답했는데 이 글 보면서 묵은 때 빠지 듯 확 풀렸어ㅋㅋ편ㅡ안.. *참고 사이트 - https://velog.io/@teo/computational-thinking 공감수 0 댓글수 0 2024. 1. 21.
[TIL] 24_0120 Javascript 오류 - SyntaxError(구문 오류, 문법 오류) SyntaxError (구문 오류, 문법 오류) SyntaxError 객체는 문법적으로 잘못된 코드를 컴퓨터가 해석하려고 시도할 때 발생하는 오류를 나타내줘. JavaScript 엔진이 코드를 구문(문법) 분석을 할 때 언어의 구문에 맞지 않는 토큰이나 토큰 순서를 만나면 이 에러를 발생시켜서 수정하란 경고를 줘. SyntaxError : 경로 ~~ 코드면 파일.js:23(해당 오류 코드줄 ) 이런 식으로 이번에 zep에서 같이 공부하는 동료분의 고민을 리뷰하면서 해결했어. 해당 오류 예시 코드 export const ErrorEx = () => { const arr = [{ name : "장아찌", kind : "반찬", }, { name : "스테이크" kind : "반찬" } ] return ( {.. 공감수 0 댓글수 0 2024. 1. 20.
[TIL] 24_0119 SPA기반 리액트 SPA - Singel Page Aplication의 준말이야. 단 한 개의 페이지로 이루어진 애플리케이션이야. 모바일로 된, 안드로이드앱같다며 웹앱, 웹애플리케이션이라고도 불려. 기존의 MPA 같은 여러 페이지로 나누어진 앱은 문제가 있어. 예를 들어, 좋아요 기능을 눌렀을 때마다 페이지가 다시 갱신되며 깜빡이면서 다시 위치가 조정되는 건데(리렌더링,re-rendering) 그건 사용자에게 굉장히 불편해. (누를 때마다 화면이 계속 깜빡이며 새로고침되는 것.) 하지만 실제, 인스타, 페이스북처럼 리액트를 사용하는 앱은 그런 좋아요를 눌렀을 때, 그 자리만 해당 컴포넌트만 이미지가 채워지는 것 처럼 보여. 그 자리만 다시 갱신되는 거야. 하나의 페이지 안에서 해당 요소만 바꿔주는 거지. 단 한 개의 페이.. 공감수 0 댓글수 0 2024. 1. 19.
[TIL] 23_0118 리액트(React)에서 불변성 유지, todolist를 만들며.. 리액트에서의 불변성 유지 리액트 같은 경우 주소값을 비교해서 변화를 감지하는 데, 직접적으로 값을 비교하면 리액트가 감지 못하고 감지하기 위해 페이지 리렌더링을 하게 돼. 예를 들면, 최근 리액드로 투두리스트를 만들며, 불변성을 지키지 않으면 일어나는 에러를 겪었어. input 값을 비워주려고 직접 input의 value부분을 가져와서 동등연산자로 빈값을 주려고 하니까 경고같은 에러를 받았어. (아래 글) A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide betw.. 공감수 0 댓글수 0 2024. 1. 18.
[TIL] 23_0117 CRA, 컴포넌트, 렌더링, JSX CRA (Create React App) - 한 줄의 명령어로 React 프로젝트 개발에 필요한 요소들을 자동으로 구성하는 방법이야. - 실행 방법 yarn create react-app 폴더이름 이런 경우 React 프로젝트를 구성하기 위해 필요한 것들을 한 방에 알아서 깔아줘서 편해. -추가로, 리액트에 필요한 패키지를 설치해줄 때 명령어야. yarn add 패키지 이름 컴포넌트 - uiux요소를 표현하는 최소한의 단위인데 리액트의 핵심 구축 블록 중 하나야. - 리액트에서 개발한 모든 애플리케이션은 컴포넌트란 조각, 블록으로 구성돼. 헤더블록, 메인 블록, 푸터 블록 등으로. 리액트 컴포넌트를 표현하는 방법엔 두가지가 있어. - 함수형 컴포넌트 - 클래스형 컴포넌트 렌더링 - 리액트 앱이 실행되고 .. 공감수 0 댓글수 0 2024. 1. 17.
[TIL] 24_0117 React? 아키텍처? React - 리액트는 javascript 라이브러리야. UI(User Interface)를 구축하기 위해 만들어졌어. - UI를 Building한다는 건 웹 또는 앱어플리케이션의 보여지는 부분을 구축한다는 거야. React자체적으로는 라이브러리로 분류되어있어. 하지만 일부 사람들은 React는 단순한 라이브러리가 아닌 프레임워크라고 간주하기도 해. 그 이유로는 세 가지의 프레임워크적인 특징을 가지고 있다고 볼 수 있어서야. 1. 컴포넌트 기반 아키텍처를 가지고 있어.(컴포넌트 기반) - 이를 통해서 애플리케이션을 작은 다위롤 분할하고 재사용할 수 있게 해. *아키텍처 - 크게 빌딩을 짓는 시공과 비슷한 개념이야. - 여러 조각이 합쳐져서 하나의 건물을 만들어 내는 과정이라고 생각하면 돼. 소프트웨어도 .. 공감수 0 댓글수 0 2024. 1. 16.
[TIL] 24_0115 코드의 타이밍, 가져온 데이터를 저장할 임시 저장소 임시 저장소 -dataArr = [] 이 임시 저장소 하나로 맡은 기능의 반이상을 해결할 수 있었어. 로컬스토리지에서 꺼내 온 데이터를 잠시 보관했다가 꺼내 쓸 수 있는데 이걸 통해 휘발되는 정보를 잡아서 유지시킬 수 있어서 사용자에게 저장한 정보를 보여줄 수 있어. 로컬 스토리지와 이 임시저장소를 순환해서 정보를 교환해서 넣고 배치한다고 보면 되는 것 같아. 상단의 이 dataArr 하나로 등록, 조회, 삭제 기능을 완성하게 됐어. 코드의 타이밍의 중요성 느낀 점 - 처음엔 이 임시 저장소를 어떻게 써야하나 싶었는데 이젠 값을 유지해 주는 데 정말 필요한 존재라는 걸 알게 됐어. 공감수 0 댓글수 0 2024. 1. 15.
[TIL] 24_0114 두 번째 팀프로젝트를 마치며, 익숙해진 github의 issue, PR 컨벤션, 순수 자바스크립트 활용, form태그 두 번째 팀프로젝트를 마치며, 익숙해진 github의 issue, PR 컨벤션 / 순수 자바스크립트만을 이용해서 구현하는 것.. github에서 pull Request는 대체로 써봤지만 issue를 템플릿을 사용해서 제대로 써 본 적은 이번이 처음이었어. issue를 적고 PR을 올리는 과정이 번거로울 수 있지만 팀원들의 진행 사항이 어떤 지 수시로 확인할 수 있고 내 작업물도 언제까지 어떻게 마무리를 할 지도 알 수 있어서 좋은 경험인 것 같아. 주말이 껴있어도 팀슬랙을 통해 소통할 수 있어서 좋았고 작업물에 대한 의견도 교환할 수 있어서 좋았어. jQuery를 사용할 땐 쉬웠다는 느낌이었는데 순수 자바스크립트로 전부를 구하려고 하니 어려웠어.. 1 해결하면 1오류가 터졌지만ㅋㅋ..팀원분들이 같이 고민.. 공감수 0 댓글수 1 2024. 1. 14.

문의안내

티스토리
로그인
고객센터

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