묻고 답해요

SendGird가입

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요 api 인증키를 발급받기 위해 sendgrid를 가입하려고 하는데 가입이 되지 않아서 질문남깁니다!!

• react
• python
• django
• docker

Javascript Exercise Problem List 문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요? 코드캠프 강의로 열심히 공부 중입니다. 좋은 커리큘럼 제공해 주셔서 감사해요. 제가 훈훈한 자바스크립트 강의를 복습중인데요. 노션에 있는 Javascript Exercise Problem을 풀고 있어요. 그런데 막히는 부분이 생겼어요. 01_variable,function,type > 06_addnumber function addNumber() { let result; // 숫자 9와 숫자 7을 더했을 때의 결과값을 result에 할당하세요. // 여기에 코드를 작성하세요. result = 9 + 7; return result; } addNumber(); 이 문제를 풀고 있는데 output이 14가 나와야 정답이라고 써있는데요. 아무리 해도 답이 16으로 나와요. 아직 애송이라 제가 놓친 게 있는지 해서요 ㅠㅠ

• javascript

BottomTabScreen 관련 질문입니다.

해결됨

따라하며 배우는 리액트 네이티브 기초

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Search from './src/screens/Search'; import Profile from './src/screens/Profile'; import Activity from './src/screens/Activity'; import {NavigationContainer} from '@react-navigation/native'; import Status from './src/screens/Status'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; const App = () => { const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={() => ({ tabBarHideOnKeyboard: true, // tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, })}> <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; return ( <NavigationContainer> <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; 강의 내용과 같이 App 컴포넌트 안에서 BottomTabScreen 컴포넌트를 선언하면 "Do not define components during render." 라는 경고문이 뜹니다. 그래서 아래와 같이 코드를 수정하였는데 App 컴포넌트 바깥에서 이렇게 선언해도 문제가 없는건가요? import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Search from './src/screens/Search'; import Profile from './src/screens/Profile'; import Activity from './src/screens/Activity'; import {NavigationContainer} from '@react-navigation/native'; import Status from './src/screens/Status'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={() => ({ tabBarHideOnKeyboard: true, // tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, })}> <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;

• react
• react-native
• expo

비동기를 동기로 처리하는 이유

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요? 처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요? 동기, 비동기가 잘이해가 안가네요..

• javascript
• react
• node.js

예제 코드 받을 수 있을까요??

해결됨

프로젝트 만들기

코드 제공 부탁드려도 될까요??

• javascript
• vanilla-javascript

tailwindcss 라이브러리 받은 후 실행이 안됩니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

npm i -D postcss autoprefixer tailwind npx tailwindcss init -p 모두 작업을 마치고 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], } index.css @tailwind base; @tailwind components; @tailwind utilities; npm run dev 를 돌리면, node:internal/process/promises:246 triggerUncaughtException(err, true /* fromPromise */); [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/WebStudy/WebDevelement/React/fullstack-react/front): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' 라는 오류가 뜹니다. 원인파악이 어려운데 문의드립니다!

• react
• redux
• node.js
• 웹앱
• mongodb

next.js 환경에서 이 수업을 들을 수 있나요?

미해결

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

next.js 환경에서 이 수업을 들을 수 있나요?

• react
• 웹앱
• firebase

제가 이해한 C.Reduce와 Reduce의 동작 차이 정리

미해결

함수형 프로그래밍과 JavaScript ES6+

Concurrency Reduce와 Strict Reduce의 동작 차이 정리 _.reduce 와 C.reduce의 차이는 [...iter]로 제너레이터를 한번에 돌려 프로미스들을 동시에 평가 ( 프로미스의 평가 == 프로미스 객체 반환, 콜백함수 즉시실행 ) 하는데에 있다. _.reduce 만약 [... ]형태로 전개하지 않는다면 reduce의 while문에서 next()를 하여 yield 로 반환하는 값을 하나씩 빼 올 것이고, 이 과정에서 프로미스는 뽑힌다면 (=평가된다면) 뽑히는 과정에서 비로소 콜백을 실행 할 것이다. 그러나 전개하지 않은 상태에서는 이런 뽑히는 과정이 순차적이므로, '프로미스를 뽑아서 콜백을 실행 시켜준 후, reduce 자체를 return 하여 콜백이 완료될 때 까지 기다리고 다시 recur 재귀함수를 통해 이어서 진행하는 과정' 을 프로미스가 뽑힐 때마다 해주어야 하는 것이다. C.Reduce 반면에 [...] 형태로 전개하여 사용하면, yield로 반환될 모든 값이 배열에 담긴다. 이 과정에서 뽑힌 프로미스는 콜백이 바로 실행될 것이고, 만약 제너레이터에 여러 프로미스들이 존재한다면 제너레이터의 next()가 연속적으로 동작함에 따라 콜백도 주르륵 병렬되게 실행 될 것이다. 이런 프로미스를 포함한 배열을 받은 reduce는 then()을 통해서 reduce를 종료하고 프로미스를 반환한다. 콜백이 완료되면 then(recur)에 의해 재 실행된다. 여러 프로미스들이 거의 동시에 자신의 콜백을 실행시켰기 때문에, reduce 입장에서는 전체 시간이 가장 오래걸리는 놈 만큼만 소요다는 것이다. 마치 Promise.all() 이 동작하는것 처럼 말이다

• javascript
• 함수형-프로그래밍

이미지가 안떠요...

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

13분 정도까지 했는데 이미지가 안뜨네요... 이유가 무엇인지 아시나요?

• react
• node.js
• 웹앱
• mongodb
• express

개인공부

해결됨

처음 만난 리액트(React)

안녕하세요! 리액트를 처음접하고 공부하고 있는 사람입니다.. 강의 해주신 내용이 너무 깔끔하고 좋아서 강의보면서 실습해보고, 복습개념으로 블로그에 글을 정리하려고 하는데 괜찮을까요?? 출처는 당연히 남기고, 광고나 이런거는 전혀없고 그냥 개인 공부하는 블로그입니다..!!

• HTML/CSS
• javascript
• react

str.toLowerCase is not a function

미해결

Slack 클론 코딩[실시간 채팅 with React]

예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 ! ChatBox.tsx import React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox; 혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

깃헙 권한 요청드립니다.

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

.

• javascript
• vue.js
• es6
• vuex

깃헙 권한 요청 드립니다!

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

권한 요청 드립니다. 인프런 아이디 : choigy0331@naver.com 인프런 이메일 : choigy0331@naver.com 깃헙 아이디 : choigy1001 깃헙 Username : Keun young

• javascript
• vue.js

input 태그 한글 작성시 '마지막 글자 밀림' 오류와 '문자열 마무리' 오류

미해결

안녕하세요 !! 다름이 아니라 현재 제가 일반 브라우저가 아닌 C#기반으로 돌아가는 웹을 작업중인데요 input 태그에 한글 작성시 '마지막 글자 밀림'오류와 '문자열 마무리'오류가 발생되어 혹시 해결 방법을 아시는 분이 있을까 하여 글 남깁니다..! 제발 도와주세요 감사합니다 !

• C#
• javascript
• html
• css
• node.js
• ejs

투두리스트 배경화면 적용 404 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의부분에 const weatherDataActive = function({location, weather}){ const locationNameTag = document.querySelector('#location-name-tag'); locationNameTag.textContent = location; console.log(weather); document.body.style.backgroundImage = `url('./images/${weather}.jpg')` }; 이 부분을 제가 똑같이 따라했는데요 노션에 있는 사진 자료 그대로 다운받았고 선생님이 말씀하신 경로에 똑같이 담았는데 document.body.style.backgroundImage = `url('./images/${weather}.jpg')` 이걸 치니까 직전에 선생님이랑 같이 적용했던 css 백그라운드 이미지(햇빛)도 안나오고 404오류가 떠요ㅠㅠ왜일까요?

• react
• node.js
• seo
• javascript

야구게임 질문

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

마지막 Array(9).fill(0).map 을 return 하셨을때, 야구게임에 적용하려면 number 에 담으면 되는게 맞나요? const numbers = []; Array(9).fill(0).map((element, idx) => { return numbers.push(idx + 1); }) 이런식으로 number 배열에 넘겨주면 되는게 맞나요? 작동은 되는것 같은데, 이런식으로 하면 되는건지 알수 있을까 해 질문드립니다!

• javascript

깃헙 권한 요청 드립니다.

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

.

• javascript
• vue.js
• es6
• vuex

mysql_secure_installation 정책에 관해

미해결

[리뉴얼] React로 NodeBird SNS 만들기

제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ

• react
• redux
• node.js
• express
• next.js

점 표기법과 []표기법에 대해

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

디데이 강의를 보고 있는데요. 저는 아래와 같이 점표기법으로 짜봤는데 안되더라구여? for(let i = 0; i < timeKeys.length; i++){ console.log(documentObj.docKeys[i]); } 그래서 찾아보니 []표기법을 쓰라고해서 for(let i = 0; i < timeKeys.length; i++){ console.log(documentObj[docKeys[i]]); } 이렇게 써서 작동이 됐긴 하는데 왜 여기서 점 표기법은 안되고 []표기법만 되는 이유를 알고 싶습니다.

• javascript

강의자료 pdf에서 우분투에서 도커 다운받는 링크 복사할때

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04

• react
• node.js
• postgresql
• docker
• typescript
• 클론코딩
• next.js