Lennon FE

다들 리액트 프로젝트에서 useState를 쓰며 당황했던 적이 있을거라 생각한다. 리액트의 useState를 쓰다보면 우리가 원하는 대로 동작하지 않는 걸 확인할 수 있다. 아래 코드는 체크박스가 하나 존재하고 체크할때마다 상태 toggle 값이 true or false를 가지는 로직이다. 체크박스를 체크하는 걸로 상태값을 바꾸는 예시를 보고 결과를 예상해보자 import React, { useState } from "react"; function App() { const [toggle, setToggle] = useState(false); const onChange = () => { setToggle((toggle) => !toggle); if(toggle) { console.log('toggle은 T..

CRA로 리액트 프로젝트를 생성했다고 가정하겠다. 해당 폴더로 들어가 먼저 의존성을 설치해보자 npm install express // express 라이브러리! npm install concurrently // package.json에서 서버와 클라이언트 동시에 실행시킴 npm install cors // cors npm install http-proxy-middleware // 클라이언트와 연동 npm install nodemon // 새로고침해도 잘 적용되게! 내 프로젝트 기준 폴더구조를 아래와 같다. server 폴더를 만들어 route라는 폴더를 만들고 안에 index.js를 넣자. 그 후 server폴더 전역에 app.js를 만들자! 클라이언트와 서버 연동을 위한 proxy설정을 위해 src폴..

https://www.acmicpc.net/problem/11758 11758번: CCW 첫째 줄에 P1의 (x1, y1), 둘째 줄에 P2의 (x2, y2), 셋째 줄에 P3의 (x3, y3)가 주어진다. (-10,000 ≤ x1, y1, x2, y2, x3, y3 ≤ 10,000) 모든 좌표는 정수이다. P1, P2, P3의 좌표는 서로 다르다. www.acmicpc.net const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', function (line) { input.push(..

https://www.acmicpc.net/problem/1912 1912번: 연속합 첫째 줄에 정수 n(1 ≤ n ≤ 100,000)이 주어지고 둘째 줄에는 n개의 정수로 이루어진 수열이 주어진다. 수는 -1,000보다 크거나 같고, 1,000보다 작거나 같은 정수이다. www.acmicpc.net const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', function (line) { input.push(line); if (input.length === 2) { rl.close();..

자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다. 아래 함수가 어떻게 실행될 지 예상해보자. const obj = { name: 'minho', intro: function() { console.log(this.name) setTimeout(function() { console.log(this.name) }, 1000) } } obj.intro() 논리적으로 생각해보면 당연히 minho가 두 번 뜰거라 생각한다. 그러나 두 번째 console.log는 undefined가 뜨는 걸 확인할 수 있다. 이유는 무엇일까? setTimeout 내부의 this는 window를 가르키기 때문이다. 해당 문제를 아래 코드와 같이 bind, call, apply를 통해 어디에 ..

nodeJ S가 거의 처음인 수준이라 3일 동안 약 30시간 정도를 투자해 nodejs와 react를 통신하며 get, post로 zip파일도 주고받고 험난한 시간을 보냈다. 실제 웹에서 파일을 이것저것 옮기면서 작성하고 프로젝트 저장 버튼을 누르면 업로드하고 웹 에디터에서 수정한 파일들을 포함한 전체 프로젝트가 로컬에 저장되는 것까지 구현했다..! 끝까지 해보니 뿌듯하다🙂 힘들었던 점 1. 프론트엔드 개발자로서 서버 통신이 헷갈렸다. 2. zip파일 포맷, 압축 풀기, 압축 하기, 로컬에 저장하기 등등... 많이 험난했다ㅠ.ㅠ 3. 다양한 라이브러리를 사용했는데 유지보수가 안되는 게 너무 많았으며, 그냥 오류가 뜨는 게 많았다. 4. 검색을 해도 내가 원하는 걸 찾기가 힘들었다. (웹 에디터가 마이너해..

겹치는 것이나 많이 쓰이는 부분은 key: value로 정의하고, React에서 해당 요소를 module로 가져와 사용할 수 있다. /* colors.css */ @value key: value; @value makerBlack: black; @value makerWhite: white; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; @value makerGrey: #626262; @value makerGreen: #385461; @value makerPink: pink; @value makerShadow: rgba(217, 217, 217, 1); @value makerColorful: linear-gradient(166deg, rgb..