티스토리

kongom2dev

검색하기

블로그 홈

kongom2dev

kongom2.tistory.com/m

14124

구독자: 0

방명록 방문하기

주요 글 목록

WIL 11 이번주차는 중간발표 후 미비된 부분을 보충하거나 추가로 기능을 시도해보는 주차다. 우리팀은 프론트에서 기술적으로 어필할 수 있는 부분이 부족하여 그부분을 보강하려한다. 지도를 펼쳐 마커로 청약 정보를 나타내는 식으로 표현하려 한다. 그러다 보니 기존에 디자인된 메인페이지와 괴리감이 있으면서도 없으면 허전한 느낌이 났다. 이 부분은 다음주차의 유저테스트를 통해 피드백을 얻어보고자 한다. 실질적으로 유저들은 괴리감을 느끼는지 어떤 뷰를 더 원하는지 파악하고 결정을 지어야 겠다. 공감수 0 댓글수 0 2022. 1. 16.
WIL 10 중간발표 백엔드와 데이터 연결을 마무리 짓고 중간발표가 있는 주차다. 보여지는 부분은 디자인대로 그려졌고, 처음에 약속했던 기능들은 다 연결 되었지만 프론트가 어필할 수 있는 부분은 없었다 MVP 단계에서 최소한의 기능만 빠르게 만들어 보고자 내린 결정이다 보니 어쩔 수 없는 부분도 있었다. 남은 3주 동안은 프론트를 통해 더 사용성있는 서비스를 만들기 위한 작업에 집중을 해야 할 듯 하다. 공감수 0 댓글수 0 2022. 1. 9.
WIL 9 부트캠프를 항해99를 선택했던 결정적인 이유 중 하나는 백엔드 프론트 디자인의 협업할수 있는 기회였다. 우리팀은 경험있는 디자이너 덕에 보통 회사에서 프로젝트가 어떤식으로 진행되는지 알수 있었고 또 그러한 부분을 맞춰가며 간접적으로 실제 업무를 느낄수 있었다 이번주까지 디자인 바탕으로 화면을 그리는것에 집중했다면 다음주는 각 기능을 연결하는 작업을 하게된다. 백엔드와 긴 시간을 보내며 함께 새로운것을 알아가게 될것이 기대된다 공감수 0 댓글수 0 2022. 1. 2.
WIL 6 클론코딩 저번 주차에서 마찬가지로 로그인과 CRUD에 대한 전반적인 이해도가 부족 했다. 부족한 부분에서 시작한 만큼 경험 하지 못한 부분을 하는 편으로 하길 원했고 같이 팀이었던 팀원분의 배려로 로그인, 회원가입 부터 작업 할 수 있었다. 일단 먼저 동작이 되는 것에 신경을 먼저 썼다. 기본적인 최소단위 컴포넌트 부터 페이지까지 간략하게 먼저 그렸고 회원가입시 유효성 검사와 로그인시 서버로 post 요청 보내는 것까지 하고 나니 이틀이 지나있었다 그 후에 포스트 작성하는 부분을 맡아서 본격적으로 CRUD를 경험하게 되었다. 백에서 만들어 주신 API가 유효한지 테스트를 해보고 포스트 등록 하려 했으나 리덕스의 흐름을 제대로 이해하지 못하다 보니 여러번의 삽질을 통해 겨우겨우 버튼 클릭 시 데이터를 서버로 전송할.. 공감수 0 댓글수 0 2021. 12. 20.
WIL 6 CORS 이슈, 미니프로젝트 Todo99 CORS란? 교차 출처 리소스 공유 정책 출처가 다른곳의 자원에 접근할 수 있도록 브라우저에 권한을 부여하는 정책 브라우저의 현재 주소와 API의 도메인이 일치해야 데이터에 접근 가능 불일치 시 CORS 에러 발생 ⇒ 이에 따른 CORS의 설정 필요 json-server로 만든 서버엔 모든 도메인을 허용하는 CORS 규칙이 적용되어 있음 특정한 도메인만 허용을 해야 할 것 (Open API 만드는 것이 아니라면..) 프론트에선 Proxy(웹팩개발서버에서 제공)를 통해 이문제를 해결 할 수 있음 물론, 백엔드에서 해결하는 방법도 있다. package.json 에서 "proxy": "http://localhost:4000" 코드 추가 https://react.vlpt.us/redux-middleware/09.. 공감수 0 댓글수 0 2021. 12. 12.
WIL 5 같이 일하기 좋은 개발자 현재의 문제를 코드로 해결할 수 있는 능력은 기본 더 기민하게 문제 해결 하기 위한 협업능력 다른면을 볼 수 있는 열려있는 자세 리액트와 전역 상태 관리 리액트는 컴포넌트 형태로 구성되어 있다. 데이터를 변경하고자 할때 props 형태로 컴포넌트간에 데이터를 주고 받는다. 컴포넌트가 많아질 수록 props형태로 데이터를 주고 받는 것에 많은 불편이 따른다. 이런 상황에서 Redux와 같은 상태관리 프로그램이 나타났다. https://www.stevy.dev/react-state-management-guide CSS 라이브러리와 리액트 Sass 별도의 문법변수, 믹스인 개념이 있음 코드의 가독성과 재활용성이 높음 ⇒ 유지보수가 쉬움 Sass 문법으로 작성한 파일은 별도의 빌드단계를.. 공감수 0 댓글수 0 2021. 12. 5.
WIL 4 라이프 사이클 (클래스형 vs 함수형), react hooks api 초기 리액트 클래스형 라이프사이클 정리 내용 현재 이 개념을 이해하기 위해 많은 시간을 쓸 필요 없음 React 생명주기 메서드 ( LifeCycle Method ), only 클래스형 컴포넌트 kongom2.notion.site 초기 리액트는 클래스형 컴포넌트에서만 라이프사이클과 State 관리가 가능했었다. 함수형 컴포넌트는 지원되지 않다보니 클래스형의 부수적인 형태로 UI를 표현하는데에만 그쳤었다. 클래스형 컴포넌트는 다양한 컴포넌트를 만들 수 있었으나 코드가 복잡한 단점이 있었고, 함수형 컴포넌트는 코드가 간결했지만, 제한된 컴포넌트만 만들 수 밖에 없는 단점이 있었다. 함수형 컴포넌트의 장점을 그대로 두고 단점을 보안해 만든 리액트 16.8버전 부터는 모든 컴포넌트를 함수형으로 만들 수 있게 되.. 공감수 0 댓글수 0 2021. 11. 28.
TIL 25 삽질에는 이유가 있다. 파이어베이스와 연동하는 작업 중 파이어 스토어의 데이터를 불러오는 미들웨어를 만드는 과정에서 아무리 콘솔을 찍어봐도 데이터가 없는 걸로 떴다. 파이어 베이스에 프로젝트를 만들었고, 콜렉션과 필드값에 각각 데이터를 넣었는데도 답이 안나오는 상황에서 강의를 이리저리 돌려보며 고민을 수차례 하던 중 혹시 프로젝트가 두개가 생성되서 그런가 해서 전체 프로젝트를 열어보니 떡하니 똑같은 프로젝트가 두개가 있었다. 기억을 되집어 보니 먼저 프로젝트 하나를 만들었었고 배포하는 과정에서 새로 똑같은 이름으로 프로젝트를 만들어 배포해버리는 과정에서 두개가 생성되었다... 어이없는 이유로 하루의 반을 이것 때문에 골머리를 앓았지만 그만큼 어이없는 실수를 했다는 점을 반성하며 이런 똑같은 일이 일어나지 않도록 해야겠다. 공감수 0 댓글수 0 2021. 11. 26.
WIL3 DOM, 서버리스 DOM DOM(Document Object Model)은 웹페이지 인터페이스 프로그램이 페이지의 컨텐츠의 추가, 구조의 변경, 스타일 수정할수 있도록 접근하는 방법 제공 data type 설명 document member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라. element element 는 DOM API 의 member 에 의해 return 된 element 또는 element .. 공감수 0 댓글수 0 2021. 11. 21.
TIL 19 개인과제 kongom2week 개인 프로젝트, 나의 일주일 평점남기기 https://github.com/kongom2/kongom2week/tree/master 프로젝트 URL http://kongom2project.s3-website.ap-northeast-2.amazonaws.com/ 개인 공부 내용 컴포넌트 리액트 요소 이벤트 관리 라우팅 유사배열 사용한 라이브러리 npm install create-react-app npm install react-router-dom styled-components 사용한 리액트 훅 참조 사이트 : https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4 use.. 공감수 0 댓글수 0 2021. 11. 19.
TIL 18 SPA 프로젝트 배포시 404 (Not Found) 에러가 생기는 문제 404 (Not Found) 리액트를 아무런 처리없이 빌드하고 배포하고 나서, 특정 URL로 바로 접근 시 생기는 에러 리액트라서 생기는 문제이라기 보다 SPA이 가진 특징 때문에 생기는 문제 왜 이런 에러가 발생 하는가 Base가 되는 URL을 단 하나인 index.html에 연결시켜 배포하지만, 다른 URL로 접속하면 해당 URL에 맞는 html을 다시 찾으려고 하기 때문에 발생. 따라서, Base가 되는 URL이 아닌 다른 URL을 통해 사이트에 접속해도, index.html을 연결시켜 배포하는 작업이 필요 S3 서버에서의 처리 방법 S3에서는 정적 웹 사이트 호스팅 편집에서 인덱스 문서와 오류문서를 index.html 하나로 설정하면 해결 참조 https://leonkong.cc/posts/til.. 공감수 0 댓글수 0 2021. 11. 18.
TIL 17 Redux 정리 🔑 Q5. Redux는 무엇이고, 왜 Redux를 사용하는가? Redux? ( ≒ MobX, Overmind.js, Recoil ) React에서 사용률이 가장 높은 상태관리 라이브러리. 자바스크립트로 만든 앱을 위한 상태 컨테이너. React에서 사용을 많이 하지만, React만을 위한 라이브러리는 아님. 자바스크립트로 만들어진 다양한 프레임워크와 작동이 가능. 구조 Flux구조를 기반으로 만들어짐. Flux 구조 Action(동작)이 발생하면, Dispatcher(관리자)에 의해 Store(저장소)에 변경된 사항이 저장되고 View가 그 저장된 사항에 의해 변경되는 패턴 Redux 구조 Action(동작)이 발생하면, State가 처리, 기능이 있으면 처리 후, 아니면 바로 Reducer로 Reduc.. 공감수 0 댓글수 0 2021. 11. 17.
TIL 16 React Hooks 정리 React Hooks API 함수형 컴포넌트에서도 State와 컴포넌트 라이프사이클 등등의 것들을 가능하게 하는 것은 React Hooks API이다. 핵심은 Class 없이 React를 사용할 수 있게 해주는 것. 초기 리액트는 State와 컴포넌트의 Life Cycle 관리하려면 클래스형 컴포넌트만 사용가능하였고, 함수형 컴포넌트는 UI를 표현하는 것에만 주로 사용되었다. 하지만, 리액트의 16.8 버전(2019년, 2월)부터는 모든 컴포넌트를 함수형으로 만들 수 있게 되었고 React Hooks을 이용해 State와 컴포넌트의 Life Cycle 관리가 가능해졌다. 또한 상태 관리 라이브러리인 Redux 등을 사용하지 않고도 어느정도 까지는 리액트 기본제공되는 방법으로 상태 관리를 할 수있는 기대감.. 공감수 0 댓글수 0 2021. 11. 17.
TIL 15 개인개발, 팀과제 시작 새로운 팀 새로 맞이한 팀에서 팀장을 맡게 되었다. 2주간 팀원으로 있으면서 2분의 팀장님이 생각났다. 지나온 팀 모두 매끄럽게 팀과제, 개인과제를 마쳤고 이 팀 또한 그렇게 흘러갈 수 있도록 해야겠다 생각이 들었다. 우리가 할 일에 대해서 계속적으로 알리고 접근하기 편하도록 카톡방에는 주요 공지사항을 적어두고 노션을 활용해 팀과제에 생각날때 마다 접근할 수 있도록 했다. 개발 환경 이슈 이후 강의를 들으며 개발환경 셋팅을 하는데 문제가 발생했다. 기존에 설치해두었던 node에 nvm을 설치하고 gitbash로 노드버전을 선택하는 과정에서 강의와 nvm 버전을 맞춰 install하고 nvm use 했는데 적용이 안되었다. nvm node 전부 삭제하시고 nvm 먼저 깐 뒤에 node 깔아보시는 것을 추천.. 공감수 0 댓글수 0 2021. 11. 17.
TIL14, WIL2 알고리즘 주차 알고리즘은 그동안 배우지 않았다. 뭔가 문제를 푼다는 것이 시도하기 전부터 큰 허들로 찾아왔던것 같다. 하지만, 프로그래밍을 하려면 문제를 해결하는 여러 방법을 알아야 하고, 알고리즘을 통해 언어의 문법과 내장함수, 코드 작성법등으로 여러가지 상황을 코드로 풀어내는 작업을 하는 것이 왜 중요한지 깨닫는 한주가 되었던거 같다. ECMAScript 자바스크립트를 표준화 하기 위해 만들어졌다. 이 한줄로 ECMAScript의 존재의 이유가 나온다고 생각한다. 표준화는 일상에 모든 것들에 범용성과 효율성을 가져다 준다. 대부분의 회사 내부에서 진행하는 코딩컨벤션이나 매뉴얼 등으로표준화된 기틀을 마련하는 것처럼 이도 마찬가지라고 생각한다. 프로그래밍을 하는 입장에서는 기술규격이 일정하면 여러 케이스에 따른 추가적.. 공감수 0 댓글수 0 2021. 11. 14.
TIL 13 알고리즘 테스트 알고리즘 테스트를 보는 날이었다. 예상보다 쉬운 난이도에 빠르게 풀고 왜 이렇게 쉽게 끝날까 고민을 하며 지문을 다시 보니 연산값만 리턴하는 것이 아닌 계산식 문자열 전부를 리턴하는 문제였다. 당황했지만 그래도 예상하기도 해서 그런지 다시 차분히 문제를 하나하나 뜯어보았다. 결국 답을 찾았고 내가 알고있는 함수와 방법들을 동원해서 문제를 코딩했다. 실수를 줄이는 방법은 같은것을 보고 한번 더 생각하는데 있는 것 같다. 공감수 0 댓글수 0 2021. 11. 14.
TIL 12 알고리즘 공부하자 시저암호 [39번 문제] [문제설명] 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. [제한조건] 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. function solution(s, n) { // 변수, 상수 선언 =============================================== .. 공감수 0 댓글수 0 2021. 11. 13.
TIL 11 알고리즘 공부하자 콜라츠 추측 [27번 문제] [문제설명] 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요. 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요. [제한조건] 입력된 수, num은 1 이상 800000.. 공감수 0 댓글수 0 2021. 11. 10.
TIL 10 알고리즘 공부하자 자연수 뒤집어 배열로 만들기 [23번 문제] [문제설명] 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. [제한조건] n은 10,000,000,000이하인 자연수입니다. function solution(n) { let num = 30; console.log(n) console.log('-'.repeat(num)) console.log(String(n)) console.log(typeof String(n)) console.log('-'.repeat(num)) console.log(String(n).split('')) console.log('-'.repeat(num)) console.log(String(n).spli.. 공감수 0 댓글수 0 2021. 11. 9.
TIL 9 알고리즘 공부하자 내적 [15번 문제] 우선 내적이라는 말부터 이해가 안되서 검색을 해보았다. (다른말로 도트곱, 점곱이 있다.) 수학용어로 많이 쓰이고 있고 여러 수학용어들이 정리되어 있는 사이트가 있어 공유한다 [출처] 수학 용어를 알면 개념이 보인다 => 여러 수학 용어 정리 장철원님의 블로그 => 내적의 의미 비교적 쉽게 정리 내적은 여러 연산(더하기, 빼기, 곱하기, 나누기)중 하나, 벡터와 벡터의 연산이고 결과값은 스칼라 대개의 경우 벡터 + 벡터 = 벡터, 스칼라 + 스칼라 = 스칼라 인데, 내적이라는 연산은 벡터와 벡터의 연산이 = 스칼라 내적의 정의, 성질, 물리학 관점, 정사영 관점 등은 나중에 알아보자.. [문제설명] 길이가 같은 두 1차원 정수, 배열 a, b가 매개변수로 주어집니다. a와 b의 내적.. 공감수 0 댓글수 0 2021. 11. 9.
TIL 8 알고리즘 공부하자 가운데 글자 가져오기 [3번문제] [문제설명] 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. [제한조건] s는 길이가 1 이상, 100이하인 스트링입니다. => 짝수일 때 가운데 2개 문자 반환, 홀수일 때 가운데 문자 반환. function solution(s){ let answer = ''; if (s.length % 2 == 0){ answer = s[s.length / 2 - 1] + s[s.length / 2] //짝수일 경우 }else{ answer = s[s.length / 2 - 0.5] //홀수일 경우 } return answer; } console.log(sol('asdsf')) [접근방식] - if .. 공감수 0 댓글수 0 2021. 11. 8.
WIL 1 JWT - JSON Web Tokens JWT를 알아보며 느낀점 세션기반인증 VS 토큰기반인증 인터넷 표준인 만큼 로그인 기능을 만드는데 있어 교과적으로 따라야 하는 방식이라는 생각이 든다 2010년에 처음 생기고 2015년에 마지막 버전이 나온지 6년이 지난 지금 시점 딱히 대체재가 없는 안정화된 방식이라 생각이 든다. 그러다 보니 인터넷 표준이 되었고 로그인 기능과 기타 인증을 하는 방식에 있어 교과서 적인 방법이 되는것 같다. 깃허브도 인증방식을 기존에 아이디와 패스워드로 하던 방식에서 웹 토큰만을 지원하는 방식으로 변경된 만큼 웹 내에서 인증 및 정보교류를 하는 기능을 구현할 때 자주 써봐야 겠다. 아래 부터는 여기저기서 알아본 JWT를 내가 보기 편하게 작성한 내용이다. 출처 http://www.. 공감수 0 댓글수 0 2021. 11. 7.

문의안내

티스토리
로그인
고객센터

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