Age of Discovery

사실 제목에 인덱스까지 붙일만큼 거창한 프로젝트는 아니지만 나중에 타임라인 순으로 편하게 보기 위해 붙여본다. 한 3페이지 정도밖에 안되는 작은 규모의 프로젝트지만 항해를 떠나기 전에 협업을 경험해보고 자신감을 얻기 위해 우리가 계획한 기능을 전부 구현하고 마무리 짓는 걸 최우선순위로 뒀다. 프로젝트를 한 문장으로 표현하자면 '테마별 여행준비물 챙기기?' 정도로 요약할 수 있겠다. 첫 페이지에서 캠핑, 글램핑, 배낭여행, 호캉스 등의 테마를 선택하면 그 테마에 맞는 숙소를 추천받고 본인이 직접 URL로 추가 할 수도 있다. 2페이지로 넘어와 야X자 or 여X어때 등의 숙박 사이트에서 URL을 가져온 후 코멘트와 함께 입력하면 이미지를 가져와 카드형식으로 추가가 된다. 그 다음 숙소의 사진을 클릭 했을 때..

2022년 7월 11일 기나긴 여정의 항해를 떠난다. 출발 전 시간이 남아 항해를 일찍 신청한 사람들끼리 사전프로젝트를 자율적으로 진행하게 됐다. 다행스럽게도 전부 능동적이고 적극적인 모습으로 의지를 불태우고 있어서 아직까지는 순조롭게 진행되고 있다. 5명 중 백엔드 희망자가 1명이고 나머지는 전부 프론트엔드를 희망하고 있다는 점이 우려스러웠지만 전공자 두분께서 백을 다룰 줄 아셔서 편의를 봐주신덕에 프론트를 맡고 있다. 플라스크 프레임워크로 구축한 서버랑 통신하기 때문에 파이썬도 어느정도 배워놓았고 그래도 모르는 부분은 악착같이 물어보고 있다 ㅋㅎㅋㅎ 나중에 진행될 프로젝트에서 민폐끼치지 않으려면 백엔드쪽도 최대한 공부를 해놔야겠다 사진은 게더타운이라는 프로그램인데 바람의나라에 메타버스를 접목한 느낌이..

뭐든 재료 하나만 생겨도 그걸 누가 어떻게 조합해서 어떤 회사의 주가를 끌어올리느냐는 천차만별.. 연이은 코스피 하락을 비웃기라도 하듯 원숭이 두창 테마 관련주들이 크게 상승했다. 미코바이오메드, 녹십자엠에스는 원숭이두창을 치료할 의료 기술과 직접적 관련이 있기 때문에 이해라도 하겠다. 블루베리 NFT는? 그냥 콘돔회사다. 콘돔회사가 왜 상한가를 쳤냐고? 해외 질병청에서 원숭이두창이 성관계로 전염되기 쉽기 때문이란다. 그럼 국내의 다른 콘돔회사 주가는? GRT는 2퍼 상승으로 마쳤고 유한양행은 음봉으로 마감했다. 차트를 가져오진 않겠지만 차트를 봤을 때 세력들이 가지고 놀기 딱 좋은 차트라고 생각한다. 단타 위주의 개미들은 그 세력의 드라이브에 맞춰 버스를 탔다 내렸다 잘 선택해야한다. 명운이 달려있기 ..

