티스토리

홍준혁

검색하기

블로그 홈

홍준혁

hong-jh.tistory.com/m

홍준혁 [Hong-JunHyeok] 님의 블로그입니다.

구독자: 8

방명록 방문하기

주요 글 목록

React.js 이해하기 (1) 퇴사하고 거의 4개월 만에 개발을 시작해 보는 것 같다. 그동안 난 스타벅스에서 아르바이트했다. 이제 나도 취업을 해야 하니... 달리려고 한다. (그동안 집필을 쉬었었는데 퇴사하고 잘 집필하고 있다) 늘 그랬듯 개발 시장은 빠르게 변화하는 것 같다. 그래서 적응기가 필요해서 글을 작성하면서 공부를 하려고 한다. 먼저 Next.js를 배우기 전에 React.js를 이해하여야 한다. 어쨌든 기본 베이스는 React.js 위에서 만들어지니까. 웹 서비스를 만들기 위해서는 다양한 사항을 고려해봐야 한다. UI, Routin, Data Fetching, Rendering, Infra 등... 어느 하나 안 중요한 게 없이 신경 써야 할 것들이 많다. 그래서 이를 쉽게 구현할 수 있는 라이브러리를 선택하는 것도 .. 공감수 0 댓글수 0 2024. 4. 2.
나홀로 제주도 여행 2일차 어제 하도 고생을 해서 12시 땡 되자마자 숙소에서 기절해버렸다. 덕분에 6시에 깨서 이른 시간에 준비해서 나갈 수 있었다. 미리 스포를 하자면 오늘은 사진을 정말 많이 찍었다. 특히 배경이 정말 이뻐서 정신없이 찍었던 것 같다. 최근에 내가 가장 좋아하는 밴드인 검정치마 조휴일 씨가 정규 앨범을 냈다. 내가 제주도 가는 건 어떻게 알고 이때 앨범을 딱 내냐... Teen Troubles라는 앨범인데, 뚜벅이 여행하는데 정말 큰 힘이 되었다. 곡 중에서 매미들과 Powder Blue, 99%, Follow You, 불세례는 꼭 들어보시길. 맘에 들었다면 201 앨범도 완주해보길 추천한다. https://www.youtube.com/watch?v=k6Ys3M5xNWQ 본론으로 들어가서 눈 뜨자마자 가장 먼.. 공감수 8 댓글수 3 2022. 9. 18.
나홀로 제주도 여행 1일차 이 글은 나중에 내가 혼자서 여행을 갔던 추억을 회상하기 위해서 쓴 글이다. 최근에 취뽀를 하고 남은 기간 동안 뭘 해야 하나 고민을 많이 했었다. 그리고 다양한 고민거리들이 많았었는데 그 고민들을 정리할 수 있는 시간이 필요했다. 나에게 취업 전까지 남았던 건 돈과 시간이다. 그래서 이번에 제주도로 여행을 결심하게 되었다. 사실 가족들과 제주도에서 시간을 보낼수도 있었다. 하지만 나는 여유를 가지며 생각 정리를 하기 위해서 혼자 여행을 계획하게 되었다. 물론 걱정도 됐다. 아무래도 4박 5일 동안 제주도라는 섬에서 혼자 있어야 하는데 괜찮을지 걱정이 앞섰다. 많이 외롭기도 했다. 그래서 결정한 것이 게스트 하우스다. 다른 사람들과 함께 어우러져 살아가는 숙소를 선택했다. 이곳이라면 나의 심심함을 다른 .. 공감수 6 댓글수 1 2022. 9. 17.
React Hook 동작원리와 Custom Hook사용이유 오늘의 주제는 Hook입니다. React 버전 16.8 이후부터 Hook API가 도입되면서 함수형 컴포넌트에서도 상태, 생명주기 등을 사용할 수 있게 되었습니다. Hook API를 사용해서 사용자의 입맛에 맞게 사용되어지는 Custom Hook 또한 있죠. 정말 편리한 기능입니다. 그래서 오늘은 Hook이 어떻게 동작하는지, 활용은 또 어떻게 하는지 알아보도록 하겠습니다. 면접 단골질문 클로저(Closure)를 아시나요? 여러분이 프론트엔드 개발자로써 면접을 봤다면 JS 클로저를 아냐는 질문을 들어봤을 것 같습니다. 클로저는 실행 컨텍스트 내부의 함수가 외부 실행컨텍스트를 참조할 때 생기는 현상을 의미하는데요, 사실 React Hook은 클로저와 매우 밀접한 관계가 있습니다. 아해의 코드를 보도록 하겠.. 공감수 6 댓글수 3 2022. 6. 26.
Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까? 안녕하세요 오늘은 제가 평소에 궁금했던 주제로 글을 써보려고 합니다. Context API의 기능과 왜 사용하는지, Context API의 리렌더링 이슈란 무엇인지 그리고 Redux를 대체할 수 있는지. 위 내용을 설명하는 글을 작성할려고 합니다. 우선 Context API를 사용할려면 그 개념을 알아야 합니다. Context가 나온 이유 React는 단방향 데이터 흐름입니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 직접 전달해야 합니다. 이 데이터 흐름은 간단해 보입니다. 그저 위에서 아래로 흐르니 말입니다. 실제로 단방향 데이터 흐름은 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽습니다. 하지만, 이러한 흐름이 깊어진다고 생각해봅시다. 위 그림처럼 1이라는 컴포넌트에서 6이라는 컴포넌트에 .. 공감수 27 댓글수 7 2022. 6. 23.
리액트 컴포넌트 설계 방법 리액트 설계 방법에 대한 이해가 부족하다고 생각되어 공부하면서 글을 정리합니다. 개발을 하다 보면 앱이 커지고 그럴수록 컴포넌트의 수가 많아지고 컴포넌트의 수가 많아질수록 설계 방식이 중요해진다고 생각합니다. 단일 책임 원칙은 컴포넌트가 한 가지 일을 하는 것이 이상적이라는 설계 원칙입니다. 그래서 이러한 설계 원칙을 따르며 진행해보겠습니다. 위 컴포넌트는 리액트 공식문서에서 가져온 사진입니다. 각 컴포넌트를 자세히 살펴보도록 하겠습니다. FilterableProductTable (노란색) => 전체를 포괄하는 영역입니다. SearchBar (파란색) => 모든 유저의 입력을 받습니다. ProductTable (연두색) => 유저의 입력을 기반으로 데이터 컬렉션을 필터링해서 보여줍니다. ProductC.. 공감수 4 댓글수 0 2022. 6. 22.
효율적인 모달 관리 가끔 모달을 만들다 보면 onClose, onOpen, isOpen 이런 값들을 props로 넘기고 넘기고 넘기고... 동일한 작업을 계속 하게됩니다. 이러한 현상은 Props Drilling 현상이라고 하며, 당연하게도 프로젝트가 커질수록 좋지 않은 구조입니다. 그럼 방법은 뭘까요? 이번 아티클에서는 리액트에서 효율적으로 모달 상태를 관리하는 법을 다뤄보도록 하겠습니다. const [isAModalOpen, setIsAModalOpen] = useState(false); const [isBModalOpen, setIsBModalOpen] = useState(false); const [isCModalOpen, setIsCModalOpen] = useState(false); const handleAOpen.. 공감수 4 댓글수 0 2022. 6. 15.
React-Query로 무한스크롤 구현하기 react query에서 무한스크롤을 구현하려면 useInfiniteQuery라는 훅을 제공합니다. 하지만 먼저 서버쪽에서 페이지네이션을 구현해야 합니다. 현 HLOG서버의 get /post의 반환값은 모든 포스트를 반환하게 됩니다. 이를 페이지네이션을 반환하는 방식으로 변환해보도록 하겠습니다. 페이지네이션 방식에는 offset방식과 cursor방식이 있는데, offset방식은 limit, offset쿼리를 사용하여서 페이지를 구분합니다. >이런 방식에 클릭하는 네이게이션을 사용할 때 주로 사용하는 방식이죠. cursor기반 방식은 무엇일까요? 최근 idx를 기준으로 구분하는 방식입니다. 이는 저희가 구현하려는 무한스크롤 방식에 적합합니다. const page = Number(req.query.page).. 공감수 5 댓글수 0 2022. 6. 15.
React에서 테스트 101 React에서 테스트를 하는 방법을 알아보도록 하겠습니다. HLOG를 개발하면서 테스트의 중요성을 깨닫게 되었는데요, 가장 중요한 이유는 사람은 언제나 실수를 한다는 점입니다. 사람은 완벽하기 않기 때문에 하나하나 테스트를 하게 되면 굉장히 귀찮은 작업이 될 수 있습니다. 또한, 테스트 과정에서 놓치는 부분이 있을 수도 있죠. 그래서 이러한 테스트 코드를 자동화를 시켜 검증 단계에서 실수할 여지를 줄여주는 것이 중요하다고 생각하게 되었습니다. 두 번째로, 리펙터링을 하는 데 있어서 굉장히 유용하다고 생각하게 되었습니다. 리펙터링이란, 코드의 기능은 바꾸지 않으면서 내부 구조를 개선하는 작업을 의미하는데요, 이러한 작업이 필요한 이유는 유지보수에 용이하기 때문입니다. 그래서 테스트 코드로 케이스를 작성한 .. 공감수 1 댓글수 0 2022. 6. 7.
HLOG 리펙터링 안녕하세요? 오랜만에 블로그 포스팅을 하는 것 같습니다. 몇 개월 동안 정말 열심히 달려오느라 블로그 관리할 시간이 없었어요. 거두절미하고 이번 글의 주제는 HLOG 리펙터링이에요. 기존의 레거시 코드를 전부 효율적이고 읽기 편한 코드로 변환하는 작업을 하려고 해요. 또한, 기술 스택도 기존에 사용해보지 않았던 SWR(Data-fetching Library)를 사용해서 작업을 해보려고 합니다. 그리고 Next.js를 벗어나 React를 이용해서 개발을 진행하려고 합니다. 그리고 기존에 미약했던 반응형 디자인 시스템도 새로 구축해보려고 합니다. 이번 리펙터링의 최대 목표는 선언적으로 코딩하기입니다. 트러블 슈팅 - React-Router-Dom사용 시, 직접 주소 입력을 할 때 Cannot GET이 뜨는 .. 공감수 11 댓글수 0 2022. 5. 27.
토큰 기반 인증, 효율적으로 관리하는 법 React에서 토큰 기반 인증을 어떤 식으로 하는 것이 가장 효율적일까요? 많은 방법이 있겠지만 이번 포스트에서는 제가 생각했을 때 가장 효율적이라고 생각하는 인증 방식을 기술하려고 합니다. 먼저 토큰이 흘러가는 방식을 한번 생각해봅시다. AccessToken으로 인증을 진행하게 됩니다. 만약 AccessToken이 만료된다면 RefreshToken으로 Refresh를 해주어야 하죠. 왜 AccessToken을 계속 사용하지 않고 Refresh를 주기적으로 해주어야 할까요? 그 이유는 보안에 있습니다. AccessToken이 중간에 탈취된다면 정보 누출의 위험이 있겠죠. 그래서 AccessToken의 만료기간을 짧게 주고 RefreshToken의 만료기간을 길게 유지해 인증을 유지하는 것입니다. 위 스펙.. 공감수 2 댓글수 1 2022. 5. 25.
React Query 실무 도입 https://hong-jh.tistory.com/entry/React-Query%EC%99%80-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC React Query와 전역 상태 관리 전역 상태 관리 라이브러리인 리덕스로 대부분의 프로젝트를 진행을 했었는데, 사용하면서 느낌 문제점은 다음과 같습니다. - 대부분의 전역 상태는 비동기 통신을 위해서 쓰이고 있다. - Store의 hong-jh.tistory.com 위 글에서 작성한 내용을 실제로 사용하려면 개념적으로 아직 무리가 있다고 생각해서 좀 더 실무적인 방법으로 정리한 글이다. FE에서 상태관리란 무엇인가? 상태 : 언제든지 변경될 수 있는 저장된 데이터 (관리해야 하는 데이터들) - 애플리케이.. 공감수 2 댓글수 0 2022. 5. 20.
React Query와 전역 상태 관리 전역 상태 관리 라이브러리인 리덕스로 대부분의 프로젝트를 진행을 했었는데, 사용하면서 느낌 문제점은 다음과 같습니다. - 대부분의 전역 상태는 비동기 통신을 위해서 쓰이고 있다. - Store의 역할이 너무 비대하다. - 보통 비동기 전역 상태는 data, error, loading이 세가지로 나누는데 그럼, 전역으로 관리하는 상태가 많아진다면 비효율적일 것이다. - 순수 클라이언트의 전역 상태와 비동기 전역 상태와 비교했을 때 비동기 전역 상태가 월등하게 많다. 해결 방안은 무엇일까요? - store에서 비동기 통신하는 부분들을 걷어내고 온전한 Client의 상태만을 남겨 놓는다. - Store밖에서 서버와 관련된 상태 관리방안 마련한다. - (중요) 서버와 관련된 상태는 전역 상태처럼 사용할 수 있어.. 공감수 2 댓글수 0 2022. 4. 25.
새로나온 React 18 빠르게 살펴보기. 첫 번째 기능 - Automatic Batching setState는 호출될 때마다 리렌더링이 일어나게 된다. 정말로 그럴까? 사실 리액트에서는 조금 다르게 동작한다. 호출될 때마다 리렌더링을 작업하게 된다면 정말 비효율적인 방법일 것이다. 다음 코드를 보도록 하자. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 리렌더링 발생 setFlag(f => !f); // 리렌더링 발생 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set... 공감수 1 댓글수 0 2022. 1. 24.
WebComponent, 써야할까? 최근에는 많은 자바스크립트 프레임워크들이 나오면서 (React, Vue, Angluar 등...) 쉽고 간편하게 프론트엔드 개발이 가능해졌다. 그렇다면 웹 컴포넌트라는 기술은 왜 나온것이며, 기존의 있던 웹 프레임워크들을 대체할 수 있을까? 한번 알아보도록 하자. 웹 컴포넌트는 아직 널리 사용되는 기술은 아니다. 하지만 앞으로의 프론트엔드 개발에 있어서 중요한 역할을 하게 된다는 사실은 변하지 않는다. 먼저 웹 컴포넌트가 무엇인지부터 알아보도록 하자. 웹 컴포넌트란, 모든 주요 브라우저에서 지원하는 웹 표준 기반의 재사용 가능한 클라이언트 사이드 컴포넌트이다. 코드에서 원하는 부분을 캡슐화하는 방법을 제공하고, 모든 웹 앱과 페이지에서 재사용이 가능하다. 웹 컴포넌트의 장점은 어디에서나 사용할 수 있다는.. 공감수 6 댓글수 0 2022. 1. 10.
타입스크립트 핸드북 - 타입스크립트 시작하기 본 글은 기존의 자바스크립트 개발자의 시점으로 타입스크립트를 소개하는 글임을 알립니다. 자바스크립트와 타입스크립트의 관계는 매우 독특하다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다. 바로 이 레이어가 타입스크립트의 타입 시스템이다. JavaScript는 number, object, undefined등의 원시 타입을 가지고 있지만 코드 베이스에서 일관되게 작성되었는지 확인해주지는 않는다. TypeScript는 여기서 레이어도 동작한다. 타입 추론 변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용할 것이다. let helloWorld = "He.. 공감수 1 댓글수 0 2021. 9. 24.
PWA란 무엇인가? 프로그래시브 웹앱(PWA)에 대해서 알아보는 시간을 가져보도록 하자. 네이티브 앱, 기기에 최적화된 기능을 구현하다. 네이티브 앱은 스마트폰에서만 작동하는 앱을 말한다. 그에 맞는 운영체제 환경에 맞는 별도의 프로그래밍 언어와 SDK라는 개발 도구를 이용해야 앱을 제작할 수 있다. 대표적인 예시로, 안드로이드 앱은 자바를 이용해서 안드로이드 스튜디오에서 만들고, IOS는 Objective-C나 Swift를 이용해서 XCode에서 개발을 하는데, 네이티브 앱은 기본적으로 개발 난도가 높은 편이다. 또한 각 운영체제 별로 개발을 해야 하니 비용과 시간이 들 수밖에 없다. 그럼에도 네이티브의 장점이라고 하면 기기에 탑재된 모든 기능을 사용할 수 있다는 것이 있겠다. 구분 장점 단점 개발 스마트폰에 최적화된 기.. 공감수 1 댓글수 0 2021. 9. 14.
HLOG - 제작부터 배포까지 HLOG는 개인프로젝트로 제작한 소프트웨어 정보공유 플렛폼이다. velog 처럼 글을 작성하고 다른사람과 소통하는 블로그다. 다들 개인 프로젝트로 블로그 하나씩은 장만하는거 같아서 나도 한번 만들어보았다. 프론트엔드 개발스택은 - Next.js + React.js - TypeScript - Emotion.js - Redux + Redux-saga - Immer.js ... 프론트엔드 파일 구조 백엔드 개발스택은 - Express.js - TypeScript - Mysql (DB) - Passport (Session login) - TypeOrm ... 을 사용하였다. 백엔드 파일구조 개발하면서 느낀 점. 이번 프로젝트를 진행하면서 느낀점이 굉장히 많은 것 같다. 특히 프로젝트를 배포하는 과정에서 많은 오.. 공감수 2 댓글수 2 2021. 8. 25.
Yarn Berry란? node_module은 이제 빠이!🔥 Yarn Berry가 뭔지 알아보기 전에, 기존에 NPM의 문제점을 알아볼 필요가 있다. 아래의 사진을 보도로 하자. 그만큼, NPM이 관리하는 시스템이 비효율적이고 무겁다는 의미이다. 이는, NPM의 비효율적인 의존성 탐색에 있다. 우리가 리액트 프로젝트에서 "react"라이브러리를 가져올려면, require.resolve.paths() 이라는 함수를 사용해서 탐색을 하게 된다. 이 함수는 NPM이 검색하는 디렉토리의 목록을 반환한다. 이게 무슨 말이냐면, NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다. 그래서 패키지를 찾지 못할수록, 느린 I/O속도를 자랑한다. (탐색에 실패하는 경우도 있다.) 즉, NPM은 패키지를 찾지 못하면 상위 디렉토리의 node_.. 공감수 1 댓글수 2 2021. 6. 19.
HTML,CSS,JS를 기초부터 다져보자 github.com/Hong-JunHyeok/JavaScript-JQuery_Standard Hong-JunHyeok/JavaScript-JQuery_Standard 🟨자바스크립트를 기초부터 다져보는 시간을 가져봅시다. Contribute to Hong-JunHyeok/JavaScript-JQuery_Standard development by creating an account on GitHub. github.com github.com/Hong-JunHyeok/HTML5-CSS3_Design Hong-JunHyeok/HTML5-CSS3_Design 🎨[최신표준 HTML5 + CSS3 디자인] 책을 보고 기록하며, 만들어보는 레포지토리입니다. - Hong-JunHyeok/HTML5-CSS3_Design g.. 공감수 0 댓글수 3 2021. 4. 21.
성공적인 멘토의 역할 강의를 듣고 대구 소프트웨어 고등학교에서 진행한 성공적인 멘토의 역할 강의를 듣고 쓰는 글이다. 강의를 듣고 급하게 쓰는 거라 정리가 안될 수도 있다. 멘토로서 가장 중요한 역량? 리더쉽 , 끈기 등... 리더십이 중요한 이유 : 쐐기벌레는 자신이 간 길을 남긴다. 나머지 쐐기벌레는 그 길을 따라간다. 파브르는 쐐기벌레가 가는 길을 원으로 그리면 어떻게 될지 연구하게 된다. -> 결과는 끔찍하게도 돌돌 돌다가 모두가 지쳐서 죽었다. 위의 연구결과로 알수 있는 사실 : 이끄는 사람이 중요하다는 사실을 알 수 있다. 멘티들이 잘하면 진심으로 축하해주고 칭찬해주어야 한다. 사람은 인정받고 싶은 욕구를 가지고 있다. 공감할 수 있는 능력은 중요하다. ex) 사업 아이템을 낼 때 사람들이 불편한 부분을 개선한 아이템을 내면 .. 공감수 0 댓글수 0 2021. 4. 15.
Redux toolkit으로 Redux프로처럼 사용해보기 기존에 Redux코드를 리액트 앱에서 작성하다 보면 불만이 생기기 마련이다. 왜냐하면 이렇게 까지 해야 할까 싶은 수많은 코드들 때문이다. 그래서 리덕스 측에서는 새로운 방안을 제시했는데, 그것이 바로 Redux Toolkit이다. 리덕스 코드를 정말 짧게 줄여줄 착한 라이브러리이다. 또한, 기능 또한 강력하기 때문에 한번 배워볼 가치가 있다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 리액트 앱에 NPM이라면 위의 명령어를, yarn이라면 밑의 명령어를 실행하여서 Toolkit을 다운로드하여 보도록 하자. Toolkit에서 어떤 기능을 제공하는지 하나하나 살펴보도록 하자. createAction 가장 먼저 createAct.. 공감수 1 댓글수 1 2021. 4. 3.
React_Redux_Typescript_Redux-saga를 개발하고... hong-junhyeok.github.io/React_Redux_Typescript_Redux-saga/?fbclid=IwAR0J-yUNKHQX08epLX1G26PsfAeVKKTWUCoo7k2IBwmtDFykr53TgOJ04fc React_Redux_Typescript_Redux-saga hong-junhyeok.github.io 리덕스와 리덕스 사가를 쓸 때 많은 분들이 러닝 커브가 높다, 헷갈린다 하시는 분들이 많길래 (실제로 나도.....) 예제를 보여주는 웹사이트를 만들어보면 어떨까 라는 생각으로 React_Redux_Typescript_Redux-saga를 개발하게 되었다. 개발 환경 깃허브 주소 github.com/Hong-JunHyeok/React_Redux_Typescript_Redux-s.. 공감수 1 댓글수 0 2021. 3. 27.
데일 카네기의 인간관계론을 읽고 (2) 오늘은 데일 카네기의 인간관계론 2,3장을 읽고 느꼈던 점들을 말해 보려고 한다. 이전의 1장에서 카네기가 말하고 싶어했던 주제는 “비난”이었다. 이번 2,3장에서의 주제는 “인정”과 “욕구”이다. 좀 더 자세히 살펴보도록 하자. 먼저 2장에서 인정은, 다른 사람을 진심으로 인정하라는 내용이다. 사람이 가지고 있는 최고의 능력을 끌어내는 방법은 인정과 격려이다. 다른 사람의 장점을 이해하려고 노력한다면, 그 사람도 나의 말을 소중하게 받아들이게 될 것이며, 몇 번이고 나의 말을 기억할 것이다. 잠시 슈와브의 이야기에 집중해보도록 하자. 슈와브는 일 년에 백만 달러라는 금액을 받았던 사람이다. 그가 이렇게 돈을 많이 받을 수 있었던 이유는 무엇일까? 바로 “사람을 다루는 능력이 탁월했기 때문”이다. 그는 .. 공감수 1 댓글수 2 2021. 2. 25.
데일 카네기의 인간관계론을 읽고 (1) 오늘은 인간관계론 1장을 읽고 느낀 점을 메모하려고 한다. 1장에서 카네기가 말하고자 싶은 부분은 바로 비난하지 말라는 것이다. 1장 끝부분에는 이런 말이 있다. 비판하거나, 비난하거나, 불평하지 마라. 위의 말을 듣고 처음에는 조금 의아했다. 어떻게 사람이 비판, 비난을 하지 않을 수 있는가. 하지만 이 책을 읽고 생각이 조금 달라졌다. 비난, 비판이라는 것은 결국 나에게 돌아오기 마련이다. 비난하는것은 전서구(내가 이해한 바로는 전화기 같다. )와 같아서, 결국 나에게 다시 돌아온다. 를 항상 상기시키고 살면, 나에게 큰 도움이 될것이다. 또한, 비난을 하면 생길 수 있는 부작용에 대해서 조금 말하려고 한다. 우선 내가 남에게 비난을 퍼부었다. 남을 이해시키려고 하는 것이 아닌, 순전히 비난을 퍼부었.. 공감수 2 댓글수 0 2021. 2. 23.
Weather App(모바일) 만들기 만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/RN_weatherApp Hong-JunHyeok/RN_weatherApp 리액트 네이티브로 만드는 날씨 앱입니다. Contribute to Hong-JunHyeok/RN_weatherApp development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 태어나서 처음으로 앱 개발을 해보았다. 생각보다 어려운 면도 있었고 쉬운 면도 있었다. 리액트 네이티브를 해봤는데, 전부터 리액트를 해와서 그런건진 모르겠는데 리액트 네이티브가 친숙하고 쉽게 다가왔다. 하지만 그 익숙함에 속아 자꾸 리액트랑 같다고 생각하여 실수를 하는 경우가 많았다. 대표적.. 공감수 0 댓글수 0 2021. 2. 16.
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 기분 좋게 서버를 공부할려고 mysql켜보니까 제목과 같은 오류가 발생했다..ㄷㄷ 덕분에 1시간의 구글링을 통해서 이 오류을 해결했다. 다들 linux기준으로 설명해서 mac환경인 나는 해결하지 못했던 것이다. 다음 명령어를 쳐서 $ mysql.server start 서버를 구동해주면 휴... 맥 쓰는 사람들은 나처럼 시간을 뺏기지 않았으면 좋겠다... 그럼이만...ㅠㅠㅠㅠㅠ 공감수 1 댓글수 0 2021. 2. 16.
Angular - 개념 및 예제 오늘은 앵귤러를 한번 만져보려고 한다. 구글링을 해서 간단하게 개념을 잡아보고 카운터를 만들어보면서, 데이터 바인딩은 어떻게 하는지, 컴포넌트는 어떻게 생성하고 모듈화 시키는지 그런 것들을 알아보도록 하자. 일단 앵귤러는 CLI를 통해서 프로젝트를 관리하는 것을 할 수 있다. 개인적으로 CLI굉장히 맘에 들었다. 그리고 nest를 공부하면서 이 앵귤러랑 유사한 프로젝트 구조를 가지고 있다는 것을 알게 되었다. 그래서 앵귤러를 공부하면 nest의 구조까지 알 수 있는 두 마리의 토끼를 잡는 이득이 있다 기존에 nest를 조금 만져봐서 앵귤러의 개념, 생각보다 쉬웠다. ng new my-project 이렇게 해서 앵귤러 프로젝트를 생성할 수 있고, 생성된 프로젝트에 ng serve 를 하게되면 4200 포트.. 공감수 1 댓글수 0 2021. 2. 16.
Transpi(트렌스피) - 번역 웹사이트 만들기 만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/Transpi Hong-JunHyeok/Transpi 카카오 API를 사용한 번역 웹애플리케이션입니다. Contribute to Hong-JunHyeok/Transpi development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 맨날 JsonPlaceholder라는 걸로 fetch연습을 해왔었는데, 이번에 카카오에서 만든 번역 API를 사용해보면서, 뭔가 "만든다는" 느낌이 들었다. 그리고 styled-components의 사용법을 어느 정도 감을 잡은 것 같고, 스타일링에 대한 자신감이 높아졌다.(외부 자료 한 개도 안 보고 개발한 내가.. 공감수 2 댓글수 2 2021. 2. 15.
코로나 뷰어(Corona viewer)만들기 만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/corona_viewer Hong-JunHyeok/corona_viewer 국내 코로나 현황을 보기위한 웹애플리케이션. Contribute to Hong-JunHyeok/corona_viewer development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 간단하게 typescript랑 recoil의 조합을 사용해보고 싶어서 시작한 프로젝트인데, 하다 보니 큰 문제에 직면했다. CORS인데, 이 문제는 프론트 단에서는 해결할 수 없는 문제임을 깨닫고 다른 방법을 찾아보다가 결국 포기하고 크롬 플러그인인 Moesif CORS를 사용해서 우회를.. 공감수 2 댓글수 0 2021. 2. 14.

문의안내

티스토리
로그인
고객센터

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