본문 바로가기

전체 글

 (306)
[ project2 / zustand ] '더보기'가 계속 10개만 보여준다?(feat.STAR) 총 50개의 데이터를 가져오는데, 한번에 다 나열하는 것에서 10개씩 보여주는 방식으로 바꿨다. 그런데 상세 페이지를 들렸다가 목록 페이지로 돌아오면 다시 10개만 보여주는 것이다. 즉 useState Hook이 reset되는 현상내용요약최초 10개만 보여주는 결과 목록 페이지를 component가 reset되도 그대로인 상태를 유지함으로써, 사용자 사용성 번거로움을 최소화   데모 사이트 체험해 보기 STAR1. Situation- component reset 현상으로 목록 페이지로 돌아왔을 시, 결과목록 페이지의 보여지는 개수가 초기화 2. Task- Component가 reset되도 값이 그대로 유지 3. Action- 고려해 본 사항 1) 전역으로 변수 이동 2) Browser storage에 저..
[Next / generateStaticParams() ] 다이나믹 페이지를 pre-Made하기 Next 공식 문서The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.솔직히 무슨 말인지 모르겠음. 개인적인 결론으론1) 서버에서 함수 돌려서 dynamic pages를 다 파악한다. 2) 파악했기 때문에 만들어져 있고 더 빠르게 sever에서 클라이언트로 전송.  이처럼 작성하라고 함. Chapt 한테 물어봤음.Understanding generateStaticParams()In Next.js, generateStaticParams() is used fo..
[ Front-End] 프론트 엔드는 어디로 향해가는가? (feat. Next.js) 이글은 Youtber 가장 쉬운 웹개발 with Boaz님의 영상을 저 생각대로 정리한 글입니다.원본 영상 보기 대표되는 언어 혹은 라이브러리 흐름도를 제 마음대로 그려봄Java + JSP ->> AJAX ->> React ->> Next.js 결론 부터 말씀드리면,React의 한계(CSR) 예를 들어, 1) 성능 저하 2) SEO로 인하여 이런 것을 간편하게 해결줄 방법을 찾게 됨.프론트 엔드의 영역이 넓어지면서(UI, 비지니스, 서버 등) 추상화와 환경설정을 좀 더 쉽게 접근할 수 있는 Framework의 등장.   Next js.Under the hood, Next.js also abstracts and automatically configures tooling needed for React, li..
[ article / AI ] 테드 창, 한국 방문 및 연설 from 한겨례 ※이 글은 한겨례 기사의 내용을 발취한 글입니다.https://www.hani.co.kr/arti/economy/it/1147113.html 전문을 읽어보시길 권한다.테드 창이 한국에 방문해 AI에 대한 추가 이야기를 했다.개인적으로 생각하긴 크게 2가지 포인트를 가지고 있다.1. 인공지능의 정의2. 인공지능이 하는 표현이란(예술이란) '의도'    1. 인공지능의 정의기술과 지능을 구분해, 기술은 작업을 얼마나 잘 수행하는가로, 지능은 새로운 기술을 얼마나 효율적으로 습득하는가로 규정한 과학자도 있습니다. 저는 이 정의가 훨씬 마음에 듭니다. 인간의 직관을 잘 반영하고 있기 때문입니다.기술 : 작업을 '얼마나 잘' 수행하는지 => 작업 수행 능력지능 : 새로운 기술을 얼마나 효율적으로 습득하는지 => ..
[ CS / cache ] Browser cache 이해해 보기 Cache 란?캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술 // MDN  Cache의 존재 이유1. 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화2. (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다.   Cache의 사용과 전략1. 파일을 다운시 재사용할 것인지(Reusable)2. 로컬 데이터가 서버 데이터와 동일하냐 (Revalidate)3. 캐쉬 서버와 서버의 데이터가 동일하냐 (Cachable by intermediate cache) == 보완성 Browser 상세 보기 : 유효(Fresh..
[ CODE ] 토스, 가독성 좋은 코드란 가독성이란?1. 읽기 편안한 코드(심리성) => 세미 콘론이라던지, 띄어쓰기 라던지2. 머리가 편안한 코드(공학성, 구조적) => 작성된 코드를 읽었을 때 쉽게 이해할 수 있다는 것 코드 작성시 실천하려고 노력하는 방법(진우) : 코드 작성시 맥락이 적어도 한번에 이해할 수 있도록 코드를 작성해 보려고 하는 것(순수 함수)(유림) : 켄트 벡 개발자 책 'Tidy Frist' 인용 : '1) 설계를 오래 하고 짤 것인지 2) 먼저 짜고 나중에 리팩토링 할 것인지에 대한 답은 없다. 우리는 언제나 틈틈히 리팩토링에 대한 생각을 준비해야 한다.' 조금씩 짜고 고치고 짜고 고치고(서진) : 일정 산정시 리팩토링에 대한 생각을 포함시켜서 그래도 여유있게 코드를 작성 하기   가독성 좋은 코드를 작성하기 위한 방..
[ React / project3 ] Mypage '주문내역' 페이지 정렬(sort) 현재 Mypage의 상세 페이지를 만들고 보니 주문내역에서 기간 순서가에 이슈가 있어서 해결하려고 한다. STAR(Situation - Task - Action - Result) 접근하기1. Situtation- 기간 정렬이 불명확함 2. Task- 오늘(today) 기준, 가장 빠른 순서로 정렬하기 3. ActionClient에서 처리 예정 => 이유 : 프론트엔드라는 포지션상 server데이터를 접근하기 어려운 경우도 존재하기 때문에.- 고려해본 사항 1 : Server에서 완성된 자료를 전달해 준다.- 고려해본 사항 2 : 데이터 받아 Client에서 처리해 준다. 고려 사항1Server에서 처리 장점 : 데이터가 이미 정제되어 있기 때문에 브라우저 등에서 자원을 사용하지 않을 수 있다. 고려사항2..
[ React / project3 ] Fetching Data 데이터 검색 검색 속도 높이기 검색 방식 변경Nodejs에서 결색 결과 가공 후 font로 전달하던 방식 =>  프론트에서 검색 결과 정제데이터 전체를 가지고 client에서 직접 가공한 결과를 props으로 전달  # 프로젝트 이슈(STAR)이슈 해결 대상 : 프트폴리오, 프로젝트 3 '숙박 검색 결과 정확도 높이기 및 검색 속도 향상'## Situation- 검색바에서 검색을 누르면 Node js에서 결과값을 정제하여 전달하는 방식## Task- Fetching Data 혼선 감소(최초의 Fetching Data API URL과 검색 결과 Fetching Data API URL 다름).- 검색 결과 정확도 높임.## Action- Node js에서 최초의 값만 보내고 client에서 데이터 가공 처리.- 가공된 결과값을 props..
[ HTML ] 웹접근성 확인 tool at Chrome 쉽게 chrome에서 웹 전근성을 확인 할 수 있는 방법 1. 개발자 툴을 연다.2. Ctrl + Shift + P3. acc 검색한다.4. 체크, Enable full-page accessbility tree 5. 클릭, Roload DevTools6. 사람 버튼이 활성화 됨.
[ React / project2 ] 기존 프로젝트 변경하기 Vanilia => Type 이 글은 기존 JSX를 TSX로 바꾸는 과정을 정리한 글이다.TypeScript는 여러가지 이점을 가지고 있다.1. type이 정해져 있기 때문에 잠재적 애러를 감소 시킨다. vanilia의 경우 type 불일치가 종종 일어난다.2. 정확한 type 정의는 코드을 읽기 쉽게 만든다. 내가 만든 것이라면 크게 상관없을지 모르지만 다른 사람들과 공유하는/되는 코드는 모든 사람들이 읽기 쉽게 작성하는 것이 좋다. 1. github Clonegit clone -b {branch_name} --single-branch {저장소 URL} {폴더명} 예전에 클론해본다고 하루 날린적이 있는데, 선행학습이 돼서 다행이다.참조https://life-explorer.tistory.com/406본격적인 시작 2. type 정..
[article/AI] 테드 창 말하는 AI ―개인적 수준이 아닌 사회적 수준에서 재귀적인 발전이 기술 발전의 중요한 동력이라고 생각한다. 인공지능도 사람처럼 사회적 학습을 할 수 있을까? 사회를 이룬 인공지능이 자신들보다 더 나은 인공지능을 만들어낼 수도 있을까?“인공지능 프로그램 사이의 상호작용은 사람들 사이의 상호작용과 아무런 공통점이 없다. 인공지능은 도구일 뿐이다. 도구일 뿐인 인공지능을 결합해서 개선이 이루어진다면, 그것은 단순히 그 도구를 이용하는 인간의 우수성을 보여줄 뿐이다. 먼 미래에 인공지능 프로그램들이 정말 사람과 같아질 수도 있다. 하지만 그게 무슨 의미가 있을까? 우리는 이미 수십억명의 인간이 있는데 말이다. 우리가 사람들이 협력을 통해 만들어낼 수 있는 커다란 이점을 원한다면 우리는 이미 어떻게 할지 잘 알고 있는 셈이다..
[ git/clone ] git 클론 하기(특정 브런치 가져오기) git clonegit clone -b  git clone: This is the main command for cloning a Git repository.: This is the URL of the remote repository you want to clone from.-b : This option specifies the branch you want to clone. (optional): This is the name of the local directory where you want to clone the repository. 예시git clone https://github.com/user/repository.git -b feature-branch my-local-repository  특정 ..

티스토리툴바