코딩
-
부모에서 자식까지 일일이 Prop전달하기 싫을 때?FrontEnd/React 2022. 10. 2. 13:50
가끔 React로 코딩하다보면 부모의 state나 함수를 자식의 자식의 자식...에게 전달해야 할 때가 있다. 그러면 코드도 복잡해지고 가독성이 떨어지는데 이를 해결할 수 있는게 바로 Context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 리액트 공식 홈페이지에 Context란에 가보면 이렇게 설명해준다. 우리는 언제 Context를 쓸 지(일일이 전달하기 번거로울 떄)를 정했으니 어떻게 쓰는지 알아보자. Context 생성하고 사용해보기 Context를 생성하려면 React.createContext API를 사용하면 끝이다. const MyContext = React.createContext(defaultValue) ..
-
Node로 JSON 주고받기 - CodeHan의 코딩공부BackEnd/개념정리 2022. 9. 11. 13:09
이번엔 Node로 .json파일을 주고 받아보자. 이것 역시 크게 어렵지 않다. request와 response만 이해했다면 바로 할 수 있다. const fs = require('fs'); const http = require('http'); const server = http.createServer((req,res) => { const url = req.url; const method = req.method; if(url === '/courses') { if(method === 'GET') { res.writeHead(200, {'Content-Type' : 'Application/json'}) res.end(JSON.stringify(course)) } else if(method === 'POST'..
-
[AWS번역기]뚝딱 만들어버린 번역기 - CodeHan의 SideProjectProject/Translator 2022. 9. 10. 04:59
최근에 유튜브에서 너무 거창한 웹이 아니고 기본적이고 간단한 기능을 가진 웹도 큰 수익을 가져다준다는 영상을 봤다. simmillarweb이라는 사이트에서 방문자 수 분석을 대략적으로 해주는데, 대략적인 수치지만 그 방문자 수는 어마어마했다. 검색해본 웹은 날씨웹, 메모장, 계산기 등 정말 심플하지만 자주 사용하는 것들이었다. 나도 여기에서 아이디어를 얻어서 번역기를 만들어보고자 했다. 번역 API를 제공하는 사이트 중에서 AWS에서 제공하는 번역기가 글자수 제한도 크고 초과 비용도 저렴해서 AWS를 선택했다. 결과적으로 며칠만에 뚝딱! 만들어버렸다. https://www.kindtranslator.com/ KindTranslator 한국어 영어 일본어 중국어(간체) 중국어(번체) 스페인어 프랑스어 러시..