with with

Flutter, dart는 싱글 스레드 환경이다. 즉, 화면 그리기, api 통신, 계산 등 모두 하나의 스레드에서 처리된다. 물론 비동기 처리를 지원하기 때문에 api 통신을 함에 있어, 데이터가 들어올 때 까지 화면이 그려지지 않는다거나 하는 문제는 발생하지 않는다. 하지만, 복잡한 연산을 수행하는 동기 연산의 경우에는 화면이 버벅이게 되는 문제가 발생한다. 이를 해결하기 위해 복잡하거나 무거운 연산을 수행하는 로직을 별도의 Isolate에서 처리하면 화면이 부드러워진다. Isolate Dart의 동시성 Isolate를 사용하여 멀티 프로세서 코어에서 병렬 코드를 실행하세요. dart-ko.dev 일반적으로 모든 언어는 스레드 단위로 처리된다. 스레드는 같은 메모리와 코드를 공유하기 때문에 뮤텍스, ..

bloc | Dart Package A predictable state management library that helps implement the BLoC (Business Logic Component) design pattern. pub.dev bloc을 사용하는 이유 내 경우에는 프로젝트의 크기가 커질수록 bloc 패턴을 사용해야 할 필요성이 절실해졌는데, 아래와 같은 상황에서 필요했다. 예시를 위해 아래와 같은 위젯 트리가 형성되어 있다고 생각해보자. 1. 깊은 위젯간 의존 관계 Flutter는 기본적으로 위젯 객체를 인자로 넘겨주는 식으로 구조를 형성하게 된다. 이런식으로 위젯을 쌓다보면 위젯 트리가 깊어지게 되는데, 여기서 문제가 발생한다. 최 상단의 Arkhive 위젯의 멤버 변수의 값을 ..

리액트 프로젝트의 크기가 커질수록, 태그의 양이 많아질수록 점점 더 태그 트리구조를 파악하기 힘들어질 뿐더러, css와 class 이름 붙이기도 힘들어진다. 하지만, styled-components만 있으면 그런걱정 끝! styled-components - 공식 문서 페이지 styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 ...공식 사이트 최상단에 나와있는 문구이다. 그런데, 정말 말대로 스트레스가 확 ..

useState의 사용이 익숙해질 무렵, 한 가지 불편함을 느꼈다. 부모 컴포넌트에서 자식 컴포넌트로 useState안의 값을 넘겨줘야 하는 경우, 부모-자식이 한 두 단계정도 떨어져 있을 때는 상관이 없는데, 3회 이상 상속을 시켜줘야 하는 경우에는 불편함이 많았다. 이 때, recoil을 알게 되었고, 불편함이 바로 해소되었다..! recoil - 공식 문서 페이지 설치 | Recoil NPM recoiljs.org recoil은 리액트를 위한 상태관리 라이브러리로, 기존에 쓰던 useState가 지역변수 같은 느낌이었다면, recoil은 전역변수 같은 느낌이었다. 그럴만 한게, recoil은 상태를 별도의 코드 파일로 작성하고, 어떠한 컴포넌트 파일에서 상태값을 불러오고, 수정할 수 있게 해준다. ..

vanilla JavaScript를 이용한 동적 웹사이트 GitHub - wjlee611/nodejs Contribute to wjlee611/nodejs development by creating an account on GitHub. github.com

https://with611.shop:3000/main?id=HTML&page=12 protocol: 통신규칙으로, 사용자가 서버에 접속할 때 어떤 방식으로 통신할까를 알려줌. host(domain): 인터넷에 연결된 컴퓨터의 주소. port: 일종의 서버 문지기 역할, 특정 서버로 접속하게 해준다. (default: 80) path: 도메인 컴퓨터 안에 있는 특정 디렉토리, 파일을 가리킴. query string: 웹 서버에 데이터를 전달하는데 쓰임. + 심화 query string 추출하기 GitHub - wjlee611/nodejs Contribute to wjlee611/nodejs development by creating an account on GitHub. github.com

깃허브 페이지에 배포하는 방법과 내가 겪었던 자잘한 버그(?) 상황과 그에 대한 해결법을 소개하고자 한다. 우선 아래의 사진과 같이 깃허브 페이지에 배포하는 방법이다. 그 전에 리액트의 빌드 과정을 간략하게 설명하자면, npm run build 커맨드를 실행시 리액트에서는 react-scripts build 스크립트를 실행한다. 그러면 전에 없던 build라는 폴더가 생기는데, 그 폴더 안에는 우리가 src 폴더 안에서 작업했던 내용이 최적화된 빌드 파일이 들어가게 되고, 그 빌드 파일을 배포하는 것이다. 빌드한 후에는 npm run deploy 커맨드를 실행하게 되면 gh-pages -d build 커맨드가 실행되는데 build 폴더를 gh-pages로 deploy한다는 의미로 생각하면 될 거 같다. ..

react-router-dom (v5.3.0 기준) useLocation hook은 브라우저 주소와 path property에 입력된 주소와 일치하는지를 검사한다. 만약 브라우저 주소와 useLocation(path: string)의 path property가 일치하면 해당 path의 match 객체를 반환하고, 일치하지 않는 경우에는 null을 반환한다. 이를 이용하면 중첩 Route에서 탭을 구현할 수 있다. 다음의 코드를 살펴보자. const Tab = styled.span` text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 400; background-color: rgba(0, 0, 0, 0.5); paddin..