with with

** 주의: 서론이 깁니다. ** 학교 프로젝트의 일환으로 판타스틱5 팀에서 활동하며 음성인식 키오스크: "말하는 사이에 주문 완료"를 개발하고 있었다. 프론트는 react.js, 백엔드는 node.js로 개발이 완료된 시점에서, 본격적으로 자연어처리를 위해 파이썬을 사용해야 할 시간이 온 것이다. 하지만, 그 초기 세팅과정이 만만치 않았다. 처음에는 프론트에서 js를 통해 파이썬 코드를 호출하여 자연어처리를 할 생각이었다. 하지만, 위 기능을 사용하기 위해선 node.js의 기능을 활용해야 했는데, gh-pages에 배포하는 순간, 그 기능을 활용하는건 불가능 했기에 다른 방법을 모색해 봐야 했다. 그래서 플라스크를 이용해 파이썬 코드를 굴릴 서버를 만들기로 했다. 이렇게 방향이 잡히자, 다들 분량을 ..

리액트 프로젝트의 크기가 커질수록, 태그의 양이 많아질수록 점점 더 태그 트리구조를 파악하기 힘들어질 뿐더러, 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..

react-router-dom (v5.3.0 기준) useLocation hook은 동적인 현 위치의 객체를 반환한다. 무엇보다, useLocation을 사용하는 주된 내용은 페이지 전환시 데이터를 보낼 수 있다는 것이다. 을 보면 state에 객체가 들어가 있는데, 이 객체에 이전 페이지에서 보내고 싶은 데이터를 담아 다음 페이지로 보내면, useLocation을 통해 보낸 데이터를 받을 수 있다. 이 방법을 이용하면, 로딩 중에도 특정 데이터는 사용자에게 보여줄 수 있기 때문에 사용자 경험이 증대된다. 데이터를 보내는 방법은 아래의 코드를 참고하자. // Coins.tsx // Coin.tsx const { state } = useLocation(); Coins.tsx에서 Link to를 통해 sta..