2년 전 · 익명 님의 새로운 답변
해당 스프링부트 코드 해석 좀 부탁드립니다..
안드로이드에쓸 스프링부트 코드를 따왔는데 제가 잘이해사 안되서 상세히 알려주실 선배님조언 구합니다 package com.example.teamproject import MyAdapter import android.content.Context import android.content.Intent import android.icu.lang.UCharacter.GraphemeClusterBreak.L import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Toast import androidx.recyclerview.widget.DividerItemDecoration import androidx.recyclerview.widget.LinearLayoutManager import com.example.teamproject.databinding.ActivitySearchBinding import com.example.teamproject.login.LoginActivity import com.example.teamproject.model.RstrModel import com.example.teamproject.review.ReviewActivity import com.google.android.material.bottomnavigation.BottomNavigationView import retrofit2.Call import retrofit2.Callback import retrofit2.Response class SearchActivity : AppCompatActivity() { lateinit var binding: ActivitySearchBinding private lateinit var adapter: MyAdapter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivitySearchBinding.inflate(layoutInflater) setContentView(binding.root) setSupportActionBar(binding.toolbar) supportActionBar?.setDisplayShowTitleEnabled(false) binding.toolbar.title = "검색" val loginSharedPref = applicationContext.getSharedPreferences("login_prof", Context.MODE_PRIVATE) val userId = loginSharedPref.getString("m_id", null) val userService = (applicationContext as MyApplication).userService // 하단바 초기값 설정 val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottommenu) bottomNavigationView.selectedItemId = R.id.second_tab // 하단바 선택시 이벤티 binding.bottommenu.setOnItemSelectedListener {item -> when(item.itemId) { R.id.first_tab -> { val intent = Intent(this@SearchActivity, MainActivity::class.java) startActivity(intent) } R.id.third_tab -> { val intent = Intent(this@SearchActivity, ReviewActivity::class.java) startActivity(intent) } R.id.fourth_tab -> { if ( userId == null){ val intent = Intent(this@SearchActivity, LoginActivity::class.java) startActivity(intent) } else { val intent = Intent(this@SearchActivity, MyDining::class.java) startActivity(intent) } } R.id.fifth_tab -> { if ( userId == null){ val intent = Intent(this@SearchActivity, LoginActivity::class.java) startActivity(intent) } else { val intent = Intent(this@SearchActivity, MyProfilePage::class.java) startActivity(intent) } } } true } binding.searchBtn.setOnClickListener { var rstr_nm = binding.searchText.text.toString() val getnamecount = userService.getNamecount(rstr_nm) getnamecount.enqueue(object: Callback<Int>{ override fun onResponse(call: Call<Int>, response: Response<Int>) { if ( response.isSuccessful ){ val ncount = response.body() if (ncount != null) { if ( ncount >= 1){ val getname = userService.getName(rstr_nm) getname.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val rstrlist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, rstrlist) binding.recyclerView.addItemDecoration( DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL) ) } } override fun onFailure( call: Call<List<RstrModel>>, t: Throwable ) { call.cancel() } }) } else { Toast.makeText(this@SearchActivity, "검색 결과가 없습니다!", Toast.LENGTH_SHORT).show() } } } } override fun onFailure(call: Call<Int>, t: Throwable) { call.cancel() } }) } binding.area1.setOnClickListener { val rstr_addr = binding.area1.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area2.setOnClickListener { val rstr_addr = binding.area2.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area3.setOnClickListener { val rstr_addr = binding.area3.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area4.setOnClickListener { val rstr_addr = binding.area4.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area5.setOnClickListener { val rstr_addr = binding.area5.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area6.setOnClickListener { val rstr_addr = binding.area6.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area7.setOnClickListener { val rstr_addr = binding.area7.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type1.setOnClickListener { val rstr_list = binding.type1.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type2.setOnClickListener { val rstr_list = binding.type2.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type3.setOnClickListener { val rstr_list = binding.type3.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type4.setOnClickListener { val rstr_list = binding.type4.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type5.setOnClickListener { val rstr_list = binding.type5.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type6.setOnClickListener { val rstr_list = binding.type6.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } } }
개발자
#스프링부트
#안드롱디ㅡ
#안드로이드
#spring\
#spring
답변 1
댓글 0
보충이 필요해요 3
조회 181
Next.js SSR + react-query 조합에서의 serializing 에러
안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;
개발자
#react
#next.js
#ssr
#react-query
답변 2
댓글 3
추천해요 4
조회 3,056
<input type="file" multiple> 관련하여..
<template> <div> <input ref="fileInput" type="file" accept="image/*" multiple="true" @change="handleFileInputChange" /> <button @click="openFileInput" class="select-button"> Select Images </button> <div class="preview-container"> <div v-for="file in selectedFiles" :key="file.lastModified" class="preview-item" > <p>{{ file.name }}</p> <div class="preview"> <img :src="previewImage" style="width: 100px" /> </div> <!-- <img :src="URL.createObjectURL(file)" /> --> <button @click="removeFile(file.lastModified)" class="remove-button"> X </button> </div> </div> </div> </template> <script setup lang=“ts”> const fileInput = ref() const selectedFiles: Ref<Array<any>> = ref([]) const openFileInput = () => { fileInput.value.click() } const previewImage = ref<any>('') const handleFileInputChange = e => { // const files = Array.from(fileInput.value.files) const files = e.target.files console.log('files', files) selectedFiles.value.push(...files) console.log('add selectedFiles', selectedFiles.value) for (let i = 0; i < selectedFiles.value.length; i++) { const file = selectedFiles.value[i] console.log('handleFileInputChange_ file', selectedFiles.value[i]) const reader = new FileReader() reader.onload = e => { previewImage.value = e.target.result } reader.readAsDataURL(file) } } const removeFile = lastModified => { selectedFiles.value = selectedFiles.value.filter( file => file.lastModified !== lastModified ) console.log('remove selectedFiles', selectedFiles.value) } </script> 모바일에서 카메라로 찍은 여러장의 사진들이 각각의 썸네일로 노출되어야함 현재는 최신 사진으로 엎어치기 됨.. 예) 'A B C D' 의 사진이 나와야하는데 현재는 A 찍고 B찍으면 'B B' 가 됨 C찍으면 'C C C'가 됨 도와주세요!
개발자
#input
#type='file'
#vue3
#multiple
#preview
답변 3
댓글 0
보충이 필요해요 1
조회 170
2년 전 · 익명 님의 질문 업데이트
ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?
안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```
개발자
#eslint
#prettier
답변 0
댓글 0
조회 76
7달 전 · 연유 님의 질문
Devexpress schedulercontrol
schedulercontrol에서 전체적으로 배경색을 검은색으로 폰트색을 흰색으로 하려고 CustomDrawTimeCell과 CustomizeDateNavigationBarCaption를 사용해서 셀은 변경됐는데 bapcaption 이벤트 쪽은 코드 objectinfo, viewifo,handled부분에서 오류가 발생해서 변경이 안됩니다. 혹시나 아시는 분은 도움주시면 감사하겠습니다. private void schedulerControl1_CustomDrawTimeCell(object sender, DevExpress.XtraScheduler.CustomDrawObjectEventArgs e) { if (e.ObjectInfo is SchedulerViewCellBase cell) { // 셀의 배경색을 검은색으로 설정 cell.Appearance.BackColor = Color.Black; cell.Appearance.ForeColor = Color.White; // 텍스트 색상도 흰색으로 설정 e.Handled = true; // 기본 그리기 동작을 무시하고 커스텀 스타일을 적용 } } private void schedulerControl1_CustomizeDateNavigationBarCaption(object sender, DevExpress.XtraScheduler.CustomizeDateNavigationBarCaptionEventArgs e) { if (e.ObjectInfo is DevExpress.XtraScheduler.ViewInfo.SchedulerHeaderViewInfo headerViewInfo) { headerViewInfo.Appearance.BackColor = Color.Black; // 배경색을 검은색으로 설정 headerViewInfo.Appearance.ForeColor = Color.White; // 폰트 색상을 흰색으로 설정 e.Handled = true; // 기본 그리기 동작을 무시하고 커스텀 스타일을 적용 } }
개발자
#devexress
#schedulercontrol
#scheduler
답변 0
댓글 0
조회 26
2년 전 · 엄홍재 님의 새로운 답변
nextjs 초보 fetch & DELETE 동작이 안되요.
app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>
개발자
#nextjs
답변 1
댓글 0
조회 169
<input type="file"> 관련하여..
<template> <label for="camera1"> 촬영 </label> <input type="file" id="camera1" accept="image/*" capture="camera" style="display: none" @change="onStartFileSelected" /> </template> <script> const startFile = ref({}) //@change const onStartFileSelected = event => { const startFileInfo = event.target.files[0] startFile.value = startFileInfo if (startFileInfo) { startImageYn.value = 'Y' console.log('startFileInfo', typeof startFileInfo) } else { startImageYn.value = ' ' console.log('no image') } } // 파일 포함 다음 상태 업데이트하는 api const fileUpdateStatusApiHandler = async () => { const formData = new FormData() console.log('startFile===',startFile.value)//File형식 데이터 정상 찍힘 -> 타입 : 객체(Object) console.log('startFile',JSON.stringify(startFile.value)) //안찍힘???왜?????? 객체->스트링으로 바꿈 formData.append('file_upload', JSON.stringify(startFile.value),startFile.value) //빈값이 들어감.. try { const res: any = await ApiCert.post( API_URL.url, formData, { headers: { 'Content-Type': 'multipart/form-data' } } ) console.log('response =====', res) if (res.resCode === 'OK') { console.log('OK') } else { alert(res.resMsg) } } catch (err: any) { console.log('error =====', err) } } </script> file형식 데이터를 api보낼때 formData에 넣어 보내고싶은데 file이 안들어가네요.. file_upload: {} 빈값으로 들어갑니다. 도와주세용
개발자
#input
#type="file"
#vue3
#javascript
#form-data
답변 2
댓글 0
조회 180
일 년 전 · 이상선 님의 새로운 답변
Lighthouse를 이용한 성능 최적화 - 텍스트 압축 사용
안녕하세요. 개발한 웹 페이지를 lighthouse를 통해 성능 최적화에서 난관을 겪고 1년차 React 개발자입니다. lighthouse에서 추천 항목에 "텍스트 압축 사용"을 적용해보려 시도 중입니다. .htaccess 파일에 다음과 같은 코드를 넣어서 텍스트 압축을 실행하였습니다. <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf </IfModule> 결과적으로 네트워크 탭에서 Content-Encoding: gzip 으로 표시되는 것을 보니까, 텍스트 압축이 되는 것처럼 보입니다. 그런데 lighthouse에서는 성능 점수가 더 올라가지 않고 있습니다. 혹시 "텍스트 압축" 부분에서 최적화 하는 다른 방법이 있을까요? 아니면 제가 놓치고 있는 부분이 있는 걸까요?
개발자
#react
#lighthouse
#front-end
답변 1
댓글 0
조회 310
일 년 전 · 이진국 님의 새로운 댓글
react-navigation navigate 파라미터 type
안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)
개발자
#react-native
#typescript
#navigation
답변 1
댓글 1
조회 64
일 년 전 · 문성원 님의 새로운 댓글
C++ 질문 드립니다
함수 포인터 배열을 활용한 사칙 계산 문제입니다. 코드는 다음과 같습니다. #include <iostream> using namespace std; #define MAX_OP_COUNT 4 class UserObject { private: int (*mp_func_list[MAX_OP_COUNT])(int, int); public: int Add(int a, int b) { return a + b; } int Sub(int a, int b) { return a - b; } int Mul(int a, int b) { return a * b; } int Div(int a, int b) { return b ? a / b : 0; } UserObject() { mp_func_list[0] = &UserObject::Add; mp_func_list[1] = &UserObject::Sub; mp_func_list[2] = &UserObject::Mul; mp_func_list[3] = &UserObject::Div; } // [문제 2] 아래의 코드에 GetFuncList 함수의 반환값을 적어야 함 GetFuncList() { return mp_func_list; } }; int main() { UserObject data; // [문제 3] 아래의 코드에서 p변수의 자료형을 적어야 함 p = data.GetFuncList(); for (int i = 0; i < MAX_OP_COUNT; ++i) { // [문제 4] 아래의 코드에서 p 변수를 사용하려면 연산잔와 필요 형식을 적어야 함 cout << ( p )(5, 4) << endl; } return 0; } 결과 값: 9 1 20 1 [문제2], [문제3], [문제4]에서 요구하는 사항을 코드로 구현하려고 하는데 도저히 잘 몰라서 고수분께 여쭈어 봅니다.
개발자
#c++
답변 2
댓글 2
보충이 필요해요 2
조회 89
객체 배열에 대해서 컴포넌트를 어떻게 설계하시나요??
안녕하세요. 객체배열에 대해서 컴포넌트를 여러분은 어떻게 제작하고 계실까요?? 처음에는 첫번째 처럼 컴포넌트를 제작하다가 다른 곳에서도 재활용 할수있는 컴포넌트가 좋을것같아서 두번째 코드처럼 설계를 했는데 단점이 이중 for문을 쓰게 되는것 입니다… 제머리로는 더 깊게는 생각이 안나서 혹시 다른방법을 사용하고 계신분이 계실까요?? 첫번째(정적인 설계) function example() { const object = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: '"love"' } ] return ( <> {object.map((item, index) => ( <div key={item.id}> {item.age} {item.name} </div> ))} </> ) } 두번째(동적인 설계) function example() { const object = [ { id: 1, number: 17, title: 'strict' }, { id: 2, number: 16, title: 'love' } ] const object2 = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: 'love' } ] const value1 = ['number', 'title'] const value2 = ['age', 'name'] const TwoFor = ({obj, value}) => obj.map((item) => value.map((v) => { return <div>{item[v]}</div> }) ) return ( <> <TwoFor obj={object} value={value1} /> <TwoFor obj={object2} value={value2} /> </> ) }
개발자
#react
#객체배열
#컴포넌트
답변 1
댓글 1
조회 190
typescript enum은 지양해야하나요?
프로젝트 진행 중에 typescript enum 관련해서 팀원들과 의견이 갈려서 질문드립니다. 우선 기존 코드부터 설명드리면, enum Categories { Value, Value2, Value3 } 와 같은 형태가 있고 또 const categoryDataMap = { [Categories.Value]: { name: "카테고리1", }, [Categories.Value2]: { name: "카테고리2", }, [Categories.Value3]: { name: "카테고리3", } } const getCategoryDataByCategory = (category: Categories) => { return categoryDataMap[category] } 와 같은 mapper 오브젝트와 유틸 함수도 존재합니다. 저는 typescript 관련 공부를 했을때 enum 보다는 object as const를 사용하라고 배웠었는데요. 예를 들면 위의 코드를 const Categories = { 1: { name: "카테고리1" }, 2: { name: "카테고리2" }, 3: { name: "카테고리3" } } as const type CategoryKeys = keyof typeof Categories; const getCategoryDataByCategory = (category: CategoryKeys) => { return Categories[category] } 이렇게 바꿔줄수 있는데요. 저는 이 방법이 getCategoryDataByCategory를 사용했을때 category 인자의 타입이나 해당 함수가 리턴하는 타입이 더 명시적으로 나와서 편하다고 느꼈었습니다. 하지만, 팀원들은 다른 견해를 가지고 있었어요. 굳이 enum을 저렇게 바꿔야하는가? 라는 의문을 제기해주셨는데요. ---- 저도 typescript enum을 지양해야한다라고 어렴풋이 알고 있어서 "왜 굳이 enum인 친구들을 더 가독성이 떨어지는 후자의 방법으로 바꿔야하지"라는 궁금증이 생겨서 여쭤봅니다. 흔히 얘기하시는 enum 사용시 발생하는 treeshaking 문제는 enum을 cont enum으로 선언해주면 어느정도 해결되는 것 같은데, 굳이 const 형태로 바꿔줘야하는 이유가 있을까요? typescript에서 enum을 지양하라는 맥락에 대해 좀 더 구체적인 이유를 알고 싶습니다. 긴글 봐주셔서 감사합니다
개발자
#typescript
답변 3
댓글 3
추천해요 2
조회 896
django 정적 이미지 업로드 질문드립니다
제가 venvs/mysite/pybo/templates 안의 hello.html 파일 안에 {%load static} 하고 venvs/mysite/pybo/static/image 이 폴더에 있는 이미지 를 불러오기 하려고 <img src={%static '/django.jpg' %}> 이걸 하는데 계속 이미지는 안뜨고 css 파일만 뜨네요 ㅠㅠㅠ django.jpg는 이미지이름입니다 config 파일 내에 settings 안에서도 STATIC_URL = "/static/" STATICFILES_DIRS = [ os.path.join(BASE_DIR,"pybo/static") ] 이것도 했는데 안되네요 ㅠㅠㅠㅠ pybo/view.py 파일 안에도 from django.shortcuts import render,get_object_or_404,redirect from django.http import HttpResponse from .models import Question,Answer def hello(request): #return HttpResponse('pybo/hello.html') return render(request,'pybo/hello.html') 뭐가 문제인걸까요 ... 파이썬 migrate랑 runserver도 다 새로고침 했습니다..
개발자
#디장고
#django
#프레임워크
#장고
#백엔드개발
답변 1
댓글 0
조회 97
일 년 전 · 강민기 님의 새로운 댓글
C# 프로그램 실행을 했을 때 메모리에서 어떻게 이루어지는지 공부하는데 어려워서 정리가 안되네요. 그리고 C# 컴파일 구조 등등도..
안녕하세요, C# 메모리를 대해서 공부 중인 대학생 4학년 입니다. 1.제가 처음 배운 기본적인 프로세스 기반으로 프로그램 안에 코드 영역, 데이터 영역, 힙, 스택이 있는데 C# 프로그램은 다르다고 합니다. c# 4.0 - what is the difference between object and loader heap in .net 4.0 - Stack Overflow 에서는 <원문> heap memory is divided into to parts,object heap and loader heap(also known as high frequency heap).All non static reference type are stored on object heap and all static object(either reference type or value type) are stored in loader heap. Gc never work on loader heap thats why they initilized only once and remain in memory throught the application. <해석> 힙 메모리는 두 부분으로 나뉩니다. "객체 힙"과 "로더 힙" (또는 고주파 힙이라고도 함)으로 나눌 수 있습니다. 모든 정적이 아닌 참조 유형은 객체 힙에 저장되며, 모든 정적 객체 (참조 유형이든 값 유형이든)은 로더 힙에 저장됩니다. 가비지 컬렉터(GC)는 로더 힙 에서 작업하지 않으므로 이러한 객체는 애플리케이션이 실행되는 동안 한 번만 초기화되고 메모리에 유지됩니다. 라고 되어 있어서 그럼 C# = 코드 영역, 데이터 영역, 힙(객채 힙, 로드 힙), 스택이 있는데 제가 배운 걸로는 데이터 영역에 정적 객채들이 저장된다고 알고 있는데 그럼 정적 객체들과 함수들은 로드 힙에 저장되고 데이터 영역 에는 뭐가 저장되는 건가요? 2. C# 컴파일 구조는 어떻게 되어 있는 건가요?
개발자
#c#
#c#-컴파일구조
#c#-메모리구조
답변 1
댓글 1
조회 175
일 년 전 · 유택범 님의 답변 업데이트
JSON 데이터 DB 저장
안녕하세요. Java Spring으로 백엔드 서버 마이그레이션, 알람 기능 개발 중에 고민이 있어 질문드립니다. [상황] 기존 알람 서비스는 하나의 서비스 Class로 통합해서 두고, 문자, 푸쉬알람, 이메일 3가지 경우로 기능을 swith하여 각 기능별로 서비스를 호출하는 방식으로 구현되어 있습니다. 알람과 관련된 데이터는 JSON 파일에서 불러와 jsonObejct와 Map 자료구조를 통해 가공하여 기능 구현이 되어있습니다. 알람 데이터 JSON 파일은 상황별 코드에 따라 문자, 푸쉬알람, 이메일로 데이터가 구분되어 있습니다. JSON 파일은 대략적으로 아래와 같은 형태입니다. (mail 알람의 경우엔 HTML 파일을 전송하는 방식입니다. thyemleaf를 통해 전달받은 파라미터 값만 HTML에 주입하는 형태로 구현되어 있어서 msg 안에 String 대신 JSON 형태의 데이터가 들어가고 있습니다.) [알람 JSON 데이터 구조 예시] { "code1" : { "Sms" : { "title" : "sms 제목", "msg" : "sms 메세지", }, "Push" : { "title" : "push alarm 제목", "msg" : "push alarm 메세지", }, "Mail": { "title" : "mail 제목", "msg": { "name" : "#{name}", "use" : "#{use}", ... }, "code2" : {... }, ... } [문제 인지 & 개선 방향 고민] 알람 데이터가 JSON으로 정의되어 있다보니, 기능 개발을 위해 Json 파일을 읽고, JsonObject와 Map 자료구조로 데이터 가공을 할 수 밖에 없는 상황인데요. 제가 알기로는 자바에서 Map 자료구조를 사용하게되면 타입 자체가 불명확해서 지양해야 하며, JSON 파일로 관리 시 하드코딩에 해당되어 기능 자체에 제약이 많다고 판단하여 해당 상황을 DTO로 관리함과 동시에 Database에서 관리하도록 바꿔볼까 생각중입니다. [궁금증 & QnA] 이 상황에서 고민 & 궁금증이 몇 가지 있습니다. 1. 해당 알람 데이터를 DB 관리로 바꾸는게 더 나은 선택인지? -> 만약 바꾼다고 하면 Alarm Table을 따로 두고, User Table과 N:M 매핑하는식으로 구현할 생각입니다. 2. , mail HTML Template이 다양하다보니, Template 마다 넘겨줘야하는 JSON 데이터가 다양한 상황입니다. 그러다보니 mail msg 컬럼에는 다양한 형태의 JSON 데이터가 들어가게 되어 이걸 DB로 구현한다고 하니 막막한 상황입니다. -> 결국 해당 부분만 JSON 데이터로 넣는것 말고는 떠오르는 방법이 없네요.(해당 부분만 JSON 데이터로 넣으면 오히려 관리가 더 어려워지지 않을까 고민입니다.) 3. 다른 분들은 알람 기능을 어떻게 구현하는지 궁금합니다.
개발자
#spring
#database
#json
#fcm
답변 1
댓글 0
조회 293
2년 전 · 커리어리 AI 봇 님의 새로운 답변
크롤링 관련 질문드립니다.
js로 크롤링을 하려고 axios, cheerio 모듈을 이용했습니다. 단순하게 특정 부분 클래스를 따서 로그를 찍어보면 LoadedCheerio { length: 0, options: { xml: false, decodeEntities: true }, _root: <ref *1> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *1] }, prevObject: <ref *2> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *2] } } 다음과 같이 나옵니다. 질문은 1. 크롤링이 안되는 사이트가 있다면 어떻게 확인할 수 있나요 ? 2. https://m.kinolights.com/title/98065 이 사이트에 크롤링을 연습해보고 싶은데 html 요청시에 추가해줘야 할 헤더값같은게 있을까요 ?
개발자
답변 1
댓글 0
조회 188
firebase 로그아웃 에러가 납니다.
index-30f3030e.js?7426:1267 Uncaught (in promise) TypeError: Cannot assign to read only property 'isRunning' of object '#<ProactiveRefresh>' at ProactiveRefresh._stop (index-30f3030e.js?7426:1267:1) at UserImpl._stopProactiveRefresh (index-30f3030e.js?7426:1681:1) at AuthImpl.directlySetCurrentUser (index-30f3030e.js?7426:2588:1) at eval (index-30f3030e.js?7426:2442:1) _stop @ index-30f3030e.js?7426:1267 _stopProactiveRefresh @ index-30f3030e.js?7426:1681 directlySetCurrentUser @ index-30f3030e.js?7426:2588 eval @ index-30f3030e.js?7426:2442 로그아웃 함수를 실행하면 위와 같은 에러가 나는데요. 로그아웃을 하고 싶은데, 로그아웃이 되질 않아서 useEffet로 로그인 상태를 감지하는 함수에서도 계속 로그인이 된 상태로 나옵니다 ㅜㅜ
개발자
#firebase
#react
#next.js
#javascript
답변 1
댓글 0
조회 333
일 년 전 · 익명 님의 질문
[Django] TypeError: Object of type InMemoryUploadedFile is not JSON serializable 오류
안녕하세요 장고를 통해 api를 개발하다가 TypeError: Object of type InMemoryUploadedFile is not JSON serializable 오류가 발생했습니다. 해당 오류에 대한 내용을 아래의 링크에 정리해놨습니다 보고 답변해주시면 감사하겠습니다!! https://luminous-kitty-425.notion.site/Django-TypeError-Object-of-type-InMemoryUploadedFile-is-not-JSON-serializable-37a91af3ff2f475e88af0b6cadcb0699
개발자
#django
답변 0
댓글 0
조회 103
javascript에서 변수명을 object의 키로 사용하는 방법이 있나요?
const subject1 = 'math'; const subject2= 'english'; const info = { subject1: 50, subject2: 55 } 위의 코드를 보면 subject1, subject2를 정의하고 나서 info를 정의했는데 결과는 아래와 같이 나옵니다. console.log(info) // { subject1: 50, subject2: 55 } 제가 원하는 형태는 { math: 50, english: 55 } 이렇게 되면 좋겠습니다. subject1과 subject2를 키로 바로 정의할수는 없나요?
개발자
답변 1
댓글 0
추천해요 3
조회 161
일 년 전 · 문승욱(카이론) 님의 새로운 답변
안드로이드 Activity의 EditText 값을 fragment의 커스텀 리스트뷰의 값으로 받아오는 과정에서 오류가 뭘까요?
Fragment로 커뮤니티 게시판을 만들고 있습니다 사진처럼 Activity에 작성한 글을 Fragment 안에 있는 커스텀 리스트뷰에 넣으려고합니다 구글링으로 방법을 찾아서 하고 있는데 java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String android.os.Bundle.getString(java.lang.String)' on a null object reference at com.example.project.ChatFragment.onCreateView(String Title=bundle.getString("mainTitle",null);) 이렇게 오류 메세지가 뜨네요 어떻게 해결해야할지 모르겠습니다 엑티비티와 프래그먼트 코드 올립니다 혹시 몰라서 BaseAdater 코드도 올립니다
개발자
#java
#android
답변 1
댓글 0
조회 120
일 년 전 · 이양일 님의 답변 업데이트
json parse error 문제입니다.
리엑트에서 {userId : id} 이렇게 보내는데 컨트롤에서 Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type int from String "[object Object]": not a valid int value] 에러가 발생합니다. User VO로 맴버필드도 int 타입으로 선언되어있는데 파싱에러가발생... @RequestBody User user 로빼고 있는데 이유가 뭘까요?.. 예전에도 비슷한 문제가 있었던거 같은데 검색해도 못찾겟습니다 ㅠㅠ 알려주세요 ㅠ
개발자
#json
답변 2
댓글 0
추천해요 1
조회 370
Java에서 Hashmap 사용 시 Integer null to 0(zero)?
java에서 서비스 단 작성하다가 궁금한 점이 있어서 올립니다. [값이 null인지 확인하고 각 조건에 알맞게 처리하기 - 조건분기] 1. generalInfo에 파라미터(tempItem)조회한 값 담아주기 - 이 때 seq도 조회됨 List<Object> genInfo = .selectList(serviceId+".selectSomeoneInfo", tempItem); 2. tempItem에 Key("seq") - Value(seq 값) 넣어주기 tempItem.put("seq", 오브젝트.getParamterInt(genInfo.get(0), "seq")); 3. 조건분기 (타입 선언) : Integer mSeq = (Integer) tempItem.get("seq"); (조건 분기) : if (mSeq == null) {} else {}; 이렇게 작성했는데요, 디버깅하다가 mSeq 값이 계속 "null이 아닌 0"으로 떠서 왜 null로 비교할 수 없는지 궁금해서 고수님들께 여쭙니다. ㅠㅠㅠ genInfo를 디버깅하면 seq가 null이 나오거든요(1번) , 근데 tempItem에서는 seq가 0이 나옵니다. 제가 쌩초보라 ㅠㅠ 답변 주시면 감사하겠습니다!
개발자
#java
#spring
#service
답변 1
댓글 0
조회 461
객체를 만들 때 차이점
안녕하세요. 자바스크립트를 공부하고 있는 초보자입니다. 객체를 공부하다가 궁금한점이 생겼는데 스스로 해결하지 못해서 질문남깁니다. 객체를 다수 만들 필요성이 있을 때 생성자함수를 사용한다고 하는데, 그 전에 객체를 만드는 함수라고 함수를 하나 만들었더라구요 function makeObject(name, age) { return { name, age, }; } const Mike = makeObject("Mike", 30); function User(name, age) { this.name = name; this.age = age; } const Jane = new User("Jane", 30); console.log(Mike); console.log(Jane); 코드는 위와 같고 출력은 아래와 같습니다 { name: 'Mike', age: 30 } User { name: 'Jane', age: 30 } 그냥 함수를 써서 객체를 만드는 것과 생성자 함수를 써서 객체를 만드는것의 차이가 무엇일까요?
개발자
#javascript
답변 2
댓글 3
추천해요 3
조회 264
일 년 전 · 박정환 님의 새로운 댓글
클라이언트(프론트)에서 api return 처리를 어떻게 하시나요?
안녕하세요 클라이언트(프론트)단에서 axios 사용해 REST api return 스펙정리를 해서 서버단과 이야기해 수정을 하려고 합니다. 고려사항 등 도움을 주시면 감사하겠습니다. Method - GET : 정보조회시 - POST : 저장시(회원, 주문, 아이템 등) - PUT : 수정시 - DELETE : 삭제시 현 구현 - HTTP status 200은 성공, 그 외 에러처리 => 서버단에서 보내주는 msg 혹은 프론트에서 하드코딩으로 문자열 출력(alert) 문제점 1) 성공과 실패 및 실패 사유에 대한 return 구조체가 생각 이상으로 깊은 구조이며 일관성이 없음. ex1) response.data = { 객체 정보 } ex2) response.data = "Success"; -- 여기부터 문제 -- ex3) response.data.detail = "Faile"; ex4) response.data.detail[0].msg = "Faile"; // 기타 다른정보들 포함됨 ex5) response.data.messages "문자열" 2) 몇개의 api는 return 값으로 status가 200으로 string 혹은 object가 날라옴. 3) 사용자 정보제공(문자열) 하드코딩 다국어 설정도 고려하고 있기에.. 실패시 정보를 연상코드로 리턴받을까합니다.(개인 생각) 작성하고 보니 어떻게 문제점은 보이는데 좋은 개선점이 있으시면 의견주시면 감사하겠습니다.
개발자
#api
답변 1
댓글 2
조회 245
일 년 전 · 또르르 님의 새로운 답변
TestCode에서 객체 상태를 검증하기 위한 방법 (Getter vs equals and HashCode 을 구현한 객체)
순수 Java 언어를 통해서 객체지향을 연습하고자 했고, Domain 객체에서 getter을 최대한 지양한 상태에서 구현했습니다. 로직 검증을 위해 Test Code을 작성하던 중 의문점이 생겼습니다. Test Code을 작성해서 내부 객체의 상태 값을 검증할땐 프러덕션 코드에 제공된 getter가 없어 equals and hashcode을 재정의하여 객체의 상태를 검증하고자 했습니다. (Equals and HashCode는 주로 Value Object에 대해서만 재정의 했습니다.) 하지만 때론, 객체을 생성해서 검증할땐 객체의 주생성자 안에 있는 validate 조건에 의해 객체 자체가 생성하기 어려운 경우가 있어 "객체 대 객체"로 검증하기 어려운 점이 있었습니다. # 1 이런 경우 어떻게 Test을 할 수 있을까요?? 어쩔 수 없이 test code 만을 위해서 내부 상태를 검증하도록 getter을 추가해야 할까요?? # 2 또한 만약 이미 getter가 구현된 상태이고 객체의 validate 조건을 피해서 객체를 만들 수 있다면 "객체 대 객체" 비교 말고 getter을 통해서 상태 검증을 해도 괜찮을까요??
개발자
#java
#junit
#testcode
#getter
#객체지향
답변 2
댓글 0
조회 577
html2canvas,jsPDF 를 이용한 pdf 만들기
스타트업에서 막취업한 프론트 신입개발자 입니다 두가지 궁금한게 있습니다. 회사에서 설문조사를 만들고 완료한 설문조사를 pdf파일로 변환시켜 다운로드할수 있게기능 구현하라고하셨습니다 설문지 한카테고리당 5장 ~6장정도의 설문지 페이지가 있는데 const blob = new Blob([doc.output("blob")], { type: "application/pdf" }); const url = URL.createObjectURL(blob) 1.만들때마다 서버에 요청해서 저장해야하는지 아니면 로컬에 저장했다가 모든설문조사가 완료하면 서버에 요청해야하는지 감이 잘안잡힙니다.. 그리고 2.html2canvas 캡쳐하면 css가 깨져버리고 a4용지크기로 크기로 맞춰서 a4 용지보다 크면 다음 페이지로 넘어가면서 이미지가 이쁘지 않게 잘리는 현상이 발생합니다 혹시 좋은 방법이 있을까요 도와주세요.. ㅠㅠ
개발자
#react
답변 1
댓글 0
조회 923
2년 전 · 장익순 님의 새로운 댓글
Json [object Object]
Javascript에서 dectionary를 json으로 저장했을때 [object Object] 가 나옵니다. 또한 29번줄에서 SyntaxError: Unexpected token: o 라는 에러가 나옵니다.
개발자
#javascript
#json
답변 2
댓글 1
추천해요 1
보충이 필요해요 2
조회 95
[react-native] MutableRefObject<undefined> is not assignable to type LegacyRef 타입 에러가 발생합니다.
react-native, typescript로 개발하고 있습니다. ref를 선언해서 ScrollView에 전달 하려는데 타입 에러가 발생합니다. 에러 내용 MutableRefObject<undefined>' is not assignable to type 'LegacyRef<ScrollView> | undefined'. 동작은 잘하지만 빨간줄이 생겨서 혹시 이 에러 해결해보신 분 있으실까요?
개발자
#react
#react-native
#ref
답변 1
댓글 1
추천해요 4
조회 322
setState가 되지 않습니다.
사수가 없어 랜선 사수님들의 조언을 구합니다. 저는 지금 페이지네이션을 구현하고 있는데, setState가 되지 않는 이슈가 있습니다. 리액트 18버전과 타입스크립트를 사용하고 있고, 현재 구현중인 tsx파일 코드의 플로우는 이러합니다. 1. 페이지에 대한 타입 정의 2. 파라미터로 몇개의 옵션을 받음 3. 기본 옵션들을 options에 객체로 담아 useState 선언 4. useEffect(()=>{},[]) 안에서 Object.assign으로 options에 parameter 내에 있는 몇개의 옵션을 덮어씌워줌 5. (아직 useEffect) options에 있는 값으로 페이지네이션에 보여질 첫 페이지 넘버와 마지막 페이지넘버를 구한 후, 기존 options 객체 안의 minPage와 maxPage 값을 변경 5번에서 minPage와 maxPage의 값이 변하지 않습니다. 사용한 코드는 1. setOptions({...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버}) 2. setOptions(options=>{...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버}) 입니다. 하지만 두 코드 모두 options 객체 안의 minPage, maxPage의 값이 반영되지 않습니다. 5번 기능이 구현된 함수를 useEffect(()=>{},[options])에 넣어보았는데, 반영은 되는 듯 하나 무한렌더링의 늪에 빠졌습니다... 도와주십시오ㅠㅠ
개발자
답변 4
댓글 0
추천해요 2
조회 381
useSelector 최적화 방법중 shallowEqual에 대해서 질문이 있습니다!
shallowEqual는 컴포넌트 리렌더링할때 객체 안의 가장 겉에있는 값을 비교 해 준다고 알고 있는데요, 만약 다음 코드의 객체가 있다면 이전 값 다음 값 object.a, object.b, object.c 만 비교하여 변경됐을 시 컴포넌트를 리렌더링 하는걸로 알고 있습니다. 그런데 이렇게 됐을 때 object.a[0] 나 object.c.x가 업데이트 되어도 컴포넌트를 리렌더링 하지 않게되는건데 괜찮은건가요..?
개발자
#react
#useselector
#shallowequal
답변 2
댓글 0
조회 172