로컬 스토리지를 이용한 최근 본 상품 기능 구현 2탄을 시작하겠다. 전 편에서 선수들의 상세페이지에 접속했을 때 로컬스토리지에 선수들의 이름을 저장하는 것 까지 완료했다. 이젠 메인메뉴로 돌아왔을 때 우측에 최근 본 상품 박스를 띄워보자. import { useEffect, useState } from "react"; 역시나 useEffect와 useState는 필수로 import해주고 function App() { let get_local = JSON.parse(localStorage.getItem("data")); 여기서도 get_local이라는 변수에 기존에 로컬에 저장되어있던 'data'의 키를 가진 값 (즉 선수들의 이름)을 할당해준다. useEffect(() => { get_local === ..

로컬스토리지란 무엇일까?? 사용자의 개인 브라우저에 저장하는 임시저장소이며 간단한 데이터를 담고 빼올 수 있어서 매우 편하며 반영구적이다. 로그인할 때도 개인 브라우저에 비번이랑 아이디를 저장해놓은다음 다음에 접속할 때 또 귀찮게 로그인을 안해도 자동으로 로그인이 되는 좋은 기능을 가지고 있다. 로컬 짱! 그럼 JS를 이용해 로컬스토리지에 데이터를 저장하고 빼와서 사용해보자. 아주 간단하게 할 것이다. 원리만 알면 된다! const local_data = 'data' const local_obj = [ { name : '강해상', age : 35 } ] const use_local = () => { localStorage.setItem(local_data, local_obj); } local_data라는..

리액트 막 배우기 시작했을 때 투두리스트를 만들어보려고 했었다. 언제나 그랬듯 LocalStorage를 이용하려 했고 결과는 실패였다. useEffect에 대한 개념이 안잡혀있었기 때문 자 물약챙기고 마나채워서 다시 시작해보자! 메인화면 우측에 우측에 간단한 div 박스를 만들어 최근 본 상품 기능을 fix시키겠다. 선수들의 사진을클릭해 상세페이지인 Detail 컴포넌트로 넘어간 후 다시 메인화면으로 돌아왔을 때 최근 본 상품의 이름이 나오게 끔 해보자 우선은 선수들의 상세페이지를 눌렀을 때 선수들의 이름을 LocalStorage에 저장하자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; c..

쇼핑몰 프로젝트 이전 글에서 못 다룬 쇼핑카트 수량 줄이기와 리스트 삭제를 마저 다뤄보자. let players = createSlice({ name: "players", initialState: [], reducers: { addCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); state[nums].count++; }, minusCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); if (state[nums].count > 1) state[nums].count--; }, deleteCount(state, action..

https://m.blog.naver.com/crush212121/222635450974 투자 가능한 종목 선정 방법 간혹 이러한 질문을 받습니다. 수 천개의 종목 중 투자 가능한 종목 선정을 어떻게 해야 하나요? 란 질문을... blog.naver.com https://blog.naver.com/tosoha1/222750367514 투자에 대해 말하고 싶었던 것. 말주변이 부족해 충분한 내용이 전달되지 못했을 가능성이 있어 정말 말하고 싶었던 내용을 좀 정리해보면 ... blog.naver.com 북마크로 지정돼있는 글인데 북마크 자리가 꽉차서 여기로 옮긴다. 특히 첫 번째 글은 뜬구름잡는 탁상공론이 아니라 구체적인 방법을 제시하는 글이라 보수적이고 장기적으로 투자하는 사람들에겐 정말 추천하고 싶은 글..

. 브라우저 렌더링 과정에 이어 CS 두번째 시간이다. 브라우저가 렌더링 되는 과정을 다시한번 간략히 설명하면 요청 응답 HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성 자바스크립트 파싱 레이아웃(리플로우) 페인팅 다음과 같은 순서를 거친다. 우리가 주소창에 https://www.google.com/ 을 입력하면 우리가 이용하는 크롬이나 사파리,파이어폭스와 같은 브라우저들은 DNS서버에 해당 도메인에 매칭되는 IP주소를 요청하고 여기서 응답받은 IP주소를 손에 쥔 채 google 서버와 통신망을 구축해 HTML,CSS,JS 파일 등을 요구한다. 그리고 받아온 파일들을 HTML부터 순서대로 파싱하는데 이 파싱이라는 것은 브라우저가 이해할 수 있는 '형태'로 바꾸는 작업이다. 그 결과물이 DOM이고 CSS도..

다음은 장바구니에 담겨 있는 선수들의 수량을 추가하거나 감소시키고 삭제하는 기능까지 구현해보자. ( 이번 포스팅은 꽤 길다 ) let players = createSlice({ name: "players", initialState: [ { id: 0, name: "Mohamed Salah", count: 1, }, { id: 1, name: "Sadio Mane", count: 1, }, ], }); 예시로 넣어놨던 Salah와 Mane는 빼주고 시작하자 let players = createSlice({ name : 'players', initialState : [ ], reducers : { } }) reducers: { } 가 생겼는데 이건 기존에 저장되어있는 initialState를 조작하는 함수를..

const arr = [5, 12, 8, 130, 44]; const array2 = arr.findIndex( (element) => element > 20 ) console.log(array2) // 출력값은 3 축구선수를 영입하려다가 findIndex함수의 필요성을 느껴서 공부 후 포스팅한다. arr이라는 변수 안에 5가지의 숫자들이 있는데 이 각각의 값들은 element라고 지칭하겠다. array2라는 변수에는 arr이라는 배열 뒤에 findIndex를 붙인 후 콜백함수를 사용한다. findIndex의 파라미터는 element라고 임의로 칭하겠다. (파라미터이름은 어떤걸로 지어도 상관없다. 다만 의미를 제대로 부여해주는 것이 좋다.) 여기서의 element는 arr 배열의 각각의 값들이다 5나 1..

6월 10일 미국노동부는 5월 소비자 물가지수(CPI)가 8.3퍼 상승했다고 밝혔다. 물가지수 8.3퍼가 전년 동월(작년 5월)대비 올랐다는 것이다. 우리나라는 2010년 2015년 2020년 등 5년 주기로 물가지수 기준연도를 지정하고 연초에 지난 한 해동안 기준연도 대비 얼마나 물가지수가 상승했는지 발표하는데 미국에서는 상황이 상황이니만큼 매달 전년 동월 대비 얼마나 상승했는지 발표하는 모양새다. 일년만에 물가가 8.3퍼나 상승했던 적은 1981년 12월 이후 없다고 한다. 물가상승이 직관적으로 의미하는 바는 물가가 8.3퍼 오른 것이고 화폐가치가 8.3퍼만큼 내렸다는 얘기이며 따라서 같은 돈이라면 100%에서 8.3퍼가 빠진 91.7% 어치의 물품만 구매할 수 있다는 의미이다. 왜 물가가 폭등했을까..

우리가 주소창에 www.naver.com을 입력하면 무슨일이 일어날까? 네이버 메인화면이 뜬다. 끝 여기서 포스팅을 마치겠다. 가 아니라 그 흑막을 살펴보면 꽤 복잡하다. 주소창에 URL을 입력하고 사용자에게 그 화면이 보여지는 과정을 렌더링이라고 하는데 이런 렌더링과정은 개발자 뿐 아니라 컴퓨터를 사용하는 모든 이들이 한번쯤은 관심 가져봤을법한 내용이다. 렌더링이란? 개발자가 작성한 HTML, CSS, JS 문서를 브라우저에서 출력하는 과정이다. 렌더링 순서 요청 응답 HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성 자바스크립트 파싱 레이아웃(리플로우) 페인팅 크게 이러한 순서로 나눠볼 수 있을 것 같다. 자세한 과정을 살펴보기 전에 프로그래밍을 아예 공부해본적이 없는 사람들을 위해 HTML과 CSS에..

남의 실수와 잘못된 언행에 얼만큼 관대해질지를 정의하는 나만의 기준 '그럴 수도 있지~' 라고 생각했을 때 이해가 된다면 웬만해서는 그냥 넘어가는 게 낫다고 생각한다. 사람의 성향과 취향은 각양각색이고 전혀 다른 환경에서 10년, 20년을 살아온 사람들이 성인이 되어 처음 만난 후 다투고 갈등을 빚는 건 너무나 당연하다. 상대방이 내 입장에서는 도저히 이해되지 않는 행동을 했을 때 '그럴 수도 있지' 라며 이해해보자 그렇게 생각했는데도 이해가 안된다면 나와는 대척점에 있는 사람일 가능성이 높다. 하지만 아이러니하게도 기준이 되었던 '그럴 수도 있지'라는 마인드가 그 자체의 허용범위를 넓힌다. 더욱 더 이해하기 쉬워지고 관대해진다는 뜻이다. 살아오면서 나와 맞지않는 사람을 많이 만났지만 그게 과연 그 사람..

Redux를 이용한 장바구니 2탄 시작한다. Redux를 사용할 환경세팅이 마무리 됐으면 store.js에서 state를 만들어보자 기본 모양은 이런식이다 변수를 선언해주고 let players = createSlice({ name : 'players', initialState : 0, }) players 변수에 createSlice()를 할당해준다 createSlice안에는 이름인 name: '문자열'과 초기 state인 initialstate를 객체로 할당해줘야한다. let players = createSlice({ name : 'players', initialState : [ { id : 0, name : 'Mohamed Salah', count : 1 }, { id : 1, name : 'Sadi..