자바스크립트10 [React] 리액트 버전 17 VS 18 이번 주제도 스타트업 면접에서 받은 질문이다 암기력 테스트 같아서 좋아하진 않는 질문이지만 질문을 받은 김에 정리해 보려고 한다 2022년 3월 업데이트 된 React 18.0.0 버전의 주요 키워드는 "Concurrency(동시성)"이다 동시성이란 자바스크립트의 싱글 스레드라는 한계를 극복하여 사용자 경험을 향상시키기 위해 여러 작업을 다루는 해결책이다 실제로 여러 작업이 병렬로 처리되진 않지만 여러 작업들을 빠르게 전환하면서 동시에 수행되는 것처럼 느끼게 해준다 이러한 동시성 모드를 사용하기 위해서는 index.js에서 이전 버전의 root.render() 메서드 대신에 createRoot() 메서드를 사용하면 되는데 CRA(create-react-app)로 프로젝트를 빌드하면 자동으로 설정된다 1... 2024. 2. 14. [Recoil] 사용법 리코일 이란? React에서 사용하는 Recoil은 상태 관리 라이브러리로, Facebook에서 개발한 오픈 소스 라이브러리이다. Redux나 Context API와 같은 다른 상태 관리 도구와 비교될 수 있지만, Recoil은 특히 복잡한 상태 관리 및 컴포넌트 간의 데이터 공유를 보다 간편하게 만드는 데 중점을 둔다. Redux는 훨씬 오래되었지만 보일러플레이트 코드가 많은 단점이 있다(그럼에도 가장 많이 쓰임). contextAPI는 react 내장 api이지만 비동기 처리가 비교적 어렵고, 렌더링 최적화를 별도로 해주어야 하기 때문에 규모가 커질수록 외부 라이브러리를 사용한다. Redux는 React처럼 페이스북팀에서 만들었기 때문에 신뢰성과 높은 호환성을 기대할 수 있다. 코드량이 적어도 높은 .. 2024. 1. 27. Promise.all VS Promise.allSettled (유사 멀티 스레딩) 면접에서 직접 들은 질문인 Promise.all과 Promise.allSettled에 대해 정리를 하려고 한다. 내가 들었던 질문은 “Node.js는 싱글 스레드인가요, 멀티 스레드인가요?”에 대한 꼬리 질문으로 “자바스크립트는 Promise.all, Promise.allSettled로 멀티 스레딩을 흉내 내는데 그 차이를 알고 있습니까?” 였었다. Promise 객체가 3가지 상태가 있고 resolve, reject 정도만 준비 해왔던 나는 간단하게 모른다는 답변을 하고 넘어갔다. 면접은 탈락했지만 이 질문이 얼마나 비중이 있는지는 알 수 없으니, 다른 동기 분들에게 물어봤는데 역시 처음 듣는다고 하였다. 나중에 알았지만 비교적 최근인 ES2020에서 추가된 문법이고, 그 회사의 특성상 비동기 요청을 .. 2023. 11. 28. 일렉트론 시작하기 일렉트론이란? 일렉트론은 HTML, CSS, javascript를 사용하여 데스크톱 애플리케이션을 빌드하는 프레임워크입니다. 프론트엔드 개발자라면 당연히 잘 다뤄야할 언어로 데스크톱 어플리케이션도 만들 수 있으니 프론트엔드 개발자에겐 매우 유리합니다. Jquery, React, Angular 등 웹 프론트 개발에 씌였던 라이브러리들을 사용할 수 있기 때문입니다. 대표적인 일렉트론으로 개발한 프로그램으로는 Discord, Slack, VSCode 등이 있습니다. 웹 개발용 언어가 데스크탑 애플리케이션에서 작동할 수 있는 이유는 크롬의 오픈소스 버전인 크로미움을 사용했기 때문입니다. 크로미움과 Node.js를 각각 웹에서 프론트엔드와 백엔드의 역할을 해줍니다. 또한 크로스플랫폼이 가능한 이유이기도 합니다. .. 2023. 10. 30. [Javascript 문법] var, let, const 차이, 사용법 1.변수의 3가지 종류 Why? 자바스크립트에서 변수를 선언하는 법은 var, let, const 3가지가 있습니다. var 변수 선언 방식 이외에 let과 const는 ES6 이후 나온 문법으로, 코드량이 많아질 때 오류를 막기 위해서 탄생했습니다. 예를 들어, name 이라는 변수를 선언한 것을 잊고 다시 선언해서 문제가 발생한 경우, var를 사용하면 찾기 힘들지만 let을 사용하면 런타임 이전에 에러가 발생하여 많은 문제를 방지할 수 있습니다. """ var를 썼을 때 """ var name = 'kim' var name = 'lee' // 정상 동작을 하여, 똑같은 변수명을 썼음에도 알 수 없습니다 """ let을 썼을 때 """ let name = 'kim' let name = 'lee'// .. 2022. 12. 4. [Node js] submit 버튼을 누르면 서버로 form의 정보를 전달 약간의 html 내용이 포함되어있다. write.html 파일로 가서 (폼을 만들 때 꼭 있어야 하는 2개 속성) action="/add" 전달하게 될 경로를 설정 method="POST" get요청인지 post요청인지를 입력 server.js로 가서 "어떤 사람이 /add 경로로 POST 요청을 하면 ???를 해주세요" 를 입력하면 된다. app.post('/add', function(요청, 응답){ 응답.send('전송완료') }); 이제 form에서 submit버튼을 누르면 전송완료라는 /add페이지가 뜬다. 그런데 input에 적은 정보는 아직 처리하지 않았는데 app.post의 콜백함수의 요청 파라미터에 들어가있다. 근데 쉽게 꺼내쓰려면 라이브러리를 깔아야함 서버를 끄고 다음을 입력 npm in.. 2021. 8. 20. [Redux] 사용법 let alert초기값 = true; function reducer2(state = alert초기값, 액션){ if() return state } let store = createStore(combineReducers({reducer,reducer2})); Cart.js로 와서 다음과 같이 state.reducer와 state.reducer2를 한다. function state를props화(state) { //redux store데이터를 가져와서 props로 변환해주는함수 return { state : state.reducer, alert열렸니 : state.reducer2 } } state를 쉽게 꺼내 쓰는 방법 Cart 아래 다음을 입력한다 let state = useSelector((state) =.. 2021. 8. 17. [React js] props 대신 쓸 수 있는 context API 1. 범위를 생성한다 let 재고context = React.createContext(); 2. 같은 값을 공유할 범위를 지정한다 { shoes.map((a,i)=>{ return ( ) }) } 3. 변수로 받아오기 & 사용하기 function Card(props) { let 재고 = useContext(재고context); return ( { props.shoes.title } { props.shoes.content } & { props.shoes.price } {재고[props.i]} ) } export default App; hook이기 때문에 자동으로 import 할 수 있음 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 1. 생성한 범위 앞에 export를 붙여준다. ex.. 2021. 8. 13. [React js] Ajax Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.jquery $.ajax() 2.axios.get() 3.쌩 자바스크립트 fetch() yarn add axios (또는 npm install axios) onClick={()=>{axios.get()}} get요청 .then() 요청성공시 실행하는 코드 .catch() 요청실패시 실행하는 코드 then(result) 가져온 result.data 결과 데이터만 json은 따옴표가 쳐져있음 object가아님. 서버와 통신은 텍스트로만 되기때문. axios를쓰면 json을 object로 알아서 바꿔줌.(fetch는 안해줌) 내가 생각한 답 let shoes사본 = [...shoes] shoes변경([...shoes사본,...result.data]) .. 2021. 8. 12. [React]SASS SASS 를 설치한다. yarn add node-sass (npm install node-sass) SASS는 CSS를 좀더 프로그래밍언어 스럽가 젝성가능한 preprocessor.(css에서 변수 연산자,함수,extend,import사용가능) 브라우저는 css밖에 모르므로 sass 작성파일을 css로 컴파일 해야함. node-sass가 알아서해줌 2021. 8. 11. 이전 1 다음
